<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.InfoPointName" class="input-item">
          <el-input v-model="item.inputValue" v-if="item.InputMode == 'A1'|| item.InputMode == 'A2'" type="number">
            <template slot="append" v-if="item.Unit">{{item.Unit}}</template>
          </el-input>
          <el-input v-model="item.inputValue" v-else-if="item.InputMode == 'B1' || item.InputMode == 'L' || item.InputMode == 'M'"></el-input>
          <el-select v-model="item.inputValue" v-else-if="item.InputMode == 'D1'" 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.InputMode == 'D1L'" placeholder="请选择"
            :props="item.props" :options="item.options" filterable :show-all-levels="false"></el-cascader>
          <el-input v-model="item.inputValue" v-else></el-input>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import tools from "@/utils/scan/tools";
export default {
  data() {
    return {
      form: {},
      inputTypeList: {},//输入框表头种类
      inputData: [],//所有输入框
    }
  },
  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.FirstName && item.InfoPointCode;
      })
      let numbersInput = ['A1', 'A2'];
      let stringInput = ['B1', 'L', 'M'];
      let arrayInput = ['D1'];
      let cascaderInput = ['D1L'];
      this.inputData.map(item => {
        if (numbersInput.indexOf(item.InputMode) != -1) {
          item.inputValue = null;
        }
        else if (stringInput.indexOf(item.InputMode) != -1) {
          item.inputValue = '';
        }
        else if (arrayInput.indexOf(item.InputMode) != -1) {
          let options = JSON.parse(item.DataSource)
          item.inputValue = '';
          item.options = options;
        }
        else if(cascaderInput.indexOf(item.InputMode) != -1){
          let options = JSON.parse(item.DataSource);
          if (options[0] && options[0].Content) {
            item.props = {
              value: 'Code',
              label: 'Name',
              children: 'Content'
            }
          }
          item.options = options;
          item.inputValue = [];
        }
        else {
          item.inputValue = '';
        }
      });

    },
    //数据分组
    inputGroup() {
      this.inputData.map(item => {
        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>
