<template>
  <div>
    <Modal
      v-model="showModal"
      title="设置"
      :closable="false"
      :mask-closable="false"
    >
      <div slot="footer">
        <Button @click="handleModalOk">保存</Button>
        <Button @click="showModalFalse">取消</Button>
      </div>
      <div class="modal_content">
        <Tabs
          value="name1"
          style="max-height: 1000px; overflow: hidden; overflow-y: auto"
        >
          <TabPane label="表头" name="name1">
            <div style="padding: 15px 0px">
              <Checkbox
                v-model="ifCheckAllHeader"
                @on-change="ifCheckAllClickHeader"
                >全选</Checkbox
              >
            </div>
            <Table
              :columns="formModalColumns"
              border
              ref="selection"
              @on-select-cancel="selectCancel"
              @on-selection-change="selectListHeader"
              :data="tableModalTableDataHeader"
              :draggable="true"
              @on-drag-drop="(first, end) => onDragDrop(first, end, 1)"
            >
              <template slot="sortord" slot-scope="{ row, index }">
                <Select
                  v-model="row.sortord"
                  @on-change="(e) => clickChange(e, row, index)"
                >
                  <Option
                    v-for="(item, index) in pointList"
                    :value="item.value"
                    :key="index"
                    >{{ item.label }}</Option
                  >
                </Select>
              </template>
              <template slot="title" slot-scope="{ row, index }">
                <Input
                  v-model="row.title"
                  @on-change="(e) => changeTitle(e, row, index)"
                />
              </template>
            </Table>
          </TabPane>
          <TabPane label="筛选项" name="name2">
            <div style="padding: 15px 0px">
              <Checkbox v-model="ifCheckAll" @on-change="ifCheckAllClick"
                >全选</Checkbox
              >
            </div>
            <Table
              :columns="tableModalColumns"
              border
              ref="selection1"
              @on-selection-change="selectList"
              @on-select-cancel="selectScreenCancel"
              :data="tableModalTableData"
              :draggable="true"
              @on-drag-drop="(first, end) => onDragDrop(first, end, 2)"
            >
              <template slot="screenTitle" slot-scope="{ row, index }">
                <Input
                  v-model="row.title"
                  @on-change="(e) => changeScreenTitle(e, row, index)"
                />
              </template>
            </Table>
          </TabPane>
        </Tabs>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ifCheckAll: false,
      ifCheckAllHeader: false,
      checkedList: [], //筛选项选择的
      checkedListHeader: [], //表头选择的
      pointList: [
        {
          value: "1",
          label: "升序",
        },
        {
          value: "2",
          label: "降序",
        },
      ],
    };
  },
  props: {
    tableModalTableDataHeader: {
      type: Array,
      default: [],
    },
    formModalColumns: {
      type: Array,
      default: [],
    },
    tableModalColumns: {
      type: Array,
      default: [],
    },
    tableModalTableData: {
      type: Array,
      default: [],
    },
    showModal: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    //拖拽事件
    onDragDrop(first, end, type) {
      if (type == 1) {
        this.tableModalTableDataHeader.splice(
          end,
          1,
          ...this.tableModalTableDataHeader.splice(
            first,
            1,
            this.tableModalTableDataHeader[end]
          )
        );
      } else {
        this.tableModalTableData.splice(
          end,
          1,
          ...this.tableModalTableData.splice(
            first,
            1,
            this.tableModalTableData[end]
          )
        );
      }
    },
    clickChange(e, row, index) {
      this.tableModalTableDataHeader[index].sortord = e;
    },
    changeTitle(e, row, index) {
      this.tableModalTableDataHeader[index].title = row.title;
    },
    //筛选项点击展示名称
    changeScreenTitle(e, row, index) {
      this.tableModalTableData[index].title = row.title;
    },
    //点击确定按钮
    handleModalOk() {
      this.$emit("event1", false);
      this.$emit(
        "handleModalOk",
        this.tableModalTableDataHeader,
        this.tableModalTableData
      );
    },
    //点击取消按钮
    showModalFalse() {
      this.$emit("event1", false);
    },
    //点击栏目设置
    showModalTrue() {
      this.checkedListHeader = [];
      this.checkedList = [];
      // this.showModal = true;
      this.$refs.selection1.selectAll(false);
      this.$refs.selection.selectAll(false);
      let arr = [];
      this.tableModalTableData.forEach((e, index) => {
        if (e.is_show == true) {
          e._checked = true;
          arr.push(e);
          this.tableModalTableData.splice(index, 1, e);
        } else {
          e._checked = false;
        }
      });
      let arrHeader = [];
      this.tableModalTableDataHeader.forEach((e, index) => {
        if (e.is_show == true) {
          e._checked = true;
          arrHeader.push(e);
          this.tableModalTableDataHeader.splice(index, 1, e);
        } else {
          e._checked = false;
          this.tableModalTableDataHeader.splice(index, 1, e);
        }
      });
      if (arr.length == this.tableModalTableData.length) {
        this.ifCheckAll = true;
      }
      if (arrHeader.length == this.tableModalTableDataHeader.length) {
        this.ifCheckAllHeader = true;
      }
      this.checkedListHeader = this.tableModalTableDataHeader.filter((f) => {
        if (f.is_show == true) {
          return f;
        }
      });
      this.checkedList = this.tableModalTableData.filter((f) => {
        if (f.is_show == true) {
          return f;
        }
      });
    },
    //筛选全选按钮
    ifCheckAllClick() {
      if (this.checkedList.length > 0 && this.ifCheckAll == true) {
        this.$nextTick(() => {
          this.ifCheckAll = true;
          this.$refs.selection1.selectAll(true);
        });
      } else if (this.checkedList.length == 0 && this.ifCheckAll == true) {
        this.$nextTick(() => {
          this.ifCheckAll = true;
          this.$refs.selection1.selectAll(true);
          return;
        });
      } else {
        this.$nextTick(() => {
          this.ifCheckAll = false;
          this.$refs.selection1.selectAll(false);
          this.tableModalTableData.forEach((e) => {
            e.is_show = false;
            e._checked = false;
          });
          return;
        });
      }
    },
    //表头全选按钮
    ifCheckAllClickHeader() {
      debugger;
      if (this.checkedListHeader.length > 0 && this.ifCheckAllHeader == true) {
        this.$nextTick(() => {
          this.ifCheckAllHeader = true;
          this.$refs.selection.selectAll(true);
        });
      } else if (
        this.checkedListHeader.length == 0 &&
        this.ifCheckAllHeader == true
      ) {
        this.$nextTick(() => {
          this.ifCheckAllHeader = true;
          this.$refs.selection.selectAll(true);
          return;
        });
      } else {
        this.$nextTick(() => {
          this.ifCheckAllHeader = false;
          this.$refs.selection.selectAll(false);
          this.tableModalTableDataHeader.forEach((e) => {
            e.is_show = false;
            e._checked = false;
          });
          return;
        });
      }
    },
    //筛选项选中
    selectList(row) {
      var result = [];
      for (var i = 0; i < this.tableModalTableData.length; i++) {
        var obj = this.tableModalTableData[i];
        var num = obj.is_show;
        var isExist = false;
        for (var j = 0; j < row.length; j++) {
          var aj = row[j];
          var n = aj.is_show;
          if (n == num) {
            isExist = true;
            break;
          }
        }
        if (!isExist) {
          result.push(obj);
        }
      }
      this.tableModalTableData.forEach((el, index) => {
        row.forEach((cl) => {
          if (el.key == cl.key) {
            el.is_show = true;
            el._checked = true;
            this.tableModalTableData.splice(index, 1, el);
          }
        });
      });
      this.checkedList = row;
      if (row.length == this.tableModalTableData.length) {
        this.ifCheckAll = true;
      } else {
        this.ifCheckAll = false;
      }
    },
    selectCancel(selection, row) {
      this.tableModalTableDataHeader.forEach((e, index) => {
        if (e.key == row.key) {
          this.tableModalTableDataHeader[index]._checked = false;
          this.tableModalTableDataHeader[index].is_show = false;
        }
      });
    },
    selectScreenCancel(selection, row) {
      this.tableModalTableData.forEach((e, index) => {
        if (e.key == row.key) {
          this.tableModalTableData[index]._checked = false;
          this.tableModalTableData[index].is_show = false;
        }
      });
    },
    //表头选中
    selectListHeader(row) {
      var result = [];
      for (var i = 0; i < this.tableModalTableDataHeader.length; i++) {
        var obj = this.tableModalTableDataHeader[i];
        var num = obj.is_show;
        var isExist = false;
        for (var j = 0; j < row.length; j++) {
          var aj = row[j];
          var n = aj.is_show;
          if (n == num) {
            isExist = true;
            break;
          }
        }
        if (!isExist) {
          result.push(obj);
        }
      }
      this.tableModalTableDataHeader.forEach((el, index) => {
        row.forEach((cl) => {
          if (el.key == cl.key) {
            el.is_show = true;
            el._checked = true;
            this.tableModalTableDataHeader.splice(index, 1, el);
          }
        });
      });
      this.$emit("selectAll", row);
      this.checkedListHeader = row;
      if (row.length == this.tableModalTableDataHeader.length) {
        this.ifCheckAllHeader = true;
      } else {
        this.ifCheckAllHeader = false;
      }
    },
  },
};
</script>