<script setup>
import {ref,onMounted,watch,computed} from 'vue'
import { V3ColorPicker } from "v3-color-picker-teleport"
import {sameOptionType} from '@/hooks/chart/config'
import _ from 'lodash'
// import apiChart from '@/api/chart'
import SourceDetail from '@/views/chartETA/components/SourceDetail.vue'
import {useCopyEdbData} from '@/hooks/edb/useCopyEdbData'
import {myETABtn,useAuthBtn} from '@/hooks/useAuthBtn'
const {checkAuthBtn} = useAuthBtn()
const {copyData} =useCopyEdbData()

const leadUnitOpt=[{text:'年'}, {text:'季'}, {text:'月'}, {text:'周'}, {text:'天'}]//领先指标频度配置

const props=defineProps({
    show:{
        type:Boolean,
        default:false
    },
    data:{
        type:Object,
        default:{}
    },
    tableData:{
        type:Array,
        default:[]
    },
    chartInfo:{
        type:Object,
        default:{}
    }
})
const emit=defineEmits(['change'])

const temData=ref(_.cloneDeep(props.data)||{})

watch(
    ()=>props.show,
    (n)=>{
        if(!n){
            temData.value={}
        }else{
            temData.value=_.cloneDeep(props.data)
        }
    }
)

const list=[
    {
        name:"指标名称",
        key:"EdbName"
    },
    {
        name:"指标ID",
        key:"EdbCode"
    },
    {
        name:"更新频度",
        key:"Frequency"
    },
    {
        name:"单位",
        key:"Unit"
    },
    {
        name:"起始时间",
        key:"StartDate"
    },
    {
        name:"最新日期",
        key:"LatestDate"
    },
    {
        name:"最新值",
        key:"LatestValue"
    },
    {
        name:"最近更新",
        key:"LatestDate"
    },
    {
        name:"数据来源",
        key:"SourceName"
    }
]

const showYOptionsHandle=computed(()=>{
    let isShowOptions = true;
    // 图表类型不是堆叠或组合 y轴配置显示
    // 堆叠图类型第一个指标的y轴配置显示 其余不显示
    // 组合图类型 组合样式不是堆叠 显示
    //组合图类型 组合样式是堆叠 第一个堆叠的y轴配置显示 其余相同样式堆叠不显示
    const index=props.tableData.findIndex(_=>_.EdbInfoId==props.data.EdbInfoId)
    if([3,4].includes(props.chartInfo.ChartType) && index !== 0) {
        isShowOptions = false
    } else if(props.chartInfo.ChartType ===6 
        && ['areaspline','column'].includes(props.data.ChartStyle) 
        && index !== props.tableData.findIndex(_ => _.ChartStyle === props.data.ChartStyle)) {
        isShowOptions = false
    }

    return isShowOptions;
})

let isMounted=ref(false)
const selectColorIns=ref(null)
onMounted(()=>{
    isMounted.value=true
})

// 是否修改了指标
const isEdit=computed(()=>{
    let flag=false
    if(temData.value.EdbInfoType!=props.data.EdbInfoType) flag=true
    if(temData.value.LeadValue!=props.data.LeadValue) flag=true
    if(temData.value.LeadUnit!=props.data.LeadUnit) flag=true

    return flag
})

// 确定修改图
function handleConfirmChange(){
    emit('change',temData.value,isEdit.value)

}

// 领先指标单位修改
function handleLeadUnitChange(e){
    temData.value.LeadUnit=e.text
}

// 显示数据来源历史
const showSourceDetail=ref(false)

function handleCopyEDBData(){
    copyData(props.data)
}

</script>

