<template>
  <div>
    <el-table :data="dataList" row-key='nodeId' border :tree-props="{children: 'properties',}">
      <el-table-column prop="vModel" label="下拉配置" v-if="item.isList">
        <template slot-scope="scope">
          <el-select v-model="scope.row.vModel" placeholder="下拉配置" class="mb5 mr5" @change='change' disabled>
            <el-option v-for="paramItem in selectList" :key="paramItem.value" :label="paramItem.label" :value="paramItem.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="paramName" label="请选择API参数名">
        <template slot-scope="scope">
          <el-select v-model="scope.row.paramName" placeholder="请选择API参数名" clearable class="mb5 mr5" :disabled='item.APItype==1' @change='change'>
            <el-option v-for="paramItem in paramList" :key="paramItem.key" :label="paramItem.name" :value="paramItem.key">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="paramType" label="参数获取方式" v-if="!item.isList">
        <template slot-scope="scope">
          <el-select v-model="scope.row.paramType" placeholder="参数获取方式" clearable class="mb5 mr5" @change='change'>
            <el-option v-for="paramItem in typeList" :key="paramItem.value" :label="paramItem.label" :value="paramItem.value">
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="值">
        <template slot-scope="scope">
          <el-cascader v-if="scope.row.paramType==1" :options="itemList" clearable v-model="scope.row.flowNodeCode" placeholder="请选择关联组件" class="mr5" @change='change'></el-cascader>
          <el-input v-if="scope.row.paramType==2||scope.row.paramType==3" v-model="scope.row.vModel" @change='change'></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="paramType" label="操作" v-if="item.APItype!=1&&!item.isList">
        <template slot="header">
          <span>操作</span>
          <el-button type="text" @click="addList(0)" class="ml15">新增</el-button>
        </template>
        <template slot-scope="scope">
          <el-button type='text' @click="removeList(scope.$index)">删除</el-button>
          <el-button type='text' @click="addList(scope.$index)">新增</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- <el-button type="text" v-if="dataList.length==0&&item.APItype!=1" @click="addList(0)">添加参数</el-button>
    <div class="select-item" :class="{'flex':item.flex}" v-for="(data,index) in dataList" :key="index">
      <el-select v-model="data.vModel" placeholder="下拉配置" class="mb5 mr5" @change='change' v-if="item.isList" disabled>
        <el-option v-for="paramItem in selectList" :key="paramItem.value" :label="paramItem.label" :value="paramItem.value">
        </el-option>
      </el-select>
      <div class="flex" :class="{'pl15':data.parentName}">
        <el-select v-model="data.paramName" placeholder="请选择API参数名" clearable class="mb5 mr5" :disabled='item.APItype==1' @change='change'>
          <el-option v-for="paramItem in paramList" :key="paramItem.key" :label="paramItem.name" :value="paramItem.key">
          </el-option>
        </el-select>
      </div>
      <el-select v-model="data.paramType" placeholder="参数获取方式" clearable class="mb5 mr5" @change='change' v-if="!item.isList">
        <el-option v-for="paramItem in typeList" :key="paramItem.value" :label="paramItem.label" :value="paramItem.value">
        </el-option>
      </el-select>
      <div class="flex">
        <el-cascader v-if="data.paramType==1" :options="itemList" clearable v-model="data.flowNodeCode" placeholder="请选择关联组件" class="mr5" @change='change'></el-cascader>
        <el-input v-if="data.paramType==2||data.paramType==3" v-model="data.vModel" @change='change'></el-input>
        <div class="remove-btn select-line-icon" @click="removeList(index)" v-if="item.APItype!=1&&!item.isList">
          <i class="el-icon-remove-outline" />
        </div>
        <div class="add-btn select-line-icon" @click="addList(index)" v-if="item.APItype!=1&&!item.isList">
          <i class="el-icon-circle-plus-outline" />
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>

