<!--
 * @Author: Jason Liu
 * @Date: 2022-06-22 10:47:51
 * @Desc: 设置输出字段
-->
<template>
  <a-drawer
    title="输出字段高级设置"
    width="80%"
    :visible="show"
    :loading="loading"
    @close="show = false"
    :destroy-on-close="true"
    class="setOutColumnsCard"
  >
    <a-row>
      <a-col :span="8" class="table_columns">
        <vxe-table
          show-overflow
          :row-config="{ isHover: true }"
          stripe
          height="100%"
          :data="sourceList"
          :checkbox-config="{
            checkField: 'checked',
            trigger: 'row',
          }"
        >
          <vxe-column type="checkbox" width="40" />
          <vxe-column
            :title="`数据源字段  ${sourceList.length}`"
            sortable
            field="columnName"
          >
            <template #default="{ row }">
              <svg-icon
                class="icon_primary_key"
                type="icon_primary_key"
                v-if="row.pk"
              />
              <span class="column_type">
                {{ row.columnType }}({{ row.columnSize }})
              </span>
              <span>
                {{
                  row.description
                    ? `${row.description}(${row.columnName})`
                    : row.columnName
                }}
              </span>
            </template>
          </vxe-column>

          <template #empty>
            <a-empty
              :image-style="{
                height: '80px',
              }"
            >
              <span slot="description"> 暂无数据 </span>
            </a-empty>
          </template>
        </vxe-table>
      </a-col>
      <a-col :span="2" class="row_displacement">
        <a-button
          type="primary"
          :disabled="
            !!sourceList.filter((row) => {
              return row.checked;
            }).length < 1
          "
          @click="toTarget"
        >
          <a-icon type="right" />
        </a-button>
        <br />
        <a-button
          type="primary"
          :disabled="
            !!targetList.filter((row) => {
              return row.checked;
            }).length < 1
          "
          @click="toSource"
        >
          <a-icon type="left" />
        </a-button>
      </a-col>
      <a-col :span="14" class="table_columns">
        <vxe-table
          show-overflow
          :row-config="{ isHover: true }"
          stripe
          height="100%"
          :data="targetList"
          :checkbox-config="{
            checkField: 'checked',
            trigger: 'row',
          }"
        >
          <vxe-column type="checkbox" width="40" />
          <vxe-column
            :title="`输出字段  ${targetList.length}`"
            field="columnName"
            sortable
          >
            <template #default="{ row }">
              <svg-icon
                class="icon_primary_key"
                type="icon_primary_key"
                v-if="row.pk"
              />
              <span class="column_type">
                {{ row.columnType }}({{ row.columnSize }})
              </span>
              <span>
                {{
                  row.description
                    ? `${row.description}(${row.columnName})`
                    : row.columnName
                }}
              </span>
            </template>
          </vxe-column>

          <template #empty>
            <a-empty
              :image-style="{
                height: '80px',
              }"
            >
              <span slot="description"> 暂无数据 </span>
            </a-empty>
          </template>
        </vxe-table>
      </a-col>
    </a-row>
    <div class="a_foot_nuttop">
      <a-button @click="show = false"> 关闭 </a-button>
      &nbsp;
      <a-button type="primary" @click="fixed"> 确定 </a-button>
    </div>
  </a-drawer>
</template>

<script>
export default {
  name: "setOutColumns",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  inject: ["getData", "setColumns"],
  data() {
    return {
      show: this.value,
      loading: false,
      nodeData: {},
      sourceList: [], //源内容列表

      targetList: [], //目标列表
    };
  },
  methods: {
    /**
     * @Author: Jason Liu
     * @description: 还原到目标中
     */
    toSource() {
      let tempLst = this.targetList.filter((row) => {
        return row.checked;
      });
      this.targetList = this.targetList.filter((row) => {
        return !row.checked;
      });

      this.sourceList = this.sourceList.concat(tempLst);
    },
    /**
     * @Author: Jason Liu
     * @description: 设置到输出字段
     */
    toTarget() {
      let tempLst = this.sourceList.filter((row) => {
        return row.checked;
      });
      this.sourceList = this.sourceList.filter((row) => {
        return !row.checked;
      });

      this.targetList = this.targetList.concat(tempLst);
    },
    /**
     * @Author: Jason Liu
     * @description: 确定，提交数据变更
     */
    fixed() {
      this.nodeData.tableColumns = this.nodeData.tableColumns.map((column) => {
        column.checked = !!this.targetList.find((row) => {
          return row.columnName == column.columnName;
        });
        return column;
      });
      this.show = false;
      this.setColumns(this.nodeData.tableColumns);
    },
    /**
     * @Author: Jason Liu
     * @description: 获取设置的节点内容信息
     */
    getSetNode() {
      this.sourceList = []; //源内容列表
      this.targetList = []; //目标列表
      this.nodeData = this.getData();
      this.nodeData.tableColumns.forEach((column) => {
        if (column.checked) {
          this.targetList.push(
            Object.assign({
              ...column,
              checked: false,
            })
          );
        } else {
          this.sourceList.push(
            Object.assign({
              ...column,
              checked: false,
            })
          );
        }
      });
    },
  },
  watch: {
    value(val) {
      this.show = val;
      if (val) {
        this.getSetNode();
      }
    },
    show(val) {
      this.$emit("input", val);
    },
  },
};
</script>

<style lang="less">
.setOutColumnsCard {
  .ant-drawer-body {
    .row_displacement {
      text-align: center;
      padding-top: 25%;
      .ant-btn {
        margin-bottom: 10px;
      }
    }
    .table_columns {
      height: calc(100vh - 130px);
      .column_type {
        color: #da5d27;
      }
    }
  }
}
</style>
