<script setup name="ReportDayWeekAdd">
import moment from 'moment'
import {ref,reactive} from 'vue'
import { useRouter } from 'vue-router'
import apiReport from '@/api/report'
import { showToast } from 'vant'
import { useWindowSize } from '@vueuse/core'


const { width, height } = useWindowSize()
const router=useRouter()

// 基本数据
const reportBaseInfo=reactive({
    addType:'',
    title:'',
    author:'弘则研究',
    createtime:moment().format('YYYY-MM-DD'),
})

//报告类型
const showAddTypePop=ref(false)
function handleShowAddType(){
    showAddTypePop.value=true
}
function selectAddType(e){
    reportBaseInfo.addType=e.value
    reportBaseInfo.title=`【弘则FICC${e.value}】`
}

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

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

//作者
const showAuthorPop=ref(false)
const temAuthorVal=ref('')
function handleShowAuthor(){
    temAuthorVal.value=reportBaseInfo.author
    showAuthorPop.value=true
}
function handleConfirmAuthor(){
    reportBaseInfo.author=temAuthorVal.value
    showAuthorPop.value=false
}


// 新增晨报/周报
function handleSave(){
    if(!reportBaseInfo.addType){
        showToast('请选择报告类型')
        return
    }
    if(!reportBaseInfo.title){
        showToast('请填写报告标题')
        return
    }
    if(!reportBaseInfo.createtime){
        showToast('请选择发布时间')
        return
    }
    apiReport.dayWeekReportAdd({
        Title:reportBaseInfo.title,
        ReportType:reportBaseInfo.addType=='晨报'?'day':'week',
        CreateTime:reportBaseInfo.createtime,
        Author:reportBaseInfo.author
    }).then(res=>{
        if(res.Ret===200){
            router.replace({
                path:'/report/chapter/list',
                query:{
                    id:res.Data.ReportId
                }
            })
        }
    })
}


function close(){
    router.back()
}
</script>

<template>
    <div class="dayweek-report-add">
        <van-cell-group>
            <van-cell 
                value-class="cell-con" 
                required 
                title="报告类型" 
                :value="reportBaseInfo.addType" 
                is-link 
                @click="handleShowAddType"
            />
        </van-cell-group>
        <van-cell-group style="margin:10px 0">
            <van-cell required title="报告标题" :label="reportBaseInfo.title" is-link @click="handleShowReportTitle"/>
        </van-cell-group>
        <van-cell-group>
            <van-cell required title="发布时间" :value="reportBaseInfo.createtime" is-link @click="handleShowCreatetime"/>
            <van-cell title="作者" :value="reportBaseInfo.author" is-link @click="handleShowAuthor"/>
        </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="[
            {
                name:'晨报',
                value:'晨报'
            },
            {
                name:'周报',
                value:'周报'
            }
        ]" 
        @select="selectAddType" 
    />

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

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

<style lang="scss" scoped>
.dayweek-report-add{
    height: 100dvh;
    min-height: 95vh;
    position: relative;
    background: #EDEDED;
    :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;
    }
}
@media screen and (min-width:$media-width){
    .dayweek-report-add{
        height: calc(100dvh - 60px);
        min-height: calc(95vh - 60px);
        .bot-btns{
            bottom: 24px;
        }
    }
    .bot-btn{
        margin: 0 10px;
    }
    .input-report-title-pop{
        .bot-btns{
            padding: 10px 0;
        }
    }
}
</style>