
<template>
  <el-dialog
    :visible="visible"
    :title="`${type === 'add' ? '新增' : '修改'}经销商`"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="rnr-dialog"
    width="960px"
    destroy-on-close
    @close="$emit('update:visible', false)"
  >
    <el-form ref="formRef" :model="data" label-position="top">
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item :rules="IS_NOT_EMPTY('请输入经销商名称')" prop="distributorName" label="经销商名称">
            <el-input v-model="data.distributorName" placeholder="请输入经销商名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model="data.remark" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="type === 'add'" :gutter="24">
        <el-col :span="12">
          <el-form-item :rules="IS_NOT_EMPTY('请输入管理员姓名')" prop="distributorAdminUserName" label="管理员姓名">
            <el-input v-model="data.distributorAdminUserName" placeholder="请输入管理员姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :rules="IS_NOT_EMPTY('请输入管理员账号')" prop="distributorAdminUserAccount" label="管理员账号">
            <el-input v-model="data.distributorAdminUserAccount" placeholder="请输入管理员账号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="type === 'add'" :gutter="24">
        <el-col :span="12">
          <el-form-item :rules="[IS_NOT_EMPTY('请输入管理员密码'), IS_RIGHT_PASSWORD()]" prop="password" label="管理员密码">
            <el-input v-model="data.password" :placeholder="type === 'add' ? '请输入管理员密码' : '******'" type="password" />
            <div class="el-form-item__field-tip">密码长度必须为8～20位字符，由大写字母、小写字母、数字、特殊符号中的3种及以上类型组成</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :rules="[IS_NOT_EMPTY('请输入确认密码'), CONFIRM_PASSWORD]" prop="confirmPassword" label="确认密码">
            <el-input v-model="data.confirmPassword" :placeholder="type === 'add' ? '请确认输入的密码' : '******'" type="password" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="type === 'add'" :gutter="24">
        <el-col :span="12">
          <el-form-item :rules="[IS_NOT_EMPTY('请输入管理员手机号'), IS_PHONE()]" prop="phone" label="管理员手机号">
            <el-input v-model="data.phone" type="number" placeholder="请输入管理员手机号" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取消</el-button>
      <el-button :loading="isLoading" type="primary" @click="handleSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { addUserEnterpriseDistributor, updateUserEnterpriseDistributor } from '@/api/management'
import { IS_NOT_EMPTY, IS_PHONE, CONFIRM_PASSWORD, IS_RIGHT_PASSWORD } from '../../rules'
import '../dialog.scss'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: () => ({})
    },
    type: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      IS_NOT_EMPTY,
      IS_PHONE,
      IS_RIGHT_PASSWORD,
      isLoading: false
    }
  },
  computed: {
    /**
     * 确认密码
     */
    CONFIRM_PASSWORD() {
      return CONFIRM_PASSWORD(this.data.password)
    }
  },
  methods: {
    /**
     * 点击关闭方法
     */
    handleClose() {
      this.$emit('update:visible', false)
    },
    /**
     * 点击保存方法
     */
    handleSubmit() {
      // 对输入的数据进行校验
      this.$refs.formRef.validate(async valid => {
        // 如果校验失败
        if (!valid) {
          return
        }
        // 展示loading状态
        this.isLoading = true
        try {
          // 如果当前是新增
          if (this.type === 'add') {
            await addUserEnterpriseDistributor(this.data)
          }
          // 如果当前是编辑
          if (this.type === 'edit') {
            await updateUserEnterpriseDistributor(this.data)
          }
          // 关闭弹框
          this.handleClose(true)
          // 重新刷新列表
          this.$emit('refresh')
        } catch (error) {
          console.error(error)
        }
        // 关闭loading状态
        this.isLoading = false
      })
    }
  }
}
</script>
