<template>
  <el-tooltip class="item" effect="dark" content="列配置" placement="top">
    <el-popover
      placement="bottom"
      title=""
      trigger="manual"
      v-model="columnconfigvisible"
    >
      <el-button
        slot="reference"
        icon="iconfont icon-liepeizhi"
        size="small"
        class="btn"
        @click="columnconfigClick"
      ></el-button>
      <div class="column">
        <!-- <el-dialog :visible.sync="dialogVisible" width="50%" center :before-close="close" class="dialog"> -->
        <div class="title">
          <span class="titleTop">列配置</span>
          <el-checkbox v-model="checkAll" @change="handleCheckAllChange">{{
            checkAll ? "取消全选" : "全选"
          }}</el-checkbox>
        </div>

        <div class="columnConfig">
          <div class="left">
            <el-checkbox-group
              v-model="checkedColumnsCld"
              @change="handleCheckedList"
            >
              <div class="itembox">
                <div class="item" v-for="item in columnOptions" :key="item.id">
                  <el-checkbox :label="item.label" :disabled="item.disabled">{{
                    item.label
                  }}</el-checkbox>
                </div>
              </div>
            </el-checkbox-group>
          </div>
          <div class="right">
            <vuedraggable
              :scroll="true"
              animation="300"
              v-model="newcolumnOptions"
              @end="end"
              :move="onMove"
              filter=".holdings"
            >
              <transition-group>
                <div
                  v-for="(field, index) in newcolumnOptions"
                  :key="index"
                  style="margin: 10px"
                  :class="field.disabled ? 'holdings' : 'canDragon'"
                  handle=".canDragon"
                >
                  <i class="iconfont icontuozhuai" v-if="!field.disabled"></i>
                  {{ field.label }}
                </div>
              </transition-group>
            </vuedraggable>
          </div>
        </div>

        <div class="dialog-footer">
          <div class="left">
            <el-button
              class="buttonLeft"
              type="primary"
              size="small"
              plain
              @click="recoverChecked"
              >恢复默认</el-button
            >
            <el-button @click="cancel" size="small" class="buttonRight"
              >取 消</el-button
            >
          </div>
          <div class="right">
            <el-button
              type="primary"
              @click="submit"
              size="small"
              class="buttonRight"
              >保 存</el-button
            >
          </div>
        </div>
        <!-- </el-dialog> -->
      </div>
    </el-popover>
  </el-tooltip>
</template>

<script>
import vuedraggable from "vuedraggable";

