<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:value="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:value="formInline.doctorName"
                placeholder="请输入人员名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="角色：">
              <el-select
                size="small"
                v-model:value="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 v-slot="scope"
            ><p>{{ $filters.roleAdminStatus(scope.row.roleId) }}</p></template
          >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150" align="center">
          <template v-slot="scope">
            <el-button
              type="text"
              size="small"
              style="color: #409eff"
              @click="openDialog(scope.row)"
              >{{ $filters.roleAdminButton(scope.row.roleId) }}</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>
