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

    <div class="component-content screenSet" id="screenSet">
      <div class="header-title">发起教培项目赋权</div>

      <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px">
        <el-form
          ref="formInline"
          :model="formInline"
          label-width="75px"
          style="width: 100%"
        >
          <el-col :span="10">
            <el-form-item label="手机号：">
              <el-input
                v-model:value="formInline.mobilePhone"
                size="small"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
            style="padding: 0; text-align: right; padding-right: 15px"
          >
            <el-button type="primary" size="small" @click="searchList"
              >查询</el-button
            >
            <el-button
              type="default"
              size="small"
              @click="resetForm"
              style="margin-left: 0"
              >重置</el-button
            >
          </el-col>
        </el-form>
      </el-row>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="name"
          label="用户名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="mobilePhone"
          label="手机号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="hospitalName"
          label="所属机构"
          align="center"
        ></el-table-column>
        <el-table-column prop="provinceName" label="所属地区" align="center">
          <template v-slot="scope">
            <span
              >{{ scope.row.provinceName }}{{ scope.row.cityName
              }}{{ scope.row.countyName }}{{ scope.row.townName }}</span
            >
          </template>
        </el-table-column>
        <el-table-column prop="projectStatus" label="权限状态" align="center">
          <template v-slot="scope">
            <span>{{ scope.row.roleFlag ? '已开通' : '未开通' }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template v-slot="scope">
            <el-button
              @click="changeStatus(scope.row, 0)"
              v-if="scope.row.roleFlag == false"
              type="primary"
              size="small"
              >开通权限</el-button
            >
            <el-button
              @click="changeStatus(scope.row, 1)"
              v-if="scope.row.roleFlag == true"
              type="primary"
              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 class="text">没有搜索到该手机号,请重新搜索</p>
            </div>
          </div>
        </template>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.pageNo"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>

      <!-- 修改状态 -->
      <el-dialog
        :title="changeStatusConfig.title"
        :show-close="false"
        v-model:visible="changeStatusVisible"
        :close-on-click-modal="false"
        width="600px"
        center
      >
        <p style="text-align: center">{{ changeStatusConfig.message }}</p>
        <template v-slot:footer>
          <span class="dialog-footer">
            <el-button @click="changeStatusVisible = false">取 消</el-button>
            <el-button type="primary" @click="changeStatusConfirm"
              >确 认</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import BreadCrumb from '../../components/breadcrumb.vue'
import { openLoading, closeLoading } from '../../utils/utils'
import * as commonUtil from '../../utils/utils'
let vm = null
export default {
  data() {
    return {
      curmbFirst: '角色权限',
      curmbSecond: '发起教培项目赋权',
      formInline: {
        mobilePhone: '',
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
      totalRows: 10,
      changeStatusVisible: false,
      doctorId: 0,
      needChangeStatus: true,
      changeStatusConfig: {
        title: '确认要开通权限操作吗？',
        message: '一旦开通，该用户可查看并创建外部教培项目',
      },
      idType: 1, //idType 1为内部项目，其他为外部项目
    }
  },
  components: {
    BreadCrumb,
  },
  created() {
    vm = this
    vm.idType = localStorage.getItem('storageIdType')
    this.searchList()
  },

  mounte() {
    commonUtil.resizeHeight()
  },

  methods: {
    // 查询列表
    searchList() {
      let req = {}
      req = vm.formInline
      openLoading(vm)
      vm.GET('portal/portalProjectOrRole/doctor/list', req).then((res) => {
        closeLoading(vm)
        if (res.code == '000000') {
          vm.tableData = res.data.doctorList
          vm.totalRows = res.data.totalCnt
        }
      })
    },

    // 重置搜索
    resetForm() {
      vm.formInline.mobilePhone = ''
    },

    // 已开通: true; 未开通: false;
    changeStatus(row) {
      vm.doctorId = row.doctorId
      vm.needChangeStatus = row.roleFlag ? false : true
      let title = '',
        message = ''
      if (!row.roleFlag) {
        title = '确认要开通权限操作吗？'
        message = '一旦开通，该用户可查看并创建外部教培项目'
      } else {
        // 拒绝
        title = '确认要关闭权限操作吗？'
        message = '一旦关闭，该用户则无法查看外部教培项目'
      }
      vm.changeStatusConfig.title = title
      vm.changeStatusConfig.message = message
      vm.changeStatusVisible = true
    },

    // 改变状态
    changeStatusConfirm() {
      let req = {
        doctorId: vm.doctorId,
        roleFlag: vm.needChangeStatus,
      }
      openLoading(vm)
      vm.POST('portal/portalProjectOrRole/doctor/role', req).then((res) => {
        closeLoading(vm)
        if (res.code == '000000') {
          vm.changeStatusVisible = false
          vm.searchList()
        }
      })
    },

    handleSizeChange(val) {
      this.formInline.pageSize = val
      vm.searchList()
    },

    handleCurrentChange(val) {
      this.formInline.pageNo = val
      vm.searchList()
    },
  },
}
</script>

<style lang="scss" scoped>
.template-manager-wrap {
  .component-content {
    background: #fff;
    padding: 10px;
    .header-title {
      padding: 10px 12px 10px 0;
      font-size: 12px;
      color: #449284;
      border-bottom: 1px solid #efefef;
    }
    .table-empty {
      .text {
        position: relative;
        top: -100px;
        left: 6px;
      }
    }
  }
}
</style>
