<template>
  <div class="w-form">
    <el-form ref="form" label-position="labelPosition" :label-width="labelWidth" :rules="rules" :model="formData">
      <el-row>
        <el-col v-for="(item, index) in formItems" :key="index" v-bind="item.colLayout || { span: 12 }">
          <el-form-item :label="item.label" :prop="item.key" class="form-item" :style="itemStyle" v-if="!item.isHidden">
            <template v-if="item.type === 'selectTree'">
              <w-select-tree
                :treeProps="item.defaultProps"
                :defaultData="{
                  [item.defaultProps.value]: formData[`${item.key}`]
                }"
                :paramsKey.sync="formData[item.key]"
                :disabledVal="item.disabled"
                :showVal="item.show"
                :valueLabel="item.valueLabel"
                :nodeKey="item.key"
                :treeList="item.valueOptions"
                :ref="item.key"
              ></w-select-tree>
            </template>
            <template v-else-if="item.type === 'input'">
              <template v-if="item.show">{{ formData[`${item.key}`] }}</template>
              <template v-else>
                <el-input v-model="formData[`${item.key}`]" :placeholder="item.placeHolder ? item.placeHolder : `请输入`" v-bind="item.inputOptions" :disabled="item.disabled"></el-input>
              </template>
            </template>
            <template v-else-if="item.type === 'select'">
              <template v-if="item.show">
                {{ item.valueLabel ? item.valueLabel : formData[`${item.key}`] }}
              </template>
              <template v-else>
                <el-select @change="item.onChange ? item.onChange(formData[`${item.key}`]) : null" v-model="formData[`${item.key}`]" :placeholder="item.placeHolder ? item.placeHolder : `请选择`" style="width: 100%" :disabled="item.disabled">
                  <el-option v-for="(option, index) in item.valueOptions" :key="index" :value="option[item.defaultProps.value]" :label="option[item.defaultProps.label]"></el-option>
                </el-select>
              </template>
            </template>
            <template v-else-if="item.type === 'radio'">
              <template v-if="item.show"> {{ radioType(formData[item.key], item.valueOptions) }}</template>
              <template v-else>
                <el-radio-group v-model="formData[`${item.key}`]" :disabled="item.disabled">
                  <el-radio v-for="(radio, index) in item.valueOptions" :key="index" :label="radio.value">{{ radio.label }}</el-radio>
                </el-radio-group>
              </template>
            </template>
            <template v-else-if="item.type === 'datePicker'">
              <template v-if="item.show">{{ formData[`${item.key}`] }}</template>
              <template v-else>
                <el-date-picker v-model="formData[`${item.key}`]" v-bind="item.options" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" :disabled="item.disabled"> </el-date-picker>
              </template>
            </template>
            <template v-else-if="item.type === 'timePicker'">
              <template v-if="item.show">{{ formData[`${item.key}`] }}</template>
              <template v-else>
                <el-time-picker v-model="formData[`${item.key}`]" v-bind="item.options" value-format="HH:mm:ss" style="width: 100%" :disabled="item.disabled"> </el-time-picker>
              </template>
            </template>
            <template v-else-if="item.type === 'dateTimePicker'">
              <template v-if="item.show">{{ formData[`${item.key}`] }}</template>
              <template v-else>
                <el-date-picker v-model="formData[`${item.key}`]" v-bind="item.options" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%" :disabled="item.disabled"> </el-date-picker>
              </template>
            </template>
            <template v-else-if="item.type === 'checkbox'">
              <template v-if="item.show">{{ formData[`${item.key}`] }}</template>
              <template v-else>
                <el-checkbox-group v-model="formData[`${item.key}`]" :disabled="item.disabled">
                  <el-checkbox v-for="(checkbox, index) in item.valueOptions" :label="checkbox" :key="index"></el-checkbox>
                </el-checkbox-group>
              </template>
            </template>
            <template v-else-if="item.type === 'photoGroup'">
              <div :class="[item.show == true ? 'show' : 'none']">
                <div class="list-img">
                  <img class="w-img" :src="item" v-for="item in formData.pictureList" :key="item" @click="lookImg(item)" />
                </div>
              </div>
              <div :class="[item.show == true ? 'none' : 'show']">
                <w-upload-photo :ref="item.key" :picture.sync="formData[`${item.key}`]" :disabledVal="item.disabled" pictureList="pictureList" :reflowData="formData.pictureList"></w-upload-photo>
              </div>
            </template>
            <template v-else-if="item.type === 'uploadBtn'">
              <div :class="[item.show == true ? 'show' : 'none']">{{ formData[`${item.key}`] }}</div>
              <div :class="[item.show == true ? 'none' : 'show']">
                <w-upload-btn :ref="item.key" :disabledVal="item.disabled"></w-upload-btn>
              </div>
            </template>
            <template v-else-if="item.type === 'inputSelect'">
              <template v-if="item.show">{{ formData[item.keyObj.inputKey] }}{{ formData[item.keyObj.selectKey] }}</template>
              <template v-else>
                <w-input-select :dict="item.dict" :inputVal.sync="formData[item.keyObj.inputKey]" :selectVal.sync="formData[item.keyObj.selectKey]" :disabledVal="item.disabled"></w-input-select>
              </template>
            </template>
            <template v-else-if="item.type === 'selectBtn'">
              <template v-if="item.show">{{ formData[item.key] }}</template>
              <template v-else>
                <w-select-btn :selectVal.sync="formData[item.key]" :config="item.config" :defaultProps="item.defaultProps" :WClick="item.onclick" :valueOptions="item.valueOptions" :disabledVal="item.disabled"></w-select-btn>
              </template>
            </template>
            <template v-else-if="item.type === 'textarea'">
              <template v-if="item.show">{{ formData[item.key] }}</template>
              <template v-else>
                <el-input :type="item.type" :autosize="{ minRows: 2, maxRows: 12 }" v-model="formData[item.key]"> </el-input>
              </template>
            </template>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-dialog title="查看" width="90%" top="2%" :visible.sync="lookImgVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { deepClone, treeFind } from '@/utils/index'
