<template>
  <div class="RCSbox approveIndex common-page">
    <FormSearch
      :form-arr="formArr"
      :form-data="formData"
      @outOperation="outOperation"
      @searchSubmit="searchSubmit"
      @reset="resetForm"
    />
    <el-tabs
      v-model="activeName"
      class="approve-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-for="(item, index) in approveList"
        :key="item.label"
        :label="item.label"
        :name="item.value"
      >
        <span slot="label">
          <!-- <el-badge
            :value="item.count"
            :max="99"
          > -->
          <span>{{ item.label }}</span>
          <span>({{ item.count }})</span>
          <!-- </el-badge> -->
        </span>
        <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.pageNum"
          :page-size="searchParams.pageSize"
          :total="total"
          :is-need-customcolumn="true"
          :is-need-export="true"
          :is-need-import="true"
          @sizeChange="handleSizeChange"
          @currentChange="handleCurrentChange"
          @customColumnChange="handleCustomColumnChange"
          @handleTableTopColumnIconClick="handleTableTopColumnIconClick"
          @handleSelectionChange="handleSelectionChange"
        />
      </el-tab-pane>
    </el-tabs>
    <ApproveDialog
      :is-show.sync="isShow"
      :select-row="clickRow"
      :active-index="activeName"
    />
    <ProcessDialog
      :show-process.sync="showProcess"
      :select-row="clickRow"
    />
  </div>
</template>