export default {
  components: { vuedraggable },
  props: {
    dialogVisible: {
      default: () => {
        return false;
      },
    },
    columnconfigvisible: {
      default: () => {
        return false;
      },
    },
    //列属性
    tableLabel: {
      default: () => {
        return [];
      },
    },
    //表头
    columnOptions: {
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      activeName: "fieldsChosen",
      isIndeterminate: true,
      checkAll: false,
      // checkedColumnsCld: this.columnOptions,
      checkedColumnsCld: [],
      newcolumnOptions: this.columnOptions, //拖拽数据
      fieldsTemp: [],
    };
  },

  watch: {
    columnOptions(newval) {
      this.newcolumnOptions = newval;
    },
  },
  computed: {
    //默认选中项(禁用项)
    defaultCheckItem() {
      let result = this.columnOptions.map((item) => item.label);
      return result;
    },
  },
  created() {
    //默认选中项(禁用项)
    this.checkedColumnsCld = this.defaultCheckItem;
    //默认全选
    this.checkAll = true;
  },
  mounted() {},
  methods: {
    //列配置
    columnconfigClick() {
      this.$emit("columnconfigClick");
    },
    submit() {
      //更新表格列顺序
      //更改后列顺序this.fieldList
      this.fieldsTemp = []; //清空存放按指定顺序排列的fields数组
      let n = 0;
      this.newcolumnOptions.map((item) => {
        for (let i = 0; i < this.tableLabel.length; i++) {
          if (this.tableLabel[i].label == item.label) {
            this.fieldsTemp[n++] = this.tableLabel[i];
          }
        }
      });
      // this.tableLabel = this.fieldsTemp;
      //更新表格展示列
      this.$emit("columnConfigSubmit", this.fieldsTemp);
    },
    //全选
    handleCheckAllChange(val) {
      //筛选出禁用项，反选时选中
      let result = this.columnOptions.filter((item) => item.disabled);
      this.newcolumnOptions = val ? this.columnOptions : result;
      this.checkedColumnsCld = val
        ? this.columnOptions.map((item) => item.label)
        : result.map((item) => item.label);
      this.$emit("columnCfgAllchange", this.newcolumnOptions);
      // this.isIndeterminate = false;
    },
    //单选
    handleCheckedList(val) {
      //根据选中id返回查到的数据
      let result = this.columnOptions.filter((item) =>
        val.includes(item.label)
      );
      console.log(result, "result-----------");
      this.$emit("columnCfgCheck", result);
      this.newcolumnOptions = result;
      let checkedCount = result.length;
      this.checkAll = checkedCount === this.columnOptions.length;
      // this.isIndeterminate = checkedCount > 0 && checkedCount <script this.columnOptions.length;
    },
    //重置
    recoverChecked() {
      this.$emit("columnCfgRest");
      this.newcolumnOptions = this.columnOptions;
      this.checkedColumnsCld = this.defaultCheckItem;
    },
    //取消
    cancel() {
      this.$emit("columnConfigClose", false);
    },
    //关闭
    close() {
      this.$emit("columnConfigClose", false);
    },
    //拖拽end
    end(e) {
      console.log(this.newcolumnOptions, "666---------------");
    },
    //部分禁用
    onMove(e) {
      // console.log(e, 'onMove------------------', e.relatedContext.element);
      if (e.relatedContext.element.disabled) return false;
      return true;
    },
  },
  deactivated() {
    this.$emit("columnConfigClose", false);
  },
};
</script>

<style scoped lang='scss'>
$btn-color: #606266;
.btnbox {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 5px 0px 0;

  .btn {
    border: none;
    font-size: 26px;
    padding: 5px;
    margin-left: 0;
    background: #f1f2f5;
  }

  .el-button:focus,
  .el-button:hover {
    background: #e1e2e6;
    color: $btn-color;
  }

  span {
    margin: 0 5px;
  }

  .checkboxgroup {
    display: flex;
    flex-wrap: wrap;
  }
}
::v-deep .el-checkbox {
  width: 70px;
}
.content {
  width: 98%;
  margin: 0 auto 0px;
}
.column {
  .dialog {
  }

  .title {
    padding-bottom: 10px;
    ::v-deep .el-checkbox__input {
      opacity: 0;
    }
    ::v-deep .el-checkbox__label {
      color: #409eff;
    }
    .titleTop {
    }
  }

  ::v-deep .el-dialog--center {
    text-align: left;
  }

  ::v-deep .el-dialog__body {
    min-height: 300px;
  }

  ::v-deep .el-dialog--center .el-dialog__body {
    padding-bottom: 0;
  }

  ::v-deep .el-dialog__footer {
    padding-top: 0;
  }

  .columnConfig {
    max-width: 900px;
    max-height: 40vh;
    display: flex;

    .left {
      width: 65%;

      .itembox {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        .item {
          width: calc((100% - 10px) / 4);

          ::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
            color: #000;
          }
        }
      }
    }

    .right {
      width: 35%;
      overflow-y: auto;
      min-height: 300px;
      border-left: 1px solid #e5e5e5;
      max-height: 40vh;

      /* 宽度和高度 */
      &::-webkit-scrollbar {
        width: 5px;
      }
      .holdings {
        padding-left: 20px;
      }
      .canDragon {
        cursor: move;
      }
    }
  }

  .dialog-footer {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #e5e5e5;
    padding-top: 10px;
  }
}
</style>