<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-row>
          <el-form-item label="资源名称：" class="search-item" >
            <el-input v-model="searchForm.doctorName" size="small" class="form-width" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="资源类型：" class="search-item">
            <el-select v-model="searchForm.authId" 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-row>
        <el-row>
          <el-form-item label="添加人：" class="search-item" >
            <el-input v-model="searchForm.doctorName" size="small" class="form-width" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <!-- <el-form-item label="创建日期：" class="search-item" >
            <el-input v-model="searchForm.doctorName" size="small" class="form-width" placeholder="请输入姓名"></el-input>
          </el-form-item> -->
          <el-form-item label="创建日期：" class="search-item">
            <el-date-picker
              v-model="searchForm.beginTime"
              type="datetime"
              size="small"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择开始日期">
            </el-date-picker>
            <span style="color: #DCDFE6;">—</span>
            <el-date-picker
              v-model="searchForm.endTime"
              type="datetime"
              size="small"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择结束日期">
            </el-date-picker>
          </el-form-item>          
          <el-form-item class="btn-list">
            <el-button @click="goToSearch(1)" type="primary" size="small">查询</el-button>
            <el-button @click="goToReset" size="small">重置</el-button>
          </el-form-item>
        </el-row>
      </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" prop="seq" label="资源名称"></el-table-column>
        <el-table-column align="center" prop="doctorName" label="资源类型" ></el-table-column>
        <el-table-column align="center" prop="doctorName" label="创建人" ></el-table-column>
        <el-table-column align="center" prop="doctorName" label="创建日期" ></el-table-column>
        <el-table-column align="center" prop="authName" label="状态" ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="goToEdit(scope.row)" type="text" size="small"><span style="color: #449284;">查看</span></el-button>
            <!-- <el-button @click="goToDelete(scope.row)" type="text" size="small">删除</el-button> -->
          </template>
        </el-table-column>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png">
            <p>没有查询到外部资源</p>
          </div>
        </div>
      </el-table>

      <div class="pagination">
        <el-pagination
          class="pagination-style"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="totalRows"
          :current-page="searchForm.pageNo"
          :page-sizes="[15, 30, 50, 100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </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="doctorId">
          <el-select v-model="addEditForm.doctorId" 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="authId">
          <el-select v-model="addEditForm.authId" 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>
      <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;">确定删除该权限？</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 { 
    getAccessListReq,
    getAuthTableReq,
    getUserListReq,
    handleSaveEditReq,
    handleDeleteReq,
  } from '@/utils/cme/cmeApi'


  export default {
    data() {
      return {
        curmbFirst: "CME",
        curmbSecond: "外部资源管理",
        totalRows: 0,
        addEditVisible: false,
        isAdd: true,            // 新增或编辑状态：新增 true; 编辑 false 
        deleteVisible: false,
        currentRow: null,       // 当前行数据

        searchForm: {
          doctorName: '',
          authId: '',
          beginTime: '',
          endTime: '',
          pageNo: 1,
          pageSize: 15,
        },
        addEditForm: {
          doctorId: '',
          authId: '',
        },
        accessList: [],  // 权限列表
        tableData: [],
        nameList: [],
        rules: {
          doctorId: [{ required: true, message: '请选择', trigger: 'blur' }],
          authId: [{ required: true, message: '请选择', trigger: 'blur' }],
        },
      }
    },

    components: {
      BreadCrumb
    },

    created() {
      // this.getAccessList();
      this.goToSearch(1);
      this.getUserList();
    },
    mounted() {
      commonUtil.resizeHeight();
    },
    methods: {
      // // 获取权限 下拉列表
      // getAccessList() {
      //   let req = {};
      //   getAccessListReq(req).then(res => {
      //     if (res.code == "000000") {
      //       // console.log('权限列表 ', res)
      //       this.accessList = res.data;
      //     } else {
      //       this.$message(res.message);
      //     }
      //   }).catch(err => {
      //     this.$message.error('请求失败');
      //   });
      // },
      // 搜索
      goToSearch(pageNo) {
        if(pageNo){  // 自定义第几页，不传则表示当前页
          this.searchForm.pageNo = pageNo;
        }
        this.getAuthTable();
      },
      getAuthTable() {
        let req = this.searchForm;
        getAuthTableReq(req).then(res => {
          if (res.code == "000000") {
            // console.log('表格列表 ', res)
            this.tableData = res.data.contentList;
            this.totalRows = res.data.total;
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });
      },
      
      // 重置
      goToReset() {
        this.searchForm = {
          doctorName: '',
          authId: '',
          pageNo: 1,
          pageSize: 15,
        };
      },
      // 新增
      goToAdd() {
        this.isAdd = true;
        this.addEditVisible = true;
      },
      
      // 编辑
      goToEdit(row) {
        this.isAdd = false;
        this.currentRow = row;
        // console.log('编辑 ', row)
        this.addEditVisible = true;
        // 编辑回显状态
        this.addEditForm = {
          authId: row.authId,
          doctorId: row.doctorId,
        };
        
      },
      // 获取新增、编辑的用户列表
      getUserList() {
        let req = {};
        getUserListReq(req).then(res => {
          if (res.code == "000000") {
            // console.log('获取用户列表 ', res)
            this.nameList = res.data;
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });
      },
      
      goToDelete(row) {
        this.deleteVisible = true;
        this.currentRow = row;
      },

      
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            this.handleSaveEdit();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleSaveEdit() {
        // 新增、编辑传参不同
        // debugger;
        let req = {};
        if (this.isAdd) {
          req = {
            authId: this.addEditForm.authId,
            doctorId: this.addEditForm.doctorId,
          }
        } else {
          req = {
            authId: this.addEditForm.authId,
            doctorId: this.addEditForm.doctorId,
            id: this.currentRow.id,
          };
        }
        handleSaveEditReq(req).then(res => {
          if (res.code == "000000") {
            this.addEditVisible = false;
            this.goToSearch();
            // console.log('新增/编辑权限 ', res)
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });
      },
      hideAddEditForm() {
        this.addEditVisible = false;
        this.resetForm('addEditForm');
        this.addEditForm = {
          doctorId: '',
          authId: '',
        };
      },
      confirmDelete() {
        // 调接口
        let req = {
          id: this.currentRow.id,
        };
        handleDeleteReq(req).then(res => {
          if (res.code == "000000") {
            // console.log('删除用户列表 ', res)
            this.goToSearch();
            this.deleteVisible = false;
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });
      },
      hideDeleteFrom() {
        this.deleteVisible = false;
      },
      handleSizeChange(val){
        // console.log('handleSizeChange>>>')
        this.searchForm.pageSize = val;
        this.goToSearch(1);
      },
      
      handleCurrentChange(val){
        // 切换当前页
        this.searchForm.pageNo = val;
        this.getAuthTable();
      },
    },

  }
</script>  

<style lang="scss">
  .review-access-wrap{
    .review-access{
      padding: 10px;
      background: #fff;
      .el-button--small{
        font-size: 14px;
      }
      .header-title {
        padding: 10px 12px 20px;
        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 20px;
      }
      .table-empty {
        img {
          width: 100px;
        }
        p {
          margin-top: -50px;
        }
      }
    }
  }
</style>