<template>
  <div class="yqrange-index-wrapper">
    <bread-crumb
      :curmbFirst="curmbFirst"
      :curmbSecond="curmbSecond"
      :curmbThird="curmbThird"
      :jumPathThird="jumPathThird"
      :jumPathFouth="jumPathFouth"
    ></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="10" type="flex" style="margin-top: 10px">
          <!-- <p class="add_btn" @click="openDialogBlackList()">+ 添加人员至黑名单</p> -->
          <el-col class="add-organization">
            <i class="el-icon-circle-plus-outline" @click="openDialogBlackList()"></i>
            <i class="text" @click="openDialogBlackList()">添加人员至黑名单</i>
          </el-col>
          <el-col :span="8">
            <el-form-item label="机构">
              <el-input size="small" v-model="searchForm.organization" placeholder="请输入机构名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称">
              <el-input size="small" v-model="searchForm.staffName" placeholder="请输入人员名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7" style="text-align: right;margin-top: 5px">
            <el-button type="primary" size="small" @click="search">搜索</el-button>
            <el-button type="default" size="small" @click="searchCancel" 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="name" label="人员名称" min-width="120" align="center"></el-table-column>
        <el-table-column prop="department" label="所属科室" min-width="120" align="center"></el-table-column>
        <el-table-column prop="hospital" label="所属医院" min-width="120" align="center"></el-table-column>
        <el-table-column prop="provinceName" label="所属省份" min-width="120" align="center"></el-table-column>
        <el-table-column prop="cityName" label="所属城市" min-width="120" align="center"></el-table-column>
        <el-table-column prop="countyName" label="所属区县" min-width="120" align="center"></el-table-column>
        <el-table-column prop="townName" label="所属街道" min-width="120" align="center"></el-table-column>
        <el-table-column label="操作" min-width="200" align="center">
          <template slot-scope="scope">
            <el-button @click="removeBlackList(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>

    <el-dialog
      title="添加人员至黑名单"
      :visible.sync="dialogBlackList"
      width="80%"
      top="5vh"
      :before-close="handleClose"
    >
      <checkBlackList :circleId="circleId" @addOrg="addOrg" @handleClose="handleClose"></checkBlackList>
      <!-- :roleType="roleType" -->
    </el-dialog>
  </div>
</template>
<script>
let vm = null;
import BreadCrumb from "@/components/yqrange/breadcrumb-range.vue";
// import * as operationData from "../../../utils/operation";
import checkBlackList from "./checkBlackList";
export default {
  components: {
    BreadCrumb,
    checkBlackList,
  },
  data() {
    vm = this;

    return {
      circleId: 0,
      curmbFirst: "云鹊小圈",
      curmbSecond: "",
      curmbThird: "黑名单",
      jumPathThird: "/yq-range",
      searchForm: {
        organization: "",
        staffName: "",
        pageNo: 1,
        pageSize: 10,
      },
      totalRows: 0,
      tableData: [],
      selfRoleId: 0,
      docIds: [],
      dialogBlackList: false,
    };
  },
  created() {
    vm = this;
    // this.circleId = this.$route.query.id;
    this.circleId = 131;
    // this.circleId = this.$route.query.circleId;
    this.idType = localStorage.getItem("storageIdType");
    this.circleName = this.$route.query.circleName;
    this.curmbSecond = "圈子管理-" + this.circleName;
    this.jumPathFouth =
      "/range-manage?id=" +
      this.circleId +
      "&name=" +
      this.circleName +
      "&activeName=first";
    console.log("alex storageIdType = " + this.idType + ", id = " + this.id);
    this.searchList();
  },
  methods: {
    // 搜索
    search() {
      this.searchForm.pageNo = 1;
      this.searchList();
    },
    searchCancel() {
      this.searchForm.organization = "";
      this.searchForm.staffName = "";
      this.searchList();
    },

    searchList() {
      console.log("查询");
      let req = {
        circleId: this.circleId,
        name: this.searchForm.staffName,
        orgName: this.searchForm.organization,
        circleId: this.circleId,
        pageNo: this.searchForm.pageNo,
        pageSize: this.searchForm.pageSize,
      };
      vm.POST("circle/memberSelect/black/related/search", req)
        .then((res) => {
          if (res.code == "000000") {
            this.tableData = res.data.peoplesDtoList;
            this.totalRows = res.data.total;
          } else {
            // vm.$message.info(res.message);
            // vm.$message.info("操作失败，请重试");
          }
        })
        .catch(function (error) {
          vm.$message.error(error);
        });
    },
    openDialogBlackList() {
      this.dialogBlackList = true;
    },
    resetForm() {
      console.log("重置");
      this.searchForm.organization = "";
      this.searchForm.staffName = "";
      this.search();
    },
    //移出黑名单
    removeBlackList(row) {
      vm = this;
      this.$confirm(`确定将“${row.name}”移出黑名单吗？`, "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "alert",
        customClass: "range-make-box",
      })
        .then(() => {
          console.log("移出： row.name = " + row.name);
          this.docIds = [row.id];
          let req = {
            circleId: this.circleId,
            docIds: this.docIds,
          };
          vm.POST("circle/memberSelect/black/related/deletePeople", req)
            .then((res) => {
              if (res.code == "000000") {
                vm.$message({
                  type: "success",
                  message: "操作成功",
                });
                this.searchList();
              } 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();
    },
    handleClose() {
      this.dialogBlackList = false;
    },
    addOrg() {
      this.handleClose();
      this.search();
    },
  },
};
</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;
      }
    }
  }
  .add_btn {
    width: 200px;
    margin-top: 10px;
    margin-left: 20px;
  }
  .add-organization {
    margin-left: 0px;
    line-height: 20px;
    width: 200px;
    cursor: pointer;
    padding-top: 10px;
    i {
      font-size: 16px;
      margin-right: 2px;
    }
  }
}
</style>
