<script setup>
import moment from 'moment'
import {ref,reactive} from 'vue'
import { showToast } from 'vant'
import { useWindowSize } from '@vueuse/core'


const { width, height } = useWindowSize()

const props=defineProps({
    defaultData:null
})

const emits=defineEmits(['confirm','close'])

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


// 报告标题
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.title){
        showToast('请填写报告标题')
        return
    }
    emits('confirm',reportBaseInfo)
}


function close(){
    emits('close')
}
</script>

<template>
    <div class="dayweek-report-add">
        <van-cell-group>
            <van-cell 
                value-class="cell-con" 
                required 
                title="报告类型" 
                :value="reportBaseInfo.addType"
            />
        </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-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"
            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: 100%;
    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{
        .bot-btns{
            bottom: 24px;
        }
    }
    .input-report-title-pop{
        .bot-btns{
            padding: 10px 0;
        }
    }
}
</style>