<template>
  <div class="container" v-loading="loading">
    <PageHeader :title="$t('field.dailyTradeQuery') + ` (${formatterDate(date) || ''})`">
      <template #icon>
        <i class="el-icon-refresh-right refresh-icon" @click="handleRefresh"></i>
      </template>
      <el-button @click="toCheck"
        style="display: flex; align-items: center;background-color: var(--radio-btn-active-bg);color: var(--radio-btn-text);">{{
          $t('button.check') }}</el-button>
      <el-date-picker style="width: 150px;margin-left: 8px;" v-model="date" type="date"
        :placeholder="$t('field.chooseDate')" value-format="yyyyMMdd" @change="() => $refs.table.loadTableData()">
      </el-date-picker>
    </PageHeader>

    <RcsTable ref="table" :columns="columns" :getTableData="getTableData" action class="table">
      <template v-slot:default="scope">
        <el-tooltip :content="$t('button.print')" placement="top">
          <i class="el-icon-printer" style="font-size: 0.8vw;color: var(--blue-70); cursor: pointer;"
            @click="openPrint(scope.scope.row)"></i>
        </el-tooltip>
        <el-tooltip :content="$t('button.following')" placement="top">
          <i class="el-icon-notebook-2"
            style="font-size: 0.8vw;color: var(--blue-70);margin-left: 10px;cursor: pointer;"
            @click="openFollow(scope.scope.row)"></i>
        </el-tooltip>
        <el-tooltip :content="$t('button.life')" placement="top">
          <i class="el-icon-alarm-clock"
            style="font-size: 0.8vw;color: var(--blue-70);margin-left: 10px;cursor: pointer;"
            @click="openLife(scope.scope.row)"></i>
        </el-tooltip>
      </template>
    </RcsTable>
  </div>
</template>

