<template>
  <div class="data-alignment">
    <div class="alignment-header">
      <el-row>
        <el-col :span="18">
          <div class="title">数据调整</div>
        </el-col>
        <el-col :span="3">
          <el-button
            class="add-button"
            size="small"
            type="primary"
            @click="saveUpdate"
            >保存修改</el-button
          >
        </el-col>
        <el-col :span="3">
          <el-button class="add-button" size="small" @click="close"
            >取消</el-button
          >
        </el-col>
      </el-row>
    </div>
    <div class="text">
      <p>地区：{{ dialogData.region }}</p>
      <p>选择机构：{{ dialogData.organization }}</p>
    </div>
    <el-form
      class="form-update"
      ref="serchForm"
      :model="formData"
      label-width="100px"
      style="width: 40%"
    >
      <el-form-item label="项目成绩:">
        <el-select
          v-model="formData.achievementStatus"
          size="small"
          style="width: 100%"
          placeholder="请选择项目成绩"
        >
          <el-option
            v-for="(item, index) in achievementList"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计状态:">
        <el-select
          v-model="formData.status"
          size="small"
          style="width: 100%"
          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-form-item label="姓名:">
        <el-input
          v-model="formData.doctorName"
          placeholder="请输入人员名称"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="form-button">
      <el-button @click="searchData()" type="primary">查询</el-button>
      <el-button @click="resetForm()">重置</el-button>
    </div>
    <!-- <div class="line"></div> -->
    <p class="explain">
      说明：只有被勾选中的人才会归入数据统计范围，不勾的不会统计
    </p>
    <el-table
      class="data-main"
      border
      center
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
      :row-key="getRowKeys"
    >
      <el-table-column
        type="selection"
        width="55"
        :reserve-selection="true"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        min-width="80"
      ></el-table-column>
      <el-table-column prop="projectStatus" label="项目状态" width="120">
        <template v-slot="scope">{{
          $filters.projectStatus(scope.row.projectStatus)
        }}</template>
      </el-table-column>
      <el-table-column prop="projectResult" label="项目成绩" width="120">
        <template v-slot="scope">{{
          $filters.recordValue(scope.row.projectResult)
        }}</template>
      </el-table-column>
      <el-table-column
        prop="hospitalName"
        label="机构"
        min-width="120"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="departmentName"
        label="科室"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="provinceName"
        label="省/直辖市"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="cityName"
        label="市"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="countyName"
        label="区/县"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        prop="townName"
        label="乡镇/街道"
        show-overflow-tooltip
      ></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="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.pageNo"
        :page-sizes="[20, 50, 100]"
        :page-size="formData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalRows"
      ></el-pagination>
    </div>
    <el-dialog
      title="发布学情报告"
      v-model="dialogVisible"
      width="30%"
      append-to-body
    >
      <p style="color: red">项目【{{ projectName }}】的数据修改</p>
      <p>确认需要更新学情报告吗？</p>
      <template v-slot:footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateData()">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { $on, $off, $once, $emit } from '../../../utils/gogocodeTransfer'
