<template>
    <div>
        <div>
            <el-descriptions class="margin-top" title="车辆信息" :column="3" :size="size" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        司机
                    </template>
                    {{carinfo.veOwnerName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号
                    </template>
                    {{carinfo.ownerInsideTel}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-truck"></i>
                        车号
                    </template>
                    {{carinfo.domesticLisenceNo}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-tickets"></i>
                        驾驶证有效期
                    </template>
                    <el-tag size="small">{{carinfo.veFactoryDate}}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-shopping-cart-full"></i>
                        车自重
                    </template>
                    {{carinfo.selfWt}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-office-building"></i>
                        地址
                    </template>
                    {{carinfo.proposer}}
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div style="margin-top: 10px">
            <el-descriptions class="margin-top" title="派单列表" :column="3" :size="size" border></el-descriptions>
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    style="width: 100%"
                    >
                <el-table-column
                        prop="dispatch"
                        label="派单号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="awba"
                        label="主单号"
                        width="105">
                </el-table-column>
                <el-table-column
                        prop="awbh"
                        label="分单号"
                        width="140">
                </el-table-column>
                <el-table-column
                        prop="deststation"
                        label="目的港"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="pcs"
                        label="件数"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="weight"
                        label="毛重"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="vol"
                        label="体积"
                        show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="charge"
                        label="应收"
                        show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </div>
        <div style="margin-top: 10px">
            <el-descriptions class="margin-top" title="车辆跟踪" :column="3" :size="size" border>
                <template slot="extra">
                    <el-button type="primary" size="small" @click="addRecords">添加记录</el-button>
                </template>
            </el-descriptions>
            <div>
                <el-timeline :reverse="reverse">
                    <el-timeline-item
                            v-for="(activity, index) in activities"
                            :key="index"
                            :timestamp="activity.opertime">
                        <span style="color: #5BB75B;font-weight: bold">状态：</span>{{activity.status}}--<span style="color: #5BB75B;font-weight: bold">跟踪信息：</span>{{activity.info}}
                    </el-timeline-item>
                </el-timeline>
            </div>
        </div>
        <div>
            <el-dialog
                    title="添加车辆跟进信息"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="派单号" prop="dispatch">
                        <el-input v-model="ruleForm.dispatch" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="跟进状态" prop="status">
                        <el-select v-model="ruleForm.status" placeholder="请选择状态" style="width: 100%">
                            <el-option label="待装" value="待装"></el-option>
                            <el-option label="在途" value="在途"></el-option>
                            <el-option label="已到未卸" value="已到未卸"></el-option>
                            <el-option label="已完成" value="已完成"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="跟进信息" prop="info">
                        <el-input v-model="ruleForm.info"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
                        <el-button @click="resetForm('ruleForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
        <div>
            <el-descriptions class="margin-top" title="货物照片" :column="3" :size="size" border>
                <template slot="extra">
                    <el-upload
                            class="upload-demo"
                            action=""
                            :http-request="uploadRequest"
                            :on-change="handleChange"
                            :on-success="handleSuccess"
                            :on-error="handleError"
                            :before-upload="beforeUpload"
                            multiple
                            accept="image/*"
                    >
                        <el-button size="small" type="success">上传照片</el-button>
                    </el-upload>
                </template>
            </el-descriptions>
            <div>
                <el-image
                        v-for="(url, index) in validUrls"
                        :key="index"
                        :src="url"
                        style="width: 200px; height: 200px; margin: 10px;"
                        :preview-src-list="validUrls"
                />
            </div>
        </div>
    </div>
</template>
<script>
    import {list} from "../../api/road_verecord/verecord";
    import {
        selectListByDispatch,
        selectByDispatchList,
        addTracker,
        uploadGoodsImage,
        selectPicsByDispatch
    } from "../../api/consigner/vehicle";
    export default {
        data() {
            return{
                ruleForm:{
                    dispatch: "",
                    id: "",
                    info: "",
                    opertime: "",
                    status: ""
                },
                rules:{
                    status: [
                        { required: true, message: '请选择跟进状态', trigger: 'change' }
                    ],
                },
                reverse: false,
                activities: [],
                validUrls:[],
                routerinfo:{},
                carinfo:{},
                size: 'medium',
                tableData:[],
                dialogVisible: false
            }
        },
        methods:{
            getImgList(){
                selectPicsByDispatch({dispatch:this.routerinfo.dispatch}).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return this.$message.error('获取消息收发记录，失败！')
                    }
                    if(res.data.urls && res.data.urls.trim() !== ''){
                       this.validUrls= res.data.urls
                            .split(',')
                            .filter(url => url.trim() !== '');
                    }
                }).catch(error => {
                    // 关闭加载
                    this.$message.error(error.toString())
                })
            },

            beforeUpload(file) {
                const isImage = file.type.startsWith('image/');
                if (!isImage) {
                    this.$message.error('只能上传图片文件!');
                }
                return isImage;
            },
            handleChange(file, fileList) {
                console.log(file, fileList);
            },
            handleSuccess(response, file, fileList) {
                console.log('Upload successful:', response);
            },
            handleError(err, file, fileList) {
                console.error('Upload failed:', err);
            },
            uploadRequest({ file, onSuccess, onError }) {
                const formData = new FormData();
                formData.append('file', file);
                formData.append('dispatch',this.routerinfo.dispatch);
                uploadGoodsImage(formData).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return this.$message.error(res.msg);
                    }
                    this.$message.success(res.msg);
                    this.getImgList();
                    onSuccess(response.data); // 调用 onSuccess 回调通知上传成功
                }).catch(error => {
                    // 关闭加载
                    this.$message.error(error.toString())
                    onError(error); // 调用 onError 回调通知上传失败
                })
                },
            //添加跟踪记录
            addRecords(){
                this.ruleForm.dispatch=this.routerinfo.dispatch;
                this.dialogVisible=true;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        addTracker(this.ruleForm).then((response) => {
                            const res = response.data
                            if (res.code !== '200') {
                                return this.$message.error('跟进信息添加，失败！')
                            }
                            this.$message.success('跟进信息添加，成功！')
                            this.dialogVisible = false;
                            this.getRecords();
                        }).catch(error => {
                            // 关闭加载
                            this.$message.warning('跟进信息添加，失败！')
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.dialogVisible = false;
                this.$refs[formName].resetFields();
            },
            //查询跟踪记录
            getRecords(){
                selectByDispatchList({dispatch:this.routerinfo.dispatch}).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    this.activities=res.data;
                }).catch(error => {
                    // 关闭加载
                    this.$message.error(error.toString())
                })
            },
            //查询派单列表
            getLists() {
                selectListByDispatch({dispatch:this.routerinfo.dispatch}).then((response) => {
                    const res = response.data
                    if (res.code !== '200') {
                        return this.$message.error('获取消息收发记录，失败！')
                    }
                    // 获取列表数据
                    this.tableData=res.data;
                }).catch(error => {
                    // 关闭加载
                    this.$message.error(error.toString())
                })
            },
            getDefault(){
                if(this.$route.query!=null){
                    this.routerinfo=this.$route.query.jilu;
                }
            },
            //查询车辆信息
            getReCord() {
                let para = {
                    pageSize: 1,
                    limitSize: 10,
                    trailerFrameNo: this.$route.query.jilu.licenseno,
                    veState: '',
                    veClassFlag: '',
                    userId: ''
                };
                list(para).then((res) => {
                    if(res.data.data.list.length!==0){
                        this.carinfo = res.data.data.list[0];
                    }else{
                        this.$message.warning('无对应车辆信息！')
                    }
                }).catch((error) => {
                    this.$message.warning('车辆查询，失败！')
                });
            },
            getMess(){
                if(this.routerinfo!=null && this.routerinfo.length!==0){
                    this.getReCord();
                    this.getLists();
                }
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },

        },
        activated() {
            this.getDefault();
            this.getMess();
            this.getRecords();
            this.getImgList();
        }
    }
</script>