<template>
  <section>
    <template v-for="(item,index) in moduleObjectList">
      <el-col
        :span="span"
        v-if="item.show"
        :key="index"
      >
        <el-form-item
          :label="`${item.name}`"
          :prop="`${item.type}Id`"
        >
          <el-select
            class="full-width"
            placeholder="请选择"
            clearable
            :filterable="filterable"
            :multiple="multiple"
            :collapse-tags="collapse"
            v-model="formData[`${item.type}Id`]"
            @change="itemChange(item,index)"
          >
            <el-option
              v-for="item in contant[`${item.type}List`]"
              :key="item.primaryKey"
              :label="item.name"
              :value="item.primaryKey"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </template>
  </section>
</template>

<script>
import * as api from './api/space.js'

export default {
  name: 'FilterLocationSelect',

  props: {
    span: {
      type: Number,
      default: function () {
        return 6
      }
    },

    default: {
      type: Boolean,
      default: function () {
        return false
      }
    },

    filterable: {
      type: Boolean,
      default: function () {
        return false
      }
    },

    multiple: {
      type: Boolean,
      default: function () {
        return false
      }
    },

    collapse: {
      type: Boolean,
      default: function () {
        return false
      }
    },

    module: {
      type: Array,
      default: function () {
        return ['project', 'residence', 'region', 'building', 'unit', 'floor', 'house']
      }
    },
    // 回显数据
    showData: {
      type: Object,
      default: function () {
        return {}
      }
    },
    moduleObjectList: {
      type: Array,
      default: function () {
        return [
          {
            name: '项目',
            type: 'project',
            url: 'apiFilterProjectList',
            show: false
          },
          {
            name: '小区',
            type: 'residence',
            url: 'queryAuthResidenceList',
            show: false
          },
          {
            name: '区域',
            type: 'region',
            url: 'queryAuthRegionList',
            show: false
          },
          {
            name: '楼栋',
            type: 'building',
            url: 'queryAuthBuildingList',
            show: false
          },
          {
            name: '单元',
            type: 'unit',
            url: 'queryAuthUnitList',
            show: false
          },
          {
            name: '楼层',
            type: 'floor',
            url: 'queryAuthFloorList',
            show: false
          },
          {
            name: '房屋',
            type: 'house',
            url: 'queryAuthHouseList',
            show: false
          }
        ]
      }
    },
  },

  data() {
    return {

      formData: {
        projectId: null,
        residenceId: null,
        regionId: null,
        buildingId: null,
        unitId: null,
        floorId: null,
        houseId: null,
      },

      contant: {
        projectList: [],
        residenceList: [],
        regionList: [],
        buildingList: [],
        unitList: [],
        floorList: [],
        houseList: [],
      },

    }
  },

  async created() {
    // 回显
    if (Object.keys(this.showData).length !== 0) {
      this.formData = JSON.parse(JSON.stringify(this.showData))
      this.initShowData()
    } else {
      // 不回显
      this.init()
    }
  },

  methods: {
    getkeys() {
      return this.formData
    },
    // 反显
    initShowData() {
      for (let i in this.moduleObjectList) {
        let item = this.moduleObjectList[i]
        let nextItem = this.moduleObjectList[(+i) + 1]
        if (this.module.includes(item.type)) {
          item.show = true;
          if (item.type === 'project') {
            this.getListFn(null, item, (+i), 'showInit')
          }
          this.getListFn(item, nextItem, (+i) + 1, 'showInit')
        }
      }
    },

    init() {
      let first = null;
      let netIndex = null;
      // 加载选择模块
      this.moduleObjectList.forEach((item, index) => {
        if (this.module.includes(item.type)) {
          item.show = true;
          if (!first) {
            first = item
            netIndex = index
          }
        }
      })
      this.formData = this.$options.data().formData;

      this.getListFn(null, first, netIndex)
    },

    itemChange(changItem, changIndex) {
      let netItem = null
      // 清空 选中Id
      this.moduleObjectList.forEach((item, index) => {
        if (changIndex < index) {
          this.formData[item.type + 'Id'] = null;
          this.contant[`${item.type}List`] = [];
          if (!netItem && item.show) {
            netItem = item
          }
        }
      })

      console.log(netItem)

      // 获取下级选择项
      if (netItem) {
        this.getListFn(changItem, netItem)
      }

      this.$emit('onChange', this.formData)
    },

    async getListFn(item, netItem, netIndex, type) {
      let param = {};
      let data = this.formData
      // 回显取传入的数据
      if (type == 'showInit') {
        data = this.showData
      }
      if (netItem.type === 'project') {
        param = { flag: true }
      }

      if (item && data[item.type + 'Id']) {
        if (this.multiple) {
          param[`${item.type}IdList`] = data[item.type + 'Id']
        } else {
          param[`${item.type}Id`] = data[item.type + 'Id']
        }
      }

      if (Object.keys(param).length === 0) {
        return
      }


      let res = await api[netItem.url](param);
      if (res.success) {
        if (netItem.type === 'project') {
          res.rows.forEach(item => {
            item.name = item.projectName
          })
        }

        this.contant[`${netItem.type}List`] = res.rows;
        this.$emit('getOptions', { node: netItem, type: netItem.type, list: res.rows })

        if (this.default && res.rows.length && !item) {
          data[netItem.type + 'Id'] = this.multiple ? [res.rows[0].primaryKey] : res.rows[0].primaryKey;
          // 不回显时
          if (type !== 'showInit') {
            this.itemChange(netItem, netIndex)
          }
        }
      }
    },


  }
}
</script>
<style lang="scss">

</style>
