<template>
  <Container>
    <div slot="left">
      <el-button
        v-if="$accessCheck($Access.DriveraddDriver)"
        size="small"
        type="primary"
        @click="add()"
      >
        新增
      </el-button>
    </div>
    <el-table :data="type_data">
      <el-table-column label="ID" width="80px" prop="id"></el-table-column>
      <el-table-column prop="driverName" label="司机姓名"></el-table-column>
      <el-table-column prop="phone" label="司机电话"></el-table-column>
      <el-table-column prop="plateNumber" label="车牌号"></el-table-column>
      <el-table-column prop="state" label="状态">
        <template slot-scope="scope">
          <el-switch
            v-if="$accessCheck($Access.DriverstatusSet)"
            v-model="scope.row.state"
            class="switchStyle"
            active-color="#36B365"
            :active-value="5"
            :inactive-value="4"
            active-text="启用"
            inactive-text="禁用"
            @change="statusSet($event, scope.row)"
          ></el-switch>
          <div v-else>
            <span v-if="scope.row.state === 5" class="success-status">
              启用
            </span>
            <span v-if="scope.row.state === 4" class="danger-status">禁用</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="enableStatus" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="$accessCheck($Access.DriverdelDriver)"
            type="text"
            size="small"
            @click="del(scope.row.id)"
          >
            删除
          </el-button>
          <el-button
            v-if="$accessCheck($Access.DrivereditDriver)"
            type="text"
            size="small"
            @click="edit(scope.row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
    <!--   新增司机-->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="25%"
      @close="close"
    >
      <el-form ref="from" label-width="80px" :model="from" :rules="rules">
        <el-form-item label="司机姓名" prop="driverName">
          <el-input
            v-model="from.driverName"
            placeholder="请输入司机姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="司机电话" prop="phone">
          <el-input
            v-model.Number="from.phone"
            minlength="11"
            placeholder="请输入司机电话"
          ></el-input>
        </el-form-item>
        <el-form-item label="车牌号" prop="plateNumber">
          <el-input
            v-model="from.plateNumber"
            placeholder="请输入车牌号"
          ></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="from.remark"
            placeholder="请输入备注"
            type="textarea"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </Container>
</template>

<script>
  import {
    getAllDriver,
    delDriver,
    addDriver,
    editDriver,
  } from "@/api/Customer";
  export default {
    data() {
      return {
        rules: {
          driverName: [
            { required: true, message: "司机姓名不能为空", trigger: "blur" },
          ],
          phone: [
            { required: true, message: "电话号不能为空", trigger: "blur" },
            // {
            //   type: "number",
            //   message: "请输入正确的电话号码",
            //   trigger: "blur",
            // },
          ],
          plateNumber: [
            { required: true, message: "车牌号不能为空", trigger: "blur" },
          ],
        },
        title: "",
        id: "",
        total: 0,
        pageSize: 10,
        page: 1,
        from: {
          driverName: "",
          plateNumber: "",
          phone: "",
          state: "",
          remark: "",
        },
        dialogVisible: false,
        type_data: [],
      };
    },
    created() {
      this.getAllDriver();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getAllDriver();
    },
    methods: {
      //禁用启用  id为状态码
      async statusSet(id, row) {
        const res = await editDriver({
          id: row.id,
          state: id,
        });
        this.$message({
          message: "设置成功",
          type: "success",
        });
      },
      // 获取司机列表
      async getAllDriver() {
        const { data, pageTotal } = await getAllDriver({
          page: this.page,
          pageSize: this.pageSize,
        });
        this.type_data = data;
        this.total = pageTotal;
      },
      // 删除
      del(id) {
        console.log(id);
        this.$confirm("请确认是否删除司机信息", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await delDriver(id);
          console.log(data);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          await this.getAllDriver();
        });
      },
      // 增加
      add() {
        this.title = "新增司机";
        this.from = {};
        this.dialogVisible = true;
        this.id = "";
      },
      // 编辑
      edit(row) {
        this.title = "编辑司机";
        console.log(row, this.from.driverName);

        this.from.driverName = row.driverName;
        this.from.plateNumber = row.plateNumber;
        this.from.phone = row.phone;
        this.id = row.id;
        this.dialogVisible = true;
      },
      // 确认信息
      async confirm() {
        let p1 = /^(13[0-9]\d{8}|15[0-35-9]\d{8}|18[0-9]\{8}|14[57]\d{8})$/;
        if (
          this.from.driverName.split(" ").join("").length == 0 ||
          this.from.plateNumber.split(" ").join("").length == 0
        ) {
          this.$message("不能为空");
        } else {
          if (!this.id) {
            this.dialogVisible = false;
            const res = await addDriver({
              id: this.id,
              driverName: this.from.driverName,
              phone: this.from.phone,
              plateNumber: this.from.plateNumber,
              remark: this.from.remark,
              state: 5,
            });
            await this.getAllDriver();
          } else {
            const res = await editDriver({
              id: this.id,
              driverName: this.from.driverName,
              phone: this.from.phone,
              plateNumber: this.from.plateNumber,
              remark: this.from.remark,
              state: this.type_data.state,
            });
            this.$message({
              type: "success",
              message: "编辑成功!",
            });
            this.dialogVisible = false;
            await this.getAllDriver();
          }
        }
      },
      sizeChange(size) {
        this.pageSize = size;
        this.pageChange(1);
      },
      pageChange(page) {
        this.page = page;
        this.getAllDriver();
      },
      close() {
        this.$refs["from"].resetFields();
      },
    },
  };
</script>

<style scoped></style>
