<template>
    <div>
        <el-form :inline="true" size="mini" label-position="right" class="demo-form-inline">
            <el-form-item label="设备">
                <el-select @change="deviceChange" v-model="defaultDeviceTypeNameValue" placeholder="请选择">
                    <el-option v-for="item in deviceTypeData" :key="item" :label="item" :value="item">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item v-for="(item, i) in deviceConfigureFormItem" :key="i" :label="item.labelName">
                <template v-if="item.type === 'text'">
                    <el-input v-model='deviceConfigureModelValue[item.key]' :disabled="item.disabled"
                        :placeholder="item.placeholder"></el-input>
                </template>

                <template v-if="item.type === 'select'">
                    <el-select v-model='deviceConfigureModelValue[item.key]' style="width:80px" :disabled="item.disabled"
                        :placeholder="item.placeholder">
                        <el-option v-for="index in item.option" :key="index.value" :label="index.label"
                            :value="index.value">
                        </el-option>
                    </el-select>
                </template>

                <template v-if="item.type === 'time'">
                    <el-date-picker v-model='deviceConfigureModelValue[item.key]' type="datetime" :placeholder="item.placeholder"
                        defaultValue="2022-06-17 16:36:00" :disabled="item.disabled" style="width:180px">
                    </el-date-picker>
                </template>

            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import deviceConfigureFormItemData from './deviceSetting/index.json'
import { each } from 'lodash'
export default {
  name: 'deviceConfigure',
  props: {
    loading: {
      default: false
    },
    defaultDeviceName: {
      default: ''
    },
    defaultFormData: {
      default: () => []
    }

  },
  computed: {

  },
  watch: {
    defaultDeviceName: {
      handler (val) {
        this.defaultDeviceTypeNameValue = val
        this.deviceChange(val)
      },
      immediate: true
    },
    defaultFormData: {
      handler (val) {
        this.setDeviceDefaultFormItemValue(val)
      },
      immediate: true
    }
  },
  data () {
    return {
      deviceConfigureFormItem: [],
      defaultDeviceTypeNameValue: '',
      deviceConfigureModelValue: {},
      deviceSelectedVlaue: '',
      deviceTypeData: [
      ]
    }
  },
  methods: {
    deviceChange (e) {
      // 获取所有字符串的key 用于v-model渲染
      const deviceConfigureModelValue = {}
      each(deviceConfigureFormItemData[e], (item) => {
        if (item.type === 'time') {
          deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : new Date()
        } else {
          deviceConfigureModelValue[item.key] = item.defaultValue ? item.defaultValue : ''
        }
      })
      this.deviceConfigureModelValue = deviceConfigureModelValue
      this.deviceConfigureFormItem = deviceConfigureFormItemData[e]
    },
    setDeviceDefaultFormItemValue (val) {
      const deviceConfigureModelValue = {}
      each(deviceConfigureFormItemData[this.defaultDeviceTypeNameValue], (item) => {
        if (item.type === 'time') {
          deviceConfigureModelValue[item.key] = val[item.key] ? val[item.key] : new Date()
        } else {
          deviceConfigureModelValue[item.key] = val[item.key] ? val[item.key] : item.defaultValue
        }
      }
      )
      this.deviceConfigureModelValue = deviceConfigureModelValue
    },
    getDeviceType () {
      this.deviceTypeData = Object.keys(deviceConfigureFormItemData)
    }
  },
  mounted () {
    this.getDeviceType()
  }

}
</script>
