<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-input
                size="small"
                v-model="searchForm.searchName"
                placeholder="请输入姓名"
              ></el-input>
              <!-- <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-input
                size="small"
                v-model="searchForm.searchHospital"
                placeholder="请输入机构名称"
              ></el-input>
              <!-- <el-select
                      v-model="searchForm.proTitle"
                      placeholder="请选择机构"
                      clearable
                      style="margin-left:20px;">
                      <el-option
                        v-for="(item, index) in organization"
                        :key="index"
                        :value="item.id"
                        :label="item.name"
                      ></el-option>
                    </el-select>-->
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right">
            <el-button type="primary" size="small" @click="search"
              >查询</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"
        ></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 v-slot="scope">
            <el-button
              v-if="
                (idType == 1 && scope.row.level == 0) ||
                (idType != 1 && scope.row.level == 0 && selfRoleId > 1)
              "
              @click="promote(scope.row, 1)"
              type="text"
              size="small"
              >升为管理员</el-button
            >
            <el-button
              v-if="
                (idType == 1 && scope.row.level == 1) ||
                (idType != 1 && scope.row.level == 1 && selfRoleId > 1)
              "
              @click="promote(scope.row, 0)"
              type="text"
              size="small"
              >降为普通成员</el-button
            >
            <el-button
              v-if="
                scope.row.level != 2 &&
                scope.row.level != 4 &&
                (idType == 1 || selfRoleId > scope.row.level) &&
                scope.row.status == 1
              "
              @click="addBlackList(scope.row)"
              type="text"
              size="small"
              >加入黑名单</el-button
            >
            <el-button
              v-if="
                scope.row.level != 2 &&
                scope.row.level != 4 &&
                (idType == 1 || selfRoleId > scope.row.level) &&
                scope.row.status == 2
              "
              @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>
