<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :disabled="$route.query.type=='show'" :rules="rules" label-width="120px">
      <h3>企业信息</h3>
      <el-form-item label="企业名称" prop="supplierName">
        <el-input v-model="form.supplierName" maxlength="50" placeholder="请输入企业名称" />
      </el-form-item>
      <el-form-item label="经营范围" prop="businessScope">
        <el-input v-if="$route.query.type=='show'" type="textarea" :rows="2" placeholder="请输入内容" v-model="form.businessScope">
        </el-input>
        <el-input v-else v-model="form.businessScope" maxlength="100" placeholder="请输入经营范围" />
      </el-form-item>
      <el-form-item label="所属区域" prop="provinces">
        <el-cascader ref="refSubCat" 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-if="$route.query.type=='show'" type="textarea" :rows="2" placeholder="请输入内容" v-model="form.addressDetail">
        </el-input>
        <el-input v-else v-model="form.addressDetail" maxlength="100" placeholder="请输入详细地址" />
      </el-form-item>

      <h3>联系人信息</h3>
      <el-form-item label="联系人姓名" prop="contactName">
        <el-input v-model="form.contactName" placeholder="请输入" />
      </el-form-item>
      <el-form-item label="联系人手机" prop="contactPhone">
        <el-input v-model="form.contactPhone" maxlength="11" placeholder="请输入" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="$route.query.type!='show'" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </div>
</template>
<script>
import { supplierAdd, supplierEdit, supplierInfo } from "@/api/pointsMall";
import { cnAreaTree } from '@/api/shop'
export default {
  name: 'SupplierForm',
  data () {
    return {
      title: '新增供应商',
      visible: false,
      form: {
        supplierName: '',
        region: '',
        areaId: '',
        address: '',
        contactName: '',
        contactPhone: ''
      },
      // 表单校验规则
      rules: {
        supplierName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' }
        ],
        businessScope: [
          { required: true, message: '请输入经营范围', trigger: 'blur' }
        ],
        provinces: [
          { required: true, message: '请选择所属区域', trigger: 'change' }
        ],
        addressDetail: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ],
        contactName: [
          { required: true, message: '请输入联系人姓名', trigger: 'blur' }
        ],
        contactPhone: [
          { required: true, message: '请输入联系人手机', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ]
      },
      areaOptions: [
        { value: '1', label: '华东地区' },
        { value: '2', label: '华南地区' },
        { value: '3', label: '华北地区' }
      ],
      areaTrea: []
    }
  },
  created () {
    this.getCnAreaTree();
    if (this.$route.query.supplierId) {
      this.getDetails(this.$route.query.supplierId)
    }
  },
  methods: {
    getDetails (id) {
      supplierInfo(id).then(res => {
        res.data.provinces = [res.data.provinceCode, res.data.cityCode, res.data.districtCode];
        this.form = res.data;
      })
    },
    // 显示弹框
    init () {
      this.visible = true
      this.reset()
    },
    // 省市区选择
    handleChange (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];
    },
    getCnAreaTree () {
      cnAreaTree().then(res => {
        this.areaTrea = res.data?.children
      })
    },
    // 表单重置
    reset () {
      this.form = {
        supplierName: '',
        region: '',
        areaId: '',
        address: '',
        contactName: '',
        contactPhone: ''
      }
      if (this.$refs.form) {
        this.$refs.form.resetFields()
      }
    },
    // 取消按钮
    cancel () {
      this.$router.go(-1)
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.buttonLoading = true;
          if (this.form.supplierId != null) {
            supplierEdit(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.cancel()
            }).finally(() => {
              this.buttonLoading = false;
            });
          } else {
            supplierAdd(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.cancel()
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
        }
      });
    },
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}

.section-title {
  font-size: 14px;
  color: #333;
  margin: 15px 0 20px;
  display: flex;
  align-items: center;

  &-icon {
    width: 4px;
    height: 16px;
    background-color: #c0a16b;
    margin-right: 8px;
    border-radius: 2px;
  }
}
.el-form {
  width: 1000px;
}
h3 {
  width: 120px;
  font-weight: 700;
  text-align: right;
}
.dialog-footer {
  padding-left: 120px;
}
</style>