<template>
  <div class="card">
    <PageHeader :title="'日成交交易'">
      <Select :form-items="formItems" />
      <hr class="split-line">
      <icon-font
        name="icon-liedingzhi"
        size="12"
        style="margin-right:8px"
        @click="getFilterInfo"
      />
      <icon-font
        name="icon-more2"
        size="12"
        style="cursor:pointer"
        @click="getMoreInfo"
      />
      <template #image>
        <div class="icon-bg">
          <icon-font
            name="icon-date-time"
            size="12"
            color="var(--text-color-9)"
          />
        </div>
      </template>
    </PageHeader>
    <div class="content">
      <PublicTable
        ref="PublicTableRef"
        class="table"
        row-key="id"
        :loading="loading"
        :has-index="false"
        :need-select="false"
        :table-data="tableData"
        :table-info="tableInfo"
        :table-column="columns"
        :events="events"
        :cell-style="{ backgroundColor: 'var(--desktop-bg-color-1)',color:'var(--desktop-table-text-color-1)' }"
        :header-cell-style="{ backgroundColor: 'var(--desktop-bg-color-2)',color:'var(--desktop-table-text-color-1)' }"
        border
        operation-width="100px"
        :btn-button="operations"
        :operation-fixed="true"
        :is-need-pagination="false"
        :operated-string="operatedString"
        @customColumnChange="handleCustomColumnChange"
      />
    </div>
  </div>
</template>

<script>
import PageHeader from '../components/PageHeader.vue';
import PublicTable from '../components/desktopTable';
import mockData from './mockData';
import mockData2 from './mockData2';
import mockData3 from './mockData3';
import Select from '../components/desktopSelect';
import { themeChangeMixin } from '@/mixins/themeChangeMixin';
export default {
  components: {
    PageHeader,
    Select,
    PublicTable,
  },
  mixins: [themeChangeMixin],
  data() {
    return {
      formItems: {
        // select: true,
        type: 'select',
        prop: 'select1',
        attrs: {
          // label: '静态选择',
          // multiple: true , // 多选
        },
        options: mockData,
      },
      // table数据源
      tableData: mockData2,
      // 表格项绑定的属性
      columns: [
        {
          prop: 'title',
          label: '固定左边',
          minWidth: '100px',
          align: 'center',
          fixed: 'left',
          formatter: (row) => (row.title ? row.title : '暂无标题'),
        },
        {
        //   tableTopColumnIcon: 'el-icon-s-home', // 列表头图标
          showFilter: true,
          prop: 'statusDesc',
          minWidth: '100px',
          align: 'center',
          label: '计算总量',
        },
        {
          sortable: true, // 排序
          prop: 'createBy',
          minWidth: '100px',
          align: 'center',
          label: '排序',
        },
        {
          prop: 'createdTime',
          minWidth: '200px',
          align: 'center',
          label: '申请时间',
        },
        {
          prop: 'auditBy',
          minWidth: '100px',
          align: 'center',
          label: '审核人',
        },
        {
          prop: 'auditBy',
          minWidth: '100px',
          align: 'center',
          label: '审核人',
        },
        {
          prop: 'auditBy',
          minWidth: '100px',
          align: 'center',
          label: '审核人',
        },
        {
          prop: 'auditBy',
          minWidth: '100px',
          align: 'center',
          label: '审核人',
        },
        {
          prop: 'auditBy',
          minWidth: '100px',
          align: 'center',
          label: '审核人',
        },
        {
          prop: 'auditBy',
          minWidth: '100px',
          align: 'center',
          label: '审核人',
        },
      ],
      operations: [
        {
          text: '现金流',
          type: 'text',
          class: 'el-text-color',
          callback: (row) => {
            this.handleAddOrEdit('add', row);
          },
        },
        {
          text: '查看流程',
          type: 'text',
          class: 'el-text-color',
          callback: (row) => {
            this.handleAddOrEdit('edit', row);
          },
        },
      ],
      operatedString: '',
      loading: false,
    };
  },
  created() {
    this.getDataList();
  },
  methods: {
    getMoreInfo() {

    },
    getShowData(value) {
      console.log('111111', value);
    },
    getFilterInfo() {

    },
    async getDataList() {
      const params = {
        'queryParam.instrument': 'FXSPOT',
        'queryParam.product': 'FXSPOT',
        'queryParam.globalId': '',
        'queryParam.dealId': '',
        'queryParam.folder': '',
        'queryParam.underlying': '',
        'queryParam.cpty': '',
        'queryParam.amount1': '',
        'queryParam.amount2': '',
        'queryParam.tradeDateStart': '',
        'queryParam.tradeDateEnd': '',
        'queryParam.maturityDateStart': '',
        'queryParam.maturityDateEnd': '',
        'queryParam.dealStatus': [],
        'queryParam.pageStart': 1,
        'queryParam.pageLimit': 50,
        'queryParam.isFuzzy': 'Y',
      };
      const res = await this.$apis.queryDealPage(params);
      if (res.success) {
        this.tableData = res.data.result.datals;
        this.total = res.data.result.total;
        this.$message.success('请求成功');
      }
    },
    // 数据列确定修改事件
    handleCustomColumnChange(val) {
      // console.log('数据列确定修改事件',val);
      this.tableData = mockData3;
    },
    handleAddOrEdit(val) {
      console.log('我是handleAddOrEdit');
    },
  },
};
</script>

<style lang="scss" scoped>
.card{
  width: 100%;
  height: 100%;
  padding: 12px;
  overflow:hidden;
  position:relative;
  .split-line{
    margin:auto 11px auto 11px;
    width: 1px;
    background: rgba($color: #ffffff, $alpha: 0.13);
    height: 12px;
  }
  .content{
    height: calc(100% - 25px);
    overflow-y:scroll;
  }
}
.icon-bg{
  width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--bg-color-17);
}
.titiebox{
    width: 50%;
}
</style>
