<template>
  <div class="addeditUserDialog">
    <el-dialog 
      class="addParts"
      :visible.sync="dialogFormVisible" 
      :before-close="cancelRegister" 
      :top="top"
      :title="organTitle"
      width="570px">

      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :inline="true">
        <el-form-item label="机构名称" prop="organname">
          <el-input v-model="ruleForm.organname"></el-input>
        </el-form-item>
        <el-form-item label="机构描述">
          <el-input v-model="ruleForm.organdescription"></el-input>
        </el-form-item>
        <el-form-item label="邮编" prop="organzipcode">
          <el-input v-model="ruleForm.organzipcode"></el-input>
        </el-form-item>
        <el-form-item label="email地址" prop="contactemail">
          <el-input v-model="ruleForm.contactemail"></el-input>
        </el-form-item>
        <el-form-item label="传真">
          <el-input v-model="ruleForm.contactfax"></el-input>
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="ruleForm.contactname"></el-input>
        </el-form-item>
        <el-form-item label="机构电话">
          <el-input v-model="ruleForm.contactphone"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio class="status" v-model="ruleForm.status" label="enable">启用</el-radio>
          <el-radio class="status" v-model="ruleForm.status" label="disable">禁用</el-radio>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-select v-model="ruleForm.sort" placeholder="请选择数值排序">
            <el-option
              v-for="item in ruleForm.options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机构类型">
          <el-select v-model="ruleForm.organtype" placeholder="请选择机构类型">
            <el-option label="部门" value="0"></el-option>
            <el-option label="岗位" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelRegister">取 消</el-button>
        <el-button type="primary" @click="dialogSure('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Api from '@/api/index.js'

  export default { 
    name: 'AddeditUserDialog',

    props: { 
      dialogFormVisible: { 
        type: Boolean,
        default: false
      },
      rowOrganOnoff: { 
        type: Boolean,
        default: false
      },
      organformId: '',
      top: { 
        type: String,
        default: '2%'
      },
      organTitle: {
        type: String,
        default: '添加机构'
      }
    },
    data () { 
      return { 
        ruleForm: {
          organname: '',
          organdescription: '',
          organzipcode: '',
          contactemail: '',
          contactfax: '',
          contactname: '',
          contactphone: '',
          status: 'enable',
          sort: '1',
          options: [{
            value: '1',
            label: '1'
          }, {
            value: '2',
            label: '2'
          }, {
            value: '3',
            label: '3'
          }, {
            value: '4',
            label: '4'
          }, {
            value: '5',
            label: '5'
          }, {
            value: '6',
            label: '6'
          }],
          organtype: '1'
        },
        rules: {
          organname: [
            {required: true, message: '请输入登录名称', trigger: 'blur'},
            {validator: (rule, value, callback) => {
                if (value.length > 10 || value.length < 2) {
                  callback(new Error('长度必须为2~10个字符'))
                } else {
                  var reg = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>《》/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
                  if (reg.test(value)) {
                    callback(new Error('不能含有特殊字符'))
                  } else {
                    callback()
                  }
                }
              },
              trigger: 'blur'
            }
          ],
          organzipcode: [
            {validator: (rule, value, callback) => {
                var test = /^[1-9][0-9]{5}$/g.test(value)
                if (value !== '') {
                  if (!test) {
                    callback(new Error('请输入合理的邮编（邮编：第1个数不为0的六位数）'))
                  } else {
                    callback()
                  }
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ],
          contactemail: [
            {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
          ],
          sort: [
            {required: true, message: '请输入整数数字排序', trigger: 'blur'}
          ]
          /* userPassword: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {validator: (rule, value, callback) => {
                var testLen = /[A-Za-z\d~!@#$%^&*()<>?_+{}|]{8,}/g.test(value)
                var test = /(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z~!@#$%^&*()<>?_+{}|]+$)(?![a-z\d]+$)(?![a-z~!@#$%^&*()<>?_+{}|]+$)(?![\d~!@#$%^&*()<>?_+{}|]+$)[A-Za-z\d~!@#$%^&*()<>?_+{}|]/g.test(value)
                if (!testLen) {
                  callback(new Error('密码最小长度为8个字符'))
                } else if (!test) {
                  callback(new Error('至少含有大小写字母、数字和特殊字符中的三种'))
                } else {
                  callback()
                }
              },
              trigger: 'change'
            }
          ],
          rePassword: [
            {required: true, message: '请确认密码', trigger: 'blur'},
            {validator: (rule, value, callback) => {
                if (this.ruleForm.userPassword !== value) {
                  callback(new Error('输入的密码不一致，请重新确认'))
                } else {
                  callback()
                }
              },
              trigger: 'blur'
            }
          ],
          userName: [
            {required: true, message: '请输入用户名称', trigger: 'blur'}
          ],
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
          ] */
        }
      }
    },
    mounted () {
      this.initData()
    },
    methods: { 
      // 初始化数据
      initData () { 
        // 判断是添加用户还是修改用户
        if (this.rowOrganOnoff) { // 修改
          this.showUserData()
        } else { // 添加用户
          this.ruleForm.organname = ''
          this.ruleForm.organdescription = ''
          this.ruleForm.organzipcode = ''
          this.ruleForm.contactemail = ''
          this.ruleForm.contactfax = ''
          this.ruleForm.contactname = ''
          this.ruleForm.contactphone = ''
          this.ruleForm.status = 'enable'
          this.ruleForm.sort = '1'
          this.ruleForm.organtype = '1'
        }
      },
      // 展示数据
      showUserData () {
        Api.showOrganData(this.organformId)
        .then(data => {
          let datas = data.data
          if (data.status === 0) {
            this.ruleForm.organname = datas.organname
            this.ruleForm.organdescription = datas.organdescription || ''
            this.ruleForm.organzipcode = datas.organzipcode || ''
            this.ruleForm.contactemail = datas.contactemail || ''
            this.ruleForm.contactfax = datas.contactfax || ''
            this.ruleForm.contactname = datas.contactname || ''
            this.ruleForm.contactphone = datas.contactphone || ''
            this.ruleForm.status = 'enable'
            this.ruleForm.sort = datas.sort
            this.ruleForm.organtype = datas.organtype || '1'
          } else {
            this.$message({
              type: 'warning',
              message: '获取数据失败'
            })
          }
        }).catch(res => {
          this.$message({
            type: 'error',
            message: '获取数据失败'
          })
        })
      },
      // 确定
      dialogSure (ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            if (this.rowOrganOnoff) { // 修改
              this.$emit('dialog-sure', [this.ruleForm, true])
            } else { // 新建
              this.$emit('dialog-sure', [this.ruleForm, false])
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      // 取消
      cancelRegister () { 
        this.$emit('dialog-cancel')
      }
    } 
  }
</script>

<style lang="scss">
  .addParts{ 
    .el-dialog--small{ 
      width: 40%;
    } 
    .el-dialog__header{ 
      padding: 20px 20px 0 20px;
      text-align: center;
      .el-dialog__title{ 
        color: #666;
      }
    }
    .el-dialog__body{ 
      padding: 20px 15px 10px 40px;
    }
    .el-form-item__label{ 
      width: 80px;
      float: left !important;
    }
    .el-form-item__content{ 
      float: left;
      width: 350px;
    }
    .el-form-item{ 
      margin-bottom: 18px;
    }
  }
</style>
