<template>
  <div>
    <div class="obpm-title">
      <div class="d-inline-block">
        <i class="el-icon-folder title-icon"></i>
        <div class="title-name d-inline-block ml-2">{{$t("roles.title")}}</div>
      </div>
      <div class="bar d-inline-block float-right">
        <el-button type="primary" size="small" @click="btnSave('params')" :loading="btnLoading">{{$t("btns.save")}}</el-button>
        <el-button type="primary" size="small" @click="btnSaveAndNew('params')" :loading="btnLoading">{{$t("btns.save_new")}}</el-button>

        <el-button size="small" @click="goback">{{$t("btns.exit")}}</el-button>
      </div>
    </div>
    <div class="mt-3">
      <el-form :model="params" ref="params" :rules="rules" label-position="top" label-width="160px" >
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="$t('roles.name')" prop="name"  class="padding0Label">
              <el-input v-model="params.name" size="small" :placeholder="$t('placeholder.name')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-form-item :label="$t('roles.id')" prop="roleNo"  class="padding0Label">
              <el-input v-model="params.roleNo" size="small" :placeholder="$t('placeholder.number')"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item :label="$t('roles.status')"  class="padding0InlineLabel">
              <el-radio-group v-model="params.status">
                <el-radio :label="1">{{$t('roles.valid')}}</el-radio>
                <el-radio :label="0">{{$t('roles.invalid')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8" :offset="4">
            <el-form-item :label="$t('roles.system_default_role')" prop="defaultRole" class="padding0InlineLabel">
              <el-radio-group v-model="params.defaultRole">
                <el-radio :label="true">{{$t('roles.yes')}}</el-radio>
                <el-radio :label="false">{{$t('roles.no')}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { createRoles, updateRoles } from "@/service/CommontoolsAPI.js";
import { nameCheck } from "@/utils/utils.js";

export default {
  name: "roles",
  data(){
    return{
      params: {
        appId: "",
        id: "",
        name: "",
        roleNo: "",
        status: 1,
        defaultRole: true
      },
      rules: {
        name: [
          { required: true, message: this.$t('placeholder.role_name'), trigger: 'blur' },
          { validator: nameCheck, trigger: "blur" },
        ],
        roleNo: [
          { required: true, message: this.$t('placeholder.role_num'), trigger: 'blur' },
        ],
        defaultRole: [
          { required: true, message: this.$t('placeholder.role_default'), trigger: 'change' }
        ]
      },
      btnLoading: false, // 按钮的加载
    }
  },

  mounted(){
    if(this.$route.query.edit && this.$route.query.edit!='false'){
      let record = this.$route.query.params;
      let params = {
        ...this.params,
        ...record
      }
      this.params = params;
    }else{
      let appId = sessionStorage.getItem("appId");
      let params = {
        ...this.params,
        appId: appId,
      }
      this.params = params;
    }
  },

  methods:{
    /**
     * 退出
     */
    goback(){
      this.$store.dispatch("rightHelpPageParams", { title: this.$t('widget.role_list'), url: "application/application_info_generalTools_role_list_help.html" });
      this.$router.push({path: '/home/softwaresdetails/commontool/roleslist', query:{edit: true}});
    },
    //保存并新建
    btnSaveAndNew(params){
      this.btnSave(params,'andnew');
      
    },
    //重置字段
    resetFields(){
      this.params = {
        appId: sessionStorage.getItem("appId"),
        id: '',
        name: '',
        roleNo: '',
        status: 1,
        defaultRole: true
      }
    },
    /**
     * 保存操作
     */
    btnSave(params,type){
      if(this.params.id != ""){
        this.$refs[params].validate(async (valid) => {
          if (valid) {
            this.btnLoading = true
            let response = await updateRoles(this.params);
            this.btnLoading = false
            if (response.data.errcode == 0) {
              this.$message.success(this.$t('msg.ss'))
              if(type=='andnew'){
                this.resetFields();
              }
            }
          } else {
            return false;
          }
        });
      }else{
        this.$refs[params].validate(async (valid) => {
          if (valid) {
            this.btnLoading = true
            let response = await createRoles(this.params);
            this.btnLoading = false
            if (response.data.errcode == 0) {
              let params = {
                ...this.params,
                id: response.data.data.id
              };
              this.params = params;
              this.$message.success(this.$t('msg.ss'))
              if(type=='andnew'){
                this.resetFields();
              }
            }
          } else {
            return false;
          }
        });
      }
    },
  },
  watch: {
    "$store.state.rightHelpPageParams": {
      handler() {
        if (this.$store.state.rightHelpFrame) {
          this.$store.state.rightHelpFrame.contentWindow.showHelpContentHtml(this.$store.state.rightHelpPageParams.title, this.$store.state.rightHelpPageParams.url);
        }
      },
      deep: true,
    },
  },
}
</script>