<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 slot-scope="scope">{{ scope.row.projectStatus | projectStatus }}</template>
      </el-table-column>
      <el-table-column prop="projectResult" label="项目成绩" width="120">
        <template slot-scope="scope">{{ scope.row.projectResult | recordValue }}</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>
      <div slot="empty">
        <div class="table-empty">
          <img src="../../assets/image/no-content1.png" />
          <p>没有相关数据，请重新选择查询范围</p>
        </div>
      </div>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.pageNo"
        :page-sizes="[20, 50 ,100, 200]"
        :page-size="formData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalRows"
      ></el-pagination>
    </div>
    <el-dialog title="发布学情报告" :visible.sync="dialogVisible" width="30%" append-to-body>
      <p style="color:red">项目【{{ projectName }}】的数据修改</p>
      <p>确认需要更新学情报告吗？</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateData()">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { openLoading, closeLoading } from "../../utils/utils";
import * as operationData from "../../utils/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() {
    //父组件传值
    this.$on("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.formData.pageNo = 1;
      vm.search();
    },
    // 换页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      vm.formData.pageNo = val;
      vm.search();
    },
    close() {
      this.$emit("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,
        hospitalIdList: vm.formInline.organization,
        originalFlag: vm.formInline.checked == false ? 0 : 1,
        regionId: vm.formInline.region[vm.formInline.region.length - 1],
        timeFlag: vm.formInline.timeFlag,

        achievementStatus: vm.formData.achievementStatus,
        status: vm.formData.status,
        doctorName: vm.formData.doctorName,
        pageNo: vm.formData.pageNo,
        pageSize: vm.formData.pageSize,
      };
      vm.POST("stats/report/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.POST("stats/report/peopleAdjustment", req).then(res => {
        closeLoading(vm);
        vm.$message(res.message);
        if (res.code == "000000") {
          this.$emit("closeSearch");
        }
      });
      this.dialogVisible = false;
    }
  }
};
</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>
