<template>
    <div class="q-px-lg">
        <div class="col q-px-lg">
          <el-table v-loading="loading" ref="dataTableRef" highlight-current-row 
            v-load-more="tableScrollHandler" :data="dataList" class="tableHBEbeef5" height="82vh">
            <el-table-column label="" align="center" width="50">
                <template #default="scope">
                    <el-icon :color="$themeColor"><Star /></el-icon>
                </template>
            </el-table-column>    
            <el-table-column label="项目信息" align="center" width="350">
                    <template #default="scope">
                        
                    </template>
                </el-table-column>
                <el-table-column label="项目状态">
                    <template #default="scope">
                        <el-icon :color="$themeColor"><SuccessFilled /></el-icon>
                        <el-icon color="#ff9632"><Histogram /></el-icon>
                    </template>
                </el-table-column>
                <el-table-column label="行程信息">
                    <template #default="scope">

                    </template>
                </el-table-column>
                <el-table-column label="参与成员" width="200">
                    <template #default="scope">
                        <div>
                            <div>
                                <el-button type="default" link :icon="Edit" size="small" @click="goEditor(scope.row)" class="microsoft">编辑</el-button>
                                <el-dropdown class="q-pl-lg" trigger="click">
                                    <el-icon class="q-pt-sm" size="16" color="#b1b7cf"><MoreFilled /></el-icon>
                                    <template #dropdown>
                                        <el-dropdown-menu class="q-pa-md">
                                            <el-dropdown-item @click="copyData(scope.row)">
                                                <el-button type="default" link :icon="View" size="small" class="microsoft">复制项目</el-button>
                                            </el-dropdown-item>
                                            <el-divider border-style="dashed" />
                                            <el-dropdown-item @click="completeData(scope.row)">
                                                <el-button type="default" link :icon="View" size="small" class="microsoft">完成项目</el-button>
                                            </el-dropdown-item>
                                            <el-dropdown-item @click="OffData(scope.row)">
                                                <el-button type="default" link :icon="View" size="small" class="microsoft">关闭项目</el-button>
                                            </el-dropdown-item>
                                            <el-dropdown-item @click="deleteData(scope.row)">
                                                <el-button type="default" link :icon="Delete" size="small" class="microsoft">删除</el-button>
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </div>
                            <el-button type="primary" circle>周琳</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>  
        </div>
        
    </div>
    
    
</template>

