<template>
    <div class="window-height column">
        <div class="user-center-header row items-center">
            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pptTD.png"
                style="height: 24px" />
            <div class="q-ml-lg text-weight-bold" style="font-size: 20px">
                工作台
            </div>
            <div class="user-center-menu column ">
                <el-button class="full-width pingfangr text-weight-bolder" 
                @click="forwardSpace" 
                style="font-size: 14px !important;" icon="arrow-left">返回</el-button>
            </div>
            <div class="col"></div>
            <UserCard :size="33"></UserCard>
        </div>
        <div class="full-height bg-f5">
            <div class="bg-white WorkbenchInTabBox">
                <div class="q-px-lg row flex-between">
                    <div class="row WorkbenchInTab fz14 text-weight-bolder microsoft">
                        <div class="active cusor-pointer">全部</div>
                    </div>
                    <div class="WorkbenchInDel fz14 microsoft cusor-pointer">
                        <span>回收站</span>
                    </div>
                </div>
            </div>

            <div class="q-px-lg">
                <div class="col row flex-between q-px-lg q-py-md">
                    <div class="row items-center wrap WorkbenchInSea">
                      <div class="row items-center q-mb-sm">
                        <el-input class="microsoft" style="max-width:150px" 
                        v-model="queryObj.Title" placeholder="搜索关键字"
                        clearable
                        @keyup.enter="search">
                            <template #prefix>
                                <el-icon class="el-input__icon"><Search /></el-icon>
                            </template>
                        </el-input>
                      </div>
                      <div class="row items-center bg-white q-ml-lg q-mb-sm" style="border-radius: 5px;height: 34px;">
                        <div class="row items-center">
                            <el-input class="microsoft" style="max-width:150px" 
                            v-model="queryObj.Title" placeholder="出行地点"
                            clearable
                            @keyup.enter="search">
                            <template #prefix>
                                <el-icon class="el-input__icon"><Location /></el-icon>
                            </template>
                          </el-input>
                        </div>
                        <div class="WorkbenchInSeaLin"></div>
                        <div class="row items-center">
                            <el-input class="microsoft" style="max-width:150px" 
                            v-model="queryObj.Day" placeholder="出行天数"
                            clearable
                            @keyup.enter="search">
                                <template #prefix>
                                    <el-icon class="el-input__icon"><Sunny /></el-icon>
                                </template>
                            </el-input>
                        </div>
                        <div class="WorkbenchInSeaLin"></div>
                        <div class="row items-center">
                            <el-date-picker style="max-width:300px" 
                                v-model="dateTime"
                                type="daterange"
                                start-placeholder="开始"
                                end-placeholder="结束"
                                format="YYYY-MM-DD"
                                date-format="YYYY-MM-DD"
                                value-format="YYYY-MM-DD">
                            </el-date-picker>
                        </div>
                      </div>
                      <div class="row items-center q-ml-lg q-mb-sm">
                        <el-input class="microsoft" style="max-width:150px" 
                        v-model="queryObj.Title" placeholder="相关POI"
                        clearable
                        @keyup.enter="search">
                            <template #prefix>
                                <el-icon class="el-input__icon"><Fries /></el-icon>
                            </template>
                        </el-input>
                      </div>
                      <div class="row items-center q-ml-lg q-mb-sm">
                        <el-checkbox v-model="queryObj.Star" label="星标" size="large" />
                      </div>
                    </div>
                    <div class="row nowrap" style="flex-shrink: 0;">
                        <el-button class="q-pl-lg microsoft"
                        size="Default" type="primary" icon="plus" @click="addCreateProject"
                        > 新建</el-button>
                    </div>
                </div>
                <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-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>

            
        </div>
       
    </div>
    <el-dialog v-model="addDialogFormVisible" title="" width="420" @close="close" @closed="closed">
        <template #header>
            <div class="text-title text-left fz16 PingFangSC">创建出行项目</div>
        </template>
        <NewProject :addDialogFormVisible="addDialogFormVisible"></NewProject>
        <template #footer>
            <div class="dialog-footer">
              <el-button link type="primary" @click="addDialogFormVisible = false">跳过</el-button>
            </div>
        </template>
    </el-dialog>
    
    
</template>

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

    const router = useRouter()
    const useMenu = useMenuStore();
    const menus = ref(useMenu.getWorkbenchMenu);
    const { model } = storeToRefs(useScreenStore())
    
    const addDialogFormVisible = ref(false)
    const dateTime = ref('')
    const dataList = ref([] as Array < any > );
    const loading = ref(false as any)
    const deleteLoading = ref<any>(null)
    const queryObj = reactive({
        pageIndex: 1,
        pageSize: 20,
        LineId: 0, //线路Id
        Title: '', //模板名称
        CountryName: '', //国家名称
        SeasonName: '', //季节名称
        ColorName: '', //颜色名称
        CountryNames: [], //国家名称
        SeasonNames: [], //季节名称
        ColorNames:  [], //颜色名称
        pageCount: 0, //总页数
        TempType: 0,
        TemplateType: 0,//0 不限 1模版 2广告
        type: 0,
        OrderByType: 1,//排序方式
        QAuthType: '',//1-免费，2-VIP，3-私有
        Star: false,
    })
    const WorkProject = ref({} as any)
    provide(injectKeyPublic,WorkProject)
    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 addCreateProject = () => {
        addDialogFormVisible.value = true
    }
    const search = () => {
        
    }
    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')

    // queryBySearchHandler()
</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>
