<script setup>
import {ref} from 'vue'
import { Sticky,Popup,Cascader  } from 'vant';
import swiperCalendar from '../components/swiperCalendar.vue';
import {apiSystemUsers,apiBusinessTripCalendar} from '@/api/ssbg/api'
import moment from 'moment';
import 'moment/dist/locale/zh-cn';
import { useRoute } from 'vue-router';
moment.locale('zh-cn');

const route=useRoute()
localStorage.setItem('ssbg-token',route.query.token);
document.title = '出差日历';

const IsBusinessTrip=ref(route.query.IsBusinessTrip||false)//是否为审批人

const swiperCalendarRef=ref(null)

// 选择用户
const userFieldNames=ref({
    text: 'RealName',
    value: 'AdminId',
    children: 'ChildrenList',
})
let selectUserShow=ref(false)
let selectUserValue=ref('')
let lastSelectVal=''
let userOpts=ref([])
function onFinish(e){

    if(lastSelectVal!=selectUserValue.value){
        lastSelectVal=e.value
    }else{//点击的上次选中的人 则重置掉
        selectUserValue.value=''
        lastSelectVal=''
    }
    getInfo()
    selectUserShow.value=false
}

// 获取系统中所有用户’
function getSystemUsers(){
    apiSystemUsers().then(res=>{
        if(res.code==200){
            userOpts.value=res.data.List||[]
        }
    })
}
getSystemUsers()

// 添加申请
function goAddApply(){
    wx.miniProgram.navigateTo({
        url: `/pages-approve/businessTrip/add`,
    });
}

// 切换到今天
function goToDay(){
    swiperCalendarRef.value.getRecentWeek(moment().format('YYYY-MM-DD'))
    swiperCalendarRef.value.selectDateHandle(moment().format('YYYY-MM-DD'),1)
}

//选择的日期改变
let selectDateVal=ref(moment().format('YYYY-MM-DD'))
function datechangeHandle(e){
    selectDateVal.value=e
    getInfo()
}

// 表单数据
let listData=ref([])
let loading=ref(false)
function getInfo(){
    loading.value=true
    listData.value=[]
    apiBusinessTripCalendar({
        TripDate:selectDateVal.value,
        AdminId:selectUserValue.value
    }).then(res=>{
        loading.value=false
        if(res.code===200){
            const arr=res.data||[]
            let temArr=[]
            arr.forEach(item => {
                temArr.push({
                    ...item,
                    tableName:item.ApplyRealName
                })
                if(item.PeerPeopleList){
                    item.PeerPeopleList.forEach(_item=>{
                        temArr.push({
                            ...item,
                            tableName:_item.PeerPeopleName,
                            GroupName:_item.PeerGroupName
                        })
                    })
                }
            });
            listData.value=temArr
        }
    })
}
getInfo()

// 显示详情
let showDetail=ref(false)
let detailInfo=ref(null)
function handleShowDetail(item){
    if(item.Status=='待审批'){
        wx.miniProgram.navigateTo({
            url: `/pages-approve/businessTrip/detail?id=`+item.BusinessApplyId,
        });
        return
    }
    detailInfo.value=item
    showDetail.value=true
}

</script>

