<template>
  <div class="flexOne">
    <div class="query-box">
      <ul>
        <li>
          <span><em>{{$t('adm.adm_Rolename')}}</em>
            <el-input v-model='msg.Name' :placeholder="$t('pub.pleaseImport')"></el-input>
          </span>
        </li>
        <li>
          <span><em>{{$t('admin.admin_status')}}</em>
            <el-select v-model='msg.Status' :placeholder="$t('pub.unlimitedSel')">
              <el-option :label="$t('pub.unlimitedSel')" value=''></el-option>
              <el-option :label="$t('pub.normalSel')" value='0'></el-option>
              <el-option :label="$t('pub.fressSel')" value='1'></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <input type="button" class="hollowFixedBtn" @click="resetPageIndex();getList()" :value="$t('pub.searchBtn')" />
          <input type="button" @click="outerVisible = true,dialogTitle='新增角色',resetForm('addMsg')" class="normalBtn"
            :value="$t('pub.addBtn')" />
        </li>
      </ul>
    </div>
    <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <th width="300">{{$t('adm.adm_Rolename')}}</th>
        <th width="800">{{$t('system.label_info')}}</th>
        <th width="100">{{$t('admin.admin_status')}}</th>
        <th>{{$t('admin.admin_czPerson')}}</th>
        <th>{{$t('system.table_operation')}}</th>
      </tr>
      <tr v-for="(item,index) in dataList">
        <td>{{item.Name}}</td>
        <td>{{item.Description}}</td>
        <td>{{item.Status==0?$t('pub.normalSel'):$t('pub.fressSel')}}</td>
        <td>{{item.EmName}}</td>
        <td>
          <el-row>
            <el-tooltip class="item" effect="dark" :content="$t('pub.updateMsg')" placement="top-start">
              <el-button @click="outerVisible = true,dialogTitle='修改角色',updateData(item.Id)" type="primary" icon="el-icon-edit"
                circle></el-button>
            </el-tooltip>

            <el-tooltip class="item" effect="dark" :content="$t('adm.adm_quanxian')" placement="top-start">
              <el-button @click="goUrl('permissionList',item.Id)" type="primary" icon="iconfont icon-quanxianguanli"
                circle></el-button>
            </el-tooltip>
          </el-row>
        </td>
      </tr>
    </table>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper"
      :page-size=msg.pageSize :total=total>
    </el-pagination>

    <el-dialog custom-class='w450' :title="dialogTitle" :visible.sync="outerVisible" center :before-close="closeChangeMachie">
      <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
        <el-form-item maxlength='50' :label="$t('adm.adm_Rolename')" prop="Name">
          <el-input class='w217' type="text" v-model="addMsg.Name" :placeholder="$t('pub.pleaseImport')"></el-input>
        </el-form-item>
        <el-form-item :label="$t('admin.admin_status')" prop="Status">
          <el-switch v-model="addMsg.Status" active-value="0" inactive-value="1"></el-switch>
        </el-form-item>
        <el-form-item :label="$t('system.label_info')" prop="Description">
          <el-input maxlength='250' class='w217' type="textarea" v-model="addMsg.Description"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <button class="hollowFixedBtn" @click="outerVisible = false,resetForm('addMsg'),getList()">{{$t('pub.cancelBtn')}}</button>
        &nbsp;
        <button class="normalBtn" type="primary" @click="submitForm('addMsg')">{{$t('pub.saveBtn')}}</button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        switchValue: '1',
        dialogTitle: '',
        insideDialogTxt: '保存成功！',
        outerVisible: false,
        innerVisible: false,
        isRight: true,
        versions: [],
        total: 0,
        currentPage: 1,
        dataList: [],
        msg: {
          pageIndex: 1,
          pageSize: 15,
          Status: '0',
          Name: '',
        },
        addMsg: {
          Id: '0',
          Name: '',
          Description: '',
          Status: '0',
        },
        rules: {
          Name: [{
            required: true,
            message: this.$t('system.ph_name'),
            trigger: 'blur'
          }],
          Status: [{
            required: false,
            message: '',
            trigger: 'change'
          }],
          Description: [{
            required: false,
            message: this.$t('adm.adm_qsrmiaoshu'),
            trigger: 'change'
          }],

        },
        verSionMsg: {
          Status: 0
        },
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList() { //获取列表数据
        this.apipost("admin_get_RoleGetPageList", this.msg, res => {
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data.pageData;
            this.total = res.data.data.count;
          } else {}
        }, err => {})
      },
      getVersion() { //获取版本信息
        this.apipost('admin_get_SysVersionsGetList', this.verSionMsg, res => {
          this.versions = res.data.data;
        }, err => {})
      },
      addData() { //添加角色
        this.apipost("admin_post_RoleSet", this.addMsg, res => {
          if (res.data.resultCode == 1) {
            this.$message.success(res.data.message)
            this.outerVisible = false;
            this.getList()
            this.resetForm('addMsg');
          } else {
            this.$message.error(res.data.message)
          }

        }, err => {})
      },
      updateData(id) { //修改角色
        this.addMsg.Id = id;
        this.apipost('admin_get_RoleGet', {
          RoleId: id
        }, res => {
          if (res.data.resultCode == 1) {
            this.addMsg.Name = res.data.data.Name
            this.addMsg.Description = res.data.data.Description
            this.addMsg.Status = res.data.data.Status.toString();
          } else {}
        }, err => {})
      },
      deleteData(id) {
        this.apipost('admin_post_RoleRemove', {
          RoleId: id
        }, res => {
          if (res.data.resultCode == 1) {
            this.getList()
          } else {
            alert(res.data.message)
          }
        }, err => {})
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1
      },
      goUrl(name, id) {
        this.$router.push({
          name: name,
          query: {
            "id": id,
            blank: 'y',
            tab: this.$t('adm.adm_qxshezhi')
          }
        })
      },
      submitForm(addMsg) { //提交创建、修改表单
        this.$refs[addMsg].validate((valid) => {
          if (valid) {
            this.addData();
          } else {
            return false;
          }
        });
      },
      closeChangeMachie(done) { //弹出框关闭初始化弹框内表单
        done();
        this.resetForm('addMsg');
      },
      resetForm(formName) { //弹出框取消 初始化谈框内表单
        this.addMsg.Id = '0';
        this.addMsg.Status = '0';
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