export default {
  name: 'WForm',
  props: {
    labelPosition: {
      type: String,
      default: 'left'
    },
    labelWidth: {
      type: String,
      default: () => '80px'
    },
    formItems: {
      type: Array,
      default: () => []
    },
    itemStyle: {
      type: Object,
      default: () => ({ padding: '10px 40px' })
    },
    rules: {
      type: Object,
      default: () => ({})
    },
    width: {
      type: String,
      default: () => '50%'
    }
  },
  data() {
    // 这里存放数据
    return {
      dialogVisible: false,
      lookImgVisible: false,
      type: '',
      // 非响应式
      formData: {},
      vaa: '',
      isDs: true,
      dialogImageUrl: ''
    }
  },

  mounted() {
    // 查询装备树
    // export const selectAll = async (parameter) => {
    //   return await get('/storageLocation/selectAll', parameter)
    // }
  },

  methods: {
    radioType(key, valueOptions) {
      if (key == undefined || key == null) {
        return ''
      }
      const item = valueOptions.find((e) => e.value == key)

      return item.label
    },

    resetFields() {
      this.$refs.form.resetFields()
    },

    lookImg(val) {
      this.dialogImageUrl = val
      this.lookImgVisible = true
    },

    setFormData(data) {
      this.formData = data
    },

    getFormData() {
      this.$refs.inputSelect
      const formData = deepClone(this.formData)
      return formData
    },

    revertTreeNodeData() {
      if (Object.keys(this.formData).length === 0) return
      const items = this.formItems.filter((e) => e.type === 'selectTree')
      if (items.length === 0) return
      items.forEach((e) => {
        let result = treeFind(e.treeData[0], e.paramKey, this.formData[e.key])
        e.keyName = result[e.defaultProps.label]
        e.keyValue = result[e.defaultProps.label]
        this.formData[e.key] = result[e.paramKey]
      })
    },

    closeTreeNode() {
      const items = this.formItems.filter((e) => e.type === 'selectTree')
      items.forEach((e) => {
        e.keyName = ''
        e.keyValue = ''
      })
    },

    treeNodeClick(val, item) {
      item.keyName = val[item.defaultProps.label]
      item.keyValue = val[item.key]
      this.$refs[item.key + 'selectTree'][0].blur()
      this.formData[item.key] = val[item.paramKey]
    },

    triggerDialogVisible() {
      this.dialogVisible = !this.dialogVisible
    },

    cancel() {
      this.resetForm('form')
      this.dialogVisible = false
      let keys = Object.keys(this.formData)
      keys.map((i) => {
        let result = typeof this.formData[i]
        if (result == 'object') this.formData[i] = null
      })
      for (let key in this.formData) {
        this.formData[key] = ''
      }
    },

    submit() {
      return new Promise((resolve, reject) => {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            return resolve(false)
          } else {
            return resolve(true)
          }
        })
      })
    },

    close() {
      this.$emit('close')
    },

    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
