<script setup>
import { showToast } from "vant";
import { computed, reactive,ref } from "vue";
import apiReport from '@/api/report'
import moment from "moment";
import { useWindowSize } from '@vueuse/core'


const { width, height } = useWindowSize()

const props=defineProps({
    ticketData:{
        default:[]
    },
    chapterInfo:null,
    defaultData:null
})
const emits=defineEmits(['close','confirm'])

// 获取晨报指标数据
const showTicketPop=ref(false)
let activeTicket=ref([])//选中的指标
const activeTicketArr=computed(()=>{
    return props.ticketData.filter(item=>activeTicket.value.includes(item.BaseColumnId))
})
if(props.chapterInfo.ReportType==='day'){
    props.ticketData.forEach(item => {
        if(item.Selected){
            activeTicket.value.push(item.BaseColumnId)
        }
    });
}

const baseInfo=reactive({
    type:props.defaultData.type||'',
    title:props.defaultData.title||'',
    addType:props.defaultData.addType||1,
    ticket:[],
    author:props.defaultData.author||'',
    createTime:props.defaultData.createTime||moment().format('YYYY-MM-DD'),
})

// 报告新增类型
const showAddTypePop=ref(false)
const addTypeOpts=[
    {
        value:1,
        name:'空白报告'
    },
    {
        value:2,
        name:'继承报告'
    }
]
function getAddTypeName(value){
    return addTypeOpts.filter(item=>item.value===value)[0].name
}
function selectAddType(e){
    baseInfo.addType=e.value
}

// 创建日期
const minDate=new Date(2015, 0, 1)
const defaultDate=ref(new Date())
const showCreateTimePop=ref(false)
function handleShowCreatetime(){
    defaultDate.value=new Date(baseInfo.createTime.replace(/-/g,'/'))
    showCreateTimePop.value=true
}
function handleConfirmCreatime(e){
    baseInfo.createtime=moment(e).format('YYYY-MM-DD')
    showCreateTimePop.value=false
}

// 报告标题
const showReportTitlePop=ref(false)
const temReportTitleVal=ref('')
function handleShowReportTitle(){
    temReportTitleVal.value=baseInfo.title
    showReportTitlePop.value=true
}
function handleConfirmReportTitle(){
    baseInfo.title=temReportTitleVal.value
    showReportTitlePop.value=false
}

//作者
const showReportAuthorPop=ref(false)
const temReportAuthorVal=ref('')
function handleShowReportAuthor(){
    temReportAuthorVal.value=baseInfo.author
    showReportAuthorPop.value=true
}
function handleConfirmReportAuthor(){
    baseInfo.author=temReportAuthorVal.value
    showReportAuthorPop.value=false
}




function close(){
    emits('close')
}

function handleSave(){
    // if(!baseInfo.title){
    //     showToast('请填写标题')
    //     return
    // }
    // 处理晨报选中的指标
    baseInfo.ticket=props.ticketData.map(item=>{
        return {
            ...item,
            Selected:activeTicket.value.includes(item.BaseColumnId)?1:0
        }
    })
    emits('confirm',baseInfo)
}

</script>

