<template>
  <div class="organization-alert">
    <div class="organization-left">
      <div>已选:{{allSelect.length}}个人员</div>
      <div class="hcd">
        <div class="tag-list">
          <el-tag
            :key="item.id"
            v-for="item in allSelect"
            closable
            :disable-transitions="false"
            style="marginTop:10px;"
            @close="handleClose(item)"
          >{{item.name.length > 12 ? item.name.slice(0,12)+'...' : item.name}}</el-tag>
        </div>
      </div>

      <el-row type="flex" class="btn-left">
        <el-button type="primary" size="small" @click="addFn">确定添加</el-button>
        <el-button size="small" @click="canclefn">取消</el-button>
      </el-row>
    </div>
    <div class="organization-right">
      <el-form :inline="true" :model="formOrganization" class="demo-form-inline">
        <el-form-item label>
          <el-input
            style="width:200px;"
            size="small"
            v-model="formOrganization.organization"
            placeholder="请输入机构名称"
          ></el-input>
        </el-form-item>
        <el-form-item label>
          <el-input
            style="width:200px;"
            size="small"
            v-model="formOrganization.name"
            placeholder="请输入人员名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="searchRefresh()">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="default" @click="searchCancel()">取消搜索</el-button>
        </el-form-item>
      </el-form>
      <el-table
        class="rim"
        ref="multipleOrganization"
        :data="tableOrganization"
        tooltip-effect="dark"
        @select-all="selectAllOrganization"
        @select="selectOrganization"
        @cell-mouse-enter="showItemToast"
      >
        <!-- @cell-mouse-enter="showItemToast"-->
        <el-table-column type="selection" :selectable="selectableTableList">
          <!-- <template slot-scope="scope">
            <el-popover trigger="hover" placement="top">
              <p>姓名: {{ scope.row.name }}</p>
              <p>科室: {{ scope.row.department }}</p>
              <div slot="reference">
                <p size="medium">{{ "t" }}</p>
              </div>
            </el-popover>
          </template> -->
        </el-table-column>
        <el-table-column prop="name" label="人员名称" align="center"></el-table-column>
        <el-table-column prop="department" label="所属科室" align="center"></el-table-column>
        <el-table-column prop="hospital" label="所属医院" align="center"></el-table-column>
        <el-table-column prop="provinceName" label="所属省份" align="center"></el-table-column>
        <el-table-column prop="cityName" label="所属城市" align="center"></el-table-column>
        <el-table-column prop="countyName" label="所属区县" align="center"></el-table-column>
        <el-table-column prop="townName" label="所属街道" align="center"></el-table-column>
        <div slot="empty">
          <div class="table-empty">
            <img src="../../assets/image/no-content1.png" />
            <p>没有相关信息</p>
          </div>
        </div>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeOrganization"
          @current-change="handleCurrentOrganization"
          :current-page="formOrganization.pageNum"
          :page-sizes="[10, 20, 40]"
          :page-size="formOrganization.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalOrganization"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { openLoading, closeLoading } from "@/utils/utils";
