<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="organName" label="组织名称">
            <el-input v-model="data.organName" placeholder="请输入组织名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="组织类型" prop="bizType">
            <el-select v-model="data.bizType">
              <!-- <el-option label="车企" :value="1" /> -->
              <el-option label="经销商" :value="2" />
              <el-option label="车企子公司" :value="3" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item prop="comment" label="备注">
            <el-input v-model="data.comment" placeholder="请输入备注" />
          </el-form-item>
        </el-col>
        <el-col v-if="type === 'add'" :span="12">
          <el-form-item :rules="IS_NOT_EMPTY('请输入管理员姓名')" prop="organAdminName" label="管理员姓名">
            <el-input v-model="data.organAdminName" placeholder="请输入管理员姓名" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="type === 'add'" :gutter="24">
        <el-col :span="12">
          <el-form-item :rules="IS_NOT_EMPTY('请输入管理员账号')" prop="organAdminAccount" label="管理员账号">
            <el-input v-model="data.organAdminAccount" placeholder="请输入管理员账号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :rules="[IS_NOT_EMPTY('请输入管理员手机号'), IS_PHONE()]" prop="organAdminPhone" label="管理员手机号">
            <el-input v-model="data.organAdminPhone" type="number" placeholder="请输入管理员手机号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="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-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 { createOrgan, updateOrgan } from '@/api/management'
import { IS_NOT_EMPTY, IS_PHONE, CONFIRM_PASSWORD, IS_RIGHT_PASSWORD } from '../../rules'

export default {
  name: 'UpdateOrganization',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object,
      default: () => ({})
    }
  },
  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 {
          // 组织管理
          const { organId } = this.$route.query
          // 更加类型判断是调用新建接口还是编辑接口
          const requestFn = this.type === 'add' ? createOrgan : updateOrgan
          // 创建组织
          await requestFn({
            ...this.data,
            parentId: organId || this.$store.getters.organId
          })
          // 关闭弹框
          this.handleClose(true)
          // 重新刷新列表
          this.$emit('refresh')
        } catch (error) {
          console.error(error)
        }
        // 关闭loading状态
        this.isLoading = false
      })
    }
  }
}
</script>