<script>
import ApproveDialog from './components/approveDialog.vue';
import ProcessDialog from './components/processDialog.vue';
import FormSearch from '@/components/formSearch/index.vue';
import PublicTable from '@/components/table/index.vue';
export default {
  components: {
    FormSearch,
    PublicTable,
    ApproveDialog,
    ProcessDialog,
  },
  data() {
    return {
      isShow: false,
      showProcess: false,
      selection: [],
      clickRow: {},
      approveList: [
        { label: '待处理', value: 1, count: '', key: 'waitNumber' },
        { label: '已处理', value: 2, count: '', key: 'finishNumber' },
        { label: '已拒绝', value: 3, count: '', key: 'refuseNumber' },
        { label: '我发起', value: 4, count: '', key: 'mineNumber' },
      ],
      activeName: 1,
      formArr: [
        {
          type: 'pickerDate',
          prop: 'dealDate',
          span: 6,
          attrs: {
            label: '更新日期',
            type: 'daterange',
            'value-format': 'yyyy-MM-dd',
            'range-separator': '至',
            'start-placeholder': '开始日期',
            'end-placeholder': '结束日期',
          },
        },
        {
          type: 'select',
          prop: 'dealStatus',
          span: 4,
          attrs: {
            label: '审批状态',
          },
          options: [],
        },
        {
          type: 'input',
          prop: 'branchUser',
          span: 4,
          attrs: {
            label: '发起人',
          },
        },
      ],
      // 默认值
      formData: {},
      loading: false,
      // table数据源
      tableData: [
        {
          dealStatusStr: '待审核',
          taskId: '961733',
          dealNo: '174168351287689',
          updateTimestamp: '2025-03-14 16:42:13',
          startdesc: '修改基础数据-债券',
          branchUserName: 'yhl',
          rcsSerialNo: 'sdsBond-ccc',
          type: 'WAITING',
        },
        {
          dealStatusStr: '审核通过',
          taskId: '',
          dealNo: '174131577541768',
          updateTimestamp: '2025-03-13 15:55:14',
          startdesc: '新增基础数据-账薄',
          branchUserName: 'yhl',
          rcsSerialNo: '11112222',
          type: 'WAITING',
        },
      ],
      tableInfo: {
        // tableHeight: document.documentElement.clientHeight - 336,
      },
      // 表格项绑定的属性
      columns: [
        {
          prop: 'dealNo',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.dealNo'),
        },
        {
          prop: 'dealStatusStr',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.dealStatus'),
        },
        {
          prop: 'startdesc',
          minWidth: '200px',
          align: 'center',
          label: this.$t('field.startdesc'),
        },
        {
          prop: 'branchUserName',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.branchUserName'),
        },
        {
          prop: 'rcsSerialNo',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.businessNo'),
        },
        {
          prop: 'updateTimestamp',
          minWidth: '160px',
          align: 'center',
          label: this.$t('field.updateTimestamp'),
        },
      ],
      // 表格行单机双击事件
      events: {
        'row-dblclick': async(row) => {
          // 双击表格 行 触发的函数
          console.log('row-dblclick', row);
          this.clickRow = Object.assign({}, row);
          this.isShow = true;
        },
        // 'row-click': (row) => {
        //   // 单机表格 行 触发的函数
        //   console.log('row-click', row);
        // },
      },
      // 操作栏自定义按钮
      operations: [
        {
          text: this.$t('button.viewProcess'),
          type: 'text',
          class: 'el-text-color',
          callback: (row) => {
            event.stopPropagation();
            this.handleViewProcess(row);
          },
        },
      ],
      tableTopButton: [
        {
          text: this.$t('button.approvalBatch'),
          type: 'default',
          class: 'el-text-color',
          disabled: true,
          callback: (value) => {
            this.handleBatchCheck(value);
          },
        },
      ],
      // 搜索查询的参数
      searchParams: {
        pageNum: 1,
        pageSize: 20,
      },
      total: 0,
    };
  },
  async mounted() {
    this.getTopSta();
    this.getOptions();
    // this.queryPage();
    console.log(this.$route.meta.extraData.extraParams.type, 'tt');
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab.name, 'item');
      this.activeName = tab.name;
      this.searchParams.dealStatus = tab.name;
      this.queryPage();
    },
    searchSubmit(val) {
      console.log('search结果', val);
      this.searchParams = { ...this.searchParams, ...val };
      this.queryPage();
    },
    resetForm() {
      this.formData = {};
    },
    outOperation(val, index, prop, num) {
      console.log(val, index, prop, num);
    },
    // 页面展示条数改变事件-pageSize
    handleSizeChange(pageSize) {
      this.searchParams.pageSize = pageSize;
      this.queryPage();
    },
    // 页面切换事件-pageNum
    handleCurrentChange(pageNum) {
      this.searchParams.pageNum = pageNum;
      this.queryPage();
    },
    handleViewProcess(row) {
      // 查看流程
      console.log('查看流程', row);
      this.showProcess = true;
      this.clickRow = Object.assign({}, row);
    },
    // 数据列确定修改事件
    handleCustomColumnChange(val) {
      // console.log('数据列确定修改事件',val);
      // this.tableData = mockData2;
    },
    // 多选事件
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
      this.selection = val;
    },
    // 自定义按钮 点击事件
    async handleBatchCheck(val) {
      // 批量审批
      console.log('自定义按钮', val);
      if (!this.selection.length > 0) {
        const temp = await this.$confirmAction(
          '至少选择一条审批流程?',
          'warning',
          '批量审批',
        );
        return temp;
      }
      this.$apis
        .batchCheck({ strategy: 'agree', approveList: this.selection })
        .then((res) => {
          console.log(res, '确定回调---');
          this.$message.success('请求成功');
        });
    },
    async queryPage() {
      console.log(this, 'this.extraParams');
      const pageType = { 1: 'WAITING', 2: 'FINISH', 3: 'REFUSE', 4: 'MINE' };
      const params = {
        ...this.searchParams,
        dataType: this.$route.meta.extraData.extraParams.type,
        queryPageType: pageType[this.activeName],
      };
      if (params.dealDate && params.dealDate.length > 0) {
        params.dealDateStart = this.searchParams.dealDate[0];
        params.dealDateEnd = this.searchParams.dealDate[1];
      }
      delete params.dealDate;
      const obj = {
        1: this.$apis.getParamsList,
        2: this.$apis.getFinishList,
        3: this.$apis.getRefuseList,
        4: this.$apis.getInitiateList,
      };
      this.loading = true;
      const res = await obj[this.activeName](params);
      this.loading = false;
      if (res.success) {
        this.tableData = res.data.result.datals;
        this.total = res.data.result.total;
      }
    },
    getTopSta() {
      this.$apis.getParamsStaList({ queryParam: { dataType: this.$route.meta.extraData.extraParams.type }}).then((res) => {
        this.approveList.forEach((v, i) => {
          v.count = res.data.result[v.key];
        });
      });
    },
    getOptions() {
      this.$apis
        .getApproveData({ codifierGrpCodes: 'ApproveStatus' })
        .then((res) => {
          this.formArr[1].options = res.data.result.ApproveStatus;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.approveIndex {
  width: 100%;
  height: 100%;
  // overflow:hidden;
  .table-box{
    height:100% !important
  }
}
.approve-tabs{
  height:100%;
  background:var(--bg-color-2);
  border-radius:4px;
}
:deep(.el-tabs__content){
  display: flex;
  height:  calc(100% - 50px);
}
:deep(.el-badge__content.is-fixed) {
  top: 10px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep(.el-badge){
  color: var(--color-90);
}

// :deep(.el-tabs__item:hover){
//   background-color:rgba(255, 255, 255, 0.05) !important
// }
// :deep(.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active){
//   background-color:rgb(64,80,101)
// }
</style>
