<template>
  <el-dialog
    title="设置物流信息"
    :visible.sync="show"
    width="40%"
    :before-close="cancel"
    @close="cancel('form')"
  >
    <el-form
      ref="form"
      :rules="rules"
      label-width="120px"
      :model="logisticsData"
    >
      <el-form-item label="选择司机" prop="name">
        <!--        <el-select-->
        <!--          v-model="logisticsData.id"-->
        <!--          placeholder="请选择"-->
        <!--          style="width: 230px"-->
        <!--          @change="selDriver"-->
        <!--        >-->
        <!--          <el-option-->
        <!--            v-for="item in options"-->
        <!--            :key="item.value"-->
        <!--            :label="item.driverName"-->
        <!--            :value="item.id"-->
        <!--          ></el-option>-->
        <!--        </el-select>-->
        <el-input
          v-model="logisticsData.name"
          placeholder="选择司机"
          style="width: 300px"
          clearable
          @clear="clearable"
          @input="changeLogisticsDataName"
        >
          <i
            slot="suffix"
            class="el-input__icon el-icon-search"
            @click="Driver_show = true"
          ></i>
        </el-input>
        <el-button
          type="text"
          @click="$router.push(`/SystemSettings/jiaoyiset/Driver`)"
        >
          【新增司机】
        </el-button>
      </el-form-item>
      <el-form-item label="货车车牌" prop="truckName">
        <el-input
          v-model="logisticsData.truckName"
          style="width: 300px"
          placeholder="请输入车牌号"
          @input="changeLogisticsData"
        ></el-input>
      </el-form-item>
      <el-form-item label="货车电话" prop="truckTel">
        <el-input
          v-model="logisticsData.truckTel"
          style="width: 300px"
          placeholder="请输入货车电话"
          @input="changeLogisticsData"
        ></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="logisticsData.remark"
          type="textarea"
          style="width: 300px"
          placeholder="请输入备注"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel('form')">取 消</el-button>
      <el-button :loading="loading" type="primary" @click="confirm">
        确 定
      </el-button>
    </span>
    <!--    选择司机弹窗-->
    <DriverModel
      v-if="Driver_show"
      :is-show="Driver_show"
      :is-check="false"
      @confirm="selWarehouse"
      @cancel="Driver_show = false"
    ></DriverModel>
  </el-dialog>
</template>

