<script setup>
import moment from 'moment'
import {computed,ref} from 'vue'
import { useRouter } from "vue-router"


const router=useRouter()

const props=defineProps({
    num:Number,
    time:String,
    exchange:String,
    list:null
})

const isHistory=ref(false)//是否显示历史合约

const clist=computed(()=>{
    if(isHistory.value){
        console.log('看历史');
        return props.list
    }

    const now=moment().format('YYMM')//当前时间
    const arr=props.list?JSON.parse(JSON.stringify(props.list)):[]
    let resArr=[]
    if(props.exchange!='郑商所'){
        resArr=arr.map(item=>{
            item.items=item.items.filter(_item=>{
                const t=_item.classify_type.substr(-4)
                return Number(t)>=now
            })
            return item
        })
    }else{
        resArr=arr.map(item=>{
            item.items=item.items.filter(_item=>{
                // 如果合约编号没有含日期 肯定是少于4位的 因为至少为一个字母加三位数的日期
                if(_item.classify_type.length<4) return true
                const t=2+_item.classify_type.substr(-3)
                return Number(t)>=now
            })
            return item
        })
    }

    return resArr
})


function goDetail(_item,item){
    router.push({
        path:"/positionanalysis/detail",
        query:{
            classify_name:item.classify_name,
            classify_type:_item.classify_type,
            exchange:props.exchange
        }
    })      
}

</script>

<template>
    <div class="index-content-wrap">
        <div class="top-box">
            <span style="margin-right:20px">{{num}}品种</span>
            <span>{{time}}</span>
        </div>
        <div style="margin:30px 0">
            <el-switch
                v-model="isHistory"
                size="large"
                active-text="历史合约"
            />
        </div>
        <div class="list-wrap">
            <div class="flex item" v-for="item in clist" :key="item.classify_name">
                <div class="label">{{item.classify_name}}</div>
                <div style="flex:1">
                    <div 
                        class="opt" 
                        v-for="_item in item.items" 
                        :key="_item.classify_type"
                        @click="goDetail(_item,item)"
                    >{{_item.classify_type}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.index-content-wrap{
    .top-box{
        background: #FFFBF5;
        padding: 15px 30px;
        span{
            display: inline-block;
        }
    }
    .list-wrap{
        padding: 30px 0;
        .item{
            margin-bottom: 40px;

            .label{
                color: #666;
                width: 100px;
                padding-top: 15px;
                font-size: 14px;
            }
            .opt{
                padding: 6px 10px;
                min-width: 100px;
                text-align: center;
                display: inline-block;
                margin-right: 20px;
                margin-bottom: 20px;
                background: #FFFBF5;
                border: 1px solid #F3A52F;
                border-radius: 4px;
                cursor: pointer;
            }
        }
    }
}
</style>