<template>
  <div id="zoneinput">
    <el-form label-position="left" :label-width="labelWidth" :model="form">
      <div v-for="(titem, tkey) in inputTypeList" :key="tkey">
        <h4>{{ tkey }}</h4>
        <el-form-item v-for="(item, key) in titem" :key="key" :label="item.name" class="input-item">
          <template v-if="item.category=='STATIC'">
            <el-input v-model="item.inputValue" v-if="item.dataType == dataTypeMap.DOUBLE || item.dataType == dataTypeMap.INTEGER" type="number">
              <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
            </el-input>
            <el-input v-model="item.inputValue" v-else-if="item.dataType == dataTypeMap.STRING"></el-input>
            <el-select v-model="item.inputValue" v-else-if="item.dataType == dataTypeMap.ENUM || item.dataType == dataTypeMap.BOOLEAN" placeholder="请选择">
              <el-option v-for="(soption,skey) in item.options" :key="skey" :label="soption.name" :value="soption.code">
              </el-option>
            </el-select>
            <el-cascader v-model="item.inputValue" v-else-if="item.dataType == dataTypeMap.MENUM" placeholder="请在台账中维护该类型信息点"
              :props="item.props" :options="item.options" filterable clearable disabled :show-all-levels="false"></el-cascader>
            <el-input v-model="item.inputValue" v-else disabled placeholder="请在台账中维护该类型信息点"></el-input>
          </template>
          <template v-else>
            <el-input v-model="item.inputValue"></el-input>
          </template>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import tools from "@/utils/scan/tools";
import dataTypeMap from "@/utils/handsontable/dataTypeMap"
export default {
  data() {
    return {
      form: {},
      inputTypeList: {},//输入框表头种类
      inputData: [],//所有输入框
      dataTypeMap: dataTypeMap
    }
  },
  props: {
    labelWidth: {
      default: "130px",
      type: String
    }
  },
  created() { },
  methods: {
    //初始化
    init(val) {
      this.inputTypeList = {};
      this.inputData = [];
      this.inputData = val.concat()
      this.filterInput();
      this.inputGroup();
    },
    //数据过滤
    filterInput() {
      this.inputData = this.inputData.filter(item => {
        return item.editable == true && item.visible == true && item.code;
      })
      this.inputData.map(item => {
        if (item.category == 'STATIC') {
          if (item.dataType == dataTypeMap.DOUBLE || item.dataType == dataTypeMap.INTEGER) {
            item.inputValue = null;
          } else if (item.dataType == dataTypeMap.STRING) {
            item.inputValue = '';
          } else if (item.dataType == dataTypeMap.ENUM || item.dataType == dataTypeMap.BOOLEAN) {
            let options;
            if (item.dataSource instanceof Array) {
              options = item.dataSource;
            } else {
              options = JSON.parse(item.dataSource)
            }
            item.inputValue = '';
            item.options = options;
          } else if(item.dataType == dataTypeMap.MENUM){
            let options;
            if (item.dataSource) {
              if (item.dataSource instanceof Array) {
                options = item.dataSource;
              } else {
                options = JSON.parse(item.dataSource)
              }
            } else {
              options = []
            }
            if (options[0] && options[0].content) {
              item.props = {
                value: 'code',
                label: 'name',
                children: 'content',
                checkStrictly: true
              }
            }
            item.options = options;
            item.inputValue = [];
          } else {
            item.inputValue = '';
          }
        } else {
          item.inputValue = '';
        }
      });
    },
    //数据分组
    inputGroup() {
      this.inputTypeList['item.firstName']
      this.inputData.map(item => {
        if (item.firstName) {
          if (!this.inputTypeList[item.firstName]) {
            this.inputTypeList[item.firstName] = [];
          }
          this.inputTypeList[item.firstName].push(item)
        } else {
          item.firstName = "信息"
          if (!this.inputTypeList[item.firstName]) {
            this.inputTypeList[item.firstName] = [];
          }
          this.inputTypeList[item.firstName].push(item)
        }
      })
      for (let key in this.inputTypeList) {
        if (this.inputTypeList[key] instanceof Array) {
          this.inputTypeList[key].sort((item1, item2) => { return item1.sort < item2.sort });
        }
      }
    },
    //父组件获取form
    getFormData() {
      let f = {}
      for (let key in this.inputTypeList) {
        this.inputTypeList[key].map(item => {
          if (item.inputValue != '' && item.inputValue != null) {
            if (item.inputValue instanceof Array) {
              tools.setDataForKey(f, item.path, item.inputValue.pop());
            }
            else {
              tools.setDataForKey(f, item.path, item.inputValue);
            }
          }
        })
      }
      return f;
    }
  }
}
</script>

<style lang="less" scoped>
.input-item {
  display: inline-block;
  position: relative;
  margin-right: 10px;
}
#zoneinput {
  /deep/ .el-form-item__content {
    width: 220px;
  }
}
</style>