import { doUpload, getFilePath } from "@/utils/qiniu-util";
import * as operationData from "@/utils/operation";
import { getCircleProvincesReq } from "@/utils/yqrange/rangeApi";
import {
  moOptionBlackList,
  moOrgSearch,
  moSaveBlackList,
  clearBlackListCacheOrg,
} from "@/utils/yqrange/memberApi";
let vm = null;
export default {
  props: {
    circleId: {
      type: Number | String,
      default: 1,
    },
    roleType: {
      type: Number | String,
      default: 1,
    },
  },
  data() {
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          if (node.level == 1) {
            let req = {
              provinceId: node.data.value,
            };
            vm.GET("basic-data/position/cities", req).then((res) => {
              let newData = vm.setMoreOption(res.data.cityList, "cities");
              resolve(newData);
            });
          } else if (node.level == 2) {
            let req = {
              cityId: node.data.value,
            };
            vm.GET("basic-data/position/counties", req).then((res) => {
              let newData = vm.setMoreOption(res.data.countyList, "counties");
              resolve(newData);
            });
          } else if (node.level == 3) {
            let req = {
              countyId: node.data.value,
            };
            vm.GET("basic-data/position/towns", req).then((res) => {
              let newData = vm.setMoreOption(res.data.townList, "towns");
              resolve(newData);
            });
          }
        },
      },
      administrativeValue: "",
      optionsRegion: [],
      organizationRank: [],
      tableOrganization: new Array(),
      currentOrganization: 1,
      totalOrganization: 10,
      pageSizeOrganization: 2,
      selectionList: [],
      formOrganization: {
        name: "",
        organization: "",
        administrativeId: "",
        administrativeIdList: [],
        level: "",
        chechAll: true,
        pageNum: 1,
        pageSize: 10,
      },
      allSelect: [],
      lastHoverAdminId: 0,
    };
  },
  created() {
    vm = this;
  },
  async mounted() {
    this.clear();
    // this.initRange();
    //Idtype:1,内部 2.外部
    vm.idType = localStorage.getItem("storageIdType");

    this.search();
  },
  methods: {
    search() {
      this.searchList();
    },
    searchRefresh() {
      this.formOrganization.pageNum = 1;
      this.searchList();
    },
    searchCancel() {
      this.formOrganization.organization = "";
      this.formOrganization.name = "";
      this.searchRefresh();
    },
    searchList() {
      console.log("黑名单搜索 " + this.circleId);
      let req = {
        circleId: this.circleId,
        name: this.formOrganization.name,
        orgName: this.formOrganization.organization,
        pageNo: this.formOrganization.pageNum,
        pageSize: this.formOrganization.pageSize,
      };
      vm.POST("circle/memberSelect/black/add/search", req)
        .then((res) => {
          if (res.code == "000000") {
            // this.tableData = res.data.peoplesDtoList;
            // this.totalRows = res.data.total;

            this.tableOrganization = res.data.peoplesDtoList;
            this.totalOrganization = res.data.total;
            this.initOrganizationStatus();
          } else {
            // vm.$message.info(res.message);
            // vm.$message.info("操作失败，请重试");
          }
        })
        .catch(function (error) {
          vm.$message.error(error);
        });
    },
    clear() {
      console.log("clear() enter");
      clearBlackListCacheOrg(this.circleId)
        .then(() => {
          this.search();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 多级地区
    setMoreOption(data, type) {
      let option = [];
      for (let i = 0; i < data.length; i++) {
        let obj = data[i];
        if (type == "cities") {
          obj.label = data[i].cityName;
          obj.value = data[i].cityId;
        } else if (type == "counties") {
          obj.label = data[i].countyName;
          obj.value = data[i].countyId;
        } else if (type == "towns") {
          obj.label = data[i].townName;
          obj.value = data[i].townId;
          obj.leaf = true;
        }
        option.push(obj);
      }
      return option;
    },
    initRange() {
      this.getRegionOption();
      this.listLevels();
      this.formOrganization.pageNum = 1;
      this.formOrganization.name = "";
      this.formOrganization.level = "";
    },
    //获取地区
    getRegionOption() {
      openLoading(vm);
      let idType = localStorage.getItem("storageIdType");
      getCircleProvincesReq(idType)
        .then((res) => {
          closeLoading(this);
          if (res.code == "000000") {
            if (idType == 1) {
              vm.optionsRegion = operationData.setRegionOption2(
                res.data.provinceList
              );
            } else {
              vm.optionsRegion = operationData.setRegionOption3(
                res.data.provinceList
              );
            }
            vm.formOrganization.administrativeIdList.push(
              vm.optionsRegion[0].value
            );
            vm.getOrganization();
          } else {
            this.$message(res.message);
          }
        })
        .catch((err) => {
          this.$message.error("请求失败");
        });
    },
    //获取医院等级
    listLevels() {
      let req = {};
      vm.GET("contents/courseDoctor/listLevels?sysCode=10", req).then((res) => {
        if (res.code == "000000") {
          this.organizationRank = operationData.getLevelList(res.data.list);
        } else {
          this.organizationRank = [
            {
              id: "0",
              label: "全部医院等级",
            },
          ];
        }
      });
    },
    //查询所有的机构列表
    getOrganization() {
      let idType = localStorage.getItem("storageIdType");

      let administrativeIdItem = "";
      // 如果是外部用户（2），只能看到所在省份的数据
      if (idType == 2) {
        let optionRegionArray = new Array();
        optionRegionArray.push(this.optionsRegion[0].provinceId);
        administrativeIdItem = operationData.setAdministrativeId(
          optionRegionArray
        );
      }

      let req = {
        circleId: this.circleId,
        districtIds: administrativeIdItem,
        orgLevel: "",
        member: this.formOrganization.name,
        pageNo: this.formOrganization.pageNum,
        pageSize: this.formOrganization.pageSize,
        idType: idType,
        roleType: this.roleType,
      };
      openLoading(vm);
      moOrgSearch(req)
        .then((res) => {
          closeLoading(this);
          if (res.code == "000000") {
            this.tableOrganization = res.data.orgList;
            this.totalOrganization = res.data.total;
            vm.initOrganizationStatus();
          } else {
            this.$message(res.message);
          }
        })
        .catch((err) => {
          this.$message.error("请求失败");
        });
    },
    // 获取机构列表的机构状态（是否被选中）
    initOrganizationStatus() {
      let tableStatus = this.tableOrganization;
      tableStatus.forEach((row) => {
        if (row.status == 1 || row.status == 2) {
          this.$nextTick(function () {
            this.$refs.multipleOrganization.toggleRowSelection(row);
            this.selectionList.push(row);
          });
        }
      });
    },
    //机构搜索
    getOrganizationChoose() {
      let administrativeIdItem = operationData.setAdministrativeId(
        this.formOrganization.administrativeIdList
      );
      if (administrativeIdItem == "000_0") {
        administrativeIdItem = "";
      }
      let idType = localStorage.getItem("storageIdType");
      let req = {
        circleId: this.circleId,
        districtIds: administrativeIdItem,
        orgLevel: this.formOrganization.level,
        member: this.formOrganization.name,
        pageNo: this.formOrganization.pageNum,
        pageSize: this.formOrganization.pageSize,
        idType: idType,
        roleType: this.roleType,
      };
      openLoading(vm);
      moOrgSearch(req)
        .then((res) => {
          closeLoading(vm);
          if (res.code == "000000") {
            this.tableOrganization = res.data.orgList;
            this.totalOrganization = res.data.total;
            vm.initOrganizationStatus();
          } else {
            this.$message(res.message);
          }
        })
        .catch((err) => {
          this.$message.error("请求失败");
        });
    },
    //选择搜索机构方式
    searchOrganization() {
      this.formOrganization.pageNum = 1;
      let searchForm = this.formOrganization;
      if (
        searchForm.administrativeId == "0" &&
        searchForm.administrativeIdList[
          searchForm.administrativeIdList.length - 1
        ] == "0" &&
        searchForm.level == "" &&
        searchForm.name == ""
      ) {
        this.searchOrganizationType = "";
        this.getOrganization();
      } else {
        this.searchOrganizationType = "choose";
        this.getOrganizationChoose();
      }
    },
    // 更改每页显示的数据数量
    handleSizeOrganization(val) {
      console.log(`每页 ${val} 条`);
      this.formOrganization.pageSize = val;
      this.search();
    },
    // 更改当前页数
    handleCurrentOrganization(val) {
      //console.log(`当前页: ${val}`);
      this.formOrganization.pageNum = val;
      console.log(
        "this.formOrganization.pageNum = " + this.formOrganization.pageNum
      );
      this.search();
    },
    //机构table中勾选一页
    selectAllOrganization(selection, row) {
      this.selectionList = selection;
      let setList = [];
      let selectList = [];
      for (let i = 0; i < vm.tableOrganization.length; i++) {
        if (
          vm.tableOrganization[i].status != 2 &&
          (vm.tableOrganization[i].roleId == null ||
            vm.tableOrganization[i].roleId == 0)
        ) {
          setList.push(vm.tableOrganization[i].id);
        }
      }
      for (let j = 0; j < selection.length; j++) {
        selectList.push(selection[j].id);
      }
      let intersect = operationData.getIntersect(setList, selectList);
      let typeStatus = 0;
      if (intersect.length > 0) {
        typeStatus = 1;
      }
      // let  = this.$refs.multipleTable.selection
      console.log(selection, setList, selectList);
      if (setList.length > 0) {
        let req = {
          ids: setList,
          circleId: this.circleId,
          type: typeStatus,
        };
        openLoading(vm);
        moOptionBlackList(req)
          .then((res) => {
            closeLoading(vm);
            if (res.code == "000000") {
              this.checkToList(req.type, vm.tableOrganization); //vm.tableOrganization
            } else {
              this.$message(res.message);
            }
          })
          .catch((err) => {
            this.$message.error("请求失败");
          });
      }
    },
    //机构table中勾选一个
    selectOrganization(selection, row) {
      console.log("selectOrganization() : " + row.name);
      this.selectionList = selection;
      let flag = false;
      for (let i = 0; i < selection.length; i++) {
        if (selection[i].id == row.id) {
          flag = true;
        }
      }
      let req = {
        ids: [row.id],
        circleId: this.circleId,
        type: flag === false ? 0 : 1,
      };
      openLoading(vm);
      moOptionBlackList(req)
        .then((res) => {
          closeLoading(vm);
          if (res.code == "000000") {
            this.checkToList(req.type, row);
          } else {
            this.$message(res.message);
          }
        })
        .catch((err) => {
          this.$message.error("请求失败");
        });
    },
    selectableTableList(row, index) {
      if (row.status == 2 || !(row.roleId == null || row.roleId == 0)) {
        return false;
      }
      return true;
    },
    // 通过check改变展示的已选中的数据列表
    checkToList(type, item) {
      if (type) {
        if (Array.isArray(item)) {
          this.allSelect = this.unique([...this.allSelect, ...item]);
        } else {
          this.allSelect.push(item);
        }
      } else {
        if (Array.isArray(item)) {
          for (var i = this.allSelect.length - 1; i >= 0; i--) {
            for (let j = item.length - 1; j >= 0; j--) {
              if (
                this.allSelect[i] &&
                item[j] &&
                this.allSelect[i].id == item[j].id
              ) {
                this.allSelect.splice(i, 1);
              }
            }
          }
        } else {
          for (let i = this.allSelect.length - 1; i >= 0; i--) {
            if (this.allSelect[i].id == item.id) {
              this.allSelect.splice(i, 1);
            }
          }
        }
      }
    },
    // 去重
    unique(arr) {
      let hashTable = {};
      let newArr = [];
      for (let i = 0, l = arr.length; i < l; i++) {
        if (
          !hashTable[arr[i].id] &&
          arr[i].status != 2 &&
          (arr[i].roleId == null || arr[i].roleId == 0)
        ) {
          hashTable[arr[i].id] = true;
          newArr.push(arr[i]);
        }
      }
      return newArr;
    },
    //删除已选中的tag
    handleClose(item) {
      this.selectOrganization([], item);
      this.$refs.multipleOrganization.toggleRowSelection(item);
    },
    // 确定添加
    addFn() {
      console.log("this.allSelect = " + this.allSelect);
      console.log("this.allSelect.length = " + this.allSelect.length);
      if (!(this.allSelect && this.allSelect.length)) {
        this.$message.error("已选列表为空");
        return;
      }
      let params = {
        circleId: this.circleId,
      };
      moSaveBlackList(params)
        .then(() => {
          this.$emit("addOrg");
        })
        .catch(() => {
          this.$message.error("保存失败,请重试");
        });
    },
    // 取消
    canclefn() {
      console.log("alex do canclefn()");
      this.$emit("handleClose");
    },
    showItemToast(row) {
      console.log("showItemToast() : row.id = " + row.id + ", row.status = " + row.status);
      let role;
      if (this.lastHoverAdminId != row.id && row.roleId != null && row.roleId != 0) {
        if (row.roleId == 1) {
          role = "管理员";
        } else if (row.roleId == 2) {
          role = "主管理员";
        } else if (row.roleId == 3) {
          role = "内部管理员";
        } else if (row.roleId == 4) {
          role = "高级主管理员";
        }
        vm.$message.info(`该人员为[`+ role +`身份]，无法加入黑名单`);
      }
      this.lastHoverAdminId = row.id;
    },
  },
};
</script>

<style lang="scss" scoped>
.organization-alert {
  display: flex;
  background: #fff;
  width: 100%;
  padding: 10px;
  .organization-left {
    width: 20%;
    border-right: 1px solid #ddd;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    .hcd {
      flex: 1;
      overflow: hidden;
      .tag-list {
        margin-top: 20px;
        margin-bottom: 40px;
        display: table-caption;
        overflow-y: scroll;
        max-height: 500px;
        &::-webkit-scrollbar() {
          width: 2px !important;
        }
      }
    }

    .btn-left {
      height: 40px;
      margin-bottom: 20px;
    }
  }
  .organization-right {
    flex: 1;
    .add-organization {
      margin-left: 40px;
      line-height: 20px;
      cursor: pointer;
      i {
        font-size: 18px;
        margin-right: 2px;
      }
    }
    .organization-search {
      margin-right: 20px;
      text-align: right;
    }
  }
}
</style>