import { openLoading, closeLoading } from '../../utils-o/utils'
import * as operationData from '../../utils-o/operation'
let vm
export default {
  props: {
    formInline: {
      type: Object,
    },
    organizationList: {
      type: Array,
    },
    dialogData: {
      type: Object,
    },
  },
  data() {
    return {
      formData: {
        achievementStatus: '',
        status: 1,
        doctorName: '',
        pageNo: 1,
        pageSize: 20,
      },
      achievementList: [
        //项目状态
        {
          label: '全部',
          value: '',
        },
        {
          label: '通过',
          value: 1,
        },
        {
          label: '不通过',
          value: 2,
        },
        {
          label: '无成绩',
          value: 3,
        },
      ],
      statusList: [
        //项目状态
        {
          label: '全部',
          value: 1,
        },
        {
          label: '归入统计',
          value: 2,
        },
        {
          label: '移除统计',
          value: 3,
        },
      ],
      tableData: [],
      multipleSelection: [], //被选中的行
      totalRows: 0, //数据总数
      getRowKeys(row) {
        return row.doctorId
      },
      selectedData: [],
      dialogVisible: false,
      projectId: '',
      projectName: '',
      changedDoctor: [],
      changedDoctor2: [],
      lookedDoctor: [],
    }
  },
  created() {
    vm = this
    this.projectId = vm.getUrlSearch(window.location.href, 'id')
    this.projectName = vm.getUrlSearch(window.location.href, 'projectName')
    // this.search();
    console.log(vm.dialogData)
  },
  mounted: function () {
    //父组件传值
    $on(this, 'search', () => {
      // this.lookedDoctor = [];
      // this.changedDoctor = [];
      // this.changedDoctor2 = [];
      // this.$refs.multipleTable.clearSelection();
      this.resetForm()
      // this.search();
    })
  },
  methods: {
    // 将选中行放入数组
    handleSelectionChange(rows) {
      this.changedDoctor = []
      this.changedDoctor2 = []
      this.selectedData = []
      if (rows) {
        rows.forEach((row) => {
          if (row) {
            this.changedDoctor.push(row.doctorId)
          }
        })
      }
      this.changedDoctor2 = operationData.getDifference(
        this.lookedDoctor,
        this.changedDoctor
      )
      console.log('选', this.changedDoctor, '没', this.changedDoctor2)
    },
    // 更改数据显示数量
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      vm.formData.pageSize = val
      vm.search()
    },
    // 换页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      vm.formData.pageNo = val
      vm.search()
    },
    close() {
      $emit(this, 'closeDialog')
    },
    searchData() {
      vm.formData.pageNo = 1
      vm.search()
    },
    search() {
      setTimeout(function () {
        openLoading(vm)
      }, 20)
      let checkAll = operationData.hasAll(vm.formInline.organization)
      let req = {
        projectId: vm.projectId,
        achievementStatus: vm.formData.achievementStatus,
        status: vm.formData.status,
        ids: operationData.getIds(vm.formInline, vm.organizationList, checkAll),
        type: operationData.getSearchType(vm.formInline, checkAll),
        doctorName: vm.formData.doctorName,
        pageNo: vm.formData.pageNo,
        pageSize: vm.formData.pageSize,
      }
      vm.reportGET('report/portal/getProjectData', req).then((res) => {
        // closeLoading(vm);
        if (res.code == '000000') {
          vm.tableData = res.data.projectData
          vm.totalRows = res.data.count

          let idList = operationData.getDoctorIdList(vm.tableData)
          // console.log('idList',idList);
          vm.lookedDoctor = operationData.getUnion(vm.lookedDoctor, idList)
          vm.initDoctorChoose()
        }
      })
    },
    initDoctorChoose() {
      let tableStatus = vm.tableData
      if (typeof tableStatus === 'undefined') {
        return
      }
      tableStatus.forEach((row) => {
        let idList = []
        idList[0] = row.doctorId
        let intersect = operationData.getIntersect(idList, this.changedDoctor)
        let intersect2 = operationData.getIntersect(idList, this.changedDoctor2)
        // console.log('intersect',intersect,'intersect2',intersect2);
        //debugger;
        if (intersect.length > 0) {
          //选中
          //this.$refs.multipleOrganization.toggleRowSelection(row);
        } else if (intersect2.length > 0) {
          //不选
        } else {
          if (row.status == 1) {
            this.$nextTick(function () {
              this.$refs.multipleTable.toggleRowSelection(row)
            })
          }
        }
      })
    },
    //重置
    resetForm() {
      this.lookedDoctor = []
      this.changedDoctor = []
      this.changedDoctor2 = []
      this.$refs.multipleTable.clearSelection()
      vm.formData = Object.assign(
        {},
        {
          achievementStatus: '',
          status: 1,
          doctorName: '',
          pageNo: 1,
          pageSize: 20,
        }
      )
      vm.search()
    },
    saveUpdate() {
      this.dialogVisible = true
    },
    updateData() {
      let req = {
        projectId: vm.projectId,
        removeDoctorIdList: operationData.getAjustmentList(vm.changedDoctor2),
        joinDoctorIdList: operationData.getAjustmentList(vm.changedDoctor),
      }
      openLoading(vm)
      vm.reportPOST('report/portal/peopleAdjustment', req).then((res) => {
        closeLoading(vm)
        vm.$message(res.message)
        if (res.code == '000000') {
          $emit(this, 'closeSearch')
        }
      })
      this.dialogVisible = false
    },
  },
  emits: ['closeDialog', 'closeSearch'],
}
</script>

<style lang="scss" rel="stylesheet/scss">
.data-alignment {
  background: #fff;
  .alignment-header {
    padding: 20px;
    margin: 0 30px;
    border-bottom: 1px solid #606266;
  }
  .text {
    margin-top: 30px;
    margin-left: 98px;
    font-size: 13px;
    color: #606266;
  }
  .form-update {
    margin: 30px 0px 0px 60px;
  }
  .form-button {
    width: 45%;
    top: -62px;
    position: relative;
    left: 50%;
  }
  .line {
    margin: -20px 30px 30px 30px;
    width: 100%;
    border-bottom: 1px solid #606266;
  }
  .explain {
    margin: 10px 0 10px 38px;
    font-size: 13px;
    color: #606266;
  }
  .data-main {
    margin-left: 36px;
    width: 90%;
    // padding: 0 40px;
    .select {
      margin-bottom: 30px;
    }
  }
  .pagination {
    margin-right: 10px;
  }
}
</style>
