<!--
  * @Author 蒋新平
  * @Date 2022-06-08
  * @Update 蒋新平(2022-06-08)
  * @describe Form表单-多级联动下拉框组件
-->
<template>
  <!-- 多级联动下拉框 -->
  <a-row :gutter="listTable.Data.gutter" :style="listTable.Data.modelStyle || ''">
    <a-col
      v-for="(child, c) in listTable.Data.children"
      :key="c"
      :span="child.span"
    >
      <a-form-item
        :label="child.label || ''"
        :label-col="child.labelCol || 9"
        :wrapper-col="child.wrapperCol || 15"
        :prop="child.prop"
        class="formItem"
      >
        <div class="space-between">
          <a-select
            :placeholder="child.placeholder"
            @change="$emit('onChange', $event, child.option, c, child.prop)"
            :disabled="child.disabled || false"
            v-decorator="[`${child.prop}`, { rules: child.rules || [] }]"
            style="width: 100%;"
          >
            <a-select-option
              v-for="(val, v) in child.option"
              :key="v"
              :value="`${val[child.optionId]}`"
            >{{ val[child.optionName] }}</a-select-option>
          </a-select>
          <span style="padding-left: 10px;" v-if="child.subName">{{ child.subName }}</span>
        </div>
      </a-form-item>
    </a-col>
  </a-row>
</template>

<script>
  export default {
    name: 'multilevelSelect',
    props: {
      // 表单列表数据
      value: {
        type: Object,
        default: () => null
      },
      // 匹配表单唯一标识并赋值 以数据形式进行
      matchedData: {
        type: Object,
        default: () => null
      }
    },
    data () {
      return {
        listTable: this.value
      }
    },
    watch: {},
    computed: {},
    mounted () {
      const _this = this
      _this.$nextTick(() => {
        setTimeout(()=>{
          // 获取多级联动下拉框数据
          _this.setRequest()
        },1000)
      })
    },
    methods: {
      // 获取多级联动下拉框接口方法
      // Obj => 接口参数，index => 列表数据，chil => 列表数据下的子数据
      getSelectParams (Obj, index) {
        const _this = this
        Obj.getFunction(Obj.params).then(res => {
          if (res.message) {
            _this.$message.error(res.message)
          } else {
            let Data
            // 判断是否需要自定义获取属性，否则就显示默认数据
            if (Obj.getPostfix) {
              Data = res.data.data || res.data
              // 判断该属性是否是对象，否则就是数组
              if (Data.constructor === Object) {
                Data = Data[Obj.getPostfix]
              } else {
                Data = Data[0][Obj.getPostfix]
              }
            } else {
              Data = res.data.data || res.data
            }
            _this.listTable.Data.children[index].option = Data
          }
        })
      },
      // 设置接口对象数据（初始值）并循环匹配名称请求不同接口
      setRequest () {
        const _this = this
        _this.getSelectParams(_this.listTable.Data.children[0].request, 0)
        let request = {}
        _this.listTable.Data.children.forEach((child, c) => {
          if (child[child.prop] && c > 0) {
            // 对象重新赋值，并且不影响原来对象
            request = Object.assign(request, child.request)
            c--
            let paramsName = {}
            paramsName[request.params.name] = _this.listTable.Data.children[c][_this.listTable.Data.children[c].prop]
            request.params = paramsName
            c++
            // console.log(request)
            _this.getSelectParams(request, c)
          }
        })
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  .formItem {
    margin: 0;
  }
</style>
