<template>
  <div class="page_transferOutCustomers">
    <div class="quarterBox">
      <p :class="Num == 1 ? 'active' : ''" @click="onClick(1)">近一周</p>
      <p :class="Num == 2 ? 'active' : ''" @click="onClick(2)">近一月</p>
      <p :class="Num == 3 ? 'active' : ''" @click="onClick(3)">近三月</p>
      <!-- <div class="toolBox"> -->
      <div class="toolOne" @click="startShow = true">
        <div style="display: flex;align-items: center;">
          {{ query.start_time }}
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <div class="toolOne" @click="endShow = true">
        <div style="display: flex;align-items: center;">
          {{ query.end_time }}
          <van-icon name="arrow-down"/>
        </div>
      </div>
      <!-- </div> -->
    </div>

    <div>
      <el-table ref="tab" :data="tableData" style="width: 100%" :height="tableHeight" v-loadmore="loadMore" border :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}">
        <el-table-column fixed prop="name" label="姓名" width="70" align="center"></el-table-column>
        <el-table-column label="性别" width="70" align="center">
          <template slot-scope="scope">
            {{scope.row.gender == 1 ? '男':'女'}}
          </template>
        </el-table-column>
        <el-table-column label="年龄" width="70" align="center">
          <template slot-scope="scope">
            {{getAge(scope.row.id_card_no)}}
          </template>
        </el-table-column>
        <el-table-column prop="date" label="转出日期" align="center"></el-table-column>
      </el-table>
    </div>

    <div>
      <van-popup v-model="startShow" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate1"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime"
          @cancel="startShow = false"
        />
      </van-popup>
      <van-popup v-model="endShow" position="bottom" :style="{ height: '40%' }">
        <van-datetime-picker
          v-model="currentDate2"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="getstartTime2"
          @cancel="endShow = false"
        />
      </van-popup>
    </div>
  </div>
</template>


