<template>
  <div class="layout-no-cols">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" class="el-button el-button--default save" :loading="confirmLoading" @click="confirm"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>
    <div>
      <div class="detail-panel">
        <h3>{{roleCode =='new' ? '添加角色' : '修改角色'}}</h3>
        <el-form :model="tmpRole" ref="roleForm" label-width="120px" :rules="roleRules" v-loading="dialogLoading" label-suffix="：" class="member-role-add-form">
          <el-form-item label="角色名" prop="roleName" class="roleName">
            <el-input v-model="tmpRole.roleName" auto-complete="off"></el-input>
            <i class="fa fa-language" title="多语言设置" @click="langBtnClickHandler('roleName',tmpRole.roleName,tmpRole.roleName_I18N)"></i>
          </el-form-item>
          <el-form-item label="角色代码" prop="roleCode" class="roleCode" :verify="['NotNull','Regex=^[a-zA-Z0-9_]{1,16}$|请用1-16位的英文字母、数字、下划线']">
            <el-input v-model="tmpRole.roleCode" :disabled="roleCode!='new'"  auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="memo" class="memo" >
            <el-input v-model="tmpRole.memo" auto-complete="off" ></el-input>
            <i class="fa fa-language" title="多语言设置" @click="langBtnClickHandler('memo',tmpRole.memo,tmpRole.memo_I18N)"></i>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- 多语言编辑器 -->
    <lang-edit-dlg
      :show.sync="langDialog.isShowModal"
      :ID="langDialog.ID"
      :targetValue="langDialog.targetValue"
      :languages="langDialog.languages"
      @callback="getI18nBack">
    </lang-edit-dlg>
  </div>
</template>
<script>

import util from '@src/common/util.js'
import LangEditDialog from '@src/pages/platform/components/LangEditDialog.vue'
export default {
  components: {
    'lang-edit-dlg': LangEditDialog
  },
  props: {
    roleCode: {
      type: String,
      required: true,
      defualt: 'new'
    }
  },
  data() {
    let nameLengthEXCheck = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入名称'))
      } else {
        let lengthEx = util.getLengthEx(value, true)
        if (lengthEx > 50) {
          callback(new Error('名称必须小于等于16个汉字或者50个字母'))
        } else {
          callback()
        }
      }
    }
    let memoLengthEXCheck = (rule, value, callback) => {
      let lengthEx = util.getLengthEx(value, true)
      if (lengthEx > 400) {
        callback(new Error('备注必须小于等于333个汉字或者1000个字母'))
      } else {
        callback()
      }
    }
    return {
      dialogLoading: false,
      confirmLoading: false, //  角色编辑添加提交加载变量
      tmpRole: {
        roleCode: '',
        roleName: '',
        memo: '',
        roleName_I18N: '',
        memo_I18N: ''
      }, //   角色临时存储变量
      langDialog: {
        isShowModal: false,
        ID: '',
        languages: '',
        targetValue: ''
      },
      roleRules: {
        roleName: [
          { validator: nameLengthEXCheck, trigger: 'blur change' }
        ],
        memo: [
          { validator: memoLengthEXCheck, trigger: 'blur change' }
        ]
      }
    }
  },
  created() {
    this.beforeShowPage()
  },
  methods: {
    beforeShowPage() {
      this.confirmLoading = false
      this.tmpRole = {
        roleCode: '',
        roleName: '',
        memo: '',
        roleName_I18N: '',
        memo_I18N: ''
      }
      if (this.roleCode !== 'new') {
        this.initRoleInfo()
      }
    },
    getI18nBack(data) {
      if (data.ID === 'roleName') {
        this.tmpRole.roleName = data.val
        this.tmpRole.roleName_I18N = data.data
      }
      if (data.ID === 'memo') {
        this.tmpRole.memo = data.val
        this.tmpRole.memo_I18N = data.data
      }
    },
    langBtnClickHandler(ID, value, languages) {
      this.langDialog.isShowModal = true
      this.langDialog.ID = ID
      this.langDialog.languages = languages
      this.langDialog.targetValue = value
    },
    // 提交数据
    async confirm() {
      this.confirmLoading = true
      try {
        if (this.tmpRole.roleCode === 'new') {
          util.showErrorNotification('角色代码已被占用，请重新输入')
          return
        }
        await util.validateForm(this.$refs['roleForm'])
        let res = {}
        if (this.roleCode === '' || this.roleCode === 'new') {
          res = await axios.post('/ui/memberroles', this.tmpRole)
        } else {
          res = await axios.put(`/ui/memberroles/${this.roleCode}`, this.tmpRole)
        }
        this.confirmLoading = false
        await util.showResponseMessage(res.data)
        if (res.data.status === 1 && (this.roleCode === '' || this.roleCode === 'new')) {
          this.$router.replace({path: `/member/role/${this.tmpRole.roleCode}`})
        }
      } catch (e) {
        util.showErrorMessageBox(e)
        this.confirmLoading = false
      }
    },
    async initRoleInfo() {
      this.dialogLoading = true
      try {
        let res = await axios.get(`/ui/memberroles/${this.roleCode}`)
        if (res.data.status === 1) {
          this.tmpRole = res.data.data
        }
      } catch (e) {}
      this.dialogLoading = false
    }
  }
}
</script>
<style>
.member-role-add-form .el-form-item .el-input {
  width: 260px;
  margin-right: 5px;
}
</style>