<script>
import PageHeader from '../../components/PageHeader.vue'
import RcsTable from '../../components/RcsTable.vue'
import { formatterDate } from '../../common/formatterFun.js'
export default {
  name: 'dailyTradeQuery',
  components: {
    PageHeader,
    RcsTable
  },
  data() {
    return {
      statusColorMap: {
        '生效': 'var(--green-50)',
        '到期': 'var(--orange-60)',
        '失效': 'var(--red-60)'
      },
      columns: [
        {
          prop: 'dealId',
          minwidth: '10%',
          label: this.$t('field.dealsId'),
          formatter: (row, column, cellValue, index) => {
            return <a style={{ color: 'var(--blue-70)' }} onClick={() => this.onOpenModal(row)}>{row.dealId}</a>;
          }
        },
        {
          prop: 'productStr',
          minwidth: '8%',
          label: this.$t('field.product'),
        },
        {
          prop: 'folder',
          minwidth: '6%',
          label: this.$t('field.folder'),
        },
        {
          prop: 'cptyStr',
          minwidth: '15%',
          label: this.$t('field.cpty'),
          tip: true
        },
        // {
        //   prop: 'underlyingTypeStr',
        //   minwidth: '8%',
        //   label: this.$t('field.underlyingTypeStr'),
        // },
        {
          prop: 'underlying',
          minwidth: '8%',
          label: this.$t('field.target'),
        },
        {
          prop: 'dealStatusStr',
          minwidth: '3%',
          label: this.$t('field.status'),
          formatter: (row) => {
            return (
              <div style={{ display: 'flex', alignItems: 'center' }} >
                <span style={{ background: this.statusColorMap[row.dealStatusStr], display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', marginRight: '4px' }} ></span>
                <span style={{ color: this.statusColorMap[row.dealStatusStr] }} >{row.dealStatusStr}</span>
              </div>
            )
          }
        },
        {
          prop: 'amount1Str',
          minwidth: '12%',
          label: this.$t('field.amountUsd'),
          sortable: true
        },
        {
          prop: 'amount2Str',
          minwidth: '12%',
          label: this.$t('field.amountCny'),
          sortable: true
        },
        {
          prop: 'tradeDateStr',
          minwidth: '8%',
          label: this.$t('field.tradeDate'),
          sortable: true
        },
        {
          prop: 'valueDateStr',
          minwidth: '8%',
          label: this.$t('field.valueDate'),
          sortable: true
        },
        {
          prop: 'maturityDateStr',
          minwidth: '8%',
          label: this.$t('field.maturityDate'),
          sortable: true
        }

      ],
      date: '',
      formatterDate,
      loading: true,
      folderObj: {},
      timer: null
    };
  },
  mounted() {
    this.$bus.$on('folderChange', (folderObj) => {
      if (folderObj.folder) {
        this.folderObj = { ...folderObj }
        this.getCurrentDate()
      }
    })

    this.folderObj.folder && this.getCurrentDate()

    this.timer = setInterval(() => {
      this.$refs.table?.loadTableData()
    }, 20000)
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    async getCurrentDate() {
      this.loading = true
      const res = await this.$apis.getSystemDate()
      if (res.success) {
        this.loading = false
        this.date = res.data.result.date + ''
        this.$refs.table?.loadTableData()
      }
    },

    async getTableData() {
      const queryParam = {
        'queryParam.moduleName': 'dcsDailyTradeQuery',
        'queryParam.type': ['deal'],
        'queryParam.dateStart': this.date,
        'queryParam.dateEnd': this.date,
        'queryParam.tradeDate': this.date,
        'queryParam.folder': this.folderObj.folder,
        'queryParam.pageLimit': 50,
        'queryParam.currentPage': 1
      }
      this.loading = true
      const res = await this.$apis.getDailyTradeQuery(queryParam)
      this.loading = false
      if (res.success) {
        return {
          data: res?.data?.result?.data?.result?.datals,
          total: res?.data?.result?.data?.result?.total
        }
      }
    },

    async handleRefresh() {
      await this.getCurrentDate()
    },

    clickBtn() {
      console.log(2222222)
    },

    openPrint(row) {
      const dealId = row.dealId
      const product = row.product
      const instrument = row.product
      const data = {
        id: 1, // id必填 后续通过此id可修改弹窗信息
        text: '打印', // 标题
        href: '/dcs/dcs/dcsDailyTradeQuery/tradePrint', // 路由 对应路由表里配置的路由
        loadMode: 'iframe',
        width: 750, //宽 必须是数字类型
        height: 516 - 45,
        customclass: 'user-modifyPwd', //自定义类名
        maximize: true, //最大化功能
        minimize: true, //最小化功能
        draggable: true, //拖拽功能
        modal: true, //蒙层
        appendToBody: true, //是否添加进body
        closeonclickModal: false, //点击蒙层是否关闭弹窗
        extraParams: {
          // 额外参数
          // loginId: Eui.share.get('loginId')，// 获取登陆loginId
          dealId,
          product,
          instrument
        }
      };
      Eui.openVueWin(data);
    },

    openFollow(row) {
      const dealId = row.dealId
      const product = row.product
      const instrument = row.product
      const data = {
        id: 1, // id必填 后续通过此id可修改弹窗信息
        text: '跟踪', // 标题
        href: '/dcs/dcs/dcsDailyTradeQuery/tradeQueryTrace', // 路由 对应路由表里配置的路由
        loadMode: 'iframe',
        width: 750, //宽 必须是数字类型
        height: 516 - 45,
        customclass: 'user-modifyPwd', //自定义类名
        maximize: true, //最大化功能
        minimize: true, //最小化功能
        draggable: true, //拖拽功能
        modal: true, //蒙层
        appendToBody: true, //是否添加进body
        closeonclickModal: false, //点击蒙层是否关闭弹窗
        extraParams: {
          // 额外参数
          // loginId: Eui.share.get('loginId')，// 获取登陆loginId
          dealId,
          product
        }
      };
      Eui.openVueWin(data);
    },

    openLife(row) {
      const dealId = row.dealId
      const product = row.product
      const instrument = row.product
      let id = this.$menuMap.get('/dcs/dcs/dcsLifeCycle/index')
      this.$router.push(`/iframe/${id}?dealId=${dealId}&product=${product}&instrument=${instrument}`)
    },

    toCheck() {
      let id = this.$menuMap.get('/eflow/approve/html/approveIndex')
      this.$router.push(`/iframe/${id}`)
    },

    onOpenModal(row) {
      const data = {
        id: 1, // id必填 后续通过此id可修改弹窗信息
        text: row.productStr, // 标题
        href: '/dcs/dcs/dcsInput/index', // 路由 对应路由表里配置的路由
        loadMode: 'iframe', // 加载方式 iframe
        width: 750, //宽 必须是数字类型
        height: 516 - 45,
        customclass: 'user-modifyPwd', //自定义类名
        maximize: true, //最大化功能
        minimize: true, //最小化功能
        draggable: true, //拖拽功能
        modal: true, //蒙层
        appendToBody: true, //是否添加进body
        closeonclickModal: false, //点击蒙层是否关闭弹窗
        extraParams: {
          // 额外参数
          // loginId: Eui.share.get('loginId')，// 获取登陆loginId
          dealId: row.dealId,
          product: row.product
        }
      };
      console.log(111111111, data);
      Eui.openVueWin(data);
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 8px 9px;
}

.title {
  height: 30px !important;
}
// ::v-deep input.el-input__inner {
//   width: 150px !important;
//   height: 30px;
// }
// ::v-deep .el-input.el-input--prefix .el-input__inner {
//   width: 150px !important;
// }
::v-deep .el-button--default {
  width: 75.97px !important;
  height: 30px !important;
  font-size: 12px !important;
}
</style>
