<template>
  <view class="content">
    <view class=" calendar">
      <!-- 日历 -->
      <ren-calendar ref='ren' :markDays='markDays' @onDayClick='onDayClick' @onMonthClickPre='onMonthClickPre'
        @onMonthClickNext="onMonthClickNext" v-if="isShow">
      </ren-calendar>
      <!--  -->
      <view class="box" v-if="infoList.length">
        <view class="list" v-for="(item,index) in infoList" :key="index" @click="addMemberTags(item.id,item)">
          <!-- 成人 -->
          <view class="item">
            <view class="check">
              <icon class="iconfont" :class="isActive.indexOf(item.id)!=-1?'icon-radio':'icon-kongradio'">
              </icon>
            </view>
            <view>{{item.height}}<text>身高</text></view>
            <view>{{item.weight}}<text>体重</text></view>
            <view>{{item.bmi}}<text>BMI</text></view>
          </view>
        </view>
      </view>
      <!--  -->
      <view class="bottom">
        <view class="list" v-for="(ite,ind) in ActiveDays" :key="ind" v-if="isActive"
          @click="addMemberTags(ite.id,ite)">
          <view class="item borderRadius">
            <view class="time">{{ite.createtime}}</view>
            <view>{{ite.height}}<text>身高</text></view>
            <view>{{ite.weight}}<text>体重</text></view>
            <view>{{ite.bmi}}<text>BMI</text></view>
            <view class="check">
              <icon class="iconfont icon-quxiao"></icon>
            </view>
          </view>
        </view>
        <view class="pkclass" v-if="length==2">vs</view>
        <view :class="{'active':length!=2}" class="btn" @click="handlePK">减脂对比</view>
      </view>
    </view>
    <userPopup></userPopup>
  </view>
</template>

<script>
  import userPopup from '@/components/userLogin.vue'
  import RenCalendar from '@/components/ren-calendar/ren-calendar.vue';
  import {
    mapState
  } from "vuex";
  export default {
    components: {
      userPopup,
      RenCalendar,
    },
    computed: {
      ...mapState(["user", "TrendPk", "appTheme"]),
      length() {
        return this.isActive.length
      },
      endDate() {
        return this.$tools.getDate("start")
      },
    },
    onLoad() {
      // 
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.appTheme,
      })
      this.token = uni.getStorageSync("token")
    },
    onShow() {
      let that = this
      that.startM = that.$tools.getDate("m").substring(0, 10)
      that.endM = that.$tools.getDate("m").substring(11, 21)
      that.infoList = []
      that.markDays = []
      that.list = []
      that.isActive = []
      that.ActiveDays = []
      that.isShow = false
      this.$nextTick(() => {
        that.isShow = true
        that.getList(that.startM, that.endM)
      })
    },
    methods: {
      getList(start, end) {
        let that = this
        that.$model.GetTrendList({
          familyid: uni.getStorageSync('familyid'),
          starttime: start,
          endtime: end,
        }).then(res => {
          if (res) {
            that.markDays = res.pkList.Dlist
            that.list = res.pkList.list
            for (var i = 0; i < res.pkList.list.length; i++) {
              if (Date.parse(that.endDate) == Date.parse(res.pkList.list[i].createtime)) {
                that.infoList.push(res.pkList.list[i]);
              }
            }
          }
        })
      },
      onMonthClickPre(data) {
        console.log("onMonthClickPre", data)
        let that = this
        let start = data.substring(0, 10)
        let end = data.substring(11, 21)
        that.infoList = []
        that.markDays = []
        that.list = []
        that.getList(start, end)
      },
      onDayClick(data) {
        let that = this
        this.infoList = []
        for (var i = 0; i < that.list.length; i++) {
          if (Date.parse(data.date) == Date.parse(that.list[i].createtime)) { //includes 检测数组是否有某个值
            this.infoList.push(that.list[i]);
          }
        }
      },
      addMemberTags(index, item) {
        var that = this;
        console.log("addMemberTags", index, item)
        // if (this.user.type != 1) return
        if (that.isActive.indexOf(index) == -1) {
          that.isActive.push(index);
          that.ActiveDays.push(item);
        } else {
          that.isActive.splice(that.isActive.indexOf(index), 1);
          that.ActiveDays.splice(that.ActiveDays.indexOf(item), 1);
        }
        if (that.isActive.length > 2) {
          that.isActive.splice(0, 1)
          that.ActiveDays.splice(0, 1);
        }
      },
      handlePK() {
        let that = this
        if (!uni.getStorageSync('token')) {
          this.$store.commit("changeUserLogin", true);
          return
        }
        if (that.isActive.length != 2) {
          that.$tools.msg("请先选择数据！")
          return
        }
        let info = {}
        info.familyid = uni.getStorageSync('familyid')
        info.firstId = that.isActive[0]
        info.secondId = that.isActive[1]
        uni.navigateTo({
          url: "/pageTwo/compk/pkdetail?info=" + JSON.stringify(info)
        })
      },
    },
    data() {
      return {
        markDays: [],
        infoList: [],
        list: [],
        isActive: [],
        ActiveDays: [],
        token: null,
        startM: null,
        endM: null,
        isShow: true,
      }
    },
  }
</script>

<style scoped lang="scss">
</style>
