<template>
    <div style="display: flex;">
        <div
            style="display: flex;flex-direction: column;background-color: #34424A;border-radius: 20px;width: 500px;align-items: center;height: 600px;margin-top: 50px;">
            <span
                style="width: 110px;height: 40px;background-color: #1D2C3B;margin: 3px 380px 0px 3px;border-radius: 20px;box-shadow: 3px 3px 5px #AAAFB4;color: white;font-weight: 600;display: flex;justify-content: center;align-items: center;">我的统计</span>

            <div style="display: flex;flex-direction: column;justify-content: space-around;margin-top: 80px;">
                <span v-for="(item2,index) in arry" style="color: white;font-size: 25px;font-weight: 300;">{{item2+'车次：'+ myStatistics[item2]}}</span><br />
            </div>

            <div @click="loginout"
                style="cursor: pointer;color: white;background-color: #2A82E4;width: 490px;border-radius: 30px;height: 100px;display: flex;justify-content: center;align-items: center;font-size: 30px;font-weight: 600;margin-top: 129px;">
                下班安全退出</div>
        </div>
        <div style="margin-left: 180px;display: flex;flex-direction: column;margin-top: 30px;">
            <div
                style="display: flex;flex-direction: column;background-color: #1D2C3B;width: 600px;border-radius: 20px;">

                <div v-for="(item, index) in dispachOrder" :key="index" style="display: flex;flex-direction: column;">
                    <div
                        style="box-shadow: 3px 3px 4px #D2D5D7;margin: 3px 0px 0px 3px;background-color: #1D2C3B;display: flex;align-items: center;justify-content: center;width: 100px;height: 30px;border-radius: 30px;">
                        <span style="font-weight: 600;color: white;">{{ driverInfo &&
                            dispachOrder.map(e => e.dispatchcarStatus)[0] === '激活' ? typeMenu[index] : '任务' + (index +
                                1)
                            }}</span>
                    </div><br />

                    <div>

                        <span style="color: #F3F4F5;font-size: 20px;margin-left: 255px;">{{
                            item.fitemname }}</span>
                        <div style="display: flex;">
                            <span style="margin-top: 10px;margin-left: 40px;"><el-icon color="#2A82E4" size="50px">
                                    <Location />
                                </el-icon></span><span
                                style="color: #F3F4F5;font-size: 20px;margin-top: 20px;margin-left: 10px;">{{
                                    item.fsndname }}</span><span
                                style="margin-left: 90px;font-size: 50px;color: #2A82E4;">→</span> <span
                                style="margin-top: 10px;margin-left: 40px;"><el-icon color="#2A82E4" size="50px">
                                    <Location />
                                </el-icon></span><span
                                style="color: #F3F4F5;font-size: 20px;margin-left: 10px;margin-top: 20px;">{{
                                    item.frcvname }}</span>
                        </div>
                        <div style="display: flex;justify-content: space-between;margin-top: 10px;">
                            <span @click="jihuo(item)" v-if="driverInfo && item.dispatchcarStatus != '激活'"
                                style="display: flex;justify-content: center;color: white;margin: 0px 0px 10px 10px;background-color: #7192B7;font-weight: 400;font-size: 20px;padding: 3px;border-radius: 10px;width: 80px;cursor: pointer;height: 28px;">激活</span>
                            <span @click="jihuo(item)"
                                v-if="driverInfo && item.dispatchcarStatus != '激活' && dispachOrder.map(e => e.dispatchcarStatus)[0] === '激活'"
                                style="display: flex;justify-content: center;color: #7192B7;margin: 0px 10px 10px 0px;font-weight: 400;font-size: 25px;padding: 3px;border-radius: 10px;cursor: pointer;text-decoration: underline;">任务切换</span>
                            <span v-if="driverInfo && item.dispatchcarStatus == '激活'"
                                style="display: flex;justify-content: center;color: #EC851D;margin: 0px 0px 0px 400px;font-weight: 400;font-size: 25px;padding: 3px;border-radius: 10px;">状态:进行中</span>
                        </div>
                        <div style="height: 10px;background-color: #11181F;width: 100%;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {
    ref,
    reactive,
    onMounted,
    getCurrentInstance,
    nextTick,
    onBeforeUnmount,
    provide,
    defineProps
} from 'vue'

