<template>
  <a-modal
    centered
    class="dealerAccountEdit-modal"
    :footer="null"
    :maskClosable="false"
    title="账号信息"
    v-model="isShow"
    @cancel="isShow=false"
    :width="800">
    <!-- 表单 -->
    <div>
      <a-spin :spinning="spinning" tip="Loading...">
        <a-form-model
          id="dealerAccountEdit-form"
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-form-model-item label="经销商名称" prop="tenantSn">
            <custList ref="custList" v-if="itemId==''" id="dealerAccountEdit-tenantSn" @change="custChange"></custList>
            <span v-else>{{ detailData ? (detailData.org ? detailData.org.name : '--') : '--' }}</span>
          </a-form-model-item>
          <a-form-model-item label="管理员姓名" prop="name">
            <a-input
              id="dealerAccountEdit-name"
              :maxLength="30"
              v-model.trim="form.name"
              placeholder="请输入管理员姓名(最多30个字符)"
              allowClear />
          </a-form-model-item>
          <a-form-model-item label="管理员手机" prop="phone">
            <a-input
              id="dealerAccountEdit-phone"
              :maxLength="11"
              v-model.trim="form.phone"
              placeholder="请输入管理员手机(最多11个字符)"
              allowClear />
          </a-form-model-item>
          <a-form-model-item label="管理员账号" prop="loginName">
            <a-input
              id="dealerAccountEdit-loginName"
              :maxLength="50"
              v-model.trim="form.loginName"
              placeholder="请输入管理员账号，字母/数字(最多50个字符)"
              allowClear />
          </a-form-model-item>
          <a-form-model-item label="管理员密码" prop="password" :extra="itemId ? '说明：已录入的密码不会显示，录入新密码将会覆盖原有密码' : ''" >
            <a-input
              id="dealerAccountEdit-password"
              :maxLength="50"
              :minLength="6"
              type="password"
              v-model.trim="form.password"
              placeholder="请输入管理员密码，字母/数字(最少6个字符,最多50个字符)"
              allowClear />
          </a-form-model-item>
          <a-form-model-item label="最大可开通用户数" prop="org.childUserMaxNum" extra="（含管理员账号）">
            <a-input-number
              id="dealerAccountEdit-childUserMaxNum"
              v-model="form.org.childUserMaxNum"
              :precision="0"
              :min="1"
              :max="99999999"
              placeholder="请输入数量"
              style="width: 100%;" />
          </a-form-model-item>
        </a-form-model>
        <div class="btn-cont">
          <a-button id="dealerAccountEdit-back" @click="isShow = false" >取消</a-button>
          <a-button type="primary" id="dealerAccountEdit-save" style="margin-left: 15px;" @click="handleSave">保存</a-button>
        </div>
      </a-spin>
    </div>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
// 组件
import custList from '@/views/common/custList.vue'
// 接口
import { dealerUserSave, dealerUserDetail } from '@/api/dealer'
export default {
  name: 'DealerAccountEditModal',
  mixins: [commonMixin],
  components: { custList },
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemId: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      spinning: false,
      // form表单label布局
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      },
      // 提交数据
      form: {
        tenantSn: '', // 经销商sn
        name: '', // 管理员姓名
        phone: '', // 管理员手机
        loginName: '', // 管理员账号
        password: '', // 管理员密码
        org: {
          childUserMaxNum: ''// 最大可开通用户数
        }
      },
      // 表单验证规则
      rules: {
        tenantSn: [{ required: true, message: '请选择经销商', trigger: 'change' }],
        name: [{ required: true, message: '请输入管理员姓名', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入管理员手机', trigger: 'blur' }, { pattern: /^\d{11}$/, message: '请输入正确的手机号' }],
        loginName: [{ required: true, message: '请输入管理员账号', trigger: 'blur' }, { pattern: /^[0-9a-zA-Z]+$/, message: '管理员账号由字母和数字组成' }],
        password: [
        //   { validator: this.passwordValid }
        //   // { required: true, message: '请输入管理员密码', trigger: 'blur' },
        //   // { pattern: /^[0-9a-zA-Z]+$/, message: '管理员密码由字母和数字组成' },
        //   // { min: 6, message: '管理员密码为6~50位' }
        ],
        'org.childUserMaxNum': [{ required: true, message: '请输入最大可开通用户数', trigger: 'blur' }]
      },
      detailData: null //  详情数据
    }
  },
  methods: {
    //  密码位数校验
    passwordValid (rule, value, callback) {
      if ((this.itemId && value) || (!this.itemId && value)) {
        var reg = /^[0-9a-zA-Z]+$/
        if ((reg.test(value)) && !(value.length < 6 || value.length > 50)) {
          callback()
        }
        if (!reg.test(value)) {
          callback('管理员密码由字母和数字组成')
        }
        if (value.length < 6 || value.length > 50) {
          callback('管理员密码为6~50位')
        }
      } else {
        if (!this.itemId && !value) {
          callback('请输入管理员密码')
        } else {
          callback()
        }
      }
    },
    // 经销商名称 change
    custChange (val) {
      this.form.tenantSn = val.key
    },
    //  保存
    handleSave () {
      const _this = this
      _this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const formData = JSON.parse(JSON.stringify(_this.form))
          formData.id = _this.itemId ? _this.itemId : undefined
          if (!formData.password) {
            delete formData.password
          }
          _this.spinning = true
          dealerUserSave(formData).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$emit('ok')
              _this.isShow = false
              _this.spinning = false
            } else {
              _this.spinning = false
            }
          })
        } else {
          return false
        }
      })
    },
    //  获取详情
    getDetail () {
      dealerUserDetail({ id: this.itemId }).then(res => {
        if (res.status == 200) {
          this.detailData = res.data
          this.form.tenantSn = this.detailData.tenantSn || ''
          this.form.name = this.detailData.name || ''
          this.form.phone = this.detailData.phone || ''
          this.form.loginName = this.detailData.loginName || ''
          this.form.password = this.detailData.password || ''
          const childUserMaxNum = this.detailData ? (this.detailData.org ? (this.detailData.org.childUserMaxNum ? this.detailData.org.childUserMaxNum : '') : '') : ''
          this.form.org.childUserMaxNum = Number(childUserMaxNum)
        } else {
          this.detailData = null
          this.$refs.ruleForm.resetFields()
        }
      })
    },
    // 重置
    resetSearchForm () {
      this.$refs.ruleForm.resetFields()
      this.form.tenantSn = ''
      this.form.name = ''
      this.form.phone = ''
      this.form.loginName = ''
      this.form.password = ''
      this.form.org.childUserMaxNum = ''
      if (this.itemId == '') {
        this.$refs.custList.resetForm()
      }
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      if (this.itemId) {
        this.rules.password = [
          { required: false },
          { validator: this.passwordValid }
        ]
      } else {
        this.rules.password = [
          { required: true, message: '请输入管理员密码', trigger: 'blur' },
          { validator: this.passwordValid }
        ]
      }
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.resetSearchForm()
      }
    },
    itemId (newValue, oldValue) {
      if (this.isShow && newValue) {
        this.getDetail()
      }
    }
  }
}
</script>

<style lang="less">
  .dealerAccountEdit-modal{
    .ant-modal-body {
      padding: 40px 40px 24px;
    }
    .btn-cont {
      text-align: center;
      margin: 35px 0 10px;
    }
  }
</style>
