<template>
    <div style="background-color: #11181F;">
        <div style="width: 100%;display: flex;align-items: center;flex-direction: column;">
            <div style="height: 10vh;display: flex;align-items: center;padding-left: 80px;width: 100%;">
                <el-icon size="40" color="#DBD6AD">
                    <Checked />
                </el-icon>&nbsp;&nbsp;&nbsp;&nbsp;
                <p style="color: #DBD6AD;font-weight: 900;font-size: 40px;">{{ carno }}</p>
            </div>
            <div style="width: 1600px;background-color: #DBD6AD;height: 1px;">
            </div>
        </div>


        <div class="out" style="display: flex;height: 78.4vh;">
            <div style="width: 8vw;display: flex;flex-direction: column;">
                <div @click="taskLook" class="top"
                    style="cursor: pointer;display: flex;flex-direction: column;align-items: center;height: 39.2vh;justify-content: center;">
                    <p style="font-size: 25px;color: #DBD6AD;font-weight: 900;">&nbsp;&nbsp;&nbsp;<el-icon size="50">
                            <List />
                        </el-icon><br />运输任务</p>
                </div>
                <div @click="infoLook" class="bottom"
                    style="cursor: pointer;display: flex;flex-direction: column;align-items: center;height: 39.2vh;justify-content: center;">
                    <p style="font-size: 25px;color: #DBD6AD;font-weight: 900;"><el-icon size="50">
                            <UserFilled />
                        </el-icon><br />{{ driverInfo ? driverInfo.drivername : user }}</p>
                </div>
            </div>
            <div style="flex: 1;display: flex;align-items: center;height: 75vh;">
                <div class="xian" style="height: 620px;width: 1px;background-color: #DBD6AD;">

                </div>
                <div class="mainCont"
                    style="flex: 1;height: 75vh;display: flex;align-items: center;justify-content: center;">
                    <Login :carno v-if="!driverInfo && pa === '1'" />
                    <Hello v-if="!driverInfo && pa != '1' && pa != '2' && pa != '3'" />
                    <MyInfo :carno v-if="driverInfo && pa === '2'" />
                    <TaskInfo :carno v-if="pa === '3'" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import Login from '@/views/tms/terminalcar/login.vue'
import MyInfo from '@/views/tms/terminalcar/myInfo.vue'
import TaskInfo from '@/views/tms/terminalcar/taskInfo.vue'
import Hello from '@/views/tms/terminalcar/hello.vue'

import {
    ref,
    reactive,
    onMounted,
    getCurrentInstance,
    nextTick,
    onBeforeUnmount,
    inject
} from 'vue'

const {
    proxy
} = getCurrentInstance()

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

/**
 * 头信息
 */
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('')
const pa = ref('1')

onBeforeUnmount(() => {
    localStorage.removeItem("driverInfo")
    localStorage.removeItem("pa")
    // clearStatusM()
})
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")) ? JSON.parse(localStorage.getItem("driverInfo")) : ''
    pa.value = localStorage.getItem("pa")
})

/**
 * 头信息
 */
//车牌号
const carno = ref('鲁A88888')
const user = ref('我的')

const infoLook = () => {
    if (!driverInfo.value) {
        ElMessage.warning('请先登录')
        localStorage.setItem("pa", "1")
        pa.value = localStorage.getItem("pa")
        return
    }
    localStorage.setItem("pa", "2")
    pa.value = localStorage.getItem("pa")
}

const taskLook = () => {
    localStorage.setItem("pa", "3")
    pa.value = localStorage.getItem("pa")
}

//清空状态
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('操作成功')
            setTimeout(() => {
                location.reload();
            }, 500)
        } else {
            ElMessage({
                message: '操作失败' + response.data.msg,
                type: 'error'
            })
        }
    })
}
</script>

<style scoped></style>