<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:value="searchForm.organization"
                placeholder="请输入机构名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="名称">
              <el-input
                size="small"
                v-model:value="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 v-slot="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, 200]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
    </div>

    <el-dialog
      title="添加人员至黑名单"
      v-model:visible="dialogBlackList"
      width="80%"
      top="5vh"
      :before-close="handleClose"
    >
      <checkBlackList
        v-if="dialogBlackList"
        :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 = 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>
