<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="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 == 0"
              @click="promote(scope.row)"
              type="text"
              size="small"
            >升为管理员</el-button>
            <el-button
              v-if="scope.row.level == 1"
              @click="promote(scope.row)"
              type="text"
              size="small"
            >升为主管理员</el-button>
            <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 == 0"
              @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: [
        {
          role: "普通成员",
          name: "炸弹",
          proTitle: "",
          department: "",
          hospital: "",
          level: 0,
          doctorId: 123,
          status: 1
        },
        {
          role: "管理员",
          name: "炸弹3号",
          proTitle: "医生",
          department: "内科",
          hospital: "浙江省中医院",
          level: 1,
          doctorId: 456,
          status: 1
        },
        {
          role: "主管理员",
          name: "炸弹4号",
          proTitle: "医生",
          department: "内科",
          hospital: "浙江省中医院",
          level: 2,
          doctorId: 456,
          status: 1
        }
      ],
      organization: [
        {
          id: "1",
          name: "第一医院"
        },
        {
          id: "2",
          name: "第二医院"
        }
      ],
      id: null
    };
  },
  created() {
    vm = this;
    this.id = this.$route.query.id;
    vm.getOrganization();
  },
  methods: {
    searchList() {
      console.log("查询");
      let req = {
        name: this.searchForm.searchName,
        hospitaName: this.searchForm.searchHospital,
        id: this.id,
        pageNo: 1,
        pageSize: 10
      };
      // vm.POST("eco/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 = [];
      //       for (let i = 0; i < data.length; i++) {
      //         let roleName = "";
      //         switch (data[i].role_id) {
      //           case 0:
      //             roleName = "普通人 1:管理员 2:主管理员 3:审核人员";
      //             break;
      //           case 1:
      //             roleName = "管理员";
      //             break;
      //           case 2:
      //             roleName = "主管理员";
      //             break;
      //           case 3:
      //             roleName = "审核人员";
      //             break;
      //           default:
      //             roleName = "普通人";
      //         }

      //         let obj = {
      //           role: roleName,
      //           name: data[i].name,
      //           proTitle: data[i].title,
      //           department: data[i].departmentName,
      //           hospital: data[i].hospitalName,
      //           level: data[i].role_id,
      //           doctorId: data[i].id,
      //           status: data[i].status
      //         };
      //         listData.push(obj);
      //       }
      //       this.tableData = listData;
      //     } else {
      //       // vm.$message.info(res.message);
      //       // vm.$message.info("操作失败，请重试");
      //     }
      //   })
      //   .catch(function(error) {
      //     vm.$message.error(error);
      //   });
      let listData = [];
      let obj = {
        role: "大总管",
        name: "小小",
        proTitle: "妇科老大",
        department: "总经办",
        hospital: "青山神经病院",
        level: 3,
        doctorId: 789
      };
      listData.push(obj);
      this.tableData = listData;
    },
    resetForm() {
      console.log("重置");
      this.searchForm.searchName = "";
      this.searchForm.searchHospital = "";
    },
    //获取机构
    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) {
      vm = this;
      let currentName = "",
        willName, operation, willLevel;
      if (row.level == 0) {
        currentName = "普通人";
        willName = "管理员";
        operation = "升为";
        willLevel = 1;
      } else if (row.level == 1) {
        currentName = "管理员";
        willName = "主管理员";
        operation = "升为";
        willLevel = 2;
      } else if (row.level == 2) {
        currentName = "主管理员";
        willName = "审核人员";
        operation = "降为";
        willLevel = 3;
      }
      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();
                if (res.message != "success") {
                  vm.$message({
                    message: res.message,
                    type: "warning"
                  });
                }
              } else {
                // vm.$message.info(res.message);
                vm.$message.info("操作失败，请重试");
              }
            })
            .catch(function(error) {
              vm.$message.error(error);
            });
        })
        .catch(() => {
          //  cancel
        });
    },
    //加入黑名单
    addBlackList(row) {
      vm = this;
      this.$confirm(`确定将“${row.name}”加入黑名单吗`, "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "alert",
        customClass: "range-make-box"
      })
        .then(() => {
          console.log("查询： this.id = " + this.id + ", row.doctorId = " + row.doctorId);
          vm.GET("eco/circle/" + this.id + "/" + row.doctorId + "/freeControl", req)
            .then(res => {
              if (res.code == "000000") {
                vm.$message({
                  type: "success",
                  message: "操作成功"
                });
                vm.search();
                if (res.message != "success") {
                  vm.$message({
                    message: res.message,
                    type: "warning"
                  });
                }
              } else {
                // vm.$message.info(res.message);
                vm.$message.info("操作失败，请重试");
              }
            })
            .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>
