<template>
  <el-drawer :title="form.supplierId ? '编辑' : '新增'" :visible.sync="drawer" :direction="direction"
    :before-close="handleClose" size="700px">
    <div style="padding: 10px 40px 20px 10px">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120px" :size="ELsize">
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="form.supplierName" placeholder="请输入供应商名称" clearable maxlength="50"></el-input>
        </el-form-item>

        <el-form-item label="联系人姓名" prop="contactName">
          <el-input v-model="form.contactName" placeholder="请输入联系人姓名" clearable maxlength="30"></el-input>
        </el-form-item>

        <el-form-item label="联系人电话" prop="contactPhone">
          <el-input v-model="form.contactPhone" placeholder="请输入联系人电话" clearable maxlength="11"></el-input>
        </el-form-item>

        <el-form-item label="所在城市" prop="provinces">
          <el-cascader ref="refSubCat" size="small" v-model="form.provinces" placeholder="请选择所在城市" :options="areaTrea"
            :props="{ expandTrigger: 'hover' }" @change="handleChange" style="width: 100%"></el-cascader>
        </el-form-item>

        <el-form-item label="详细地址" prop="addressDetail">
          <el-input v-model="form.addressDetail" placeholder="请输入详细地址" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
          <el-button @click="handleClose()">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-drawer>
</template>
<script>
import { supplierAdd, supplierEdit } from "@/api/supplier";
export default {
  props: {
    areaTrea: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      drawer: false,
      direction: "rtl",
      form: {},
      rules: {
        supplierName: [
          { required: true, message: "请输入供应商名称", trigger: "blur" },
        ],
        contactName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
        ],
        contactPhone: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
          { max: 11, message: "长度不能超过11个字符", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "格式不正确",
            trigger: "blur",
          },
        ],
        provinces: [
          { required: true, message: "请选择所在城市", trigger: "blur" },
        ],
        addressDetail: [
          { required: true, message: "请输入详细地址", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    open(data = null) {
      if (data) {
        this.form = {
          ...data,
          provinces: [data.provinceCode, data.cityCode, data.districtCode],
        };
      }
      this.drawer = true;
    },
    handleClose() {
      this.drawer = false;
      this.form = {};
      this.$refs.formRef.resetFields();
    },
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          console.log("submit!", this.form);
          this.loading = true;
          if (this.form.supplierId) {
            supplierEdit(this.form)
              .then((res) => {
                this.loading = false;
                if (res.code == 200) {
                  this.$message.success("编辑成功");
                  this.handleClose();
                  this.$emit("queryTable");
                }
              })
              .catch((err) => {
                this.loading = false;
              });
          } else {
            supplierAdd(this.form)
              .then((res) => {
                this.loading = false;
                if (res.code == 200) {
                  this.$message.success("新增成功");
                  this.handleClose();
                  this.$emit("queryTable");
                }
              })
              .catch((err) => {
                this.loading = false;
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 省市区选择
    handleChange(value) {
      if (value) {
        this.form.provinces = value;
        this.form.provinceCode = value[0];
        this.form.provinceName =
          this.$refs["refSubCat"].getCheckedNodes()[0].pathLabels[0];
        this.form.cityCode = value[1];
        this.form.cityName =
          this.$refs["refSubCat"].getCheckedNodes()[0].pathLabels[1];
        this.form.districtCode = value[2];
        this.form.districtName =
          this.$refs["refSubCat"].getCheckedNodes()[0].pathLabels[2];
      } else {
        this.form.provinces = null;
      }
    },
  },
};
</script>
<style scoped lang="scss"></style>
