<template>
    <div class="exchangedata-wrap">
        <div class="left-wrap box">
            <el-date-picker
                style="width: 100%"
                v-model="time"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :clearable="false"
                @change="handleTimeChange"
            >
            </el-date-picker>
            <ul>
                <li
                    :class="type === item && 'type-active'"
                    v-for="item in typeList"
                    :key="item"
                    @click="handleChangeType(item)"
                >
                    {{ item }}
                </li>
            </ul>
        </div>
        <div class="right-wrap box" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
            <div class="content" v-if="list.length>0">
                <table
                    width="auto"
                    border="0"
                    v-for="item in list"
                    :key="item.Title"
                >
                    <thead>
                        <tr>
                            <td
                                :colspan="Object.keys(labelArr).length"
                                style="background: #ecf5ff"
                            >
                                商品名称：{{ item.Title }}
                            </td>
                        </tr>
                    </thead>
                    <tbody v-for="item2 in item.ItemList" :key="item2.Code">
                        <tr>
                            <td
                                :colspan="Object.keys(labelArr).length"
                                style="background: #ecf5ff"
                            >
                                合约代码：{{ item2.Code }}
                            </td>
                        </tr>
                        <tr>
                            <td v-for="val in labelArr" :key="val">
                                {{ val }}
                            </td>
                        </tr>
                        <tr v-for="item3 in item2.Item" :key="item3.Rank">
                            <td v-for="(val, key) in labelArr" :key="val">
                                {{item3.Rank==999&&key=='Rank'?'合计':item3[key]}}
                            </td>
                        </tr>
                        <!-- <tr>
                            <td v-for="(val, key) in labelArr" :key="val">
                                {{
                                    val === "名次"
                                        ? "合计"
                                        : val === "会员简称" || val === "指标ID"
                                        ? ""
                                        : handleValCount(item2.Item, key)
                                }}
                            </td>
                        </tr> -->
                    </tbody>
                </table>
            </div>
            <div class="empty-wrap" v-else>
                <img width="300" :src="require('@/assets/img/data_m/nodata.png')" alt="">
                <p style="margin-top:-50px">没有此日期的数据，请重新选择查询日期</p>
            </div>
        </div>
    </div>
</template>

<script>
// 上海期货交易所
import { dataInterence } from "@/api/api.js";
import http from "@/api/http.js";
export default {
    name: "上海期货交易所",
    data() {
        return {
            labelArr: {
                Rank: "名次",
                DealShortName: "会员简称",
                DealCode: "指标ID",
                DealValue: "成交量（手）",
                DealChange: "增减量",
                BuyShortName: "会员简称",
                BuyCode: "指标ID",
                BuyValue: "持买仓量",
                BuyChange: "增减量",
                SoldShortName: "会员简称",
                SoldCode: "指标ID",
                SoldValue: "持卖仓量",
                SoldChange: "增减量",
            },
            time: '',
            type: "全部",
            typeList: [],
            list: [],
            loading:false,
        };
    },
    created() {
        // this.getLastWorkDay()
        this.getClassifyList();
    },
    methods: {
        // 获取上个工作日
        getLastWorkDay(){
            const today=new Date()
            let lastWorkDay=http.dateFormatter(new Date(today.getTime()-86400000),false).replace(/\./g,'-') //默认昨天
            if(today.getDay()===0){//周日
                lastWorkDay=http.dateFormatter(new Date(today.getTime()-86400000 * 2),false).replace(/\./g,'-')
            }else if(today.getDay()===6){//周六
                lastWorkDay=http.dateFormatter(new Date(today.getTime()-86400000 ),false).replace(/\./g,'-')
            }else if(today.getDay()===1){//周一
                lastWorkDay=http.dateFormatter(new Date(today.getTime()-86400000*3 ),false).replace(/\./g,'-')
            }
            this.time=lastWorkDay
        },

        // 分类切换
        handleChangeType(e) {
            this.type = e;
            this.getData();
        },

        // 时间切换
        handleTimeChange(){
            this.getData();
        },

        // 计算合计
        handleValCount(list, key) {
            let count = 0;
            list&&list.forEach((item) => {
                count = count + Number(item[key]);
            });
            return count;
        },

        // 获取分类
        async getClassifyList(){
            const res=await dataInterence.getResearcherClassifyList({
                Exchange:'shanghai'
            })
            if(res.Ret===200){
                this.typeList=res.Data&&res.Data[0]||[]
                this.time=res.Data&&res.Data[1][0]||''
                this.typeList.unshift('全部')
                this.type=this.typeList[0]||'全部'
                this.getData()
            }
        },

        // 获取数据
        async getData() {
            $('.content').animate({scrollTop:0},0)
            this.loading=true
            const res = await dataInterence.getShFuturesData({
                Date: this.time,
                ClassifyName:this.type==='全部'?'':this.type
            });
            setTimeout(() => {
                this.loading=false
            }, 200);
            
            if(res.Ret===200){
                this.list=res.Data||[]
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "../css/exchangedata.scss";
</style>
