<template>
  <div class="review-access-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>

    <div class="review-access screenSet" id="screenSet">
      <div class="header-title">审核权限管理</div>
      <el-form ref="form" :model="searchForm" label-width="100px" class="search-form-wrap">
        <el-form-item label="姓名：" class="search-item" >
          <el-input v-model="searchForm.name" size="small" class="form-width" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="权限：" class="search-item">
          <el-select v-model="searchForm.access" placeholder="请选择" size="small" class="form-width">
            <el-option v-for="(item, index) in accessList" :key="index" :label="item.text" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn-list">
          <el-button @click="goToSearch" type="primary" size="small">查询</el-button>
          <el-button @click="goToReset" size="small">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button @click="goToAdd" type="primary" size="small" class="new-add">新增</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" type="index" label="编号" width="80"></el-table-column>
        <el-table-column align="center" prop="name" label="姓名" ></el-table-column>
        <el-table-column align="center" prop="access" label="权限" ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="goToEdit(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="goToDelete(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- 新增/编辑 弹窗 -->
    <el-dialog
      title="新增/编辑权限"
      @close="hideAddEditForm"
      :visible.sync="addEditVisible"
      :close-on-click-modal="false"
      width="600px"
      center>
      <el-form ref="addEditForm" :rules="rules" :model="addEditForm" label-width="120px">
        <el-form-item label="姓名：" class="search-item" prop="name">
          <el-select v-model="addEditForm.name" placeholder="请选择" size="small" class="form-width">
            <el-option v-for="(item, index) in nameList" :key="index" :label="item.text" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限：" class="search-item" prop="access">
          <el-select v-model="addEditForm.access" placeholder="请选择" size="small" class="form-width">
            <el-option v-for="(item, index) in nameList" :key="index" :label="item.text" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideAddEditForm">取 消</el-button>
        <el-button type="primary" @click="submitForm('addEditForm')">确 定</el-button>
      </span>
    </el-dialog>

    
    <!-- 删除 弹窗 -->
    <el-dialog
      title="删除"
      @close="hideDeleteFrom"
      :visible.sync="deleteVisible"
      :close-on-click-modal="false"
      width="600px"
      center>
      <p style="text-align: center;">确定删除XXX考试审核人的权限？</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
        <el-button @click="hideDeleteFrom">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "../../components/breadcrumb.vue";
  import * as commonUtil from "../../utils/utils";
  import { 
    
  } from '@/utils/cme/cmeApi'


  export default {
    data() {
      return {
        curmbFirst: "CME",
        curmbSecond: "审核权限管理",
        searchForm: {
          name: '',
          access: '',
        },
        accessList: [],  // 权限列表
        tableData: [
          { name: 11, access: 88 }
        ],

        addEditVisible: false,
        deleteVisible: false,
        addEditForm: {
          name: '',
          access: '',
        },
        nameList: [],
        rules: {
          name: [{ required: true, message: '请输入', trigger: 'blur' }],
          access: [{ required: true, message: '请输入', trigger: 'blur' }],
          
        }

      }
    },

    components: {
      BreadCrumb
    },

    created() {
      
    },
    mounted() {
      commonUtil.resizeHeight();
    },
    methods: {
      // 搜索
      goToSearch() {

      },
      // 重置
      goToReset() {

      },
      // 新增
      goToAdd() {
        this.addEditVisible = true;
        
      },
      // 编辑
      goToEdit(row) {
        this.addEditVisible = true;
        console.log('编辑 ', row)
      },
      goToDelete() {
        this.deleteVisible = true;
      },

      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      hideAddEditForm() {
        this.addEditVisible = false;
        this.resetForm('addEditForm');
      },
      confirmDelete() {
        // 调接口
      },
      hideDeleteFrom() {
        this.deleteVisible = false;
      },
    },

  }
</script>  

<style lang="scss">
  .review-access-wrap{
    .review-access{
      padding: 10px;
      background: #fff;
      .el-button--small{
        font-size: 14px;
      }
      .header-title {
        padding: 10px 12px;
        font-size: 14px;
        color: #606266;
        border-bottom: 1px solid #efefef;
      }
      .search-form-wrap{
        padding: 25px 0 20px;
        overflow: hidden;
        border-bottom: 1px dashed #efefef;
      }
      .search-item{
        float: left;
      }
      .btn-list{
        float: right;
        .el-form-item__content{
          margin-left: 0 !important;
        }
      }
      .new-add{
        float: right;
        margin: 10px 0 30px;
      }
    }
  }
</style>