<template>
  <div class="physical">
    <!-- 顶部筛选 -->
    <div class="screening">
      <div class="screening-title flex-vertical-center-l">
        <img src="~@/assets/filters.png" alt />
      </div>

      <div class="screening-form flex-vertical-center-l flex-wrap">
        <div class="screening-item flex-vertical-center-l">
          <span>测试时间：</span>
          <div class="input flex-vertical-center-l" style="width:350px;">
            <el-date-picker
              size="mini"
              value-format="yyyy-MM-dd"
              v-model="form.date"
              type="date"
              placeholder="开始时间"
              align="right"
            ></el-date-picker>-
            <el-date-picker
              size="mini"
              value-format="yyyy-MM-dd"
              v-model="form.date1"
              type="date"
              placeholder="结束时间"
              align="right"
            ></el-date-picker>
          </div>
        </div>

        <div class="screening-item flex-vertical-center-l" style="max-width:240px;">
          <span>医疗机构：</span>
          <div class="input">
            <el-select size="mini" v-model="form.department" placeholder="请选择">
              <el-option label="全部" value></el-option>
              <el-option
                :value="item.pid"
                :label="item.name"
                v-for="(item,index) in departmentList"
                :key="index"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l" style="min-width:100px;max-width:130px;">
          <span>性别：</span>
          <div class="input">
            <el-select size="mini" v-model="form.sex" placeholder="请选择">
              <el-option label="全部" value></el-option>
              <el-option value="男"></el-option>
              <el-option value="女"></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l" style="min-width:120px;max-width:150px;">
          <span>问卷类型：</span>
          <div class="input">
            <el-select size="mini" v-model="form.type" placeholder="请选择">
              <el-option label="全部" value></el-option>
              <el-option value="1" label="标准"></el-option>
              <el-option value="2" label="基公卫"></el-option>
            </el-select>
          </div>
        </div>
        <div class="screening-item flex-vertical-center-l" style="min-width:150px;max-width:170px;">
          <span>主要体质：</span>
          <div class="input">
            <el-select size="mini" v-model="form.physical" placeholder="请选择">
              <el-option label="全部" value></el-option>
              <el-option :value="item" v-for="(item,index) in mainPhysicalList" :key="index"></el-option>
            </el-select>
          </div>
        </div>
        <el-button type="primary" size="mini" @click="search()">搜索</el-button>
        <el-button type="warning" size="mini" @click="clearFilter()">清空</el-button>

        <el-button type="primary" size="mini" @click="_exportPhysicalTotal">导出</el-button>
      </div>
    </div>

    <!-- 底部数据 -->
    <div class="data-show">
      <div class="today-table">
        <el-table :data="tableData" stripe style="width: 100%" border height="100%">
          <!-- <el-table-column type="selection" width="55">
          </el-table-column>-->
          <el-table-column prop="id" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="endoftime" label="测试时间" width="160" align="center"></el-table-column>
          <el-table-column prop="patientname" label="姓名" width="100" align="center"></el-table-column>
          <el-table-column prop="sex" label="性别" width="100" align="center"></el-table-column>
          <el-table-column prop="age" label="年龄" width="100" align="center"></el-table-column>
          <el-table-column prop="questionnaireType" label="问卷类型" align="center" width="80">
            <template
              slot-scope="scope"
            >{{scope.row.questionnaireType==1?'标准':scope.row.questionnaireType===null?'标准':'基公卫'}}</template>
          </el-table-column>
          <el-table-column prop="medicalInstitutions" label="医疗机构" width="180" align="center"></el-table-column>
          <el-table-column prop="mainphysical" label="主要体质" align="center" width="180"></el-table-column>

          <el-table-column prop="secondphysical" label="倾向体质" align="center"></el-table-column>

          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <div class="flex-center operation">
                <div
                  class="flex-center"
                  @click="$router.push({path:`/index/questionsr?pid=${scope.row.pid}`})"
                >查看</div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="flex-vertical-center-r today-page">
        <div>总计：{{total}}条数据</div>
        <el-pagination
          background
          layout=" prev, pager, next, jumper, total"
          :total="total"
          :page-size="limit"
          @current-change="sizeC($event)"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getMainPhysical,
  getPhysicalTotalList,
  exportPhysicalTotal
} from "@/api/diagnosis.js";
import { medicalInstitution } from "@/api/city";
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      form: {
        date: "",
        date1: "",
        department: "",
        sex: "",
        type: "",
        physical: ""
      },
      search_name: "",
      page: 1,
      limit: 10,
      total: 0,
      tableData: [],

      departmentList: [],
      mainPhysicalList: []
    };
  },
  created() {
    this.getPhysicalTotalList(1);
    this._medicalInstitution();
    this._getMainPhysical();
  },

  methods: {
    clearFilter() {
      this.form = {
        date: "",
        date1: "",
        department: "",
        sex: "",
        type: "",
        physical: ""
      };
      this.getPhysicalTotalList();
    },

    sizeC(e) {
      this.page = e;
      this.getPhysicalTotalList();
    },
    search() {
      this.page = 1;
      this.getPhysicalTotalList();
    },
    // 获取主要体质选择器
    async _getMainPhysical() {
      let res = await getMainPhysical();
      if (res.ResultCode == 0) {
        this.mainPhysicalList = res.Data;
      }
    },
    // 获取医疗机构选择期
    async _medicalInstitution() {
      let res = await medicalInstitution({
        organizationId: this.getuserinfo.organizationid
      });
      if (res.ResultCode == 0) {
        this.departmentList = res.Data;
      }
    },
    // 获取列表接口
    async getPhysicalTotalList(type) {
      let params = {
        page: this.page,
        limit: this.limit,
        endDate: this.form.date1 ? this.form.date1 + " 23:59:59" : "",
        startDate: this.form.date ? this.form.date + " 00:00:00" : "",
        questionnaireType: this.form.type,
        mainphysical: this.form.physical,
        institutionId: this.form.department,
        sex: this.form.sex
      };
      let res = await getPhysicalTotalList(params);
      if (res.ResultCode == 0) {
        this.tableData = res.Data.Items;
        this.total = res.Data.TotalRecordCount;

        this.tableData.filter((item, index) => {
          if (this.page > 1) {
            return (item.id = (this.page - 1) * 10 + (index + 1));
          } else {
            return (item.id = index + 1);
          }
        });
      }
    },
    // 导出数据
    async _exportPhysicalTotal() {
      const loading = this.$loading({
        lock: true,
        text: "正在处理",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let params = {
        page: this.page,
        limit: this.limit,
        endDate: this.form.date1 ? this.form.date1 + " 23:59:59" : "",
        startDate: this.form.date ? this.form.date + " 00:00:00" : "",
        questionnaireType: this.form.type,
        mainphysical: this.form.physical,
        institutionId: this.form.department,
        sex: this.form.sex
      };
      let res = await exportPhysicalTotal(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        let path = process.env.VUE_APP_UPLOAD + "file/" + res.ResultInfo;
        const a = document.createElement("a"); // 创建a标签
        a.setAttribute("download", ""); // download属性
        a.setAttribute("href", path); // href链接
        a.click(); // 自执行点击事件
        a.remove();
        this.$message({
          type: "success",
          message: "导出成功",
          showClose: true
        });
        loading.close();
      }
    }
  },
  computed: {
    ...mapGetters(["getPatiensInfo", "getuserinfo"])
  }
};
</script>
<style lang="scss" scoped>
@import "../../style/common.scss";
@import "../../style/base.scss";

.data-show {
  margin-top: 5px;
  padding: 10px;
  background: #ffffff;
  border-radius: 5px;
  height: 71vh;

  .btns {
    margin-bottom: 30px;

    div {
      width: 74px;
      height: 36px;
      background: #5386f6;
      border-radius: 4px;

      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
    }

    .bg-yellow {
      background: #ffae45;
      margin-left: 20px;
    }
  }

  .today-table {
    height: 90%;

    .operation {
      div {
        width: 60px;
        height: 24px;
        background: #5386f6;
        border-radius: 2px;
        cursor: pointer;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      .bg-yellow {
        background: #ffae45;
        margin-left: 15px;
      }
    }
  }
}

.table::v-deep .el-table .cell {
  text-align: center;
}
</style>

<style lang="scss" scoped>
@media screen and (min-width: 1681px) and (max-width: 1920px) {
  .data-show {
    height: 82vh;

    .today-table {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 18px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1601px) and (max-width: 1680px) {
  .data-show {
    height: 81vh;

    .today-table {
      height: 94%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 16px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 16px 0;
  }

  .today-table::v-deep .el-table td {
    padding: 16px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 18px 0;
  }
}

@media screen and (min-width: 1361px) and (max-width: 1600px) {
  .data-show {
    height: 73vh;

    .today-table {
      height: 90%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}

@media screen and(min-width:1281px) and (max-width: 1360px) {
  .data-show {
    height: 73vh;

    .today-table {
      height: 92%;
    }
  }

  .today-table::v-deep .el-table td {
    padding: 5px 0;
  }

  .today-table::v-deep .el-table th {
    padding: 5px 0;
  }
}
</style>