<template>
  <vxe-modal
    v-model="modalFlag"
    :title="title"
    width="500"
    min-height="410"
    resize
    remember
    center
    @close="closeModal"
  >
    <template #default>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="线路名称" prop="name">
          <el-input
            v-model="ruleForm.name"
            style="width: 250px"
            placeholder="请输入线路名称"
          ></el-input>
        </el-form-item>
        <el-form-item v-if="enterprise === 5" label="关联店铺">
          <SelectShop
            v-model="ruleForm.shopId"
            width="250"
            placeholder="所属店铺"
            @clear="clearShop"
            @change="selShop"
          />
        </el-form-item>
        <el-form-item label="司机">
          <el-button type="primary" @click="Driver_show = true">
            选择司机
          </el-button>
          <div style="display: inline-block; margin-left: 10px">
            <el-tag
              v-for="(item, index) in DriverNameArr"
              :key="index"
              closable
              @close="closeTag(index)"
            >
              {{ item.driverName }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item label="客户">
          <el-button type="primary" @click="customer_show = true">
            选择客户
          </el-button>
          <div style="display: inline-block; margin-left: 10px">
            <el-tag
              v-for="(item, index) in customerNameArr"
              :key="index"
              closable
              @close="closeCustomerTag(index)"
            >
              {{ item.customerName }}
            </el-tag>
          </div>
        </el-form-item>
        <el-form-item label="线路备注">
          <el-input
            v-model="ruleForm.desc"
            type="textarea"
            style="width: 250px"
            :autosize="{ minRows: 4 }"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="float_right">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="addDeliveryRoute">
          确 定
        </el-button>
      </span>
      <!--    选择司机弹窗-->
      <DriverModel
        v-if="Driver_show"
        :is-show="Driver_show"
        :is-check="true"
        @confirm="selWarehouse"
        @cancel="Driver_show = false"
      ></DriverModel>
      <!--      选择客户弹窗-->
      <ClientListModal
        v-if="customer_show"
        :is-show="customer_show"
        :is-check="true"
        :is-show-add="true"
        :modal="false"
        @cancel="customer_show = false"
        @confirm="customerSel"
      />
    </template>
  </vxe-modal>
</template>
<script>
  import SelectShop from "@/component/goods/SelectShop.vue";
  import DriverModel from "@/component/common/DriverModel";
  import ClientListModal from "@/component/common/ClientListModal";
  import {
    addDeliveryRoute,
    getDeliveryRouteInfo,
    updateDeliveryRoute,
  } from "@/api/Delivery";
  export default {
    components: {
      SelectShop,
      DriverModel,
      ClientListModal,
    },
    props: {
      modalFlag: {
        type: Boolean,
        default: false,
      },
      enterprise: {
        type: [Number, String],
        default: 0,
      },
      lineId: {
        type: [Number, String],
        default: 0,
      },
    },
    data() {
      return {
        ruleForm: {
          name: "",
          shopId: "",
          driverId: [],
          desc: "",
          customerId: [],
        },
        rules: {
          name: [
            { required: true, message: "请输入线路名称", trigger: "blur" },
          ],
        },
        Driver_show: false,
        DriverNameArr: [],
        driverName: [],
        title: "",
        loading: false,
        customer_show: false,
        customerNameArr: [],
        customerName: [],
      };
    },
    created() {
      if (this.lineId) {
        this.title = "编辑线路";
        this.getDeliveryRouteInfo();
      } else {
        this.title = "新增线路";
      }
    },
    methods: {
      closeModal() {
        this.ruleForm.name = "";
        this.ruleForm.shopId = "";
        this.ruleForm.driverId = [];
        this.ruleForm.customerId = [];
        this.ruleForm.desc = "";
        this.DriverNameArr = [];
        this.customerNameArr = [];
        this.$refs["ruleForm"].resetFields();
        this.$emit("close");
      },
      clearShop() {
        this.ruleForm.shopId = "";
      },
      selShop() {},
      selWarehouse(row) {
        if (this.DriverNameArr.length) {
          this.DriverNameArr = this.$_common.unique(
            this.DriverNameArr.concat(row),
            ["id"]
          );
        } else {
          this.DriverNameArr = row;
        }
        this.ruleForm.driverId = this.DriverNameArr.map((item) => {
          return item.id;
        });
        this.driverName = this.DriverNameArr.map((item) => {
          return item.driverName;
        });
      },
      //  关闭司机标签
      closeTag(index) {
        this.DriverNameArr.splice(index, 1);
      },
      //关闭客户标签
      closeCustomerTag(index) {
        this.customerNameArr.splice(index, 1);
      },
      async addDeliveryRoute() {
        if (!this.ruleForm.name.trim()) {
          this.$message.warning("线路名称不能为空");
          return;
        }
        this.loading = true;
        const driverId = this.DriverNameArr.map((item) => item.id);
        const customerId = this.customerNameArr.map((item) => item.customerId);
        let parser = {
          name: this.ruleForm.name,
          shopId: this.ruleForm.shopId,
          driverId: driverId.join(","),
          desc: this.ruleForm.desc,
          customerId: customerId,
        };
        try {
          if (this.lineId) {
            const { data } = await updateDeliveryRoute(this.lineId, parser);
            this.$message.success("编辑成功");
          } else {
            this.ruleForm.driverId = this.ruleForm.driverId.join(",");
            const { data } = await addDeliveryRoute(parser);
            this.$message.success("添加成功");
          }
          this.loading = false;
          await this.closeModal();
        } catch {
          this.loading = false;
        }
      },
      async getDeliveryRouteInfo() {
        const { data } = await getDeliveryRouteInfo(this.lineId);
        this.ruleForm = data;
        this.DriverNameArr = data.driverData;
        this.customerNameArr = data.customerData;
      },
      customerSel(val) {
        const arr = val.map((item) => {
          return { ...item, customerName: item.name, customerId: item.id };
        });
        if (this.customerNameArr.length) {
          this.customerNameArr = this.$_common.unique(
            this.customerNameArr.concat(arr),
            ["customerId"]
          );
        } else {
          this.customerNameArr = arr;
        }
      },
    },
  };
</script>
<style></style>
