<template>
    <div style="display: flex;">
        <div style="display: flex;flex-direction: column;">
            <span v-if="!driverInfo"
                style="color: #DBD6AD;font-size: 40px;font-weight: 500;">您还未登录，请先登录</span><br /><br />
            <el-form :model="ruleForm" ref="ruleFormRef" status-icon :rules="rules" label-width="auto"
                style="max-width: 600px">
                <el-form-item prop="uname">
                    <div style="color: #DBD6AD;font-size: 40px;font-weight: 500;">
                        登录号：<el-input v-model="ruleForm.uname" style="width: 240px;padding: 10px;"
                            placeholder="请输入登录号" />
                    </div>
                </el-form-item>
                <el-form-item prop="pwd">
                    <div style="color: #DBD6AD;font-size: 40px;font-weight: 500;">
                        密&nbsp;&nbsp;&nbsp;<span style="margin-left: 4px;">码</span>：<el-input v-model="ruleForm.pwd"
                            type="password" style="width: 240px;padding: 10px;" placeholder="请输入密码" />
                    </div>
                </el-form-item>
                <el-form-item>
                    <div style="color: #DBD6AD;font-size: 40px;font-weight: 500;">
                        <el-button size="large" style="background-color: #DBD6AD;margin-left: 50px;" @click=""><span
                                style="font-weight: 900;font-size: 20px;color: #555555;">指纹</span></el-button>
                        <el-button size="large" style="background-color: #DBD6AD;margin-left: 130px;"
                            @click="login(ruleFormRef)"><span
                                style="font-weight: 900;font-size: 20px;color: #555555;">登录</span></el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
        <div style="margin-left: 180px;display: flex;flex-direction: column;">
            <!-- <div
                style="display: flex;flex-direction: column;background-color: #1D2C3B;width: 600px;border-radius: 20px;">

                <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;">任务1</span>
                </div><br />

                <div>

                    <span style="color: #F3F4F5;font-size: 20px;margin-left: 255px;">{{
                        dispachOrder.map(a =>a.fitemname)[0] }}</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;">{{
                                dispachOrder.map(a=>a.fsndname)[0] }}</span><span
                            style="margin-left: 60px;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;">{{
                                dispachOrder.map(a=>a.frcvname)[0] }}</span>
                    </div>

                    <div style="display:flex;justify-content: flex-end">
                    </div>
                </div>
            </div><br /> -->

            <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;">任务{{ 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: 60px;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="height: 10px;background-color: #11181F;width: 100%;">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- <span style="color: #6E8EB2;font-size: 25px;text-decoration: underline;">待激活</span> -->

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

/**
 * 头信息
 */
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()
})
/**
 * 头信息
 */

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

const ruleFormRef = ref(null)
const driver = ref(null)

const ruleForm = ref({
    uname: '',
    pwd: ''
})

const rules = reactive({
    uname: [{
        required: true,
        message: '请输入登录号',
        trigger: 'change' | 'blur'
    }],
    pwd: [{
        required: true,
        message: '请输入密码',
        trigger: 'change' | 'blur'
    }],
})



const login = (ruleFormRef) => {
    ruleFormRef.validate((valid, fields) => {
        if (valid) {
            var url = 'tms/Driver/loginIn'
            var param = {
                params: JSON.stringify(ruleForm.value),
            }
            proxy.$axios.post(url, param).then(response => {
                if (response.data.code == 0) {
                    driver.value = response.data.data
                    localStorage.setItem("driverInfo", JSON.stringify(driver.value))
                    localStorage.setItem("pa", "2")
                    ElMessage.success('登录成功')
                    setTimeout(() => {
                        location.reload();
                    }, 2000)
                    // setTimeout(()=>{
                    //     pa.value = '2'
                    //     provide("paa",pa.value)
                    // },500)
                } else {
                    // ElMessage.error('操作失败！' + response.data.msg)
                    ElMessage({
                        message: '操作失败' + response.data.msg,
                        type: 'error'
                    })
                }
            })

        } else {
            console.log('error submit!', fields)
        }
    })
}

//查询派单
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'
            })
        }
    })
}


</script>

<style scoped></style>