<script>
  import {GetPatientLapsetoTable} from "@/api/statistics";
  import {jsGetAge} from '@/utils/tools'

  const moment = require('moment')

  export default {
    data() {
      return {
        tableHeight:'',
        query: {
          start_time: "",
          end_time: "",
          page: 1,
          limit: 20,
          type: 2
        },
        isStop:false,
        Num: 1,
        tableHeight:'',
        total_one: "",
        total: "",
        currentDate1: new Date(new Date().setDate(new Date().getDate() - 7)),
        currentDate2: new Date(),
        startShow: false,
        endShow: false,
        currentDate: new Date(),
        startTime: "请选择",
        endTime: "请选择",
        minDate: new Date(new Date().setFullYear(new Date().getFullYear() - 1)),
        maxDate: new Date(),
        tableData: []
      }
    },
    methods: {
      loadMore() {
        if(!this.isStop){
          this.isStop = true
          this.query.page++
          GetPatientLapsetoTable(this.query)
            .then(rs => {
              var resp = rs.data
              if (resp.state == 1) {
                for (let i = 0; i < resp.data.data.length; i++){
                  this.tableData.push( resp.data.data[i])
                }
                this.$nextTick(() => {
                  this.$refs.tab.doLayout()
                })
                if (resp.data.data.length <= 0){
                  this.isStop = true
                }else{
                  this.isStop = false
                }
              } else {
                this.$toast({
                  message: resp.msg
                })
              }
            })
            .catch(error => {

            })
        }
      },


      onClick(id) {
        if (id == 1) {
          this.Num = 1;
        } else if (id == 2) {
          this.Num = 2;
        } else if (id == 3) {
          this.Num = 3;
        }

        switch (this.Num) {
          case 1: //本月
            this.query.start_time = moment().subtract('day', 7).format('YYYY-MM-DD')
            // 本月的结束时间
            this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
            this.isStop = false
            this.query.page = 1


            this.currentDate1 = new Date(new Date().setDate(new Date().getDate() - 7)),
              this.currentDate2 = new Date(),
              this.GetPatientLapsetoTable(this.query)
            break
          case 2: //近1个月
            this.currentDate1 = new Date(new Date().setMonth(new Date().getMonth() + 1)),
              this.currentDate2 = new Date()
            this.isStop = false
            this.query.page = 1

            const startDate = moment().subtract('month', 1).format('YYYY-MM-DD')
            this.query.start_time = startDate
            const endDate = moment(new Date()).format('YYYY-MM-DD')
            this.query.end_time = endDate
            this.GetPatientLapsetoTable(this.query)
            break
          case 3: //近三月
            this.currentDate1 = new Date(new Date().setMonth(new Date().getMonth() - 3)),
              this.currentDate2 = new Date()
            this.isStop = false
            this.query.page = 1

            this.query.start_time = moment().subtract('month', 3).format('YYYY-MM-DD')
            this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
            this.GetPatientLapsetoTable(this.query)
            break
          case 4: //近6月
            this.isStop = false
            this.query.page = 1
            this.query.start_time = moment().subtract('month', 6).format('YYYY-MM-DD')
            this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
            this.GetPatientLapsetoTable(this.query)
            break
        }

      },
      getstartTime(value) {
        this.Num = 0
        let year = value.getFullYear();
        let month = value.getMonth() + 1;
        let day = value.getDate();
        if (month >= 1 && month <= 9) {
          month = `0${month}`;
        }
        if (day >= 1 && day <= 9) {
          day = `0${day}`;
        }

        this.query.start_time = `${year}-${month}-${day}`;

        this.GetPatientLapsetoTable(this.query)
        this.startShow = false;
      },
      getstartTime2(value) {
        this.Num = 0
        let year = value.getFullYear();
        let month = value.getMonth() + 1;
        let day = value.getDate();
        if (month >= 1 && month <= 9) {
          month = `0${month}`;
        }
        if (day >= 1 && day <= 9) {
          day = `0${day}`;
        }

        this.query.end_time = `${year}-${month}-${day}`;
        this.GetPatientLapsetoTable(this.query)

        this.endShow = false;
      },
      GetPatientLapsetoTable(params) {
        this.tableData = []
        GetPatientLapsetoTable(params)
          .then(rs => {
            var resp = rs.data
            if (resp.state == 1) {
              this.tableData = resp.data.data
              this.$nextTick(() => {
                this.$refs.tab.doLayout()
              })
            } else {
              this.$toast({
                message: resp.msg
              })
            }
          })
          .catch(error => {

          })


      },
      getAge(id_card_no) {

        var thisLen = id_card_no.length;
        var birth = "";
        if (thisLen == 15) {
          birth = "19" + id_card_no.substr(6, 6);
        } else {
          birth = id_card_no.substr(6, 8);
        }
        birth =
          birth.substr(0, 4) +
          "-" +
          birth.substr(4, 2) +
          "-" +
          birth.substr(6, 2);
        return jsGetAge(birth, "-");

      }
    },
    created() {
      this.tableHeight = (document.documentElement.clientHeight - (Number(document.documentElement.style.fontSize.slice(0, -2)) * 2.75)) + 'px'
      this.query.start_time = moment().subtract('day', 7).format('YYYY-MM-DD')
      // 本月的结束时间
      this.query.end_time = moment(new Date()).format('YYYY-MM-DD')
      this.GetPatientLapsetoTable(this.query)
    }
  }
</script>

<style lang="scss" scoped>
  .page_transferOutCustomers {

  .quarterBox {
    display: flex;
    height: 2.5rem;
    align-items: center;
    justify-content: space-around;

  p {
    width: 3rem;
    height: 1.875rem;
    line-height: 1.875rem;
    background: rgba(246, 246, 246, 1);
    opacity: 0.8;
    border-radius: 0.3125rem;
    color: #8d8d8d;
    cursor: pointer;
    text-align: center;
    font-size: 0.8125rem;
  }

  .active {
    background: rgba(51, 138, 251, 1);
    color: #fff;
    border: 1px solid #338afb;
  }

  }

  /*.toolBox {*/
  /*/ / display: flex;*/
  /*/ / height: 2.5 rem;*/
  /*/ / align-items: center;*/

  .toolOne {
    width: 6.25rem;
    height: 1.875rem;
    background: rgba(246, 246, 246, 1);
    border-radius: 5px;
    text-align: center;
    font-size: 0.8125rem;
    color: #8d8d8d;
    display: flex;
    align-items: center;
    justify-content: space-around;
  /*/ / margin-left: 0.8125 rem;*/
  }

  /*/*/
  /*/*/
  }
  /*}*/

</style>
<style lang="scss">
  ::-webkit-scrollbar {
    height: 0;
    width: 0;
  }
</style>
