<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>地区：浙江省/杭州市/西湖区</p>
      <p>选择机构：杭州中医院</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 preStaSelect"
            :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="mathDate"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="姓名" min-width="80">
      </el-table-column>
      <el-table-column prop="joinStatus" label="项目状态" width="120">
        <template slot-scope="scope">
          {{ scope.row.joinStatus | projectStatus }}
        </template>
      </el-table-column>
      <el-table-column prop="record" label="项目成绩" width="120">
        <template slot-scope="scope">
          {{ scope.row.record | recordValue }}
        </template>
      </el-table-column>
      <el-table-column prop="progress" label="机构" min-width="120" show-overflow-tooltip></el-table-column>
      <el-table-column prop="desk" label="科室" show-overflow-tooltip></el-table-column>
      <el-table-column prop="province" label="省/直辖市" show-overflow-tooltip></el-table-column>
      <el-table-column prop="city" label="市" show-overflow-tooltip></el-table-column>
      <el-table-column prop="district" label="区/县" show-overflow-tooltip></el-table-column>
      <el-table-column prop="address" 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="pageNo"
        :page-sizes="[15, 30, 50, 100, 200, 500, 700, 1000, 1500, 2000]"
        :page-size="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>
let vm;
export default {
  data() {
    return {
      formInline: {
        record: "",
        mathStatus: "",
      },
      preStaSelect: [
        //项目状态
        {
          label: "未参与项目",
          value: 1
        },
        {
          label: "参与项目",
          value: 2
        },
        {
          label: "完成项目",
          value: 3
        }
      ],
      mathStaSelect: [
        //项目状态
        {
          label: "归入统计",
          value: 1
        },
        {
          label: "移除统计",
          value: 2
        }
      ],
      mathDate: [],
      multipleSelection: [], //被选中的行
      totalRows: 0, //数据总数
      pageNo: 1, //当前是第几页
      pageSize: 20, //页面总数
      dialogVisible: false,
    };
  },
  created() {
    vm = this;
    this.search();
  },
  methods: {
    // 将选中行放入数组
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    handleClick(row) {
      console.log(row);
    },
    // 更改数据显示数量
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 换页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    // 全部统计
    includeMath() {
      if (!this.multipleSelection) {
        return;
      }
      this.multipleSelection.forEach(el => {
        el.radio = "1";
      });
    },
    // 全部不统计
    removeMath() {
      if (!this.multipleSelection) {
        return;
      }
      this.multipleSelection.forEach(el => {
        el.radio = "2";
      });
    },
    close() {
      this.$emit("closeDialog");
    },
    search() {
      this.mathDate = [
        {
          name: "张医生",
          joinStatus: 1,
          record: 1,
          progress: "谈西社区卫生服务站",
          desk: "全科",
          rank: "一甲",
          province: "河北省",
          city: "石家庄市",
          district: "长安区",
          address: "建北街道",
          radio: "1"
        },
        {
          name: "贾医生",
          joinStatus: 2,
          record: 1,
          progress: "谈西社区卫生服务站",
          desk: "全科",
          rank: "一甲",
          province: "河北省",
          city: "石家庄市",
          district: "长安区",
          address: "建北街道",
          radio: "1"
        },
        {
          name: "谢医生",
          joinStatus: 2,
          record: 1,
          progress: "上海卫生局",
          desk: "全科",
          rank: "一甲",
          province: "河北省",
          city: "石家庄市",
          district: "长安区",
          address: "建北街道",
          radio: "1"
        }
      ];
    },
    //重置
    resetForm() {
      vm.formInline = Object.assign(
        {},
        {
          record: "",
          mathStatus: "",
        }
      );
      vm.tags = [];
    },
    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>