<template>
    <div class="chapter-baseinfo-wrap">
        <van-cell-group>
            <van-cell 
                value-class="cell-con"
                title="品种" 
                :value="baseInfo.type"
            />
            <van-cell 
                value-class="cell-con" 
                required 
                title="新增方式" 
                is-link 
                :value="getAddTypeName(baseInfo.addType)" 
                @click="showAddTypePop=true"
            />
            <van-cell 
                value-class="cell-con" 
                title="显示指标" 
                is-link 
                value="" 
                v-if="chapterInfo.ReportType==='day'" 
                @click="showTicketPop=true"
            >
                <template #value>
                    <div class="ticket-name-box">
                        <span style="margin-right:5px">{{activeTicketArr[0]?.BaseColumnName}}</span>
                        <van-tag type="primary" v-if="activeTicketArr.length>1">+{{activeTicketArr.length-1}}</van-tag>
                    </div>
                </template>
            </van-cell>
            <van-cell 
                value-class="cell-con" 
                title="创建人" 
                is-link 
                :value="baseInfo.author"
                @click="handleShowReportAuthor"
            />
            <van-cell 
                value-class="cell-con" 
                title="创建时间" 
                is-link 
                :value="baseInfo.createTime" 
                @click="handleShowCreatetime"
            />
        </van-cell-group>
        <van-cell-group style="margin-top:10px">
             <van-cell value-class="cell-con" required title="标题" is-link :label="baseInfo.title" @click="handleShowReportTitle"/>
        </van-cell-group>


        <div class="bot-btns">
            <van-button class="bot-btn" type="default" @click="close">取消</van-button>
            <van-button class="bot-btn" type="primary" @click="handleSave">保存</van-button>
        </div>
    </div>

    <!-- 新增方式 -->
    <van-action-sheet 
        v-model:show="showAddTypePop"
        cancel-text="取消"
        close-on-click-action
        :actions="addTypeOpts" 
        @select="selectAddType" 
    />

    <!-- 创建日期 -->
    <van-popup 
        v-model:show="showCreateTimePop"
        :position="width>650?'center':'bottom'"
        :style="width>650?{ width: '400px'}:''"
        round
    >
        <van-calendar
            :poppable="false"
            :min-date="minDate"
            :default-date="defaultDate"
            title="选择创建日期"
            @confirm="handleConfirmCreatime"
            :style="{ height: '500px' }"
        />
    </van-popup>

    <!-- 标题 -->
    <van-popup
        v-model:show="showReportTitlePop"
        position="bottom"
        :style="{ height: '100%' }"
    >
        <div class="input-report-title-pop">
             <van-field v-model="temReportTitleVal" placeholder="请输入报告标题" />
            <div class="bot-btns">
                <van-button class="bot-btn" type="default" @click="showReportTitlePop=false">取消</van-button>
                <van-button class="bot-btn" type="primary" :disabled="!temReportTitleVal" @click="handleConfirmReportTitle">确定</van-button>
            </div>
        </div>
    </van-popup>

    <!-- 作者 -->
    <van-popup
        v-model:show="showReportAuthorPop"
        position="bottom"
        :style="{ height: '100%' }"
    >
        <div class="input-report-title-pop">
             <van-field v-model="temReportAuthorVal" placeholder="请输入作者" />
            <div class="bot-btns">
                <van-button class="bot-btn" type="default" @click="showReportAuthorPop=false">取消</van-button>
                <van-button class="bot-btn" type="primary" :disabled="!temReportAuthorVal" @click="handleConfirmReportAuthor">确定</van-button>
            </div>
        </div>
    </van-popup>

    <!-- 选择晨报的指标 -->
    <van-popup
        v-model:show="showTicketPop"
        position="bottom"
        :style="{ height: '100%' }"
    >
        <div class="day-report-ticket-list-wrap">
            <div v-if="ticketData.length==0">
                <img class="list-empty-img" src="https://hzstatic.hzinsights.com/static/ETA_mobile/empty_img.png" alt="">
                <p style="text-align:center;color:#999999;font-size:12px">暂无数据</p>
            </div>
            <ul class="list">
                <van-checkbox-group v-model="activeTicket">
                    <van-checkbox 
                        :name="item.BaseColumnId" 
                        v-for="item in ticketData" 
                        :key="item.BaseColumnId"
                    >{{item.BaseColumnName}}</van-checkbox>
                </van-checkbox-group>
            </ul>
            <div class="btns">
                <van-button type="primary" @click="showTicketPop=false">确定</van-button>
            </div>
        </div>
    </van-popup>
</template>

<style lang="scss" scoped>
.chapter-baseinfo-wrap{
    height: 100%;
    position: relative;
    background: $page-bg-grey;
    :deep(.cell-con){
        flex: 2;
    }
    .bot-btns{
        position: absolute;
        bottom: 48px;
        left: 0;
        width: 100%;
        text-align: center;
    }
}
.bot-btn{
    width: 315px;
    margin: 0 10px;
}
.input-report-title-pop{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: $page-bg-grey;
    
    .bot-btns{
        flex-shrink: 0;
        padding: 20px 0;
        text-align: center;
    }
}

.day-report-ticket-list-wrap{
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .list{
        overflow-y: auto;
        flex: 1;
        padding: var(--van-padding-sm) 0 var(--van-padding-sm) var(--van-padding-sm);
        :deep(.van-checkbox__label){
            flex: 1;
            padding: 32px 0;
            border-bottom: 1px solid $border-color;
        }
    }
    .btns{
        text-align: center;
        padding: var(--van-padding-sm);
        display: flex;
        justify-content: space-around;
        .van-button{
            width: 100%;
        }
    }
}

@media screen and (min-width:$media-width){
    .chapter-baseinfo-wrap{
        .bot-btns{
            bottom: 24px;
        }
    }
    .input-report-title-pop{
        .bot-btns{
            padding: 10px 0;
        }
    }

}
</style>