<!--
 * @Author: Jason Liu
 * @Date: 2022-06-21 14:32:07
 * @Desc: 
-->
<template>
  <a-card class="no_border" size="small">
    <template slot="title">
      输出字段({{ nodeData.columns.length }}/{{ nodeData.tableColumns.length }})
    </template>
    <a-alert
      v-if="!nodeData.dbId && nodeData.type != 'TableOutputSql'"
      message="请选择数据源"
      type="warning"
    />
    <a-alert
      v-else-if="!nodeData.tableCode"
      :message="
        nodeData.type == 'TableMigrate' ? '请选择迁移库表' : '请选择数据表'
      "
      type="warning"
    />
    <template v-else>
      <template slot="extra">
        <a-button
          type="link"
          size="small"
          @click="
            () => {
              $emit('reload');
            }
          "
          title="刷新"
        >
          <a-icon type="sync" />
        </a-button>
        <a-button type="link" @click="setwhere = true">条件设置</a-button>
        <a-button type="link" @click="setting = true">高级设置</a-button>
      </template>
      <vxe-table
        show-overflow
        :row-config="{ isHover: true }"
        stripe
        height="400"
        ref="outTable"
        :data="nodeData.tableColumns"
        :checkbox-config="{
          checkField: 'checked',
          trigger: 'row',
          visibleMethod: visibleOutTableColumn,
        }"
        @checkbox-all="setDataColumns"
        @checkbox-change="setDataColumns"
        :row-class-name="setRowDataClass"
      >
        <vxe-column :title="nodeData.tableName" type="checkbox">
          <template #default="{ row }">
            <svg-icon
              class="icon_primary_key"
              type="icon_primary_key"
              v-if="row.pk"
            />
            <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>
    </template>
    <set-out-columns v-model="setting" />
    <set-where-string v-model="setwhere" />
  </a-card>
</template>

<script>
/**
 * @Author: Jason Liu
 * @description: 高级设置输出字段
 */
const setOutColumns = require("./setOutColumns.vue").default;
/**
 * @Author: Jason Liu
 * @description: 查询条件设置
 */
const setWhereString = require("./setWhereString.vue").default;
export default {
  name: "outColumns",
  components: { setOutColumns, setWhereString },
  inject: [
    "getNode",
    "setNodeData",
    "setDataColumns",
  ],
  provide() {
    return {
      /**
       * @Author: Jason Liu
       * @description: 获取设置的列
       */
      getData: () => {
        return this.nodeData;
      },
      /**
       * @Author: Jason Liu
       * @description: 设置输出列
       */
      setColumns: (tableColumns) => {
        this.nodeData.tableColumns = tableColumns;
        this.setDataColumns(this.nodeData);
      },
      /**
       * @Author: Jason Liu
       * @description: 设置条件
       */
      setWhereString: (where) => {
        this.nodeData.whereString = where;
        this.setNodeData(this.nodeData);
      },
    };
  },
  props: {
    value: {
      //流程ID
      type: Object,
      default: {
        data: {
          dbId: undefined,
          tableCode: undefined,
          tableName: undefined,
          eventTimeColumn: undefined,
          columns: [],
          tableColumns: [],
        },
      },
    },
  },
  data() {
    return {
      setting: false,
      setwhere: false,
      nodeData: this.value,
    };
  },
  methods: {
    /**
     * @Author: Jason Liu
     * @description: 获取设置的Node节点
     */
    getSetNode() {
      this.nodeData = this.getNode().data;
    },
    /**
     * @Author: Jason Liu
     * @description: 禁用输出列
     */
    visibleOutTableColumn({ row }) {
      return row.columnName != this.nodeData.eventTimeColumn;
    },
    /**
     * @Author: Jason Liu
     * @description: 设置行数据样式
     */
    setRowDataClass({ row, rowIndex }) {
      if (row.columnName == this.nodeData.eventTimeColumn) {
        return "row_warning";
      }
    },
  },
  watch: {
    value(val) {
      this.nodeData = this.value;
    },
  },
};
</script>

<style lang="less"></style>
