<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="container_item">
        <span class="item_text">{{$t('spotrate.currencypair')}}:</span>
        <el-input v-model="query.currencyPair"  class="filter-item input_item"   />
      </div>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="handleSearch">
        {{ $t('table.search') }}
      </el-button>
       <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-reset" @click="handleReset">
        {{ $t('table.reset') }}
      </el-button>

    </div>
    <div class="wrapper_table">
      <el-table
        :data="tableData"
        fit
        stripe
        highlight-current-row
        style="width: 100%;"
        :header-cell-class-name="headerStyle"
        :max-height="tableHeight"
      >
        <el-table-column prop="currencyPair" :label="$t('spotrate.currencypair')"  ></el-table-column>
        <el-table-column prop="marketName" :label="$t('spotrate.market')" show-overflow-tooltip ></el-table-column>

        <el-table-column prop="marketPriceBuy" :label="$t('spotrate.optionRate')" >
          <el-table-column prop="marketPriceSell" :label="$t('spotrate.marketbuy')" ></el-table-column>
          <el-table-column prop="quotedPriceBuy" :label="$t('spotrate.markeysell')" ></el-table-column>
        </el-table-column>
         <el-table-column prop="marketPriceBuy" :label="$t('spotrate.moneyRate')" >
          <el-table-column prop="marketPriceSell" :label="$t('spotrate.marketbuy')"  ></el-table-column>
          <el-table-column prop="quotedPriceBuy" :label="$t('spotrate.markeysell')" ></el-table-column>
        </el-table-column>
        <el-table-column prop="exchangeRate" :label="$t('spotrate.quoteRate')" ></el-table-column>
        <el-table-column prop="rateDate" :label="$t('spotrate.time')"  width="100"></el-table-column>
        <el-table-column prop="isClosingPriceStr" :label="$t('spotrate.closeprice')" width="70"></el-table-column>
        <!-- class-name="small-padding " -->
        <el-table-column :label="$t('table.actions')"  width="100" >
          <template slot-scope="{row}">
              <div class="flex_d">
                <el-button v-if="permission.includes('spot_rate_history_query')" type="text" size="mini" icon="el-icon-my-xiangqing" @click="handleHistorySearch(row)">
                {{ $t('spotrate.history') }}
                </el-button>
              </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getData" />
  <el-dialog
    title="历史查询"
    :visible.sync="dialogFormVisible"
    v-el-drag-dialog
    :close-on-click-modal="false"
    width="1000px">
      <div class="addflex">
        <div class="filter-container">
          <div class="container_item">
            <span class="item_text">更新时间：</span>
              <el-date-picker
                v-model="rateDate"
                type="date"
                style="width:186px"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                class="filter-item input_item" >
                </el-date-picker>
          </div>
          <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-search" @click="historySearch">
            {{ $t('table.search') }}
          </el-button>
          <el-button v-waves class="filter-item" type="primary" icon="el-icon-my-reset" @click="handleHistoryReset">
            {{ $t('table.reset') }}
          </el-button>

        </div>
          <div class="wrapper_table">
            <el-table
              :data="searchData"
              fit
              stripe
              highlight-current-row
              style="width: 100%;"
              :header-cell-class-name="headerStyle"
            >
              <el-table-column prop="currencyPair" :label="$t('spotrate.currencypair')"  ></el-table-column>
              <el-table-column prop="marketName" :label="$t('spotrate.market')" show-overflow-tooltip></el-table-column>

              <el-table-column prop="marketPriceBuy" :label="$t('spotrate.optionRate')" >
                <el-table-column prop="marketPriceSell" :label="$t('spotrate.marketbuy')" ></el-table-column>
                <el-table-column prop="quotedPriceBuy" :label="$t('spotrate.markeysell')" ></el-table-column>
              </el-table-column>
              <el-table-column prop="marketPriceBuy" :label="$t('spotrate.moneyRate')" >
                <el-table-column prop="marketPriceSell" :label="$t('spotrate.marketbuy')" ></el-table-column>
                <el-table-column prop="quotedPriceBuy" :label="$t('spotrate.markeysell')" ></el-table-column>
              </el-table-column>
              <el-table-column prop="exchangeRate" :label="$t('spotrate.quoteRate')" ></el-table-column>
              <el-table-column prop="rateDate" :label="$t('spotrate.time')"  width="140"></el-table-column>
              <el-table-column prop="isClosingPriceStr" :label="$t('spotrate.closeprice')"  width="50"></el-table-column>
            </el-table>
          </div>
          <pagination
            v-show="listQuery.total>0"
            :total="listQuery.total"
            :page.sync="listQuery.pageNum"
            :limit.sync="listQuery.pageSize"
            @pagination="getHistoryData"
            layout="total, prev, pager, next, jumper"/>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { mapGetters } from 'vuex'