<script>
  import {
    getDriverInfo,
    getAllOpenDriver,
    editCustomer,
    addCustomer,
  } from "@/api/Customer";
  import { addLogistics, getOrderInfoById } from "@/api/Order";
  import { stockaddLogistics } from "@/api/Stock";
  import DriverModel from "@/component/common/DriverModel";
  export default {
    name: "LogisticsData",
    components: {
      DriverModel,
    },
    props: {
      num: {
        type: Boolean,
        default: true,
      },
      show: {
        type: Boolean,
        default: false,
      },
      orderId: {
        type: [Number, String],
        default: 0,
      },
      userCenterId: {
        type: [Number, String],
        default: 0,
      },
      type: {
        type: [Number, String],
        default: 0,
      },
      //出库单id
      outId: {
        type: [Number, String],
        default: 0,
      },
      // 物流信息
      logistics: {
        type: Object,
        default: () => {
          return {
            driverId: "",
            driverName: "",
            remark: "",
            truckName: "",
            truckTel: "",
          };
        },
      },
    },
    data() {
      const validateName = (rule, value, callback) => {
        const re = /^1[3456789]\d{9}$/; // 正则表达式
        if (value === "") {
          callback(new Error());
        } else if (!re.test(value)) {
          callback(new Error("手机号格式有误，请重新输入!"));
        } else {
          callback();
        }
      };
      return {
        value: "",
        options: [],
        loading: false,
        logisticsData: {
          id: "",
          truckName: "",
          truckTel: "",
          remark: "",
          name: "",
        },
        Driver_show: false,
        rules: {
          name: [{ required: true, message: "请选择司机", trigger: "blur" }],
          truckName: [
            { required: true, message: "请输入货车车牌", trigger: "blur" },
          ],
          truckTel: [
            { required: true, message: "请输入货车电话", trigger: "blur" },
            { validator: validateName, trigger: "blur" },
          ],
        },
      };
    },
    created() {
      this.getAllOpenDriver();
      this.getOrderInfoById();
    },
    methods: {
      // async selDriver(id) {
      //   const res = await getDriverInfo(id);
      //   this.logisticsData = {
      //     id: res.data.id,
      //     truckName: res.data.plateNumber,
      //     truckTel: res.data.phone,
      //     remark: res.data.remark,
      //     name: res.data.driverName,
      //   };
      // },
      async getAllOpenDriver() {
        const res = await getAllOpenDriver();
        this.options = res.data;
      },
      async getOrderInfoById() {
        if (Number(this.type) !== 5) {
          this.logisticsData = {
            id: this.logistics.driverId,
            truckName: this.logistics.truckName,
            truckTel: this.logistics.truckTel,
            remark: this.logistics.remark,
            name: this.logistics.driverName,
          };
          return;
        }
        const { data } = await getOrderInfoById(this.userCenterId, {
          orderId: this.orderId,
        });
        if (data.logisticsData) {
          this.logisticsData = {
            id: data.logisticsData.id,
            truckName: data.logisticsData.truckName,
            truckTel: data.logisticsData.truckTel,
            remark: data.logisticsData.remark,
            name: data.logisticsData.name,
          };
        }
      },
      cancel(form) {
        this.logisticsData = {
          id: "",
          truckName: "",
          truckTel: "",
          remark: "",
          name: "",
        };
        this.$emit("cancel");
        this.$refs[form].resetFields();
      },
      async confirm() {
        if (!this.logisticsData.name.trim()) {
          this.$message.warning("请选择司机");
          return;
        }
        if (!this.logisticsData.truckName.trim()) {
          this.$message.warning("请输入货车车牌");
          return;
        }
        if (!this.logisticsData.truckTel.trim()) {
          this.$message.warning("请输入货车电话");
          return;
        }
        this.$refs.form.validate(async (valid) => {
          if (valid) {
            if (Number(this.type) !== 5) {
              await this.stockaddLogistics();
            } else {
              await this.addLogistics();
            }
          }
        });
      },
      async addLogistics() {
        this.loading = true;
        try {
          const { data } = await addLogistics({
            deliveryType: 3,
            logisticsData: {
              id: this.logisticsData.id,
              truckName: this.logisticsData.truckName,
              truckTel: this.logisticsData.truckTel,
              remark: this.logisticsData.remark,
              name: this.logisticsData.name,
            },
            deliveryNo: "",
            expressName: "",
            expressId: "",
            no: "",
            orderId: this.orderId,
          });
          this.$message.success("设置成功");
          this.loading = false;
          this.$emit("confirm", this.logisticsData);
          this.cancel("form");
        } catch {
          this.loading = false;
        }
      },
      async stockaddLogistics() {
        this.loading = true;
        try {
          const { data } = await stockaddLogistics({
            id: this.outId, //出库单id
            driverId: this.logisticsData.id,
            driverName: this.logisticsData.name,
            truckName: this.logisticsData.truckName,
            truckTel: this.logisticsData.truckTel,
            remark: this.logisticsData.remark,
          });
          this.$message.success("设置成功");
          this.loading = false;
          this.$emit("confirm", this.logisticsData);
          this.cancel("form");
        } catch {
          this.loading = false;
        }
      },
      selWarehouse(val) {
        this.logisticsData = {
          id: val[0].id,
          truckName: val[0].plateNumber,
          truckTel: val[0].phone,
          remark: val[0].remark,
          name: val[0].driverName,
        };
      },
      clearable() {
        this.logisticsData = {
          id: "",
          truckName: "",
          truckTel: "",
          remark: "",
          name: "",
        };
      },
      changeLogisticsDataName() {
        this.logisticsData.id = "";
        this.logisticsData.truckName = "";
        this.logisticsData.truckTel = "";
        this.logisticsData.remark = "";
      },
      changeLogisticsData() {
        this.logisticsData.id = "";
      },
    },
  };
</script>

<style scoped></style>