<template>
    <div class="business-trip-page">
        <Sticky>
            <div class="header">
                <swiperCalendar @dateChange="datechangeHandle" ref="swiperCalendarRef"/>
            </div>
        </Sticky>
        <div class="top-date-box">{{moment(selectDateVal).format('MM/DD')}}({{moment(selectDateVal).format('ddd')}})</div>
        <div class="empty-box" v-if="!loading&&listData.length==0">暂无数据</div>
        <div class="table-box" v-else>
            <div class="item" v-for="item in listData" :key="item.BusinessApplyId" @click="handleShowDetail(item)">
                <div class="left">{{item.tableName}}({{item.GroupName}})</div>
                <div :class="['right',item.Status=='待审批'?'yellow-text':'']">{{item.Province}}{{item.City}}（{{item.DayTotal}}天）</div>
            </div>
        </div>
        <div class="fix-bot-action">
            <div class="action-box">
                <div class="item" @click="goAddApply" v-if="IsBusinessTrip!='true'">
                    <img src="@/assets/ssbg/icon-add.png" alt="">
                    <div>添加申请</div>
                </div>
                <div class="item" @click="goToDay">
                    <img src="@/assets/ssbg/calendar_ico.png" alt="">
                    <div>今天</div>
                </div>
                <div class="item" @click="selectUserShow=true">
                    <img src="@/assets/ssbg/choose_ico.png" alt="">
                    <div>选择用户</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 选择用户弹窗 -->
    <Popup 
        v-model:show="selectUserShow" 
        round 
        position="bottom"
    >
        <Cascader
            v-model="selectUserValue"
            title="请选择用户"
            :options="userOpts"
            :field-names="userFieldNames"
            active-color="#3385FF"
            @close="selectUserShow = false"
            @finish="onFinish"
        />
    </Popup>

    <!-- 详情 -->
    <Popup 
        v-model:show="showDetail" 
        round 
        position="center"
    >
        <div class="detail-wrap">
            <div class="content">
                <h2 class="title">出差详情</h2>
                <div>{{moment(detailInfo.ArriveDate).format('MM.DD (ddd)')}}--{{moment(detailInfo.ReturnDate).format('MM.DD (ddd)')}}</div>
                <div class="item-info">
                    <span>申请人:</span>
                    <span>{{detailInfo.ApplyRealName}}</span>
                </div>
                <div class="item-info">
                    <span>目的地:</span>
                    <span>{{detailInfo.Province}}{{detailInfo.City}}</span>
                </div>
                <div class="item-info">
                    <span>出差事由:</span>
                    <span>{{detailInfo.Reason}}</span>
                </div>
                <div class="item-info">
                    <span>交通工具:</span>
                    <span>{{detailInfo.Transportation}}</span>
                </div>
                <div class="item-info" v-if="detailInfo.PeerPeopleName">
                    <span>同行人:</span>
                    <span>{{detailInfo.PeerPeopleName}}</span>
                </div>
            </div>
            <div class="btn" @click="showDetail=false">知道了</div>
        </div>
    </Popup>
</template>

<style lang="scss" scoped>
.business-trip-page{
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: calc(150px + constant(safe-area-inset-bottom));
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
    .header{
        padding-top: 20px;
        padding-bottom: 20px;
        background-color: #fff;
    }
    .top-date-box{
        text-align: center;
        border-top: 1px solid #f5f5f5;
        font-size: 32px;
        padding: 20px 0;
        background-color: #fff;
    }
    .table-box{
        background-color: #fff;
        margin-top: 10px;
        .item{
            display: flex;
            border-bottom: 1px solid #f5f5f5;
            font-size: 32px;
            .left{
                flex: 1;
                border-right: 1px solid #f5f5f5;
                padding: 34px 20px;
            }
            .right{
                flex: 2;
                padding: 34px 20px;
            }
            .yellow-text{
                color: #FF8A00;
                position: relative;
                &::after{
                    content: '';
                    display: block;
                    width: 80px;
                    height: 80px;
                    background-image: url('@/assets/ssbg/icon-tag.png');
                    background-size: cover;
                    position: absolute;
                    top: 0;
                    right: 0;
                }
            }
        }
    }

    .empty-box{
        text-align: center;
        padding-top: 150px;
    }

    .fix-bot-action{
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99;
        background-color: #fff;
        box-shadow: 0px -3px 6px rgba(172, 172, 172, 0.16);
        padding-top: 15px;
        padding-bottom: calc(15px + constant(safe-area-inset-bottom));
        padding-bottom: calc(15px + env(safe-area-inset-bottom));
        .action-box{
            display: flex;
            align-items: center;
            justify-content: space-around;
            color: #3385FF;
            img{
                width: 40px;
                display: block;
                margin: 0 auto;
            }
        }
    }

}
.detail-wrap{
    width: 85vw;
    .content{
        padding: 30px;
        font-size: 32px;
        .title{
            font-size: 34px;
            text-align: center;
        }
        .item-info{
            margin-top: 10px;
            display: flex;
            span:first-child{
                width: 150px;
                flex-shrink: 0;
                margin-right: 10px;
                text-align: right;
            }
            span:last-child{
                flex: 1;
            }
        }
    }
    .btn{
        height: 82px;
        border-top: 1px solid #F0F0F0;
        color: #3385FF;
        font-size: 32px;
        text-align: center;
        line-height: 80px;
    }
}
</style>