<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.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-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-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="authName"
          label="权限"
        ></el-table-column>
        <el-table-column align="center" label="操作">
          <template v-slot="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>
        <template v-slot:empty>
          <div>
            <div class="table-empty">
              <img src="../../assets/image/no-content1.png" />
              <p>没有查询到相关结果</p>
            </div>
          </div>
        </template>
      </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"
      v-model="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>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="hideAddEditForm">取 消</el-button>
          <el-button type="primary" @click="submitForm('addEditForm')"
            >确 定</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 删除 弹窗 -->
    <el-dialog
      title="删除"
      @close="hideDeleteFrom"
      v-model="deleteVisible"
      :close-on-click-modal="false"
      width="600px"
      center
    >
      <p style="text-align: center">确定删除该权限？</p>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="confirmDelete">确 定</el-button>
          <el-button @click="hideDeleteFrom">取 消</el-button>
        </span>
      </template>
    </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: '',
        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>
