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

const route = useRoute()

const { width, height } = useWindowSize()

const props=defineProps({
    defaultData:null,
    userOpts: [],
    varietyOpts:[],
    isCreator:false
})
const emits=defineEmits(['close','confirm'])

console.log(props)

const baseInfo=reactive({
    chapterName: props.defaultData?.Title||'',
    varietys:props.defaultData?.PermissionIdList||[],
    editors: props.defaultData?.GrandAdminIdList || []
})

const editorsLabel = computed(() => {
    if(!baseInfo.editors.length) return ''

    return props.userOpts.filter(_ => baseInfo.editors.includes(_.AdminId)).map(_ => _.AdminName).join(',')
})
const varietysLabel = computed(() => {
    if(!baseInfo.varietys.length) return ''

    return props.varietyOpts.filter(_ => baseInfo.varietys.includes(_.PermissionId)).map(_ => _.PermissionName).join(',') 
})


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


//品种
const showReportVarietyPop = ref(false)
const temReportVarietyVal = ref('')
function handleShowReportVariety() {
    temReportVarietyVal.value = baseInfo.varietys
    showReportVarietyPop.value = true
}
function handleConfirmReportVariety() {
    baseInfo.varietys = temReportVarietyVal.value
    showReportVarietyPop.value = false
}



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

async function handleSave(){
    if(!baseInfo.chapterName){
        showToast('请输入章节名称')
        return
    }
    let params = {
        Title: baseInfo.chapterName,
        PermissionIdList: baseInfo.varietys,
        AdminIdList: baseInfo.editors
      }

    const res = props.defaultData
        ? await apiReport.editChapterBase({
        ReportChapterId: props.defaultData.ReportChapterId,
        ...params
        })
        : await apiReport.addChapter({
            ReportId:  Number(route.query.id),
            ...params
        })
    if(res.Ret !== 200) return

    showToast(res.Msg)

    emits('confirm',baseInfo)
}

</script>

<template>
    <div class="chapter-baseinfo-wrap">
        <van-cell-group>
            <van-field 
                v-model="baseInfo.chapterName"
                label="章节名称"
                placeholder="请输入章节名称"
                input-align="right"     
                required
            />
        </van-cell-group>
        <van-cell-group v-if="isCreator">
            <van-cell 
                value-class="cell-con"
                title="关联品种" 
                :value="varietysLabel"
                is-link 
                @click="handleShowReportVariety"
            />
        </van-cell-group>
        <van-cell-group v-if="isCreator">
            <van-cell 
                value-class="cell-con" 
                title="编辑人" 
                is-link 
                :value="editorsLabel"
                @click="handleShowReportAuthor"
            />
        </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="showReportVarietyPop"
        position="bottom"
        :style="{ height: '100%' }"
    >
        <div class="input-report-title-pop">
            <van-checkbox-group v-model="temReportVarietyVal">
                <van-checkbox
                    v-for="item in varietyOpts"
                    :key="item.PermissionId"
                    :name="item.PermissionId"
                >{{item.PermissionName}}</van-checkbox>
            </van-checkbox-group>
            <div class="bot-btns">
                <van-button class="bot-btn" type="default" @click="showReportVarietyPop=false">取消</van-button>
                <van-button class="bot-btn" type="primary" @click="handleConfirmReportVariety">确定</van-button>
            </div>
        </div>
    </van-popup>

    <!-- 作者 -->
    <van-popup
        v-model:show="showReportAuthorPop"
        position="bottom"
        :style="{ height: '100%' }"
    >
        <div class="input-report-title-pop">
            <van-checkbox-group v-model="temReportAuthorVal">
                <van-checkbox
                    v-for="item in userOpts"
                    :key="item.AdminId"
                    :name="item.AdminId"
                >{{item.AdminName}}</van-checkbox>
            </van-checkbox-group>
            <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>
    

</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;

    .van-checkbox-group{
        padding: $page-padding;
        flex: 1;
        overflow-y: auto;
        .van-checkbox{
            :deep(.van-checkbox__label){
                padding: 30px 0;
                flex: 1;
                border-bottom: 1px solid $border-color;
            }
        }
    }
    
    .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>