export default {
  name: 'selectFormItem',
  props: {
    item: {
      type: Object,
      required: true
    },
    faNode: {
      type: Object,
      required: true
    },
    nodeKey: {
      type: String,
      required: true
    },
    // type: {
    //   type: String,
    //   default: "input"
    // },
    disabled: {
      type: Boolean,
      default: false
    },
    drawingList: {
      type: Array,
      default: []
    },
    form: {
      type: Object,
      default: {}
    },
    flowConfig: {
      type: Array,
      default: []
    },
    API: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default() {
        return `请选择${this.item.label}`;
      }
    }
  },
  data() {
    return {
      model: [],
      typeList: [
        { label: '固定值', value: 2 },
        { label: '表单获取', value: 1 },
        { label: '指定字段名', value: 3 },
      ],
      selectList: [
        { label: '显示值', value: 'label' },
        { label: '实际对应值', value: 'value' },
      ],
      dataList: [],
      paramList: [],
      itemList: [],
      mapIds: {},
    }
  },
  watch: {
    'item.dataList'(value) {
      let initFetch = true
      //判断当前下拉选项是否无，但存在下拉选项选值的时候更新下拉选项但不重置下拉选项值
      if (this.paramList && this.paramList.length == 0 && this.dataList && this.dataList.length > 0) {
        initFetch = false
      }
      this.paramList = []
      if (value) {
        this.paramList = this.getList(JSON.parse(value))
      }
      if (initFetch) {
        this.dataList = []
        if (this.item.APItype == 1) {
          this.paramList.forEach(item => {
            this.dataList.push({ paramName: item.key, parentName: item.parentName })
          })
          this.change()
        } else if (this.item.isList) {
          this.dataList.push({ vModel: 'value' })
          this.dataList.push({ vModel: 'label' })
          this.change()
        } else {
          this.dataList = []
        }

      }

    },
    faNode() {
      this.init()
    }
  },
  mounted() {
    this.init()
    this.initItemList()
  },
  methods: {
    getList(list, parent) {
      let temp = [], self = this;
      if (list) {
        list.forEach(item => {
          if (parent) {
            item.parentName = (parent.parentName ? parent.parentName + '.' : '') + parent.key
          }
          temp.push(item)
          if (item.properties && item.properties.length > 0) {
            temp = temp.concat(self.getList(item.properties, item))
          }
        })
      }
      return temp
    },
    getSelect(item) {
      let attributes = JSON.parse(item.attributes)
      if (attributes && attributes.fields) {
        item.list = []
        attributes.fields.forEach(field => {
          // field.flowNodeCode = item.flowNodeCode
          item.list.push({ label: field.label, value: field.vModel })
        })
        this.itemList.push({ "value": item.flowNodeCode, label: item.name, children: item.list, },)
      }
    },
    getAPI(item) {
      let attributes = JSON.parse(item.attributes)
      if (attributes.response) {
        let response = JSON.parse(attributes.response)
        if (response.length > 0) {
          item.list = []
          response.forEach(param => {
            item.list.push({ label: param.name, value: param.key })
          })
          this.itemList.push({ "value": item.flowNodeCode, label: item.name, children: item.list, },)
        }
      }

    },
    getItems(id) {
      let self = this;
      if (id != '0' && !this.mapIds[id]) {
        this.mapIds[id] = true
        this.flowConfig.forEach(item => {
          if (item.id == id) {
            if (item.type == 1 && item.data && item.data.attributes) {
              this.getSelect(item.data)
            }
            if (item.type == 2 && item.data && item.data.attributes) {
              this.getAPI(item.data)
            }
            if (item.pids) {
              item.pids.forEach(pid => {
                self.getItems(pid)
              })
            } else {
              self.getItems(item.groupId)
            }
          }
        });
      }
    },
    initItemList() {
      let self = this;
      if (this.item.APItype == 1) {
        const parentCode = this.form.parentCode || ''
        let pids = parentCode.split(',')
        pids.forEach(id => {
          self.getItems(id)
        })
      }
      let temp = []
      this.drawingList.forEach(field => {
        temp.push({ label: field.label, value: field.vModel })
      })
      if (temp.length > 0) {
        this.itemList.push({ "value": this.form.flowNodeCode, label: '当前表单', children: temp },)
      }
    },
    init() {
      this.dataList = []
      if (this.faNode[this.nodeKey]) {
        let jsonStr = JSON.parse(this.faNode[this.nodeKey])
        jsonStr.forEach(data => {
          this.dataList.push({
            "paramName": data.paramName,
            "flowNodeCode": [data.flowNodeCode, data.vModel],
            "parentName": data.parentName || data.parent,
            "vModel": data.vModel,
            "paramType": data.paramType,
          })
        })
      }
    },
    change() {
      let temp = []
      this.dataList.forEach(data => {
        let vModel = data.vModel
        if (data.paramType == 1) {
          vModel = data.flowNodeCode ? data.flowNodeCode[1] : ''
        }
        temp.push({
          "paramName": data.paramName,
          "flowNodeCode": data.flowNodeCode ? data.flowNodeCode[0] : '',
          "paramType": data.paramType,
          "parentName": data.parentName,
          "vModel": vModel,
        })
      })
      this.$set(this.faNode, this.nodeKey, JSON.stringify(temp))
      this.$forceUpdate()
    },
    addList(index) {
      this.dataList.splice(index, 0, {})
    },
    removeList(index) {
      this.dataList.splice(index, 1)
    }
  }
}
</script>
<style lang='less' scoped>
.flex {
  display: flex;
}
.select-item {
  // display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .remove-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .add-btn {
    cursor: pointer;
    color: green;
  }
  & .el-input + .el-input {
    margin-left: 4px;
  }
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
</style>