<template>
<Dialog
  :title="editTitle"
  :dialog-style="dialogStyle"
  :is-dialog-exist="editorExist"
  @close-dialog="closeDialog">
    <el-container>
      <el-form ref="selectItem" :model="selectItem" label-width="100px" :rules="rule">
        <el-main>
          <el-form-item label="手机号：" prop="phone">
            <el-input v-model="selectItem.phone" placeholder="请输入手机号" type="number"></el-input>
          </el-form-item>
          <el-form-item v-if="selectItem.id === null" label="密码：" prop="pwd">
            <el-input v-model="selectItem.pwd" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="备注：" prop="memo">
            <el-input v-model="selectItem.memo" placeholder="请输入备注"></el-input>
          </el-form-item>
          <el-form-item label="权限分组：" prop="roleId">
            <el-select v-model="selectItem.roleId" placeholder="请选择分组">
              <el-option v-for="item in roleList" :key="item.id" :label="item.roleName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-main>
        <el-footer height="20%">
          <el-button type="primary" style=" margin-right: 27px;" @click="submitForm('selectItem')">确定</el-button>
          <el-button type="info" plain @click="resetForm('selectItem')">重置</el-button>
        </el-footer>
    </el-form>
    </el-container>

    <!--  短信校验  -->
    <VerifySmsDialog
      :dialog-show="safeDialogVisible"
      get-sms-url="/admin/User/sendSms"
      @closeDialog="safeDialogVisible = false"
      @smsCodeCallBack="smsCodeCallBack">
    </VerifySmsDialog>
  </Dialog>
</template>

<script>
import Dialog from '@/components/Dialog/index'
import VerifySmsDialog from '@/components/VerifySmsDialog/index'
import { saveAdmin } from '@/api/system-manage/permission-manage/admin-list'
/**
 * 编辑弹窗
 */
export default {

  components: {
    Dialog,
    VerifySmsDialog
  },

  props: {
    editorExist: {
      type: Boolean,
      default: false
    },
    editTitle: {
      type: String,
      default: '标题'
    },
    roleList: {
      type: Array,
      default: () => []
    },
    selectItem: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      safeDialogVisible: false,
      dialogStyle: {
        '--dialog-width': '620px',
        '--dialog-height': '470px',
        '--title-height': '55px'
      },
      rule: {
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' }
          // { min: 6, max: 18, message: '请输入6～18位密码', trigger: 'blur' }
        ],
        memo: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ],
        roleId: [
          { required: true, message: '请选择分组', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 短信接口回调
    smsCodeCallBack(smsCode) {
      console.log('验证码 = ' + smsCode)
      this.save(smsCode)
    },
    // 关闭弹窗
    closeDialog() {
      this.safeDialogVisible = false
      this.$emit('closeDialog')
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.save(null)
        } else {
          return false
        }
      })
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 编辑管理员
    save(smsCode) {
      const request = {
        id: this.selectItem.id === null ? '' : this.selectItem.id,
        phone: this.selectItem.phone,
        // pwd: this.selectItem.pwd,
        memo: this.selectItem.memo,
        state: this.selectItem.state,
        roleId: this.selectItem.roleId
      }
      // 新增用户
      if (this.selectItem.id === null) {
        request.pwd = this.selectItem.pwd
      } else {
        // 编辑用户
        request.pwd = ''
        // 是否禁用用户
        request.state = '1'
      }

      if (smsCode !== null) {
        request['code'] = smsCode
      }
      saveAdmin(request).then(
        res => {
          console.log(JSON.stringify(res))
          if (parseInt(res.code) === 0) {
            this.safeDialogVisible = false
            this.$message.success('操作成功')
            this.$emit('success')
          } else if (parseInt(res.code) === 401) {
            // 发送短信校验
            this.$message.error(res.msg)
            this.safeDialogVisible = true
          } else {
            // 其他错误
            this.$message.error(res.msg)
            console.log('error')
          }
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-container{
    height: 100%;
    width: 100%;
    .el-form {
      width: 100%;
      height: 100%;
      .el-main{
        height: 80%;
        padding-top: 47px;
        padding-left: 100px;
        padding-right: 100px;
        padding-bottom: 47px;

      }
    }

    .el-footer {
      display: flex;
      justify-content: center;
      align-items: center;

    }

  }
</style>
