<template>
    <el-row>
        <el-card  style="background-color: #F5F7FA">
            <!--            搜索区域-->
            <el-row  class="toolbar">
                <el-form :model="queryInfo">
                    <el-col :span="6">
                        <el-form-item label="" prop="lisenceNo">
                            <el-input v-model="queryInfo.lisenceNo"  size="small" style="width: 170px"
                                      placeholder="车牌号" clearable required>
                                <template slot="prepend">车牌号</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" icon="el-icon-search" size="small" @click="getList()">
                            查询
                        </el-button>
                        <!--                    <el-button type="success" icon="el-icon-edit" size="small" @click="applyAdd()">新增</el-button>-->
                    </el-col>
                </el-form>
            </el-row>
            <!--            列表区域-->
            <el-row>
                    <el-table
                            :data="tableData"
                            border
                            :cell-style="{textAlign:'center'}"
                            style="border-radius: 10px 10px 0px 0px;line-height: 25px"
                            :header-cell-style="{background:'#6F8294',color:'#FFFFFF'}" size="small"
                    >
                        <el-table-column
                                fixed
                                prop="lisenceNo"
                                label="车牌号"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="username"
                                label="用户名"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="equipNo"
                                label="设备编号"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="starttime"
                                label="开始时间">
                        </el-table-column>
                        <el-table-column
                                fixed="right"
                                label="操作"
                                width="220">
                            <template slot-scope="scope">
                                <el-button type="danger" size="mini" @click="applyEnd(scope.row)">结束出勤</el-button>
                                <el-button type="success"  @click="uploadImg(scope.row)">图片上传</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
            </el-row>
            <el-row style="margin-top: 10px" class="toolbar">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryInfo.pageNum"
                        :page-size="queryInfo.pageSize"
                        :page-sizes="[10, 50, 100, 500]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-row>

            <el-dialog
                    title="提示"
                    :visible.sync="centerDialogVisible"
                    width="30%"
                    center>
                <div>
                    <!-- 图片选择 -->
                    <input type="file" ref="fileInput"  accept="image/*" @change="handleFileChange" style="display: none;">
                    <el-button type="primary" @click="chooseFile">选择图片</el-button>
                    <span v-if="selectedFileName" style="margin-left: 10px;">已选择文件: {{ selectedFileName }}</span>
                    <!-- 图片描述输入框 -->
                    <el-input v-model="imageDescription" placeholder="请输入图片描述" style="margin-top: 20px;"></el-input>

                    <!-- 上传按钮 -->
                    <el-button type="success" @click="uploadImage" style="margin-top: 20px;">上传图片</el-button>
                </div>
            </el-dialog>
        </el-card>
    </el-row>
</template>

<script>
    import {selectList,DoneTask,UploadImage} from '../../api/consigner/vehicle';

    export default {
        data() {
            return {
                centerDialogVisible: false,
                queryInfo: {
                    lisenceNo: '',
                    // 当前页数
                    pageNum: 1,
                    // 每页几条数据
                    pageSize: 10,
                },
                total: 0,
                tableData: [],
                formInline: {
                    user: '',
                },
                imageDescription: '', // 图片描述
                selectedFile: null, // 用户选择的文件
                selectedFileName: '', // 用户选择的文件名
                id:'',
            }
        },
        methods: {
            uploadImg(row){this.id=row.id;this.centerDialogVisible=true;},
            // 选择图片
            chooseFile() {
                this.$refs.fileInput.click();
            },
            // 文件改变时触发
            handleFileChange(event) {
                this.selectedFile = event.target.files[0];
                this.selectedFileName = this.selectedFile ? this.selectedFile.name : '';
            },
            // 上传图片
            uploadImage() {
                if(this.selectedFile == null){
                    return this.$message.error('请上传图片')
                }
                if(this.imageDescription == null||this.imageDescription == ''){
                    return this.$message.error('请输入描述')
                }
                if (!this.selectedFile) {
                    this.$message.warning('请选择图片');
                    return;
                }
                // 创建 FormData 对象，用于上传文件
                const formData = new FormData();
                formData.append('file', this.selectedFile);
                formData.append('desc', this.imageDescription);
                formData.append('id',this.id);
                UploadImage(formData).then((response) => {
                    const res = response.data
                    console.log(response.data)
                    if (res.code !== '200') {
                        return _this.$message.error(res.data)
                    }
                    this.$message.success(res.data)
                    this.centerDialogVisible=false;
                    this.selectedFile=null;
                    this.imageDescription='';
                    this.selectedFileName='';
                }).catch(error => {
                    // 关闭加载
                    this.$message.error(error.toString())
                })

            },
                handleSizeChange(val) {
                    this.queryInfo.pageSize = val
                    this.getList()
                },
                handleCurrentChange(val) {
                    this.queryInfo.pageNum = val
                    this.getList()
                },
                getList() {
                    const _this = this
                    selectList(this.queryInfo).then((response) => {
                        const res = response.data
                        console.log(response.data)
                        if (res.code !== '200') {
                            return _this.$message.error('获取消息收发记录，失败！')
                        }
                        // 获取列表数据
                        _this.tableData = res.data.list;
                        // 获取列表的总记录数
                        _this.total = res.data.total
                        _this.$message.success('获取消息收发记录，成功！')
                    }).catch(error => {
                        // 关闭加载
                        _this.$message.error(error.toString())
                    })
                },
                // 结束出勤
                applyEnd(row) {
                    // 弹框询问是否结束？
                    this.$confirm('是否继续?', '警告', {
                            confirmButtonText: '确定结束',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }
                    ).then(() => {
                        DoneTask(row).then((response) => {
                            const res = response.data
                            this.$message.success(res.msg)
                            this.getList()
                        }).catch(error => {
                            this.$message.error(error)
                        })
                    }).catch(() => {
                    })
                },
            },

        mounted() {
            this.getList();
        }

    }
</script>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>