let vm = null
import BreadCrumb from '@/components/breadcrumb.vue'
// import * as operationData from "../../../utils/operation";
export default {
  components: {
    BreadCrumb,
  },
  data() {
    vm = this

    return {
      curmbFirst: '云鹊专区',
      curmbSecond: '成员管理',
      searchForm: {
        searchName: '',
        searchHospital: '',
        department: '',
        proTitle: '',
        pageNo: 1,
        pageSize: 10,
      },
      totalRows: 0,
      departmentList: [
        {
          value: '1',
          label: '外科',
        },
        {
          value: '2',
          label: '内科',
        },
      ],
      proList: [
        {
          value: '1',
          label: '主治医师',
        },
        {
          value: '2',
          label: '医生',
        },
      ],
      tableData: [],
      organization: [
        {
          id: '1',
          name: '第一医院',
        },
        {
          id: '2',
          name: '第二医院',
        },
      ],
      id: null,
      selfRoleId: 0,
    }
  },
  created() {
    vm = this
    this.id = this.$route.query.id
    // vm.getOrganization();
    this.idType = localStorage.getItem('storageIdType')
    console.log('storageIdType = ' + this.idType)
    this.searchList()
  },
  methods: {
    // 搜索
    search() {
      this.searchForm.pageNo = 1
      this.searchList()
    },

    searchList() {
      console.log('查询')
      let req = {
        name: this.searchForm.searchName,
        hospitalName: this.searchForm.searchHospital,
        id: this.id,
        pageNo: this.searchForm.pageNo,
        pageSize: this.searchForm.pageSize,
      }
      vm.POST('circle/circle/members', req)
        .then((res) => {
          if (res.code == '000000') {
            // this.tableData = vm.$message({
            //   type: "success",
            //   message: "操作成功"
            // });
            // vm.search();
            // if (res.message != "success") {
            //   vm.$message({
            //     message: res.message,
            //     type: "warning"
            //   });
            // }
            let listData = []
            if (res.data.memberList == null) {
              return
            }
            for (let i = 0; i < res.data.memberList.length; i++) {
              let roleName = ''
              switch (res.data.memberList[i].roleId) {
                case 0:
                  roleName = '普通成员'
                  break
                case 1:
                  roleName = '管理员'
                  break
                case 2:
                  roleName = '主管理员'
                  break
                case 3:
                  roleName = '审核人员'
                  break
                case 4:
                  roleName = '高级主管理员'
                  break
                default:
                  roleName = '普通成员'
              }

              let obj = {
                role: roleName,
                name: res.data.memberList[i].name,
                proTitle: res.data.memberList[i].title,
                department: res.data.memberList[i].departmentName,
                hospital: res.data.memberList[i].hospitalName,
                level: res.data.memberList[i].roleId,
                doctorId: res.data.memberList[i].id,
                status: res.data.memberList[i].status,
              }
              listData.push(obj)
            }
            this.tableData = listData
            console.log('tableData: ' + JSON.toString(this.tableData))
            this.selfRoleId = res.data.roleId
            // console.log("searchList() : this.selfRoleId = " + this.selfRoleId +
            //   ", name = " + tableData[1].name + ", level = " + tableData[1].level +
            //   ", doctorId = " + tableData[1].doctorId + ", status = " + tableData[1].status);
            console.log('searchList() : this.selfRoleId = ' + this.selfRoleId)

            this.totalRows = res.data.count
          } else {
            // vm.$message.info(res.message);
            // vm.$message.info("操作失败，请重试");
          }
        })
        .catch(function (error) {
          vm.$message.error(error)
        })
    },
    resetForm() {
      console.log('重置')
      this.searchForm.searchName = ''
      this.searchForm.searchHospital = ''
      this.search()
    },
    //获取机构
    getOrganization() {
      console.log('getOrganization***')
      let req = {
        id: this.id,
      }
      console.log('alex id = ' + this.id)
      vm.GET('eco/circle/hospitals', req).then((res) => {
        if (res.code == '000000') {
          // console.log(res);
          vm.organization = vm.dealOrganizationData(res.data.list)
        } else {
          vm.organization = [
            {
              id: '0',
              label: '请选择机构',
            },
          ]
        }
      })

      const org = [
        {
          id: '1',
          name: '中医院',
        },
        {
          id: '2',
          name: '妇幼保健院',
        },
      ]
      vm.organization = org
    },
    dealOrganizationData(data) {
      let org = []
      // org[0] = {
      //   id: "-1",
      //   name: "请选择机构"
      // };
      for (let i = 0; i < data.length; i++) {
        let obj = {
          id: data[i].id,
          label: data[i].name,
        }
        org.push(obj)
      }
      return org
    },
    //管理员升级
    promote(row, willLevel) {
      vm = this
      let currentName = '',
        willName,
        operation
      if (row.level == 0) {
        currentName = '普通成员'
      } else if (row.level == 1) {
        currentName = '管理员'
      } else if (row.level == 2 || row.level == 4) {
        currentName = '主管理员'
      }
      if (willLevel > row.level) {
        operation = '升为'
      } else {
        operation = '降为'
      }
      if (willLevel == 0) {
        willName = '普通成员'
      } else if (willLevel == 1) {
        willName = '管理员'
      } else if (willLevel == 2 || willLevel == 4) {
        willName = '主管理员'
      }
      vm.$confirm(
        `确定将${currentName}“${row.name}”${operation}${willName}？`,
        '',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass: 'range-make-box',
        }
      )
        .then(() => {
          //  confirm
          // vm.$message({
          //   message: "操作成功!!!"
          // });
          vm.GET(
            'circle/circle/' +
              this.id +
              '/entrust/' +
              row.doctorId +
              '/' +
              willLevel,
            null
          )
            .then((res) => {
              if (res.code == '000000') {
                vm.$message({
                  type: 'success',
                  message: '操作成功',
                })
                // vm.search();
                vm.searchList()
                // if (res.message != "success") {
                //   vm.$message({
                //     message: res.message,
                //     type: "warning"
                //   });
                // }
              } else {
                // vm.$message.info(res.message);
                vm.$message.error('操作失败，请重试')
              }
            })
            .catch(function (error) {
              vm.$message.error(error)
            })
        })
        .catch(() => {
          //  cancel
        })
    },
    //加入黑名单
    addBlackList(row) {
      vm = this
      let option = '加入黑名单'
      if (row.status == 2) {
        option = '移出黑名单'
      }
      this.$confirm(`确定将“${row.name}”${option}吗`, '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'alert',
        customClass: 'range-make-box',
      })
        .then(() => {
          console.log(
            '查询： this.id = ' + this.id + ', row.doctorId = ' + row.doctorId
          )
          let req = {
            id: this.id,
            doctorId: row.doctorId,
          }
          vm.GET(
            'circle/circle/' + this.id + '/' + row.doctorId + '/freeControl',
            req
          )
            .then((res) => {
              if (res.code == '000000') {
                vm.$message({
                  type: 'success',
                  message: '操作成功',
                })
                // vm.search();
                this.searchList()
                // if (res.message != "success") {
                //   vm.$message({
                //     message: res.message,
                //     type: "warning"
                //   });
                // }
              } else {
                // vm.$message.info(res.message);
                vm.$message.error('操作失败，请重试')
              }
            })
            .catch(function (error) {
              vm.$message.error(error)
            })
        })
        .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>