<script lang="ts" setup>
    import { ApiResult } from '@/configs/axios';
    import OrgService from '@/services/OrgService';
    import { storeToRefs } from 'pinia'
    import UserCard from "@/components/User/UserCard.vue";
    import { useMenuStore,useScreenStore } from "@/store";
    import { ref, reactive, watch, inject } from "vue";
    import { useRouter } from "vue-router";
    import { useUserStore } from "@/store/user"
    import { Edit,Delete,View,Search,Location,Sunny,Fries, Star,
        SuccessFilled,Histogram,User } from '@element-plus/icons-vue';
    import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
    import { injectKeyPublic } from '@/types/injectKey';
    import ConfigService from '@/services/ConfigService'

    const search = ref({} as any)
    search.value = inject(injectKeyPublic)

    const queryObj = ref({} as any)
    queryObj.value = search.value.queryObj

    const msg = ref({} as any)
    msg.value = search.value.msg

    const router = useRouter()
    const useMenu = useMenuStore();
    const menus = ref(useMenu.getWorkbenchMenu);
    const { model } = storeToRefs(useScreenStore())
    
    const addDialogFormVisible = ref(false)
    const addSharer = ref(false)
    const dateTime = ref('')
    const dataList = ref([] as Array < any > );
    const loading = ref(false as any)
    const deleteLoading = ref<any>(null)
    const goEditor = (item:any) => {

    }
    const copyData = (item:any) => {

    }
    const completeData = (item:any) => {
        ElMessageBox.confirm(
            `本行程中的项目需求、行程制作、费用核算、行程报价尚未完成，您是否确认忽略以上内容？`,
            '提示',
            {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            }
        ).then(async () => {
            try {
                let queryMsg = {
                    TempId: item.TempId
                }
                deleteLoading.value = ElLoading.service({
                    lock:true,
                    text:'正在处理'
                })
                const response = await ConfigService.SetDeleteTripTemplate(queryMsg)
                if (response.data.resultCode == 1) {
                    queryObj.pageIndex = 1
                    ElMessage({
                        showClose: true,
                        message: `删除行程成功`,
                        type: 'success',
                    })
                    await queryBySearchHandler()
                }else {
                    ElMessage({
                        showClose: true,
                        message: `删除行程失败`,
                        type: 'warning',
                    }) 
                }
                deleteLoading.value.close()
                deleteLoading.value = null
            } catch (error) {}
        }).catch(() => {})
    
    }

    const OffData = (item:any) => {
        ElMessageBox.confirm(
            `若关闭，则该行程的下业务将不能进行编辑，是否确认？`,
            '提示',
            {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            }
        ).then(async () => {
            try {
                let queryMsg = {
                    TempId: item.TempId
                }
                deleteLoading.value = ElLoading.service({
                    lock:true,
                    text:'正在处理'
                })
                const response = await ConfigService.SetDeleteTripTemplate(queryMsg)
                if (response.data.resultCode == 1) {
                    queryObj.pageIndex = 1
                    ElMessage({
                        showClose: true,
                        message: `删除行程成功`,
                        type: 'success',
                    })
                    await queryBySearchHandler()
                }else {
                    ElMessage({
                        showClose: true,
                        message: `删除行程失败`,
                        type: 'warning',
                    }) 
                }
                deleteLoading.value.close()
                deleteLoading.value = null
            } catch (error) {}
        }).catch(() => {})
    
    }

    const deleteData = (item:any) => {
        ElMessageBox.confirm(
            `若删除行程，则所有方案将会删除，是否确认？`,
            '提示',
            {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            }
        ).then(async () => {
            try {
                let queryMsg = {
                    TempId: item.TempId
                }
                deleteLoading.value = ElLoading.service({
                    lock:true,
                    text:'正在处理'
                })
                const response = await ConfigService.SetDeleteTripTemplate(queryMsg)
                if (response.data.resultCode == 1) {
                    queryObj.pageIndex = 1
                    ElMessage({
                        showClose: true,
                        message: `删除行程成功`,
                        type: 'success',
                    })
                    await queryBySearchHandler()
                }else {
                    ElMessage({
                        showClose: true,
                        message: `删除行程失败`,
                        type: 'warning',
                    }) 
                }
                deleteLoading.value.close()
                deleteLoading.value = null
            } catch (error) {}
        }).catch(() => {})
    
    }
    const getAllPeople = async ()=>{
        OrgService.GetAllEmployerAsync().then((res)=>{
            const response = res.data
            if(response.resultCode == ApiResult.SUCCESS && response.data.length>0){
                let arrList = function(list){
                    list.forEach(x=>{
                        x.checked = false
                    })
                }
                arrList(response.data)
                msg.value.allPeoples=response.data
                msg.value.newAllPeoples=response.data
            }
        }).catch(()=>{
        })
    }
    const searchData = () => {
        queryBySearchHandler()
    }
    const queryBySearchHandler = async () => {
        // const parmas = router.currentRoute.value.params
        // if(parmas.temptype) queryObj.TempType = parseInt(parmas.temptype.toString())
        loading.value = true
        try {
            if(queryObj.pageIndex == 1) dataList.value =[]
            const response = await ConfigService.GetManagerTripTemplatePage(queryObj);
            if (response.data.resultCode == 1) {
                let arrList = function(list){
                    list.forEach(x=>{
                        x.checked = false
                    })
                }
                arrList(response.data.data.pageData)
                dataList.value = dataList.value.concat(response.data.data.pageData);
                queryObj.pageCount = response.data.data.pageCount;
            }
            loading.value = false
        } catch (error) {loading.value = false
        }
     
    }
    const tableScrollHandler = ()=>{
        if(queryObj.pageCount>queryObj.pageIndex){
            queryObj.pageIndex++
            queryBySearchHandler()
        }
    }

    const forwardSpace = () => router.push('/space')

    watch(()=>msg.value,(o,n)=>{
        search.value.msg = msg.value
    },{
        deep:true
    })
    watch(()=>queryObj.value,(o,n)=>{
        // queryBySearchHandler()
    },{
        deep:true
    })
    // queryBySearchHandler()
    getAllPeople()
</script>

<style lang="scss" scoped>
.user-center-header {
    padding: 0 40px 0 28px;
    border-bottom: 1px solid #efefef;
    height: 56px;
    color: #000;
}

.user-center-menu {
    width: 90px;
    padding: 20px 0 20px 16px;
    font-family: microsoft yahei;
}

.user-center-body {
    padding: 20px 40px 40px 40px;
}
.WorkbenchInTabBox{
    padding: 8px 20px;
}
.WorkbenchInTab div{
    color: $themeColor
}
.WorkbenchInTab div.active{
    position: relative;
}
.WorkbenchInTab div.active::after{
    content: "";
    display: block;
    position: absolute;
    width: 24px;
    height: 4px;
    background: $themeColor;
    border-radius: 2px;
    bottom: -9px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    
}
.WorkbenchInDel{
    margin-right: -16px;
    border-left: 1px solid #e6e7e8;
}
.WorkbenchInDel span{
    display: inline-block;
    padding: 0 16px;
    position: relative;
    color: #666e76;
    transition: color .3s;
}
.WorkbenchInDel:hover span{
    color: $themeColor;
}
.WorkbenchInSea::v-deep(.el-input__wrapper),.WorkbenchInSea::v-deep(.el-date-editor.el-input__wrapper) {
    box-shadow: 0 0 0 0px var(--el-input-border-color,var(--el-border-color)) inset;
    border: 1px solid #fff;
}
.WorkbenchInSea::v-deep(.el-input__wrapper:hover),.WorkbenchInSea::v-deep(.el-date-editor.el-input__wrapper:hover) {
    border: 1px solid $themeColor;
}
.WorkbenchInSeaLin{
    margin: 7px 0;
    width: 1px;
    background: #dedede;
}
</style>
