<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 slot-scope="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>
