<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="add"></el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
                    <el-input v-model="keyword" clearable :placeholder="$t('response.searchPlaceholder')">
                        <template #prepend>
                            <el-select v-model="searchType" style="width: 100px;">
                                <el-option :label="$t('device.deviceType')" value="deviceType"></el-option>
                                <el-option :label="$t('device.deviceModel')" value="deviceModel"></el-option>
                            </el-select>
                        </template>
                    </el-input>
					<el-button type="primary" icon="el-icon-search" @click="getList "></el-button>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" stripe>
				<el-table-column label="#" type="index" width="50" align="center" ></el-table-column>
				<el-table-column :label="$t('device.deviceTypeCode')" prop="DictionaryCode" width="250" align="center" ></el-table-column>
				<el-table-column :label="$t('device.deviceTypeName')" prop="Value" width="250" align="center" ></el-table-column>
				<el-table-column :label="$t('device.deviceModel')" align="center">
					<template #default="scope">
					<span>{{ dictionaryList_string(scope.row.DictionaryList) }}</span>
					</template>
				</el-table-column>
				<el-table-column :label="$t('response.operateColumnTitle')" fixed="right" align="right" width="140">
					<template #default="scope">
						<el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">{{$t('response.operateEditButton')}}</el-button>
					</template>
				</el-table-column>

			</scTable>
		</el-main>
	</el-container>

	<save-dialog v-if="dialog.save" ref="saveDialog" @success="handleSaveSuccess" @closed="dialog.save=false"></save-dialog>


</template>

<script>
	import saveDialog from './saveDeviceType'

	export default {
		name: 'deviceTypeList',
		components: {
			saveDialog
		},
		data() {
			return {
                searchType:"deviceType",
				dialog: {
					save: false
				},
                listLoading: true,
				apiObj: this.$API.device.deviceTypeList,
                keyword: '',
				search: {
                    deviceType: '',
                    deviceModel: ''
				}
			}
		},
        watch:{
			searchType(val){
				if(val === 'deviceType'){
					this.search.deviceType = this.keyword
				}else if(val === 'deviceModel'){
					this.search.deviceModel = this.keyword
				}
			},
			keyword(val){
				if (this.searchType === "deviceType"){
					this.search.deviceType = val
				}
				else if(this.searchType === 'deviceModel'){
					this.search.deviceModel = val
				}
			}
		},
		methods: {
			//添加
			add(){
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open()
				})
			},
			//编辑
			table_edit(row){
				this.dialog.save = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open('edit').setData(row)
				})
			},
			//搜索
			async getList(){
                this.$refs.table.upData(this.search)
			},
			dictionaryList_string(dictionaryList) {
				var dictionaryStr = ''
				for (var i = 0; i < dictionaryList.length; i++) {
					dictionaryStr += dictionaryList[i].Value + '/'
				}
				dictionaryStr = dictionaryStr.substring(0, dictionaryStr.length - 1)
				return dictionaryStr
			},
			//本地更新数据
			handleSaveSuccess(){
                this.$refs.table.refresh()
			}
		}
	}
</script>

<style>
</style>
