<template>
  <div class="item-shield">
   <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" :curmbThird="curmbThird"  :jumPathThird="jumPathThird" :jumPathFouth="jumPathFouth"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <div class="header-title">设置管理员</div>
      <el-row :gutter="30" class="row" type="flex" style="margin-top: 10px">
        <el-form :model="formInline" ref="formInline" label-width="75px" class="form-inline" style=";width:1000px;">
          <el-col :span="6">
            <el-form-item label="机构：">
              <el-input style="width:130px" size="small" v-model="formInline.hospitalName" placeholder="请输入机构名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="名称：">
              <el-input style="width:130px" size="small" v-model="formInline.doctorName" placeholder="请输入人员名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="角色：">
              <el-select size="small" v-model="formInline.blackStatus" placeholder="请选择角色">
                <el-option
                  v-for="(item, index) in statusList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding:0;text-align:right;padding-right:10px;">
            <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-form>
      </el-row>
      <el-table :data="tableData" style="width: 100%">
        <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>
        <el-table-column fixed="right" label="角色" align="center">
          <template slot-scope="scope"><p>{{ scope.row.roleId | roleAdminStatus }}</p></template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              style="color:#409EFF"
              @click="openDialog(scope.row)"
            >{{ scope.row.roleId | roleAdminButton }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.pageNo"
          :page-sizes="[10, 20, 30, 100]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
    </div>

  </div>
</template>
<script>
import BreadCrumb from "@/components/yqrange/breadcrumb-range.vue";
import { mapGetters } from "vuex";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";

let vm = null;
export default {
  components: {
    BreadCrumb
  },
  data() {
    return {
      curmbFirst: "云鹊小圈",
      curmbThird: "设置管理员",
      jumPathThird: '/yq-range',
      circleId: "",
      formInline: {
        blackStatus:0,//默认角色
        region: ["0"],
        administrativeId: "",
        orgName: "",
        name: "",
        roleId: -1,
        pageNo: 1,
        pageSize: 10
      },
      statusList: [
        {
          label: "全部",
          value: 0
        },
        {
          label: "普通成员",
          value: 1
        },
        {
          label: "管理员",
          value: 2
        }
      ],
      tableData: [],
      totalRows: 0,
      shieldBlock: "",//当前角色id
      scopeRow: {},
      administrativeValue: "",
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level } = node;
          console.log("node", 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");
              console.log("newData", newData);
              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");
              console.log("newData", newData);
              resolve(newData);
            });
          }
        }
      }
    };
  },
  computed: {
    ...mapGetters(["_token"])
  },
  created() {
    vm = this;
    this.circleId = this.$route.query.circleId;
      this.circleName = this.$route.query.circleName;
      this.curmbSecond = "圈子管理-" + this.circleName;
      this.jumPathFouth = "/range-manage?id=" + this.circleId + "&name=" + this.circleName + "&activeName=first";
    vm.circleId = vm.getUrlSearch(window.location.href, "circleId");
    vm.formInline.blackStatus = 0 ;

    vm.search();
  },
  // 挂载到Dom完成时
  mounted: function() {
    commonUtil.resizeHeight();
  },
  methods: {
    handleChange(value) {
      let areaId = "000";
      for (let i = 0; i < value.length; i++) {
        areaId += "_" + value[i];
      }
      vm.administrativeValue = areaId;
      if (areaId == "000_0") {
        vm.administrativeValue = "";
      }
      console.log(value, vm.administrativeValue);
    },
    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;
          // obj.leaf = true;
        } else if (type == "towns") {
          obj.label = data[i].townName;
          obj.value = data[i].townId;
          obj.leaf = true;
        }
        option.push(obj);
      }
      return option;
    },
    searchList() {
      this.formInline.pageNo = 1;
      this.search();
    },
    search() {
        let req = {
          roleId: vm.formInline.blackStatus-1,
          orgName: vm.formInline.hospitalName,
          name: vm.formInline.doctorName,
          pageNo: vm.formInline.pageNo,
          pageSize: vm.formInline.pageSize,
          circleId: vm.circleId
        };
        openLoading(vm);
        vm.POST("circle/circle/role/manager/search", req).then(res => {
          closeLoading(vm);
          vm.setTable(res);
          // vm.tableData = res.data.list;
          // vm.totalRows = res.data.count;
        });
    },
    setTable(res) {
      vm.tableData = [];
      vm.totalRows = 0;
      if (res.code == "000000") {
        vm.tableData = res.data.memberList;
        vm.totalRows = res.data.total;
      } else {
        vm.$message(res.message);
      }
    },
    openDialog(row) {
      vm.scopeRow = row;
      vm.shieldBlock = row.roleId;
      if (row.roleId == 0) {
          this.$confirm(`确定要将普通成员“${row.name}”升为管理员？`, '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'range-make-box',
      }).then(() => {
        //  confirm
       this.changeStatus()
      }).catch(() => {
        //  cancel
      });
      }
      if (row.roleId == 1) {
            this.$confirm(`确定要将管理员“${row.name}”降为普通成员？`, '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'range-make-box',
      }).then(() => {
        //  confirm
       this.changeStatus()
      }).catch(() => {
        //  cancel
      });
      }

    },
    // 升为管理员/降为普通成员
    changeStatus() {
      let row = vm.scopeRow;
      let option = "";
      if (row.roleId == 0) {
        option = 1;
      } else if (row.roleId == 1) {
        option = 0;
      }
        //升为管理员
        let req = {
          roleId: option,
          id: row.id,
          circleId: vm.circleId
        };
        openLoading(vm);
        vm.POST("circle/circle/role/manager/update", req).then(res => {
          closeLoading(vm);
          if (res.code == "000000") {
       vm.search();
      } else {
        vm.$message(res.message);
      }  
        });
    },
    complete() {
      console.log("完成");
    },
    //重置表单
    resetForm() {
      vm.formInline = Object.assign(
        {},
        {
          region: ["0"],
          administrativeId: "",
          hospitalName: "",
          doctorName: "",
          blackStatus: 0,
          pageNo: 1,
          pageSize: 10
        }
      );
      vm.searchList();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.formInline.pageSize = val;
      vm.searchList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.formInline.pageNo = val;
      this.search();
    }
  }
};
</script>
<style lang="scss">
.item-shield {
  .component-content {
    padding: 10px;
    background: #fff;
    .complete {
      float: right;
    }
    .header-title{
        padding: 10px 12px;
        font-size: 12px;
        color: #449284;
        border-bottom: 1px solid #efefef;
      }
  }
}
</style>
