<template>
    <el-container>
        <el-main>
            <!--面包屑导航区域-->
            <!--            <div>-->
            <!--                <el-breadcrumb separator-class="el-icon-arrow-right">-->
            <!--                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
            <!--                    <el-breadcrumb-item>车辆调度</el-breadcrumb-item>-->
            <!--                    <el-breadcrumb-item>驾驶员信息</el-breadcrumb-item>-->
            <!--                </el-breadcrumb>-->
            <!--            </div>-->
            <el-card style="background-color: #F5F7FA">
                <!--搜索区域-->
                <div>
                    <el-row :gutter="24">
                        <el-col :span="5">
                            <el-input v-model="queryInfo.driverName" prefix-icon="el-icon-search" clearable
                                      placeholder="请输入驾驶员姓名"></el-input>
                        </el-col>
                        <el-col :span="5">
                            <el-input v-model="queryInfo.driverMobile" prefix-icon="el-icon-search" clearable
                                      placeholder="请输入驾驶员联系方式"></el-input>
                        </el-col>
                        <el-col :span="5">
                            <el-input v-model="queryInfo.driverCompany" prefix-icon="el-icon-search" clearable
                                      placeholder="请输入驾驶员所属公司"></el-input>
                        </el-col>
                        <el-col :span="5">
                            <el-select v-model="queryInfo.driverStatus" clearable placeholder="请选择驾驶员状态">
                                <el-option
                                        v-for="item in driverStatusList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 20px;">
                        <el-button type="primary" @click="getDriverInfoList">查询驾驶员信息</el-button>
                        <el-button type="success" @click="addDriverInfoFormVisible = true">增加驾驶员信息</el-button>
                    </el-row>
                </div>
                <!--驾驶员信息列表区域-->
                <div style="margin-top: 20px;">
                    <el-table :data="driverInfoList" border stripe highlight-current-row v-loading="listLoading"
                              @selection-change="selsChange"
                              element-loading-text="拼命加载中">
                        <el-table-column type="selection" width="55" align="center"></el-table-column>
                        <el-table-column type="index" align="center"></el-table-column>
                        <el-table-column label="姓名" prop="driverName" align="center" width="100"></el-table-column>
                        <el-table-column label="联系方式" prop="driverMobile" align="center" width="130"></el-table-column>
                        <el-table-column label="驾驶证" prop="driverLicenseNumber" align="center"
                                         width="150"></el-table-column>
                        <el-table-column label="工号" prop="jobNumber" align="center" width="120"></el-table-column>
                        <el-table-column label="职位" prop="driverPosition" align="center" width="100">
                            <template slot-scope="scope">
                                <span v-if="scope.row.driverPosition ==='1'">队长</span>
                                <span v-if="scope.row.driverPosition ==='2'">班长</span>
                                <span v-if="scope.row.driverPosition ==='3'">副班长</span>
                                <span v-if="scope.row.driverPosition ==='4'">员工</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="公司" prop="driverCompany" align="center" width="160"></el-table-column>
                        <el-table-column label="状态" prop="driverStatus" align="center" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.driverStatus ==='1'">空闲状态</span>
                                <span v-if="scope.row.driverStatus ==='2'">执行状态</span>
                                <span v-if="scope.row.driverStatus ==='3'">轮休状态</span>
                                <span v-if="scope.row.driverStatus ==='4'">请假状态</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="220px" align="center" fixed="right">
                            <template slot-scope="scope">
                                <!--查看按钮-->
                                <el-tooltip effect="dark" content="编辑" placement="top-start" :enterable="false">
                                    <el-button type="primary" icon="el-icon-edit" size="mini"
                                               @click="showEditDialogVisible(scope.$index,scope.row)">编辑
                                    </el-button>
                                </el-tooltip>
                                <!--取消调度按钮-->
                                <el-tooltip effect="dark" content="删除" placement="top-start" :enterable="false">
                                    <el-button type="danger" icon="el-icon-delete" size="mini"
                                               :loading="delLoading"
                                               @click="removeDriverInfo(scope.$index,scope.row)">删除
                                    </el-button>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!--分页区域-->
                    <div style="margin-top: 10px">
                        <el-row :gutter="24">
                            <el-col :span="5">
                                <el-button type="danger" icon="el-icon-delete" @click="batchRemove"
                                           :disabled="this.sels.length===0">批量删除
                                </el-button>
                            </el-col>
                            <el-col :span="10" style="margin-top: 5px">
                                <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="queryInfo.pageNum"
                                        :page-sizes="[10,20,30,50]"
                                        :page-size="queryInfo.pageSize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total">
                                </el-pagination>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </el-card>
            <!-- 增加驾驶员信息对话框 -->
            <div>
                <el-dialog
                        style="margin-top: -50px"
                        title="增加驾驶员信息"
                        text-align="center"
                        :visible.sync="addDriverInfoFormVisible"
                        width="50%" @close="addDriverInfoDialogClosed">
                    <el-form :model="addDriverInfoForm" label-width="100px" status-icon
                             :rules="addDriverInfoFormRules" ref="addDriverInfoFormRef"
                             size="medium" align="center" :inline="true"
                             style="background-color: #F5F7FA">
                        <div style="margin-top: -15px">
                            <br>
                            <el-form-item label="司机姓名：" prop="driverName">
                                <el-input v-model="addDriverInfoForm.driverName" style="width: 300px;" clearable
                                          placeholder="请输入驾驶员姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="联系方式：" prop="driverMobile">
                                <el-input v-model="addDriverInfoForm.driverMobile" style="width: 300px;" clearable
                                          placeholder="请输入驾驶员联系方式"></el-input>
                            </el-form-item>


                            <el-form-item label="司机状态：" prop="driverStatus">
                                <el-select v-model="addDriverInfoForm.driverStatus" style="width: 300px" clearable
                                           placeholder="请选择驾驶员类型">
                                    <el-option
                                            v-for="item in driverStatusList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="驾驶证号：" prop="driverLicenseNumber">
                                <el-input v-model="addDriverInfoForm.driverLicenseNumber" style="width: 300px;"
                                          clearable
                                          placeholder="请输入驾驶证号码"></el-input>
                            </el-form-item>
                            <el-form-item label="工作职位：" prop="driverPosition">
                                <el-select v-model="addDriverInfoForm.driverPosition" style="width: 300px" clearable
                                           placeholder="请选择驾驶员类型">
                                    <el-option
                                            v-for="item in driverPositionList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="员工号码：" prop="jobNumber">
                                <el-input v-model="addDriverInfoForm.jobNumber" style="width: 300px;" clearable
                                          placeholder="请输入员工号码"></el-input>
                            </el-form-item>
                            <el-form-item label="司机公司：" prop="driverCompany">
                                <el-input v-model="addDriverInfoForm.driverCompany" style="width: 300px;" clearable
                                          placeholder="请输入驾驶员所属公司"></el-input>
                            </el-form-item>
                            <br>
                        </div>
                    </el-form>
                    <!--底部按钮区域-->
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="addDriverInfoFormVisible = false">取 消</el-button>
                        <el-button type="primary" :loading="addLoading" @click="addDriverInfo">增 加</el-button>
                    </span>
                </el-dialog>
            </div>
            <!-- 编辑驾驶员信息，对话框 -->
            <div>
                <el-dialog
                        style="margin-top: -70px"
                        title="编辑驾驶员信息"
                        :visible.sync="editDialogVisible"
                        text-align="center"
                        width="50%" @close="editDriverInfoDialogClosed">
                    <el-form :model="editDriverInfoForm" label-width="100px" status-icon
                             :rules="editDriverInfoFormRules" ref="editDriverInfoFormRef"
                             :inline="true" size="medium" align="center"
                             style="background-color: #F5F7FA">
                        <div style="margin-top: -15px">
                            <br>
                            <el-form-item label="司机姓名：" prop="driverName">
                                <el-input v-model="editDriverInfoForm.driverName" style="width: 300px;" clearable
                                          placeholder="请输入驾驶员姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="联系方式：" prop="driverMobile">
                                <el-input v-model="editDriverInfoForm.driverMobile" style="width: 300px;" clearable
                                          placeholder="请输入驾驶员联系方式"></el-input>
                            </el-form-item>


                            <el-form-item label="司机状态：" prop="driverStatus">
                                <el-select v-model="editDriverInfoForm.driverStatus" style="width: 300px" clearable
                                           placeholder="请选择驾驶员类型">
                                    <el-option
                                            v-for="item in driverStatusList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="驾驶证号：" prop="driverLicenseNumber">
                                <el-input v-model="editDriverInfoForm.driverLicenseNumber" style="width: 300px;"
                                          clearable
                                          placeholder="请输入驾驶证号码"></el-input>
                            </el-form-item>
                            <el-form-item label="工作职位：" prop="driverPosition">
                                <el-select v-model="editDriverInfoForm.driverPosition" style="width: 300px" clearable
                                           placeholder="请选择驾驶员类型">
                                    <el-option
                                            v-for="item in driverPositionList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="员工号码：" prop="jobNumber">
                                <el-input v-model="editDriverInfoForm.jobNumber" style="width: 300px;" clearable
                                          placeholder="请输入员工号码"></el-input>
                            </el-form-item>
                            <el-form-item label="司机公司：" prop="driverCompany">
                                <el-input v-model="editDriverInfoForm.driverCompany" style="width: 300px;" clearable
                                          placeholder="请输入驾驶员所属公司"></el-input>
                            </el-form-item>
                            <br>
                        </div>
                    </el-form>
                    <!--底部按钮区域-->
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="editDialogVisible = false">取 消</el-button>
                        <el-button type="primary" :loading="editLoading" @click="editDriverInfo">编 辑</el-button>
                    </span>
                </el-dialog>
            </div>
        </el-main>
    </el-container>