<template>
    <div class="edb-info-wrap">
        <div class="top-box">
            <span class="title">指标详情</span>
        </div>
        <div class="con-box">
            <ul class="info-list">
                <li class="item" v-for="item in list" :key="item.key">
                    <span class="lable">{{item.name}}</span>
                    <span class="text">{{data[item.key]}}</span>
                    <van-icon name="arrow" v-if="item.key==='SourceName'&&data.EdbType===2" @click="showSourceDetail=true" />
                </li>
            </ul>
            <div class="opt-box" v-if="data.HaveOperaAuth">
                <div class="lable">指标操作</div>
                <div class="con">
                    <!--<template v-if="sameOptionType.includes(chartInfo.ChartType) && chartInfo.ChartType!==5 && chartInfo.Source===1">
                    <div class="item-box" v-if="showYOptionsHandle">
                        <div 
                            :class="['radio-box',temData.IsOrder?'active':'']"
                            @click="temData.IsOrder=!temData.IsOrder"
                        >
                            <div class="radius-box"></div>
                            <div class="text">逆序</div>
                        </div>
                        <div class="btn-box" style="margin-left:20px">
                            <span 
                                :class="['btn',temData.IsAxis==1?'active':'']"
                                @click="temData.IsAxis=1"
                            >左轴</span>
                            <span 
                                :class="['btn',temData.IsAxis==0?'active':'']"
                                @click="temData.IsAxis=0"
                            >右轴</span>
                            <span
                                class="btn disabled"
                                v-if="(tableData.findIndex(_ => _.IsAxis===0) === -1) 
                                        || (temData.IsAxis==0&& tableData.filter(_ => _.IsAxis===0).length === 1)"
                            >右2轴</span>
                            <span 
                                v-else
                                :class="['btn',temData.IsAxis==2?'active':'']"
                                @click="temData.IsAxis=2"
                            >右2轴</span>
                        </div>
                    </div>
                    <div class="item-box" style="display:block">
                        <div 
                            :class="['radio-box',temData.EdbInfoType==1?'active':'']"
                            @click="temData.EdbInfoType=1"
                        >
                            <div class="radius-box"></div>
                            <div class="text">标准指标</div>
                        </div>

                        <div style="display:flex;align-items: center;margin-top:10px">
                            <div 
                                :class="['radio-box',temData.EdbInfoType==0?'active':'']" 
                                style="margin-right:20px"
                                @click="temData.EdbInfoType=0"
                            >
                                <div class="radius-box"></div>
                                <div class="text">领先指标</div>
                            </div>
                            <template v-if="temData.EdbInfoType==0">
                            <div class="step-box">
                                <van-stepper input-width="40px" min="0" integer v-model.number="temData.LeadValue" />
                            </div>
                            <van-popover 
                                :actions="leadUnitOpt"
                                placement="top"
                                @select="handleLeadUnitChange"
                            >
                                <template #reference>
                                    <span class="lead-unit">{{temData.LeadUnit||'无'}}</span>
                                </template>
                            </van-popover>
                            </template>
                            
                        </div>
                    </div>

                    <div class="item-box">
                        <span style="margin-right:20px">线条颜色</span>
                        <v3-color-picker
                            v-if="isMounted&&selectColorIns"
                            :btn="true" 
                            v-model:value="temData.ChartColor" 
                            size="medium"
                            theme="light"
                            teleport='#select-color-box'
                        ></v3-color-picker>
                        <span id="select-color-box" ref="selectColorIns"></span>
                    </div>
                    <div class="item-box" v-if="chartInfo.ChartType === 1||(chartInfo.ChartType === 6 && props.data.ChartStyle==='spline')">
                        <span style="margin-right:20px">线条粗细</span>
                        <div class="step-box">
                            <van-stepper input-width="40px" v-model.number="temData.ChartWidth" />
                        </div>
                    </div>
                    </template>-->
                    <div class="item-box" v-if="checkAuthBtn(myETABtn.myChart_checkData)||checkAuthBtn(myETABtn.myChart_copyData)">
                        <van-button color="#F2F3FF" size="small" style="color:#0052D9;margin-right:10px" @click="handleCopyEDBData" v-permission="myETABtn.myChart_copyData">复制数据</van-button>
                        <van-button color="#0052D9" size="small" v-permission="myETABtn.myChart_checkData">查看数据</van-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="confirm-btn" @click="handleConfirmChange" v-if="sameOptionType.includes(chartInfo.ChartType) && chartInfo.ChartType!==5">确定</div>
    </div>
    <!--  数据来源弹窗-->
    <van-popup
        v-model:show="showSourceDetail"
        position="center"
        round
        closeable
        :style="{ width: '400px'}"
    >
        <SourceDetail
            :show="showSourceDetail"
            :EdbInfoId="data.EdbInfoId"
        />
    </van-popup> 
</template>

