<！--教培项目授权-->
<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="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 slot-scope="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 slot-scope="scope">
            <span>{{ scope.row.roleFlag ? '已开通' : '未开通' }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作"  align="center">
          <template slot-scope="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>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png">
            <p class="text">没有搜索到该手机号,请重新搜索</p>
          </div>
        </div>
      </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
        :visible.sync="changeStatusVisible"
        :close-on-click-modal="false"
        width="600px"
        center>
        <p style="text-align: center;">{{changeStatusConfig.message}}</p>
        <span slot="footer" class="dialog-footer">
          <el-button @click="changeStatusVisible=false">取 消</el-button>
          <el-button type="primary" @click="changeStatusConfirm">确 认</el-button>
        </span>
      </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>
