<template>
  <div class="ecology">
    <el-form :inline="true" :model="formOrganization" class="demo-form-inline">
      <el-form-item label>
        <el-select
          size="small"
          v-model:value="formEcology.ecology"
          placeholder="选择小生态"
          @change="selectChangeEcology"
          :disabled="status4Flag == 1"
        >
          <el-option
            v-for="item in ecologySelect"
            :key="item.id"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <span class="span_ecology">{{ checkedEcology }}</span>
    </el-form>
    <el-table
      class="rim"
      ref="multipleEcology"
      :data="tableEcology"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="selectableTableEcology"
        :reserve-selection="true"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="医院名称"
        min-width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="hospitalLevelName"
        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>
      <template v-slot:empty>
        <div>
          <div class="table-empty">
            <img src="../../../assets/image/no-content1.png" />
            <p>没有机构信息！</p>
          </div>
        </div>
      </template>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeEcology"
        @current-change="handleCurrentEcology"
        :current-page="formEcology.pageNum"
        :page-sizes="[10, 20, 40]"
        :page-size="formEcology.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalEcology"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
let vm = null
import { doUpload, getFilePath } from '../../../utils/qiniu-util'
import { mapGetters } from 'vuex'
import { openLoading, closeLoading } from '../../../utils/utils'
import * as commonUtil from '../../../utils/utils'
import * as operationData from '../../../utils/operation'
import { getExeclUrl } from '@/utils/index'
import {
  uploadOrgExcel,
  uploadPersonExcel,
} from '@/utils/education/educationApi'
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      formOrganization: {
        name: '',
        administrativeId: '0',
        administrativeIdList: ['0'],
        level: '-1',
        chechAll: true,
        pageNum: 1,
        pageSize: 10,
      },
      status4Flag: '',
      checkedEcology: '',
      ecologySelect: [],
      formEcology: {
        ecology: '',
        pageNum: 1,
        pageSize: 10,
      },
      totalEcology: 0,
      tableEcology: [],
      checkTableEcology: '',
      getRowKeysEcology(row) {
        return row.id
      },
      lookedEcology: [],
      changedEcology: [],
      changedEcology2: [],
      projectId: 623,
    }
  },
  created() {
    vm = this
    this.getEcologySelect()
  },
  methods: {
    //选择小生态
    selectChangeEcology(value) {
      this.formEcology.pageNum = 1
      //console.log('select',value);
      for (let i = 0; i < this.ecologySelect.length; i++) {
        if (this.ecologySelect[i].value == value) {
          this.checkedEcology = this.ecologySelect[i].label
        }
      }
      this.formEcology.ecology = value
      this.getEcology()
    },
    getEcologySelect() {
      let req = {}
      vm.GET('portal/scope/v1/' + this.projectId + '/ecology', req).then(
        (res) => {
          console.log('查询小生态列表', res)
          this.ecologySelect = operationData.getEcologySelect(res.data.list)
          if (res.data.chooseIdList.length > 0) {
            this.formEcology.ecology = res.data.chooseIdList[0]
            this.getEcology()
          }
        }
      )
    },
    //获取小生态数据
    getEcology() {
      let req = {}
      req = this.formEcology
      openLoading(vm)
      vm.GET('portal/scope/v1/' + this.projectId + '/organization', req).then(
        (res) => {
          closeLoading(vm)
          console.log('根基小生态查询机构列表信息', res)
          this.tableEcology = res.data.organizationList
          this.totalEcology = res.data.total

          let tableStatus = this.tableEcology
          tableStatus.forEach((row) => {
            this.$refs.multipleEcology.toggleRowSelection(row)
          })
        }
      )
    },
    // 初始化小生态
    initEcology() {
      let tableStatus = this.tableEcology
      if (typeof tableStatus === 'undefined') {
        return
      }
      tableStatus.forEach((row) => {
        let idList = []
        idList[0] = row.id
        let intersect = operationData.getIntersect(idList, this.changedEcology)
        let intersect2 = operationData.getIntersect(
          idList,
          this.changedEcology2
        )
        if (intersect.length > 0) {
          //选中
        } else if (intersect2.length > 0) {
          //不选
        } else {
          if (row.status == 1) {
            this.$nextTick(function () {
              this.$refs.multipleEcology.toggleRowSelection(row)
            })
          }
        }
      })
    },
    // 选择生态table
    selectableTableEcology(row, index) {
      return false
    },
    //科室table修改(分页相关)
    handleSizeEcology(val) {
      console.log(`每页 ${val} 条`)
      this.formEcology.pageSize = val
      this.getEcology()
    },
    //科室table修改(分页相关)
    handleCurrentEcology(val) {
      console.log(`当前页: ${val}`)
      this.formEcology.pageNum = val
      this.getEcology()
    },
  },
}
</script>