<style lang="scss" scoped>
.edb-info-wrap{
    .top-box{
        padding: 32px $page-padding;
        border-bottom: 1px solid $border-color;
        .title{
            font-size: 32px;
            font-weight: 600;
        }
    }
    .con-box{
        max-height: 60vh;
        overflow-y: auto;
        &::-webkit-scrollbar{
            display: none;
        }
    }
    .info-list{
        padding: $page-padding;
        padding-bottom: 40px;
        .item{
            display: flex;
            justify-content: space-between;
            padding: 32px 0;
            border-bottom: 1px solid $border-color;
            .lable{
                flex-shrink: 0;
            }
            .text{
                width: 70%;
                text-align: right;
                color: $font-grey_999;
            }
        }
    }

    .opt-box{
        .lable{
            padding-left: $page-padding;
            padding-bottom: $page-padding;
            font-weight: 600;
            font-size: 36px;
            border-bottom: 1px solid $border-color;
        }
        .con{
            padding:0 $page-padding;
            .radio-box{
                display: flex;
                align-items: center;
                &.active{
                    .radius-box::after{
                        content:'';
                        display: block;
                        width: 16px;
                        height: 16px;
                        background-color: $theme-color;
                        border-radius: 50%;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%,-50%);
                    }
                }
                .radius-box{
                    display: block;
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    border: 1px solid $theme-color;
                    margin-right: 14px;
                    position: relative;
                }
                .text{
                    font-size: 32px;
                }
            }
            .btn-box{
                .btn{
                    min-width: 140px;
                    line-height: 56px;
                    font-size: 28px;
                    font-weight: 600;
                    text-align: center;
                    padding: 0 10px;
                    display: inline-block;
                    border: 1px solid $theme-color;
                    color: $theme-color;
                    &.active{
                        color: #fff;
                        background-color: $theme-color;
                    }
                    &.disabled{
                        color: $font-grey_999;
                        border-color: $border-color;
                    }
                }

            }
            .step-box{
                display: inline-block;
                :deep(.van-stepper){
                    display: flex;
                    justify-content: center;
                }
            }
            
            .item-box{
                border-bottom: 1px solid $border-color;
                padding: 44px 0;
                display: flex;
                align-items: center;
                :deep(.v3-c-p .c-p-t){
                    border: none;
                }
                :deep(.v3-c-p .c-p-c){
                    border: none;
                    border-radius: 50%;
                    overflow: hidden;
                }
                :deep(.v3-c-p .c-p-i){
                    display: none;
                }

            }
            .lead-unit{
                padding: 5px 10px;
            }
        }

        #select-color-box{
            display: inline-block;
            width: 50px;
            height: 50px;
            :deep(.color-picker){
                box-sizing: content-box;
            }
        }
    }

    .confirm-btn{
        border-top: 20px solid #F2F6FA;
        line-height: 112px;
        text-align: center;
        color: $theme-color;
        font-size: 32px;
    }

}
@media screen and (min-width:$media-width){
    .edb-info-wrap{
        display: flex;
        flex-direction: column;
        height: 100%;
        .top-box{
            padding: 16px;
            .title{
                font-size: 18px;
            }
        }
        .con-box{
            flex: 1;
            max-height: 100%;
        }
        .info-list{
            padding: 16px;
            padding-bottom: 20px;
            .item{
                padding: 16px 0;
            }
        }
        .opt-box{
            .lable{
                padding-left: 16px;
                padding-bottom: 16px;
                font-size: 18px;
            }
            .con{
                padding: 0 16px;
                .radio-box{
                    &.active{
                        .radius-box::after{
                            width: 8px;
                            height: 8px;
                        }
                    }
                    .radius-box{
                        width: 16px;
                        height: 16px;
                        margin-right: 7px;
                    }
                    .text{
                        font-size: 16px;
                    }
                }
                .btn-box{
                    .btn{
                        min-width: 40px;
                        line-height: 28px;
                        font-size: 14px;
                        padding: 0 10px;
                    }
                }
                .item-box{
                    padding: 20px 0;
                }
            }
            #select-color-box{
                width: 25px;
                height: 25px;
                position: relative;
                :deep(.color-picker){
                    left: 100px !important;
                }
            }

        }


        .confirm-btn{
            border-top-width: 8px;
            line-height: 56px;
            font-size: 16px;
        }
    }
}
</style>