<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="formInline"
      label-width="100px"
      style="width:40%;"
    >
      <el-form-item label="项目成绩:">
        <el-select
          v-model="formInline.record"
          size="small"
          style="width: 100%;"
          placeholder="请选择项目成绩"
        >
          <el-option
            v-for="(item,index) in recordSelect"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计状态:">
        <el-select
          v-model="formInline.mathStatus"
          size="small"
          style="width: 100%;"
          placeholder="请选择统计状态"
        >
          <el-option
            v-for="(item,index) in mathStaSelect"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="form-button">
      <el-button @click="search()" 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="formInline.pageNo"
        :page-sizes="[10, 30, 50]"
        :page-size="formInline.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">项目【基层高血压管理】的数据修改</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: {
    dialogData: {
      type: Object
    }
  },
  data() {
    return {
      formInline: {
        record: "",
        mathStatus: "",
        pageNo: 1,
        pageSize: 2,
      },
      recordSelect: [
        //项目状态
        {
          label: "通过",
          value: 1
        },
        {
          label: "不通过",
          value: 2
        },
        {
          label: "无成绩",
          value: 3
        }
      ],
      mathStaSelect: [
        //项目状态
        {
          label: "归入统计",
          value: 1
        },
        {
          label: "移除统计",
          value: 2
        }
      ],
      tableData: [],
      multipleSelection: [], //被选中的行
      totalRows: 0, //数据总数
      pageNo: 1, //当前是第几页
      pageSize: 20, //页面总数
      getRowKeys(row) {
        return row.id;
      },
      selectedData: [],
      dialogVisible: false
    };
  },
  created() {
    vm = this;
    this.search();
    console.log(vm.dialogData);
  },
  methods: {
    // 将选中行放入数组
    handleSelectionChange(rows) {
      // this.multipleSelection = val;
      // console.log(this.multipleSelection);
      this.selectedData = [];
      if (rows) {
        rows.forEach(row => {
          if (row) {
            this.selectedData.push(row.id);
          }
        });
      }
      console.log('selectedData',this.selectedData);
    },
    handleClick(row) {
      console.log(row);
    },
    // 更改数据显示数量
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      vm.formInline.pageSize = val;
    },
    // 换页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      vm.formInline.pageNo = val;
    },
    close() {
      this.$emit("closeDialog");
    },
    search() {
      this.tableData = [
        {
          id: 1,
          name: "张医生",
          joinStatus: 1,
          record: 1,
          progress: "谈西社区卫生服务站",
          desk: "全科",
          rank: "一甲",
          province: "河北省",
          city: "石家庄市",
          district: "长安区",
          address: "建北街道",
          radio: "1"
        },
        {
          id: 2,
          name: "汤医生",
          joinStatus: 2,
          record: 1,
          progress: "谈西社区卫生服务站",
          desk: "全科",
          rank: "一甲",
          province: "河北省",
          city: "石家庄市",
          district: "长安区",
          address: "建北街道",
          radio: "1"
        },
        {
          id: 3,
          name: "谢医生",
          joinStatus: 2,
          record: 1,
          progress: "上海卫生局",
          desk: "全科",
          rank: "一甲",
          province: "河北省",
          city: "石家庄市",
          district: "长安区",
          address: "建北街道",
          radio: "1"
        }
      ];
      let req = {
        pageNo: 1,
        pageSize: 2,
        projectId: 1,
        achievementStatus: 1,
        status: 1,
      };
      openLoading(vm);
      vm.GET("report/portal/getProjectData", req).then(res => {
        closeLoading(vm);
        if (res.code == "000000") {
          vm.tableData = res.data;
        }
      });
    },
    //重置
    resetForm() {
      vm.formInline = Object.assign(
        {},
        {
          record: "",
          mathStatus: ""
        }
      );
    },
    saveUpdate() {
      this.dialogVisible = true;
    },
    updateData() {}
  }
};
</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>
