<template>
  <Dialog
  :title="dialogTitle"
  :dialog-style="dialogStyle"
  :is-dialog-exist="showDialogVisible"
  @close-dialog="closeDialog"
  >
    <el-container>
      <el-form ref="selectItem" :model="selectItem" label-width="150px" :rules="rule">
        <el-main>
          <el-form-item v-if="isCopy" label="复制的权限分组名称:">
            <el-input v-model="selectItem.copyRoleName" readonly disabled></el-input>
          </el-form-item>
          <el-form-item prop="roleName" label="权限分组名称:">
            <el-input v-model="selectItem.roleName"></el-input>
          </el-form-item>
          <el-form-item prop="memo" label="备注">
            <el-input v-model="selectItem.memo"></el-input>
          </el-form-item>
        </el-main>
        <el-footer height="30%">
          <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
      :get-sms-url="getSmsUrl"
      :dialog-show="isSafeDialogVisible"
      @closeDialog="isSafeDialogVisible = false"
      @smsCodeCallBack="smsCodeCallBack"
    >
    </VerifySmsDialog>
  </Dialog>
</template>

<script>
import Dialog from '@/components/Dialog/index'
import VerifySmsDialog from '@/components/VerifySmsDialog/index'
import { roleSave, copyRole } from '@/api/system-manage/permission-manage/permission-setting'
/**
 * 权限分组编辑Dialog
 *
 */
export default {
  components: {
    Dialog,
    VerifySmsDialog
  },
  props: {
    dialogTitle: {
      type: String,
      default: '标题'
    },
    dialogStyle: {
      type: Object,
      default: () => {}
    },
    showDialogVisible: {
      type: Boolean,
      default: false
    },
    selectItem: {
      type: Object,
      default: () => {}
    },
    isCopy: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isSafeDialogVisible: false,
      getSmsUrl: '/admin/Role/sendSms',
      rule: {
        roleName: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        memo: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 验证码返回
    smsCodeCallBack(smsCode) {
      console.log('验证码 ：smsCode')
      if (this.isCopy) {
        this.save(smsCode)
      } else {
        this.copy(smsCode)
      }
    },
    // 提交表单
    submitForm(forName) {
      this.$refs[forName].validate((valid) => {
        if (valid) {
          if (this.isCopy) {
            this.copy(null)
          } else {
            this.save(null)
          }
        } else {
          return false
        }
      })
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    // 关闭dialog
    closeDialog() {
      console.log('关闭dialog')
      this.$emit('closeDialog')
    },
    // 操作成功回调
    successCallBack() {
      this.$emit('successCallBack')
    },
    // 保存分组
    save(smsCode) {
      const request = {
        id: this.selectItem.id,
        roleName: this.selectItem.roleName,
        memo: this.selectItem.memo
      }
      if (smsCode !== null) {
        request.code = smsCode
      }
      roleSave(request).then(res => {
        if (parseInt(res.code) === 0) {
          // 成功
          this.isSafeDialogVisible = false
          this.$message.success('操作成功')
          this.successCallBack()
        } else if (parseInt(res.code) === 401) {
          this.$message.error(res.msg)
          this.isSafeDialogVisible = true
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 复制分组
    copy(smsCode) {
      const request = {
        id: this.selectItem.id,
        roleName: this.selectItem.roleName,
        memo: this.selectItem.memo
      }
      if (smsCode !== null) {
        request.code = smsCode
      }

      copyRole(request).then(res => {
        if (parseInt(res.code) === 0) {
          // 成功
          this.isSafeDialogVisible = false
          this.$message.success('操作成功')
          this.successCallBack()
        } else if (parseInt(res.code) === 401) {
          this.$message.error(res.msg)
          this.isSafeDialogVisible = true
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>

  .el-container {
    width: 100%;
    height: 100%;
    .el-form {
      width: 100%;
      height: 100%;
      padding-left: 10%;
      padding-right: 10%;

      .el-main {
        height: 70%;
        /*background: yellow;*/
      }

      .el-footer {
        /*background: red;*/
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
