<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
    <div class="yqrange-index-content screenSet" id="screenSet">
      <div class="header-title">成员管理</div>
      <el-form ref="searchForm" :model="searchForm" label-width="75px" label-suffix=":" :inline="true">
        <el-row :gutter="30" type="flex" style="margin-top: 10px">
          <el-col :span="10">
            <el-form-item label="科室">
              <el-select v-model="searchForm.department" placeholder="请选择科室" clearable style="margin-left:20px;">
                <el-option
                    v-for="item in departmentList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="职称">
              <el-select v-model="searchForm.proTitle" placeholder="请选择职称" clearable style="margin-left:20px;">
                <el-option
                    v-for="item in proList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right">
            <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-row>
      </el-form>
      <el-table :data="tableData" class="item-table" style="width: 100%;margin-top: 10px;">
        <el-table-column prop="role" label="身份" min-width="100" align="center"></el-table-column>
        <el-table-column prop="name" label="姓名" min-width="100" align="center"></el-table-column>
        <el-table-column prop="proTitle" label="职称" min-width="100" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.liveStatus | liveStatusFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="department" label="科室" min-width="100" align="center"></el-table-column>
        <el-table-column prop="hospital" label="所属机构" min-width="100" align="center"></el-table-column>
        <el-table-column label="操作" min-width="300" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.level == 2" @click="promote(scope.row)" type="text" size="small">升为主管理员</el-button>
            <el-button v-if="scope.row.level == 3" @click="promote(scope.row)" type="text" size="small">升为管理员</el-button>
            <el-button v-if="scope.row.level != 1" @click="addBlackList(scope.row)" type="text" size="small">加入黑名单</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleNumChange"
            :current-page="searchForm.pageNo"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRows"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import BreadCrumb from "@/components/breadcrumb.vue";
  export default {
    components: {
      BreadCrumb
    },
    data(){
      return{
        curmbFirst: '云鹊小圈',
        curmbSecond: '成员管理',
        searchForm: {
          department: '',
          proTitle: '',
          pageNo: 1,
          pageSize: 10,
        },
        totalRows: 0,
        departmentList: [{
          value: '1',
          label: '外科'
        }, {
          value: '2',
          label: '内科'
        }],
        proList: [{
          value: '1',
          label: '主治医师'
        }, {
          value: '2',
          label: '医生'
        }],
        tableData: [
          {
            role: '主管理员',
            name: '炸弹',
            proTitle: '',
            department: '',
            hospital: '',
            level: 1,
          }, {
            role: '普通成员',
            name: '炸弹3号',
            proTitle: '医生',
            department: '内科',
            hospital: '浙江省中医院',
            level: 3,
          }
        ],
      }
    },
    methods: {
      searchList() {
        console.log('查询')
      },
      resetForm() {
        console.log('重置')
      },
      //管理员升级
      promote(row) {
        let currentName = '', willName;
        if (row.level == 1) {
          currentName = '主管理员';
        } else if (row.level == 2) {
          currentName = '管理员';
          willName = '主管理员';
        }else if (row.level == 3) {
          currentName = '普通成员';
          willName = '管理员';
        }
        this.$confirm(`确定将${currentName}“${row.name}”升为${willName}`, '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'range-make-box',
        }).then(() => {
          //  confirm
        }).catch(() => {
          //  cancel
        });
      },
      //加入黑名单
      addBlackList(row) {
        this.$confirm(`确定将“${row.name}”加入黑名单吗`, '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'range-make-box',
        }).then(() => {
          //  confirm
        }).catch(() => {
          //  cancel

        });
      },
      handleSizeChange(val) {
        this.searchForm.pageSize = val;
        this.searchForm.pageNo = 1;
        this.searchList();
      },
      handleNumChange(val) {
        this.searchForm.pageNo = val;
        this.searchList();
      },
    },
  }
</script>
<style lang="scss">
  .yqrange-index-wrapper{
    .yqrange-index-content{
      background: #fff;
      padding: 10px;
      .header-title{
        padding: 10px 12px;
        font-size: 12px;
        color: #449284;
        border-bottom: 1px solid #efefef;
      }
    }
    .el-button--text{
      color: #449284;
      font-size: 14px;
      &::after{
        content: '';
        position: relative;
        height: 14px;
        /*border-right: 1px solid #EBEEF5;*/
        border-right: 1px solid #aaaaaa;
        padding-right: 10px;
      }
      &:last-of-type{
        &::after{
          content: '';
          position: relative;
          width: 1px;
          height: 14px;
          border-right: none;
        }
      }
    }
  }
</style>
