<template>
    <div class="content-main">
        <el-row style="text-align: center">
            <h1>{{nowDate}}交易日</h1>
        </el-row>
        <el-row style="margin-bottom: 10px">
            <el-col style="width:6%">
                <span>交易现场</span>
            </el-col>
            <el-col style="width:94%">
                <span class="borderClass"> &nbsp;</span>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="tableData" border stripe tooltip-effect="dark" >
                <el-table-column prop="bdh" label="标的号" align="center" show-overflow-tooltip ></el-table-column>
                <el-table-column prop="pz" label="品种" align="center" show-overflow-tooltip ></el-table-column>
                <el-table-column prop="ccdw" label="承储单位" align="center" show-overflow-tooltip ></el-table-column>
                <el-table-column prop="jysl" label="交易数量" align="center" show-overflow-tooltip width="130"></el-table-column>
                <el-table-column prop="dj" label="等级" align="center" show-overflow-tooltip width="160"></el-table-column>
                <el-table-column prop="qbj" label="起报价" align="center" show-overflow-tooltip width="120"> </el-table-column>
                <el-table-column prop="zxbj" label="最新报价" align="center" show-overflow-tooltip width="120"> </el-table-column>
                <el-table-column prop="djs" label="倒计时" align="center" show-overflow-tooltip width="120"> </el-table-column>
                <el-table-column prop="zt" label="状态" align="center" show-overflow-tooltip width="80"> </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pageForm.page"
                :page-sizes="[10,20,30,40]"
                :page-size="pageForm.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageForm.total"
            ></el-pagination>
        </el-row>
        <el-row style="margin: 50px 0 10px 0">
            <el-col style="width:13%">
                <span>竞价交易综合统计表</span>
            </el-col>
            <el-col style="width:87%">
                <span class="borderClass"> &nbsp;</span>
            </el-col>
        </el-row>
        <el-row>
            <el-table :data="table2Data" border stripe tooltip-effect="dark" >
                <el-table-column prop="sfmc" label="省份" align="center" show-overflow-tooltip ></el-table-column>
                <el-table-column prop="pz" label="品种" align="center" show-overflow-tooltip ></el-table-column>
                <el-table-column prop="nd" label="年度" align="center" show-overflow-tooltip ></el-table-column>
                <el-table-column prop="dj" label="等级" align="center" show-overflow-tooltip width="130"></el-table-column>
                <el-table-column prop="jysl" label="交易数量" align="center" show-overflow-tooltip width="160"></el-table-column>
                <el-table-column prop="cjsl" label="成交数量" align="center" show-overflow-tooltip width="120"> </el-table-column>
                <el-table-column prop="zjg" label="最高价" align="center" show-overflow-tooltip width="120"> </el-table-column>
                <el-table-column prop="zdj" label="最低价" align="center" show-overflow-tooltip width="120"> </el-table-column>
                <el-table-column prop="pjj" label="平均价" align="center" show-overflow-tooltip width="80"> </el-table-column>
                <el-table-column prop="cjbl" label="成交比率" align="center" show-overflow-tooltip width="80"> </el-table-column>
            </el-table>
        </el-row>
        <el-row>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="pageForm2.page"
                :page-sizes="[10,20,30,40]"
                :page-size="pageForm.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageForm.total"
            ></el-pagination>
        </el-row>


    </div>
</template>

<script>

import {getNowDate} from "@/utils/index"
import { realTimedynamicList,auctionTransaction } from "@/api/grainCirculationPrice/tradingCenter/timeDynamic"
    export default {
        data(){
            return{
                pageForm: {
                    page: 1,
                    size: 10,
                    total: 0
                },
                pageForm2: {
                    page: 1,
                    size: 10,
                    total: 0
                },
                tableData:[{}],
                table2Data:[{}],
                nowDate:''
            }
        },
        methods:{
            handlclick(row){
                console.log(row)
            },
            handleCurrentChange(val) {
                this.pageForm.page = val;
                this.getList();
            },
            handleSizeChange(val) {
                this.pageForm.size = val;
                this.getList();
            },
            getList(){
                let data = {
                    pageNum: this.pageForm.page,
                    pageSize: this.pageForm.size
                };
                realTimedynamicList(data).then(res =>{
                    if(res.infoCode == 200){
                        this.tableData = res.data.list
                        this.pageForm.total = res.data.total
                    }
                })
                auctionTransaction(data).then(res => {
                    if(res.infoCode == 200){
                        this.table2Data = res.data.list
                        this.pageForm2.total = res.data.total
                    }
                })
            }
        },
        created(){
            this.nowDate = getNowDate()
            this.getList()
            console.log(this.nowDate,"交易时间")
        }

    }

</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    h1{
        font-size: 30px;
        margin-bottom: 30px;
    }
    .pagination-wrap {
        text-align: right;
        margin-top: 10px;
    }
    .input-w-220 {
        width: 220px;
    }
    .borderClass {
        position: relative;
        top: -10px;
        display: inline-block;
        width: 100%;
        border-bottom: 1px #000000 dashed;
    }
    // .iconfont {
    //   font-size: 13px;
    // }


</style>
