<template>
  <div>
    <div class="select">
      <div class="select-item">
        <div class="select-item__title">
          片区
        </div>
        <el-checkbox-group size="small" v-model="select.area">
          <el-checkbox-button v-for="item in areas" :label="item.value">{{item.key}}</el-checkbox-button>
        </el-checkbox-group>
      </div>

      <div class="select-item">
        <div class="select-item__title">
          类别
        </div>
        <el-checkbox-group size="small" v-model="select.type">
          <el-checkbox-button v-for="item in types" :label="item.value">{{item.key}}</el-checkbox-button>
        </el-checkbox-group>
      </div>
    </div>

    <Divider></Divider>

    <el-transfer class="flex-center" v-model="pickedEquipments" :data="equipmentList" :titles="['源列表','目标列表']" :props="{ key: 'id',label: 'name' }" :right-default-checked="pickedEquipments">
      <template #default="{ option }">
        <div>{{ area(option.area) }} {{ type(option.type) }} {{ option.name }}</div>
      </template>
    </el-transfer>

    <div class="flex-center" style="margin-top: 20px;">
      <Button style="width: 200px;" type="primary" @click="nextStep">下一步</Button>
    </div>
  </div>
</template>

<script>
import { show } from "@/api/system/customFormField";
export default {
  inject: ['equipments'],
  props: {
    originalData: Array
  },
  data() {
    return {
      areas: [],
      types: [],
      select: {
        area: [],
        type: []
      },

      pickedEquipments: [],
    }
  },
  methods: {
    nextStep () {
      this.$emit('next',{
        data: this.pickedEquipments,
        step: 1
      })
    },


    async getArea () {
      const obj = (await show({ id: 4 },false))?.select_item;
      if (obj && typeof obj === 'object') {
        let keys = Object.keys(obj)
        if (keys.length > 0) {
          this.areas = keys.map((key) => {
            return {
              key,
              value: /^\d*$/.test(obj[key])
                ? Number(obj[key])
                : obj[key],
            };
          });
        }
      }
    },

    async getType () {
      const obj = (await show({ id: 1 },false))?.select_item;
      if (obj && typeof obj === 'object') {
        let keys = Object.keys(obj)
        if (keys.length > 0) {
          this.types = keys.map((key) => {
            return {
              key,
              value: /^\d*$/.test(obj[key])
                ? Number(obj[key])
                : obj[key],
            };
          });
        }
      }
    },
  },
  computed: {
    area () {
      return function (id) {
        return this.areas.find(i => i.value === id)?.key
      }
    },

    type () {
      return function (id) {
        return this.types.find(i => i.value === id)?.key
      }
    },

    equipmentList () {
      if (this.select.area.length > 0 || this.select.type.length > 0) {
        let list1 = [];
        let list2 = [];
        if (this.select.area.length > 0) {
          list1 = this.equipments().filter(i => this.select.area.find(j => j === i.id))
        }
        if (this.select.type.length > 0) {
          list2 = this.equipments().filter(i => this.select.type.find(j => j === i.id))
        }
        return Array.from(new Set([...list1,...list2].map(JSON.stringify))).map(JSON.parse);
      } else {
        return this.equipments();
      }
    }
  },
  watch: {
    originalData: {
      handler: function (val) {
        this.pickedEquipments = Array.from(new Set(val.map(i => i.equipment_id)))
      },
      immediate: true
    }
  },
  created() {
    this.getArea();
    this.getType();
  }
}
</script>

<style scoped lang="scss">
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.select {
  &-item {
    &__title {
      font-weight: 600;

      padding: 8px 0;
    }

    & + & {
      margin-top: 10px;
    }
  }
}

::v-deep .el-transfer-panel {
  min-width: 260px;
}
</style>
