<template>
  <el-row class="page-container dict">
    <el-container class="page-main" :gutter="20">
      <el-aside width="250px" class="left-content">
        <el-col :span="24" class="left-search">
          <el-input
            v-model.trim="searchVal"
            clearable
            :placeholder="placeholder"
          >
          </el-input>
        </el-col>
        <el-col class="dict-list" ref="dict">
          <el-col
            v-for="(item, index) in tableList"
            :key="item.id"
            class="dict-item"
          >
            <span
              @click="handClick(index, item)"
              :class="{ active: index == isActive }"
              style="cursor: pointer"
            >
              <strong>
                {{ item.label }}
              </strong>
              - {{ item.value }}
            </span>
          </el-col>
        </el-col>
      </el-aside>
      <el-main>
        <div style="text-align: right">
          <el-input
            v-model.trim="keyWord"
            clearable
            placeholder="关键字"
            style="width: 220px; margin-right: 5px"
          >
          </el-input>
          <el-button type="primary" @click="handleSave" :loading="loading"
            >保存配置</el-button
          >
        </div>
        <el-table-self
          style="margin-top: 10px"
          ref="table"
          :table-data="fields"
          :columns="columns"
          :list-loading="listLoading"
        />
      </el-main>
    </el-container>
  </el-row>
</template>
<script>
import { setExportFields, getTableFields, getExportConfigFields } from "@/api/coop-group"
export default {
  name: "ExportFieldConfig",
  props: {
    groupId: String,
  },
  data() {
    return {
      isActive: -1,
      placeholder: "搜索数据库",
      name: "",
      searchVal: "",
      keyWord: "",
      typeId: "",
      fieldList: [],
      configuredFieldList: [],
      tableCode: "",
      loading: false,
      listLoading: false,
      columns: [
        {
          label: "字段名称",
          minWidth: 120,
          value: "fieldName",
        },
        {
          label: "字段code",
          minWidth: 200,
          value: "fieldCode",
        },
        {
          operType: "checkbox",
          label: "是否导出",
          minWidth: 100,
          value: "isExport",
          tabType: "selection",
        },
        {
          operType: "checkbox",
          label: "是否脱敏",
          minWidth: 100,
          value: "isDesensitized",
          tabType: "selection",
        },
        {
          operType: "input",
          type: "number",
          label: "排序号",
          width: 120,
          inputWidth: 108,
          value: "sort",
          showInput: true,
        },
      ],
    }
  },

  watch: {
    groupId(groupId) {
      if (groupId) {
        this.getTableFields()
        this.getFields()
      }
    },
  },
  computed: {
    // 数据库表过滤
    tableList() {
      const dictTable = this.dictMap["table"] || []
      const list = dictTable.filter(
        (_) =>
          !this.searchVal ||
          _.label.includes(this.searchVal) ||
          _.value.includes(this.searchVal)
      )
      this.isActive = this.getListIdx(list, this.typeId)
      return list
    },
    // 全部字段和已配置字段
    fieldValue() {
      return this.fieldList.map((field) => {
        let configuredField = this.configuredFieldList.find(
          (_) => _.fieldCode === field.fieldCode
        )
        return {
          ...field,
          sort: (configuredField && configuredField.sort) || undefined,
          isExport: Boolean(configuredField),
          isDesensitized: Boolean(
            configuredField && configuredField.isDesensitized
          ),
        }
      })
    },

    fields() {
      return this.fieldValue.filter(
        (_) =>
          !this.keyWord ||
          _.fieldName.includes(this.keyWord) ||
          _.fieldCode.includes(this.keyWord)
      )
    },
  },
  methods: {
    // 点击左侧列表
    handClick(index, { type, label, id, value }) {
      if (!this.groupId) {
        this.$message.warning("请先选择协作组")
        return
      }
      this.name = label
      this.tableCode = value
      this.isActive = index
      this.typeId = id
      this.fieldList = []
      this.getTableFields()
      this.getFields()
    },
    // 全部字段
    getTableFields() {
      getTableFields({ tableCode: this.tableCode, groupId: this.groupId }).then(
        (res) => {
          this.fieldList = res.data
        }
      )
    },
    // 已配置字段
    getFields() {
      getExportConfigFields({ tableCode: this.tableCode, groupId: this.groupId })
        .then((res) => {
          this.configuredFieldList = res.data
        })
        .catch((e) => {
          this.configuredFieldList = []
        })
    },
    handleSave() {
      if (!this.groupId) {
        this.$message.warning("请先选择协作组")
        return
      }
      if (!this.fieldValue.length) {
        this.$message.warning("没有可保存的数据")
        return
      }
      const list = this.fieldValue
        .filter((_) => _.isExport)
        .map((_) => {
          delete _.isExport
          return {
            ..._,
            isDesensitized: _.isDesensitized ? 1 : 0,
          }
        })
      const table = {
        tableCode: this.tableCode,
        tableName: this.name,
        groupId: this.groupId,
      }
      this.loading = true
      setExportFields(table, list)
        .then((res) => {
          this.$message.success("配置成功")
        })
        .finally(() => {
          this.loading = false
        })
    },

    getListIdx(list = [], id) {
      let listIdx = -1
      for (var i = 0; i < list.length; i++) {
        if (list[i].id === id) {
          listIdx = i
          break
        }
      }
      return listIdx
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-main {
  padding: 0px 0 0 10px;
}
</style>
