
<!-- 明细 -->
<template>
  <!--  <Views url="getDesignPage.action?funcId=1916672685254737922" /> -->
  <div class="RCSbox 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="false"
      :table-data="tableData"
      :table-info="tableInfo"
      :table-column="columns"
      :events="events"
      operation-width="150px"
      :has-operation="false"
      :btn-button="operations"
      :table-top-button="tableTopButton"
      :operation-fixed="true"
      :is-need-pagination="true"
      :is-need-customcolumn="true"
      :current-page="searchParams.pageStart"
      :page-size="searchParams.pageLimit"
      :total="total"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
      @handleSelectionChange="handleSelectionChange"
    />
    <DetailDialog
      :is-show.sync="isShow"
      :select-row="selectRow"
    />
  </div>
</template>

<script>
import FormSearch from '@/components/formSearch/index.vue';
import PublicTable from '@/components/table/index.vue';
import DetailDialog from './components/detailDialog.vue';
// import { setCurrency } from '@/utils/index.js';
const searchArr = [
  {
    type: 'selectTreeTable',
    prop: 'folder',
    span: 4,
    attrs: {
      label: '账户',
      placeholder: '请选择',
      info: { title: '账户检索' },
      clearable: false,
    },
    options: [],
  },
  {
    type: 'input',
    prop: 'bizUkLike',
    span: 4,
    attrs: {
      label: '业务编号',
    },
  },
];
export default {
  components: {
    FormSearch,
    PublicTable,
    DetailDialog,
  },
  data() {
    return {
      isShow: false,
      selectRow: {},
      formArr: searchArr,
      loading: false,
      // table数据源
      tableData: [],
      tableInfo: {
        tableHeight: 350,
      },
      // 表格项绑定的属性
      columns: [],
      // 操作栏自定义按钮
      operations: [],
      tableTopButton: [],
      // 搜索查询的参数
      searchParams: {
        pageStart: 1,
        pageLimit: 20,
        folder: '',
      },
      total: 0,
    };
  },
  watch: {
    '$route.query': {
      handler(newVal) {
        this.init();
      },
      deep: true,
    },
  },
  async mounted() {
    console.log(this.$route.query, 'llll');
    await this.getOptions();
    await this.init();
  },
  methods: {
    async init() {
      this.setSearchFormArr();
      await this.getTableConfig();
      this.searchParams = Object.assign({}, { ...this.searchParams, ...JSON.parse(this.$route.query.searchParams) });
      this.getTableList();
    },
    setSearchFormArr() { // 设置查询条件
      if (this.$route.query.formArr && JSON.parse(this.$route.query.formArr).length > 0) {
        this.formArr = [...searchArr, ...JSON.parse(this.$route.query.formArr)];
      } else {
        this.formArr = [...searchArr];
      }
      console.log(this.formArr, 'ffff');
    },
    searchSubmit(val) {
      console.log('search结果', val);
      this.searchParams = { ...this.searchParams, ...val };
      this.getTableList();
    },
    resetForm() {
      this.searchParams = {
        pageStart: 1,
        pageLimit: 20,
        ...JSON.parse(this.$route.query.searchParams),
      };
    },
    outOperation(val, index, prop, num) {
      console.log(val, index, prop, num, '查询');
      this.searchParams[prop] = val;
    },
    // 页面展示条数改变事件-pageLimit
    handleSizeChange(pageLimit) {
      this.searchParams.pageLimit = pageLimit;
      this.getTableList();
    },
    // 页面切换事件-pageStart
    handleCurrentChange(pageStart) {
      this.searchParams.pageStart = pageStart;
      this.getTableList();
    },
    // 多选事件
    handleSelectionChange(val) {
      console.log('多选事件 ', val);
      this.selection = val;
    },
    async getOptions() { // 账户
      await this.$apis.getPosOptions({ 'codifierGrpCodes': 'folderTreeAuthWithGrp' }).then(res => {
        this.formArr[0].options = res.data.result.folderTreeAuthWithGrp;
      });
    },
    async  getTableConfig() {
      await this.$apis.getOneQueryComponent({ 'queryParam.__scriptId': this.$route.query.scriptId }).then(res => {
        const fieldList = res.data.result?.fieldList ? res.data.result?.fieldList : JSON.parse(res.data.result?.field);
        this.columns = fieldList?.filter(v => v.display).map(v => {
          return {
            // ...v,
            name: v.code,
            prop: v.code,
            headerAlign: 'center',
            align: v?.attributeMap?.align,
            label: v.localName,
            width: 'auto',
            minWidth: (v.width?.includes('%') ? document.querySelector('.table-box').offsetWidth * v.width : v.width) || '150px',
            fixed: v.frozen === 'Y',
            render: (h, params) => {
              if (v.name === 'Folder') {
                return h('span', {
                  domProps: {
                    innerHTML: params.row[v.code],
                  },
                  style: {
                    cursor: 'pointer',
                    color: '#017BFF',
                  },
                  on: {
                    click: () => {
                      this.isShow = true;
                      console.log(params.row, 'params.row');
                      this.selectRow = { ...params.row };
                    },
                  },
                });
              } else if (v.name === 'BizUKIDTop' || (v.name === 'BizUKID' && this.$route.query.scriptId === 'FxOptionPositionDetail')) { // 原始流水号或者外汇期权头寸的业务编号
                return h('span', {
                  domProps: {
                    innerHTML: params.row[v.code],
                  },
                  style: {
                    cursor: 'pointer',
                    color: '#017BFF',
                  },
                  on: {
                    click: () => {
                      this.$dcsDetailsDialog({
                        title: params.row.Product,
                        dealId: params.row[v.code],
                        product: params.row.Product,
                        instrument: params.row._Product,
                        onClose: () => {
                          console.log('close decDetailsDialog');
                          // 在这里处理取消事件
                        },
                      });
                    },
                  },
                });
              } else {
                return h('span', {
                  domProps: {
                    innerHTML: params.row[v.code],
                  },
                });
              }
            },
          };
        });
      });
    },
    getTableList() {
      const param = [
        { field: 'posType', value: this.$route.query.posType },
        { field: 'flagHistory', value: 'undefined' },
        { field: 'posUks', value: JSON.parse(this.$route.query.extraParams)._posUks },
      ];
      const keys = ['folder', 'bizUkLike'];
      keys.forEach(key => {
        if (this.searchParams[key]) {
          param.push({ filed: key, value: this.searchParams[key] });
        }
      });
      const params = {
        ...this.searchParams,
        '__action': 'Query',
        '__scriptId': this.$route.query.scriptId,
        '__sqlId': 'defaultSqlId',
        param: JSON.stringify(param),
        hideCondition: {},
        condition: {},
      };
      const transformedParams = {};
      for (const key in params) {
        transformedParams[`queryParam.${key}`] = params[key];
      }
      this.loading = true;
      this.$apis.getForeignCurrencyList(transformedParams).then(res => {
        this.tableData = res.data.result.datals;
        // setCurrency(res.data.result.datals, this.columns);
        this.total = res.data.result.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
