<template>
  <div>
    <!--阿里巴巴图标-->
    <div>
      <div class="col-setting">
        <span @click="_checkClick" style="cursor: pointer">
          <i class="pt-ivu-icon pt-setting" style="color: #00a0e9;font-size: 20px"></i>
        </span>
      </div>
    </div>
    <!--阿里巴巴图标-->
    <!--select-table-start-modal-->
    <div>
      <Modal v-model="showSelectModal" width="700" class="zIndex-1300">
        <p slot="header">{{modalTitle}}</p>
        <div>
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="_checkAll">{{title}}</el-checkbox>
          <el-checkbox-group v-model="checkList" @change="_selectChange" style="margin-top:10px">
            <el-checkbox :label="item.key" v-for="item in tableColumns" :key="item.key"
                         style="width:25%;margin-left: 0">{{item.title}}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div slot="footer" class="btn-width">
          <Button @click="_cancel" style="margin-left: 8px">取消</Button>
          <Button @click="_ok" :loading="isLoading" type="primary">保存</Button>
        </div>
      </Modal>
    </div>
    <!--select-table-end-modal-->
  </div>
</template>

<script>
/* VXE-TABLE 自定义表格列 */
export default {
  props: {
    pageColumns: null, // table 列（自己选中需要展示的）
    tableName: null, // 表格的名字（英文）
    userColumns: null // 用户自己选中的列 code
  },
  data() {
    return {
      // 自定义列
      checkList: [],
      modalTitle: '自定义列',
      showSelectModal: false,
      checkAll: false,
      isIndeterminate: true, // 设置 indeterminate 状态，只负责样式控制
      title: '',
      tableColumns: [], // 从企业中获得的表格数据
      isLoading: false
    }
  },
  methods: {
    _checkClick() {
      this.showSelectModal = true
      this.isLoading = false
      // 查询该企业下表格列（根据表格名称）
      this._getByNameCompany()
    },
    _getByNameCompany() {
      this.$store
        .dispatch('SysTableColumn/getByNameCompany', this.tableName)
        .then(() => {
          const result = this.$store.state.SysTableColumn.model
          /** *********企业的表格信息与本地pageColumns比较（如果企业没有选择表格，则显示全部表格列信息）***********/
          const tableColumns = []
          for (let i = 0; i < this.pageColumns.length; i++) {
            result.map(item => {
              if (item === this.pageColumns[i].key) {
                tableColumns.push(this.pageColumns[i])
              }
            })
          }
          this.tableColumns = tableColumns
          /** ********************************************用户选中的数据*************************************/
          // 用户没选中则勾选的是企业的表格数据
          const userData =
            this.userColumns.length === 0 ? this.tableColumns : this.userColumns
          const checkList = []
          for (let k = 0; k < userData.length; k++) {
            checkList.push(userData[k].key)
          }
          this.checkList = checkList

          /** **********************************************是否全部选中*************************************/
          if (checkList.length === this.tableColumns.length) {
            // 全部选中
            this.checkAll = true
            this.isIndeterminate = false
            this.title = '全不选'
          } else {
            this.checkAll = false
            this.isIndeterminate = true
            this.title = '全选'
          }
        })
    },
    // 选中的checkbox
    _selectChange(data) {
      this.checkList = data
      const checkedCount = data.length
      this.checkAll = checkedCount === this.tableColumns.length
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.tableColumns.length
      if (this.checkAll) {
        this.title = '全不选'
      } else {
        this.title = '全选'
      }
    },
    // 全选
    _checkAll(val) {
      this.isIndeterminate = false
      if (val) {
        // 全选
        const checkList = []
        for (let k = 0; k < this.tableColumns.length; k++) {
          checkList.push(this.tableColumns[k].key)
        }
        this.checkList = checkList
        this.title = '全不选'
      } else {
        // 全不选
        this.checkList = []
        this.title = '全选'
      }
    },
    // 保存
    _ok() {
      if (this.checkList.length === 0) {
        this.$Message.warning('请至少选择一项数据！')
      } else {
        this.isLoading = true
        const data = {
          tableName: this.tableName,
          codes: this.checkList
        }
        this.$store.dispatch('SysTableColumn/userSave', data).then(() => {
          if (this.$store.state.SysTableColumn.success) {
            this.$Message.success('保存成功')
            this.$emit('on-result-change')
            this._cancel()
            this.isLoading = false
          } else {
            this.isLoading = false
          }
        })
      }
    },
    // 取消
    _cancel() {
      this.showSelectModal = false
    }
  }
}
</script>
<style>
.col-setting {
  padding: 0px 5px;
  border-top: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  background: #f8f8f9;
  height: 30px;
  line-height: 42px;
}
</style>
