<template>
  <div class="RCSbox inf-data">
    <OperateCard
      class="cleft"
      width="200px"
      show-fold
      :form-list="formList"
      label="text"
      :operate-card-tree-attrs="{
        highlightCurrent:true,
        expandOnClickNode:false
      }"
      @handleNodeClick="handleNodeClick"
    />
    <div class="cright common-page">
      <FormSearch
        :form-arr="formArr"
        :form-data="searchParams"
        @outOperation="outOperation"
        @searchSubmit="searchSubmit"
        @reset="resetForm"
      />
      <PublicTable
        ref="table"
        class="table"
        row-key="id"
        :loading="loading"
        :has-index="false"
        :need-select="true"
        :table-data="tableData"
        :table-info="tableInfo"
        :table-column="columns"
        :events="events"
        operation-width="150px"
        :btn-button="operations"
        :table-top-button="tableTopButton"
        :operation-fixed="true"
        :is-need-pagination="true"
        :current-page="searchParams.pageStart"
        :page-size="searchParams.pageLimit"
        :total="total"
        :is-need-customcolumn="false"
        @sizeChange="handleSizeChange"
        @currentChange="handleCurrentChange"
        @customColumnChange="handleCustomColumnChange"
        @handleTableTopColumnIconClick="handleTableTopColumnIconClick"
        @handleSelectionChange="handleSelectionChange"
      />
    </div>
  </div>
</template>

<script>
import OperateCard from '@/components/operateCard/index.vue';
import FormSearch from '@/components/formSearch/index.vue';
import PublicTable from '@/components/table/index.vue';
import approveDialogVue from '../../dcs/approveIndex/components/approveDialog.vue';
export default {
  components: {
    FormSearch,
    PublicTable,
    OperateCard,
  },
  data() {
    return {
      formList: [],
      dialogShow: false,
      selection: [],
      selectRow: {},
      tableInfo: {
        // tableHeight: document.documentElement.clientHeight - 286,
      },
      formArr: [
        {
          type: 'input',
          prop: 'keyword',
          span: 8,
          attrs: {
            label: '关键字',
          },
        },
        {
          type: 'input',
          prop: 'dataEvent',
          span: 8,
          attrs: {
            label: '动作事件',
          },
        },
        {
          type: 'select',
          prop: 'processFlag',
          span: 8,
          attrs: {
            label: '处理状态',
          },
          options: [],
        },
        {
          type: 'pickerDate',
          prop: 'createTime',
          span: 8,
          attrs: {
            label: '创建时间',
            type: 'datetimerange',
            'value-format': 'yyyy-MM-dd',
            'range-separator': '至',
            'start-placeholder': '开始时间',
            'end-placeholder': '结束时间',
          },
        },
      ],
      // 默认值
      formData: {},
      loading: false,
      // table数据源
      tableData: [],
      // 表格项绑定的属性
      columns: [
        {
          prop: 'bizUkidStr',
          minWidth: '200px',
          align: 'center',
          label: this.$t('field.businessNo'),
        },
        {
          prop: 'dataIdStr',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.dataId'),
        },
        {
          prop: 'dataEventStr',
          minWidth: '200px',
          align: 'center',
          label: this.$t('field.dataEvent'),
        },
        {
          prop: 'appId',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.dataFeed'),
        },
        {
          prop: '',
          minWidth: '100px',
          align: 'center',
          label: '父业务编号',
        },
        {
          prop: '',
          minWidth: '100px',
          align: 'center',
          label: '顶级业务编号',
        },
        {
          prop: 'splitFlagStr',
          minWidth: '160px',
          align: 'center',
          label: this.$t('field.splitOrNot'),
        },
        {
          prop: 'createDateStr',
          minWidth: '160px',
          align: 'center',
          label: this.$t('field.createTime'),
        },
        {
          prop: 'processFlagStr',
          minWidth: '160px',
          align: 'center',
          label: this.$t('field.processFlag'),
        },
        {
          prop: '',
          minWidth: '160px',
          align: 'center',
          label: '处理完成时间',
        },
        {
          prop: 'checkUser',
          minWidth: '160px',
          align: 'center',
          label: this.$t('field.checkUser'),
        },
        {
          prop: 'updateDateStr',
          minWidth: '160px',
          align: 'center',
          label: this.$t('field.lastModifyTime'),
        },
      ],
      // 表格行单机双击事件
      events: {
      },
      // 操作栏自定义按钮
      operations: [
        {
          text: '处理',
          callback: (row) => {
            console.log('处理');
          },
        },
        {
          text: '数据详情',
          callback: (row) => {
            console.log('数据详情');
          },
        },
      ],
      tableTopButton: [

      ],
      // 搜索查询的参数
      searchParams: {
        pageStart: 1,
        pageLimit: 20,
      },
      total: 0,
    };
  },
  async mounted() {
    this.queryPage();
    this.getPacketTreeList();
    this.getOptions();
  },
  methods: {
    handleNodeClick(row) {
      if (row.parentId) {
        this.searchParams.appModel = row.value;
        this.searchParams.dataId = '';
        this.searchParams.appId = '';
      } else if (row.topParentId) {
        this.searchParams.dataId = row.value;
        this.searchParams.appModel = '';
        this.searchParams.appId = '';
      } else {
        this.searchParams.appId = row.value;
        this.searchParams.appModel = '';
        this.searchParams.dataId = '';
      }
      this.queryPage();
    },
    resetForm() {
      this.searchParams = {
        pageStart: 1,
        pageLimit: 20,
      };
    },
    searchSubmit(val) {
      console.log('search结果', val);
      this.searchParams = { ...this.searchParams, ...val };
      this.queryPage();
    },
    // 页面展示条数改变事件-pageLimit
    handleSizeChange(pageLimit) {
      this.searchParams.pageLimit = pageLimit;
      this.queryPage();
    },
    // 页面切换事件-pageStart
    handleCurrentChange(pageStart) {
      // console.log('');
      this.searchParams.pageStart = pageStart;
      this.queryPage();
    },
    // 数据列确定修改事件
    handleCustomColumnChange(val) {
      // console.log('数据列确定修改事件',val);
      // this.tableData = mockData2;
    },
    // 多选事件
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
      this.selection = val;
    },
    async queryPage() {
      const params = {
        moduleName: 'infData',
        queryTree: '1',
        // dataId：
        ...this.searchParams,
      };
      if (params.createTime && params.createTime.length > 0) {
        params.createTimeStart = this.searchParams.createTime[0];
        params.createTimeEnd = this.searchParams.createTime[1];
      }
      delete params.createTime;
      const transformedParams = {};
      for (const key in params) {
        transformedParams[`queryParam.${key}`] = params[key];
      }
      this.loading = true;
      const res = await this.$apis.queryPage(transformedParams);
      this.loading = false;
      if (res.success) {
        this.tableData = res.data.result.datals;
        this.total = Number(res.data.result.total);
      }
    },
    getOptions() {
      this.$apis
        .queryComboxData({ 'codifierGrpCodes': 'ProcessFlag,packetList' })
        .then((res) => {
          const { ProcessFlag } = res.data.result;
          this.formArr[2].options = ProcessFlag;
        });
    },
    getPacketTreeList() {
      this.$apis
        .getPacketTree({ 'queryParam.moduleName': 'packetDefine', 'queryParam.status': 1 }).then(res => {
          this.formList = res.data.result;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.inf-data{
    display:flex;
    height: 100%;
    .cleft{
        overflow: auto;
    }
    .cright {
        flex: 1;
        width: 800px;
        margin-left: 12px;
        padding: 0 12px;
    }
}
</style>
