<template>
  <el-col :xl="{span:span,offset:offset}" :lg="lgSpan" :md="mdSpan" :sm="smSpan" :xs="xsSpan">
    <Table v-if="repeatShow" ref="tableData" :defaultTableData="tableData" :first-search="false" :show-search="false"
           :show-pagination="false" :key="yid()">
      <template #operations>
        <el-row>
          <el-col>
            <CustomButton type="primary" :label="$t('common.add')" icon="el-icon-plus" v-if="!disabled"  @handleClick="handleAddClick"/>
          </el-col>
        </el-row>
      </template>
      <Column type="index" label="No"/>
      <Column :label="$t('elevatorModel.areaName')" prop="areaName"/>
      <Column :label="$t('validation.areaUS')" prop="areaNameES"/>
      <Column :label="$t('validation.areaRU')" prop="areaNameRU"/>
      <Column :label="$t('validation.areaES')" prop="areaNameUS"/>
      <Column :label="$t('elevatorModel.elevatorModel')" prop="elevatorModel"/>
      <Column :label="$t('common.operate')" fixed="right" v-if="!disabled">
        <template #default="{row,index}">
          <CustomLink :label="$t('common.delete')" @handleClick="handleDeleteRow(row,index)" icon="el-icon-delete"/>
        </template>
      </Column>
    </Table>

    <Dialog ref="suitModelDialog" title="适用电梯选择" maxWidth="1300px" @confirm="handleConfirm"
            :submitCheckFunction="submitCheckFunction" @close="queryParams={ pageNum: 1,
        pageSize: 10,}">
      <CardTable :modal-data="dialogModalData" :searchParams="queryParams" @pagination="getList" :loading="loading"
                 :tableSearch="true" @columnSearch="handleQuery" @resetList="resetQuery"
                 @selection-change="selectionChange" :shadow="false">
        <Column type="selection"/>
        <Column type="index" label="No"/>
        <Column :label="$t('elevatorModel.areaName')" prop="areaName" :show-search="true" :searchParams="queryParams"/>
        <Column :label="$t('validation.areaUS')" prop="areaNameES" :show-search="true" :searchParams="queryParams"/>
        <Column :label="$t('validation.areaRU')" prop="areaNameRU" :show-search="true" :searchParams="queryParams"/>
        <Column :label="$t('validation.areaES')" prop="areaNameUS" :show-search="true" :searchParams="queryParams"/>
        <Column :label="$t('elevatorModel.elevatorModel')" prop="elevatorModel" :show-search="true"/>
        <Column :label="$t('common.operate')" :min-width="200" :showSearch="true" align="center" fixed="right"
                search-type="operate"
                width="250px">
        </Column>
      </CardTable>
    </Dialog>


  </el-col>


</template>

<script>
import mixin from '../../components/CustomElement/mixin'
import {isBlank} from "../../utils/common";
import CardTable from "../../components/element/table/CardTable.vue";
import Column from "../../components/element/table/Column.vue";
import CustomButton from "../../components/CustomElement/CustomButton.vue";
import {listForComponents} from "../../api/business/crm/elevatorModel";
import Table from "../../components/element/table/Table.vue";
import {groupBy} from 'lodash'
import CustomLink from "../../components/CustomElement/CustomLink.vue";
import yid from "yid";


export default {
  name: 'ElevatorModelTable',
  mixins: [mixin],
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array,
      default: () => []
    },
    trigger: {
      type: String,
      default: 'blur'
    },
    labelWidth: {
      type: String,
      default: ''
    },
    span: {
      type: Number,
      default: 24,
    },
    offset: {
      type: Number,
      default: 0,
    },
    lgSpan: {
      type: Number,
      default: 8
    },
    mdSpan: {
      type: Number,
      default: 8
    },
    smSpan: {
      type: Number,
      default: 12
    },
    Span: {
      type: Number,
      default: 24
    },
    xsSpan: {
      type: Number,
      default: 24
    },
    /**
     *  业务数据 用于组件内部数据流转
     * */
    modalData: {
      type: Array,
      default: () => []
    },
    /**
     * 判断属性，用于服务组件内部通过该字段 判断是否需要在删除后保留 属性值，
     * */
    deleteProp: {
      type: String,
      default: 'id',
    }
  },
  components: {CustomLink, Table, CustomButton, Column, CardTable},
  data() {
    return {
      tableData:[],
      dialogModalData: [],
      dialogSelections: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      deleteItemProps: [],
      repeatShow:true

    };
  },
  computed: {
    showTip() {
      return this.disabled
    }
  },
  watch: {
    modalData :{
      handler(newVal,oldVal){
        if(!newVal!==null&&newVal.length>0){
          this.initTableData(newVal)
        }

      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    yid,
    selectionChange(val) {
      this.dialogSelections = val;
    },
    async handleAddClick() {
      await this.getList();
      this.$refs.suitModelDialog.open(true);

    },
    isBlank() {
      return isBlank
    },

    getList() {
      this.loading = true;
      listForComponents(this.queryParams).then(res => {
        this.dialogModalData = res.rows;
        this.queryParams.total = res.total;
        this.loading = false;
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList();
    },
    resetQuery() {
      this.$set(this.queryParams, 'pageNum', 1);
      this.$set(this.queryParams, 'pageSize', 10);
      this.$set(this.queryParams, 'areaName', null);
      this.$set(this.queryParams, 'areaNameES', null);
      this.$set(this.queryParams, 'areaNameRU', null);
      this.$set(this.queryParams, 'areaNameUS', null);
      this.$set(this.queryParams, 'elevatorModel', null);
      this.getList();
    },
    submitCheckFunction() {
      let flag = true;
      let msg = "";
      if (this.dialogSelections.length === 0) {
        flag = false;
        msg = "请至少选择一条数据";
      } else {
        let exsitMap = groupBy(this.tableData, item => item.areaId+"_" + item.elevatorModelId)
        let selectMap = groupBy(this.dialogSelections, item => item.areaId +"_" + item.elevatorModelId)
        //二者不能有交集
        console.log(exsitMap, selectMap)

        if (this.tableData && this.tableData.length > 0) {
          let intersect = Object.keys(exsitMap);
          let selectKeys = Object.keys(selectMap);
          if (intersect.some(item => selectKeys.includes(item))) {
            flag = false;
            msg = "请勿重复选择";
          }
        }
      }
      return new Promise((resolve, reject) => {
        if (flag) {
          resolve();
        } else {
          this.$message.error(msg);
          reject(msg)
        }

      })

    },
    handleConfirm() {
      this.dialogSelections.forEach(item => {
        this.$set(item, 'operationFlag', 1);
        this.tableData.push(item)
      })
      this.$emit('handleConfirm', this.tableData);

    },
    handleDeleteRow(row, index) {
      this.tableData.splice(index, 1);
      if (row[this.deleteProp]) {
        this.deleteItemProps.push(row[this.deleteProp]);
      }
      this.$emit('handleDeleteRow', this.deleteItemProps)
    },
    initTableData(array){
      this.tableData=JSON.parse(JSON.stringify(array));
      this.tableData=[...this.tableData];
      this.$forceUpdate();

    }

  },


  created() {

  },
  mounted() {
  },


}


</script>

<style scoped>
</style>

