<template>
	<div style="height: 40%">
		<CardWrapper title="外汇牌价" :isShowRefresh="true" v-on="$listeners" v-bind="$attrs" @refresh="refresh" >
			<div class="content">
				<div class="rates-top">
					<div class="rates-items">
						<div class="rates-items-title">汇总种类：</div>
						<div class="rates-items-description">即期牌价</div>
					</div>
					<div class="rates-items">
						<div class="rates-items-title">货币名称：</div>
						<div class="rates-items-description">CNY-人民币</div>
					</div>
					<div class="rates-items">
						<div class="rates-items-title">牌价时间：</div>
						<div class="rates-items-description">{{today}}</div>
					</div>
					<!-- <div class="rates-items">
						<div class="rates-items-title">生效日期：</div>
						<div class="rates-items-description">{{today}}</div>
					</div> -->
				</div>
				<el-table :data="xrtData" style="width: 100%" stripe :highlight-current-row="true" height="calc(100% - 30px)">
					<el-table-column prop="curnam" label="货币名称">
					</el-table-column>
					<el-table-column prop="midrat" label="中间价">
					</el-table-column>
					<el-table-column prop="buyrat" label="现汇买入价">
					</el-table-column>
					<el-table-column prop="selrat" label="现汇卖出价">
					</el-table-column>
					<!-- <el-table-column prop="buy1rat" label="现钞买入价">
					</el-table-column>
					<el-table-column prop="sel1rat" label="现钞卖出价">
					</el-table-column> -->
				</el-table>
				<!--<c-paging-table 
					:data="xrtData"
					:columns="xrtColumns"
					:highlight-current-row="true"
					:pageNumber="xrtmodel.pageNum"
					:pageSize="xrtmodel.pageSize"
					:total="xrtmodel.total"
					v-on:queryFunc="queryFunc"
					:border="true"
				>
				</c-paging-table>-->
			</div>
		</CardWrapper>
	</div>
</template>

<script>
import CardWrapper from "./CardWrapper";
import {queryFXRateList} from "~/service/manage/xrt.js";
import moment from "moment";

export default {
  name: "ForeignExchangeRates",
  components: { CardWrapper },
  data() {
    return {
      today:'',
      xrtData: [],
      xrtColumns: [
				{ label: '货币名称', prop: 'curnam', width: 'auto' },
        { label: '中间价', prop: 'midrat', width: 'auto' },
				{ label: '现汇买入价', prop: 'buyrat', width: 'auto' },
        { label: '现汇卖出价', prop: 'selrat', width: 'auto' },
        { label: '现钞卖出价', prop: 'sel1rat', width: 'auto' },
        { label: '现钞买入价', prop: 'buy1rat', width: 'auto' },
			],
      xrtmodel: {
        cur:"",
        curnam:"",
        begdat:"",
        enddat:"",
        buyrat:0,
        selrat:0,
        sel1rat:0,
        buy1rat:0,
        pageNum: 0,
        pageSize: 0,
        total: 0
      },
    };
  },
  mounted(){
    this.today = moment(new Date()).format("YYYY.MM.DD HH:mm")
  },
  created() {
    this.xrtmodel.begdat = this.getNowDate();
    this.xrtmodel.enddat = "2999-12-31";
    this.onInfXrtSearch();
  },
  methods: {
     getNowDate() {
      const timeOne = new Date()
      const year = timeOne.getFullYear()
      let month = timeOne.getMonth() + 1
      let day = timeOne.getDate()
      month = month < 10 ? '0' + month : month
      day = day < 10 ? '0' + day : day
      const NOW_MONTHS_AGO = `${year}-${month}-${day}`
      return NOW_MONTHS_AGO
    },
    onInfXrtSearch() {
			queryFXRateList(this.xrtmodel).then(res => {
        if(res.respCode == SUCCESS) {
          const list = res.data.list
          this.xrtData = list
          this.xrtmodel.pageNum = res.data.pageNumber
          this.xrtmodel.pageSize = res.data.pageSize
          this.xrtmodel.total = res.data.total
        }
      }) 
		},
    queryFunc(pageNumber, pageSize) {
      this.xrtmodel.pageNum = pageNumber
      this.xrtmodel.pageSize = pageSize
      this.onInfXrtSearch()
    },
    refresh(){
      this.today = moment(new Date()).format("YYYY.MM.DD HH:mm")
      this.xrtmodel.begdat = this.getNowDate();
      this.xrtmodel.enddat = "2299-12-31";
      this.onInfXrtSearch();
    }
  }
};
</script>

<style scoped lang="less">
.content {
	width: 100%;
  padding: 12px 0;
  height: 100%;
}
.rates-top {
	position: absolute;
	top:38px;
	// right:0;
	z-index: 2;
	width: 100%;
	background: #fff;
	display: flex;
	line-height: 36px;
	justify-content: flex-start;
	font-size: 14px;
	// padding: 0 20px;
	box-sizing: border-box;
}
.rates-items {
	// width: 30%;
	display:flex;
	// flex-direction: column;
	// padding: 0 0 15px;
}
.rates-items .rates-items-title {
	// width: 100%;
	height: 40px;
	line-height: 40px;
	display: inline;
	color:var(--text-secondary-color)
}
.rates-items .rates-items-description {
	// width: 100%;
	height: 40px;
	line-height: 40px;
	padding-right: 10px;
	color:var(--text-color-1)
}
.content /deep/ .el-table{
	margin-top:30px;
}
.content /deep/ .el-table::before {
    height: 0px;
}
.content /deep/ .el-table th {
	color: var(--warning-text-color);
	background: #fcf6ec;
	line-height: 22px;
}
.content /deep/ .el-table tr {
  background: #f9f9f9;
}
.content /deep/ .el-table th.is-leaf {
  border-bottom: 8px solid #ffffff;
}
.content /deep/ .el-table td {
  border-bottom: 8px solid #ffffff;
}
.content /deep/ .el-table__body tr.el-table__row.current-row > td {
  color: #000000;
  background-color: #eff8fe;
}
.content /deep/ .el-table__body tr.el-table__row > td {
  color: #707070;
}
.content /deep/ .el-table--small {
  font-size: 14px;
}
.content /deep/ .el-table--small th {
  padding: 7px 0;
}
.content /deep/ .el-table .cell {
	height: 21px;
	line-height: 21px;
}
</style>