const {
    proxy
} = getCurrentInstance()

import tools from '@/tools'
const cardBodyStyle = ref(tools.style.card)
const inputStyle = ref(tools.style.input)

const typeMenu = ref(['当前任务', '备用任务', '临时任务'])

/**
 * 头信息
 */
import { ElMessage, ElMessageBox } from 'element-plus'
import { stringify } from 'qs'
import { RouterView } from 'vue-router';
const deptCode = ref('')
const deptName = ref('')
const deptId = ref('')
const driverInfo = ref('')

onMounted(() => {
    const temp = JSON.parse(localStorage.getItem('deptTree'))
    deptCode.value = temp[0].deptCode
    deptName.value = temp[0].deptName
    deptId.value = temp[0].id
    driverInfo.value = JSON.parse(localStorage.getItem('driverInfo'))
    queryDispachOrder()
    queryMyStatisticsM()
})


/**
 * 头信息
 */

const props = defineProps({
    carno: {
        type: String,
        default: ''
    }
})

/**
 * 我的统计
 */
const myStatistics = ref(null)
const arry = ref([])
const queryMyStatisticsM = () => {
    var url = 'wgt/Qchjlxx/queryMyStatistics'
    var param = {
        carno:props.carno
    }
    proxy.$axios.post(url, param).then(response => {
        if (response.data.code == 0) {
            myStatistics.value = response.data.data
            arry.value = Object.keys(myStatistics.value)
        } else {
            ElMessage({
                message: '操作失败' + response.data.msg,
                type: 'error'
            })
        }
    })
}

//查询派单
const queryDispachOrderDTO = ref({
    carno: props.carno
})
const dispachOrder = ref([])
const queryDispachOrder = () => {
    var url = 'tms/Indispatchcar/queryDispachOrderByCarno'
    var param = {
        params: JSON.stringify(queryDispachOrderDTO.value)
    }
    proxy.$axios.post(url, param).then(response => {
        if (response.data.code == 0) {
            // console.log(response.data.data)
            dispachOrder.value = response.data.data
            console.log(dispachOrder.value[0])
        } else {
            ElMessage({
                message: '操作失败' + response.data.msg,
                type: 'error'
            })
        }
    })
}
// onBeforeUnmount(() => {

// })
//登出
const loginout = () => {
    if (!driverInfo.value) {
        ElMessage.warning('请先登录')
        localStorage.setItem("pa", "1")
        setTimeout(() => {
            location.reload();
        }, 1000)
        return
    }

    clearStatusM()
    localStorage.removeItem("driverInfo")
    setTimeout(() => {
        location.reload();
    }, 1000);
    ElMessage.success('操作成功')
}

//清空状态
const clearStatusM = () => {
    var url = 'tms/Indispatchcar/clearStatus'
    var param = {
        carno: props.carno
    }
    proxy.$axios.post(url, param).then(response => {
        if (response.data.code == 0) {
            ElMessage.success('操作成功')
        } else {
            ElMessage({
                message: '操作失败' + response.data.msg,
                type: 'error'
            })
        }
    })
}

const jihuo = (item) => {
    var url = 'tms/Indispatchcar/updateDispatchStatus'
    var param = {
        params: JSON.stringify(item)
    }
    proxy.$axios.post(url, param).then(response => {
        if (response.data.code == 0) {
            ElMessage.success('操作成功！')
            queryDispachOrder()
        } else {
            ElMessage({
                message: '操作失败' + response.data.msg,
                type: 'error'
            })
        }
    })
}


</script>

<style scoped></style>