<template>
  <div>
    <el-form :inline="true" size="mini" :model="deviceConfigureModelValue" ref="form" :rules="rules"
      label-position="right" class="demo-form-inline">
      <el-form-item label="设备">
        <el-select @change="deviceChange" filterable  v-model="defaultDeviceTypeNameValue" placeholder="请选择">
          <el-option v-for="item in deviceTypeData" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
<!-- v-if="choosable === 'true'" -->
      <el-form-item label="设备编码" >
        <el-select filterable allow-create v-model="deviceConfigureModelValue['@ParentDeviceCode']" placeholder="请选择">
          <el-option v-for="(item, i) in deviceCodeData" :key="i" :label="item.name" :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>

      <template v-for="(item, i) in deviceConfigureFormItem">
        <el-form-item :key="i" :label="item.labelName" :prop="item.key" v-if="!item.isShow">
          <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 === 'number'">
            <el-input-number v-model='deviceConfigureModelValue[item.key]' :disabled="item.disabled" :controls="false"
              :placeholder="item.placeholder"></el-input-number>
          </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" value-format='yyyy-MM-dd HH:mm:ss' format='yyyy-MM-dd HH:mm:ss'
              :disabled="item.disabled" style="width:180px">
            </el-date-picker>
          </template>

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

<script>
import deviceConfigureFormItemData from './deviceSetting/index.json'
import { each, assign } from 'lodash'
// import { getDeviceAll } from '@/api/basic/device'

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: '',
      deviceCode: '',
      deviceCodeData: [],
      choosable: process.env.VUE_APP_CHOOSABLE,
      deviceConfigureModelValue: {},
      rules: {},
      deviceSelectedVlaue: '',
      deviceTypeData: [
      ]
    }
  },
  methods: {
    deviceChange (e) {
      // 获取所有字符串的key 用于v-model渲染
      const deviceConfigureModelValue = {}
      const rules = {}
      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 : ''
        }
        if (item.rules !== undefined) {
          rules[item.key] = item.rules
        }
      })
      this.rules = rules
      this.deviceConfigureModelValue = assign(deviceConfigureModelValue, { '@ParentDeviceCode': '' })
      // this.deviceConfigureModelValue = this.choosable === 'true' ? assign(deviceConfigureModelValue, { parent_device_code: '' }) : deviceConfigureModelValue
      this.deviceConfigureFormItem = deviceConfigureFormItemData[e]
    },
    setDeviceDefaultFormItemValue (val) {
      const deviceConfigureModelValue = {}
      // if (this.choosable === 'true') {
      //   deviceConfigureModelValue["@ParentDeviceCode"] = val["@ParentDeviceCode"]
      // }
      deviceConfigureModelValue['@ParentDeviceCode'] = val['@ParentDeviceCode'] || ''
      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)
    },
    getDeviceAll () {
      // getDeviceAll().then(res => {
      //   this.deviceCodeData = res.data
      // })
    }
  },
  mounted () {
    if (this.choosable === 'true') {
      this.getDeviceAll()
    }
    this.getDeviceType()
  }

}
</script>