import http from '@/api/http'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: '',
  components: { Pagination },
  directives: { waves, elDragDialog },
  computed: {
    ...mapGetters([
      'permission',
    ])
  },
  data() {
    return {
      total: 0,
      query:{},
      tableData:[],
      searchData:[],
      pageSize:10,
      pageNum:1,
      tableHeight: 0,
      dialogFormVisible:false,
      listQuery:{
        total:0,
        pageNum:1,
        pageSize:10
      },
      rateDate:'',
      currencyPair:''
    }
  },
  created() {
    this.getData()
  },
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 250
    })
  },
  methods: {
    getData() {
      http.post(`/market/exRate/pageList`,{cpage:this.pageNum,pageSize:this.pageSize,...this.query}).then((res)=>{
          let { list, total } = res.data
          this.tableData = list;
          this.total = total || 0;
          this.tableData.forEach(item=>{
            item.isClosingPriceStr = item.isClosingPrice === 1 ? '是':'否'
            item.rateDate = item.rateDate.slice(0,10)
            Object.keys(item).forEach(v=>{
              if (v === 'marketPriceBuy'
              || v === 'marketPriceSell'
              || v === 'quotedPriceBuy'
              || v === 'quotedPriceSell'
              || v === 'exchangeRate'){
                item[v] = item[v] ? item[v].toFixed(4) : 0
              }
            })
          })
      }).catch(err=>{});
    },
    handleSearch(){
      this.pageNum = 1
      this.getData()
    },
    handleReset(){
      this.query = {}
      this.pageNum = 1
      this.getData()
    },
    handleHistoryReset(){
      this.rateDate = ''
      this.listQuery.pageNum = 1
      this.getHistoryData()
    },
    historySearch(){
      this.listQuery.pageNum = 1
      this.getHistoryData()
    },
    // 历史查询
    handleHistorySearch(row){
      this.dialogFormVisible = true
      this.currencyPair = row.currencyPair
      this.getHistoryData()
    },

    getHistoryData(){
       let param ={
        rateDate: this.rateDate,
        currencyPair: this.currencyPair,
        cpage: this.listQuery.pageNum,
        pageSize: this.listQuery.pageSize
      }
      http.post(`/market/exRate/pageHisList`,param).then(res=>{
        let { list, total } = res.data
        this.searchData = list
        this.listQuery.total = total
        this.searchData.forEach(item=>{
          item.isClosingPriceStr = item.isClosingPrice === 1 ? '是':'否'
          item.rateDate = item.rateDate.slice(0,10)
          Object.keys(item).forEach(v=>{
              if (v === 'marketPriceBuy'
              || v === 'marketPriceSell'
              || v === 'quotedPriceBuy'
              || v === 'quotedPriceSell'
              || v === 'exchangeRate'){
                item[v] = item[v] ? item[v].toFixed(4) : 0
              }
            })
        })
      })
    },

    headerStyle() {
      return 'tableStyle'
    },
  }
}
</script>
<style scoped lang="scss">
  ::v-deep .el-table__header-wrapper{
    border-radius: 10px 10px 0 0;
  }
  .addflex{
    display: flex;
    padding: 30px 30px 0px 30px;
    justify-content: center;
  }

 ::v-deep  .el-table{
    border-radius: 10px 10px 0 0 ;
    .el-table__header{
      // background: url('~@/assets/images/risk_bg.png') no-repeat;
      // background-size: 101.6% 107%;
      // background-position: -6px -2px;
      background: url('~@/assets/images/tabhead1.png') no-repeat;
      // background-size: 100.6% 107%;
      // background-position: -6px -2px;
      background-size: 101% 110%;
      background-position: -4px -4px;
    }
      thead{
    font-size: 13px;
    font-family: "SourceHanSansCN";
    font-weight: 500;
    color: #FFFFFF;
    line-height: 26px;
    text-shadow: 0px 1px 1px #252F60;
    // background: linear-gradient(0deg, #95B9FA, #5683D4) !important;
    & th{
      background-color: transparent;
       border-right:1px rgba(233, 236, 241, 0.5) solid;
       border-bottom:1px rgba(233, 236, 241, 0.5) solid;
    }
    & tr{
      background-color: transparent;
    }
    &.is-group{
      th{
        text-align: center;
        background: unset;
      }
      tr{
        th:nth-child(8){
          border-right:unset;
        }
      }
    }
  }
}
 ::v-deep .el-table__body-wrapper{
    border-left: none;
    tr{
      td{
        text-align: center;
      }
    }
  }
 ::v-deep  .el-dialog__body{
    .addflex{
      display: flex;
      flex-direction: column;
      padding-bottom: 10px;
      .filter-container{
        margin-bottom: 10px;
      }
      .wrapper_table{
        position: relative;
        width: 100%;
        height: 100%;
      }
    }

  }
  // 解决表头多出一列
::v-deep .el-table__fixed-right-patch{
  background: linear-gradient(0deg, #95B9FA, #5683D4);
  top:0;
}

::v-deep .el-table__fixed-body-wrapper{
  // 历史查询偶数列的颜色
   .el-table__row--striped{
      td{
        background-color:#F5F5F5 !important;
      }
    }
}
::v-deep .el-table__header-wrapper .gutter{
  border-bottom-color: transparent !important;
}
</style>
