<template>
  <div class="RCSbox">
    <FormSearch
      :form-arr="formArr"
      :form-data="formData"
      @outOperation="outOperation"
      @searchSubmit="searchSubmit"
      @reset="resetForm"
    />
    <PublicTable 
      ref="table"
      class="table"
      row-key="id"
      :loading="loading"
      :has-index="false"
      :need-select="false"
      :table-data="tableData"
      :table-info="tableInfo"
      :table-column="columns"
      operation-width="150px"
      :btn-button="operations"
      :operation-fixed="true"
      :is-need-pagination="true"
      :current-page="pageParams.pageNum"
      :page-size="pageParams.pageSize"
      :total="pageParams.total"
      :operated-string="operatedString"
      :is-need-customcolumn="false"
      :is-need-import="false"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
    />
    <HistoryVersion
      ref="historyVersion"
      :data-id="dataId"
      :type="type"
      module="dcs"
      :visible.sync="historyVisible"
      @handleCancel="historyVisible = false"
    />
  </div>
</template>

<script>
import FormSearch from '@/components/formSearch/index.vue';
import PublicTable from '@/components/table/index.vue';
import HistoryVersion from '@/components/historyVersion/index.vue';
export default {
  name: 'DcsLogQuery',
  components: {
    FormSearch,
    PublicTable,
    HistoryVersion
  },
  data() {
    return {
      formArr: [
        {
          type: 'pickerDate',
          prop: 'tradeAddDate',
          span: 6,
          attrs: {
            label: '交易录入日期',
            type: 'daterange',
            'value-format': 'yyyyMMdd',
          }
        },
        {
          type: 'pickerDate',
          prop: 'tradeEditDate',
          span: 6,
          attrs: {
            label: '最后修改日期',
            type: 'daterange',
            'value-format': 'yyyyMMdd',
          }
        },
        {
          type: 'input',
          prop: 'dealId',
          span: 6,
          attrs: {
            label: `交易流水号`
          }
        },
        {
          type: 'select',
          prop: 'bankId',
          span: 6,
          attrs: {
            label: `运营机构`
          },
          options: []
        },
        {
          type: 'input',
          prop: 'takerUser',
          span: 6,
          attrs: {
            label: `操作人`
          }
        },
        {
          type: 'input',
          prop: 'globalId',
          span: 6,
          attrs: {
            label: `外部流水号`
          }
        },
        {
          type: 'select',
          prop: 'products',
          span: 6,
          attrs: {
            label: `金融工具`,
            multiple: true
          },
          options: []
        },
        {
          type: 'selectTree',
          prop: 'folders',
          span: 6,
          attrs: {
            label: `账户`,
            props: {
              label: 'text',
              children: 'children'
            }
          },
          options: []
        },
        {
          type: 'select',
          prop: 'typeOfEvents',
          span: 6,
          attrs: {
            label: `事件类型`,
            multiple: true
          },
          options: []
        },
      ],
      // 默认值
      formData: {
        bankId: ''
      },
      // 获取列表前是否loading加载
      loading: false,
      tableInfo: {
        fileConfig: {
          uploadParams: {
            moduleName: 'pubCurrency',
            param: { 'multiple': false },
          },
        },
        tableHeight: 'calc(100vh - 250px)',
      },
      // table数据源
      tableData: [],
      // 表格项绑定的属性
      columns: [
        {
          prop: 'dealId',
          minWidth: '180px',
          align: 'center',
          label: this.$t('field.dealId'),
        },
        {
          prop: 'typeOfEventStr',
          minWidth: '100px',
          align: 'center',
          label: '交易动作',
        },
        {
          prop: 'version',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.version'),
        },
        {
          prop: 'dealStatusStr',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.dealStatus'),
        },
        {
          prop: 'productStr',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.instrument'),
        },
        {
          prop: 'folder',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.folder'),
        },
        {
          prop: 'captureTime',
          minWidth: '200px',
          align: 'center',
          label: this.$t('field.tradeAddDate'),
        },
        {
          prop: 'tradeDate',
          minWidth: '100px',
          align: 'center',
          label: this.$t('field.tradeDate'),
        },
        {
          prop: 'lastModifyTime',
          minWidth: '200px',
          align: 'center',
          label: this.$t('field.tradeEditDate'),
        },
        {
          prop: 'takerId',
          minWidth: '100px',
          align: 'center',
          label: '操作员',
        },
        {
          prop: 'parentId',
          minWidth: '100px',
          align: 'center',
          label: '父交易流水号',
        },
        {
          prop: 'globalId',
          minWidth: '100px',
          align: 'center',
          label: '外部流水号',
        }
      ],
      // 操作栏自定义按钮
      operations: [
        {
          text: this.$t('field.history'),
          type: 'text',
          class: 'el-text-color',
          callback: (row) => {
            this.getSelectedValue(row);
          },
        },
      ],
      // 搜索查询的参数
      pageParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      historyVisible: false,
      dataId: '', // 历史版本组件查询需要
      type: '',
      dialogTitle: '',
      dialogVisible: false
    };
  },

  async mounted() {
    await this.getOptionList()
    this.queryPage();
  },
  methods: {
    async getOptionList() {
      const match = document.cookie.match(new RegExp('(^| )user.branchId=([^;]+)'));
      const loginUserBranchId =  match ? decodeURIComponent(match[2]) : null;
      const bankMatch = document.cookie.match(new RegExp('(^| )user.bankId=([^;]+)'));
      const bankId =  bankMatch ? decodeURIComponent(bankMatch[2]) : null;
      this.formData.bankId = bankId;
      const params = {
        'queryParam.moduleName': 'pubBranch',
        'queryParam.grptype1': '',
        'queryParam.grpid': '',
        'queryParam.code': '',
        'queryParam.loginUserBranchId': loginUserBranchId,
        'queryParam.pageCtrl': false
      }
      const res = await this.$apis.queryPage(params)
      if (res.success) {
        this.formArr[3].options = res.data.result.datals.map(item => {
          return {
            text: item.localName,
            value: item.code
          }
        })
      }
      const comRes = await this.$apis.getDcsOptions({codifierGrpCodes: 'folderTreeAuthWithGrp,productList,typeOfEvent'})
      if (comRes.success) {
        this.formArr[6].options = comRes.data.result.productList
        this.formArr[7].options = comRes.data.result.folderTreeAuthWithGrp
        this.formArr[8].options = comRes.data.result.typeOfEvent
      }
    },

    searchSubmit(val) {
      this.queryPage();
    },
    resetForm() {
      this.formData = {};
    },
    outOperation(val, index, prop, num) {
      console.log(val, index, prop, num);
    },

    // 页面展示条数改变事件-pageSize
    handleSizeChange(pageSize) {
      this.pageParams.pageSize = pageSize;
      this.queryPage();
    },

    // 页面切换事件-pageNum
    handleCurrentChange(pageNum) {
      this.pageParams.pageNum = pageNum;
      this.queryPage();
    },

    // 自定义按钮 点击事件
    handletableTopButton(val) {
      console.log('自定义按钮', val);
    },

    getSelectedValue(row) {
      // 打开请求版本接口,请求选中的值以及所有的可选值。
      this.dataId = row.dealId;
      this.type = row.product
      this.historyVisible = true;
      this.$refs.historyVersion.onOpen();
    },

    versionChange(value, index) {
      console.log('我是改变的值', value, index);
    },

    async queryPage() {
      const params = {
        'queryParam.moduleName': 'dcsCashFlowLog',
        'queryParam.dealId': this.formData.dealId,
        'queryParam.captureTimeStart': this.formData.tradeAddDate ? this.formData.tradeAddDate[0] : '',
        'queryParam.captureTimeEnd': this.formData.tradeAddDate ? this.formData.tradeAddDate[1] : '',
        'queryParam.lastModifyTimeStart': this.formData.tradeEditDate ? this.formData.tradeEditDate[0] : '',
        'queryParam.lastModifyTimeEnd': this.formData.tradeEditDate ? this.formData.tradeEditDate[1] : '',
        'queryParam.siteCode': this.formData.bankId,
        'queryParam.takerId': this.formData.takerUser,
        'queryParam.pageStart': this.pageParams.pageNum,
        'queryParam.pageLimit': this.pageParams.pageSize,
        'queryParam.globalId': this.formData.globalId,
        'queryParam.products': this.formData.products,
        'queryParam.folders': this.formData.folders,
        'queryParam.typeOfEvents': this.formData.typeOfEvents
      };
      this.loading = true;
      const res = await this.$apis.queryDealOperateLog(params);
      if (res.success) {
        this.tableData = res.data.result.datals;
        this.pageParams.total = Number(res.data.result.total);
        this.loading = false;
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.RCSbox {
  width: 100%;
  height: 100%;
  padding: 0 12px 0 24px;
}
</style>