</template>

<script>
    import {
        selectDriverInfoList,
        insertDriverInfo,
        updateDriverInfo,
        batchRemoveDriverInfo,
        deleteDriverInfo,
    } from "../../api/dispatch_api";

    export default {
        name: "dispatch_api",
        created() {
            //刷新驾驶员信息列表
            this.getDriverInfoList();
        },
        data() {
            //验证手机号的自定义规则
            var driverMobileValid = (rule, value, callback) => {
                //验证手机号的正则表达式
                const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
                if (regMobile.test(value)) {
                    //合法的手机号
                    return callback();
                }
                callback(new Error('请输入合法的手机号'));
            };
            return {
                /**
                 * 查询信息列表
                 */
                queryInfo: {
                    //驾驶员姓名
                    driverName: '',
                    //驾驶员联系方式
                    driverMobile: '',
                    //驾驶员所属公司
                    driverCompany: '',
                    //驾驶员状态
                    driverStatus: '',
                    //当前的页数
                    pageNum: 1,
                    //当前每页显示多少条数据
                    pageSize: 10
                },
                /**
                 * 设置，总条数
                 */
                total: 0,
                /**
                 * 批量删除的选中列表
                 */
                sels: [],
                /**
                 * 驾驶员信息列表
                 */
                driverInfoList: [],
                /**
                 * 新增驾驶员信息表单
                 */
                addDriverInfoForm: {
                    driverName: '',
                    driverLicenseNumber: '',
                    driverMobile: '',
                    jobNumber: '',
                    driverPosition: '1',
                    driverCompany: '',
                    driverStatus: '1',
                },
                /**
                 * 编辑驾驶员信息表单
                 */
                editDriverInfoForm: {},
                /**
                 * 控制,添加驾驶员信息对话框的显示与隐藏
                 */
                addDriverInfoFormVisible: false,
                /**
                 * 控制,编辑驾驶员信息对话框的显示与隐藏
                 */
                editDialogVisible: false,
                /* 列表加载 */
                listLoading: false,
                /* 添加加载 */
                addLoading: false,
                /* 编辑加载 */
                editLoading: false,
                /* 删除加载 */
                delLoading: false,
                /**
                 * 司机职位，列表
                 */
                driverPositionList: [
                    {
                        value: '1',
                        label: '队长'
                    },
                    {
                        value: '2',
                        label: '班长'
                    },
                    {
                        value: '3',
                        label: '副班长'
                    },
                    {
                        value: '4',
                        label: '员工'
                    },
                ],
                /**
                 * 驾驶员状态，列表
                 */
                driverStatusList: [
                    {
                        value: '1',
                        label: '空闲状态'
                    },
                    {
                        value: '2',
                        label: '执行状态'
                    },
                    {
                        value: '3',
                        label: '轮休状态'
                    },
                    {
                        value: '4',
                        label: '请假状态'
                    },
                ],
                /**
                 * 添加驾驶员信息，表单的验证规则对象
                 */
                addDriverInfoFormRules: {
                    driverName: [
                        {required: true, message: '请选择驾驶员姓名', trigger: ['blur', 'change']},
                    ],
                    driverLicenseNumber: [
                        {required: true, message: '请输入驾驶证号码', trigger: ['blur', 'change']},
                    ],
                    driverMobile: [
                        {required: true, message: '请输入联系方式', trigger: ['blur', 'change']},
                        {validator: driverMobileValid, trigger: 'blur'}
                    ],
                    jobNumber: [
                        {required: true, message: '请输入员工号码', trigger: ['blur', 'change']},
                    ],
                    driverPosition: [
                        {required: true, message: '请选择工作职位', trigger: ['blur', 'change']},
                    ],
                    driverCompany: [
                        {required: true, message: '请输入驾驶员所属公司', trigger: ['blur', 'change']},
                    ],
                    driverStatus: [
                        {required: true, message: '请选择驾驶员状态', trigger: ['blur', 'change']},
                    ],
                },
                /**
                 * 编辑驾驶员信息，表单的验证规则对象
                 */
                editDriverInfoFormRules: {
                    driverName: [
                        {required: true, message: '请选择驾驶员姓名', trigger: ['blur', 'change']},
                    ],
                    driverLicenseNumber: [
                        {required: true, message: '请输入驾驶证号码', trigger: ['blur', 'change']},
                    ],
                    driverMobile: [
                        {required: true, message: '请输入联系方式', trigger: ['blur', 'change']},
                        {validator: driverMobileValid, trigger: 'blur'}
                    ],
                    jobNumber: [
                        {required: true, message: '请输入员工号码', trigger: ['blur', 'change']},
                    ],
                    driverPosition: [
                        {required: true, message: '请选择工作职位', trigger: ['blur', 'change']},
                    ],
                    driverCompany: [
                        {required: true, message: '请输入驾驶员所属公司', trigger: ['blur', 'change']},
                    ],
                    driverStatus: [
                        {required: true, message: '请选择驾驶员状态', trigger: ['blur', 'change']},
                    ],
                }
            }
        },
        methods: {
            /**
             *  获取驾驶员信息列表
             */
            getDriverInfoList() {
                //开启加载
                this.listLoading = true;
                selectDriverInfoList(this.queryInfo).then((response) => {
                    let res = response.data;
                    if (res.code !== '200'){
                        //关闭加载
                        this.listLoading = false;
                        return this.$message.error('获取驾驶员信息列表，失败');
                    }
                    // 获取驾驶员信息列表数据
                    this.driverInfoList = res.data.list;
                    // 获取列表的总记录数
                    this.total = res.data.total;
                    //关闭加载
                    this.listLoading = false;
                    this.$message.success('获取驾驶员信息列表，成功');
                }).catch(error => {
                    this.listLoading = false;
                    this.$message.error(error.toString());
                });

            },
            /**
             *  增加驾驶员信息
             */
            addDriverInfo() {
                /*进行表单的预验证*/
                this.$refs.addDriverInfoFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    // 通过，表单预检验,开启加载
                    this.addLoading = true;
                    insertDriverInfo(this.addDriverInfoForm).then((response) => {
                        let res = response.data;
                        if (res.code !== '200'){
                            //关闭加载
                            this.addLoading = false;
                            return this.$message.error('添加驾驶员信息，失败');
                        }
                        //关闭加载
                        this.addLoading = false;
                        this.$message.success('添加驾驶员信息，成功');
                        //关闭对话框
                        this.addDriverInfoFormVisible = false;
                        //刷新驾驶员信息列表
                        this.getDriverInfoList();
                    }).catch(error => {
                        this.addLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },
            /**
             * 删除驾驶员信息
             */
            removeDriverInfo(index, row) {
                //弹框询问是否删除驾驶员信息
                this.$confirm('此操作永久删除该驾驶员信息, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    //开启加载
                    this.delLoading = true;
                    deleteDriverInfo(row).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            //关闭加载
                            this.delLoading = false;
                            return this.$message.error('删除驾驶员信息，失败');
                        }
                        //关闭加载
                        this.delLoading = false;
                        this.$message.success('删除驾驶员信息，成功！');
                        //刷新驾驶员信息列表
                        this.getDriverInfoList();
                    }).catch(error => {
                        this.delLoading = false;
                        this.$message.error(error.toString());
                    });
                }).catch(() => {
                });
            },
            /**
             * 批量删除，之前的选中
             */
            selsChange: function (sels) {
                this.sels = sels;
            },
            /**
             * 批量删除功能
             */
            batchRemove() {
                var ids = this.sels.map(item => item.id).toString();
                console.log(ids);
                //弹框询问是否批量删除选中的车辆调度记录
                this.$confirm('此操作将永久删除，选中的驾驶员信息, 是否继续?', '警告', {
                        confirmButtonText: '确定删除',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    //开启加载
                    this.listLoading = true;
                    let params = {ids: ids};
                    batchRemoveDriverInfo(params).then(response => {
                        let res = response.data;
                        if (res.code !== '200') {
                            this.listLoading = false;
                            return this.$message.error('批量删除驾驶员信息，失败');
                        }
                        this.$message.success('批量删除驶员信息，成功！');
                        this.listLoading = false;
                        //刷新驾驶员信息列表
                        this.getDriverInfoList();
                    }).catch(error => {
                        this.delLoading = false;
                        this.$message.error(error.toString());
                    });
                }).catch(() => {
                });
            },
            /**
             * 编辑驾驶员信息
             */
            editDriverInfo() {
                /*进行表单的预验证*/
                this.$refs.editDriverInfoFormRef.validate(valid => {
                    // 未通过，表单预校验
                    if (!valid) return;
                    // 通过，表单预检验,开启加载
                    this.editLoading = true;
                    updateDriverInfo(this.editDriverInfoForm).then((response) => {
                        let res = response.data;
                        if (res.code !== '200') {
                            //关闭加载
                            this.editLoading = false;
                            return this.$message.error('修改驾驶员信息，失败');
                        }
                        //关闭加载
                        this.editLoading = false;
                        this.$message.success('修改驾驶员信息，成功！');
                        // 关闭，编辑驾驶员信息对话框
                        this.editDialogVisible = false;
                        //刷新驾驶员信息列表
                        this.getDriverInfoList();
                    }).catch(error => {
                        this.editLoading = false;
                        this.$message.error(error.toString());
                    });
                })
            },
            /**
             * 添加驾驶员信息对话框，关闭时，重置对话框
             */
            addDriverInfoDialogClosed() {
                this.$refs.addDriverInfoFormRef.resetFields();
            },
            /**
             * 编辑驾驶员信息对话框，关闭时，重置对话框
             */
            editDriverInfoDialogClosed() {
                this.$refs.editDriverInfoFormRef.resetFields();
            },
            /**
             * 打开编辑驾驶员信息对话框
             */
            showEditDialogVisible(index, row) {
                this.editDriverInfoForm = Object.assign({}, row);
                this.editDialogVisible = true;
            },
            /**
             * 监听pageSize改变的事件
             */
            handleSizeChange(newSize) {
                this.queryInfo.pageSize = newSize;
                //刷新驾驶员信息列表
                this.getDriverInfoList();
            },
            /**
             * 监听当前页码值改变的事件
             */
            handleCurrentChange(newPage) {
                this.queryInfo.pageNum = newPage;
                //刷新驾驶员信息列表
                this.getDriverInfoList();
            },
        }
    }
</script>

<style scoped>

</style>