<template>
  <view class="content">
    <view class="bgheight" v-if="!isShowA">
      <view v-if="listA">
        <view class="btn" @tap="handleListx(1)">重新测评</view>
        <view class="box">
          <view class="name">
            <view>本次体质评估结果为</view>
          </view>
          <view class="conbt">
            {{listA.bodytype}}
          </view>
          <view class="conbt">
            {{listA.extinfo}}
          </view>
        </view>
        <view class="box" v-if="listA.list.length">
          <view class="h2">体质解读：</view>
          <view v-for="(item,index) in listA.list" :key="index">
            <view class="title">{{item.bodytype}}</view>
            <view class="con">
              <view class="text" v-show="item.feature"><text>特征：</text>{{item.feature}}</view>
              <view class="text" v-show="item.people"><text>重点人群：</text>{{item.people}}</view>
              <view class="text" v-show="item.sick"><text>患病倾向：</text>{{item.sick}}</view>
              <view class="text" v-show="item.health"><text>调养方式：</text>{{item.health}}</view>
            </view>
          </view>
          <view class="tips" v-if="listA.referlist">
            {{listA.referlist}}
          </view>
        </view>
      </view>
    </view>
    <!-- 评估 -->
    <view class="commonAll" v-else>
      <view class="h2">请根据近一年的体验和感觉，回答以下问题</view>
      <view class="box" v-for="(item,index) in infoListA.slice((currpage-1)*eachpage,currpage*eachpage)" :key="index">
        <view v-for="(ite, ind) in item.qalist" :key="ind">
          <view class="h5">{{ite.title}}</view>
          <view class="item">
            <view class="group" v-for="(it, id) in ite.data" :key="id" @click="Changeradio(it)">
              <icon class="iconfont radioimg" :class="[dasC.indexOf(it.val)!=-1?'icon-radio':'icon-kongradio']">
              </icon>
              <view>{{it.name}}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="page" v-if='!listA'>
      <view class="pre" v-if="currpage>1" @click="pre">上一页</view>
      <view v-if="currpage<pagesum" @click="next">下一页</view>
      <view class="btn" v-if="currpage==pagesum" @click="handlesub">
        提交
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState
  } from "vuex";
  export default {
    computed: {
      ...mapState(["user", "appTheme"]),
      info() {
        return this.user
      }
    },
    onLoad() {
      // 导航栏颜色
      uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: this.appTheme,
      })
    },
    onShow() {
      let that = this
      that.handleTypeInfo()
    },
    methods: {
      //测评结果
      handleTypeInfo() {
        let that = this
        that.$model.getbodyinfo({
          familyid: that.user.familyid,
        }).then(res => {
          if (res.code != 0) {
            that.handleListx(1)
            return
          }
          that.listA = res.data
          that.isShowA = false
          console.log("计算成功,去查看结果吧！")
        })

      },
      // 重新测评
      handleListx(ind) {
        let that = this
        that.isShowA = true
        that.currpage = 1
        that.dasA = []
        that.dasC = []
        that.listA = ""
        that.tmidlistA = []
        that.infoListA = []
        that.$model.getbodylist({
          isrestart: ind,
          sex: that.user.sex,
          familyid: that.user.familyid,
        }).then(res => {
          console.log(123, res)
          if (res.code != 0) return
          that.pagesum = Math.ceil(res.data.length / that.eachpage);
          that.infoListA = res.data
        })

      },
      // 测评选择
      Changeradio(tmitem) {
        let that = this
        if (that.tmidlistA.indexOf(tmitem.id) == -1) {
          console.log(0)
          that.tmidlistA.push(tmitem.id)
          that.dasC.push(tmitem.val);
          that.dasA.push(tmitem)
        } else {
          for (var n = 0; n < that.tmidlistA.length; n++) {
            if (tmitem.id == that.tmidlistA[n]) {
              console.log(1)
              if (that.dasC.indexOf(tmitem.val) == -1) {
                that.tmidlistA.push(tmitem.id)
                that.dasC.push(tmitem.val);
                that.dasA.push(tmitem)
                console.log(2)
              }
              that.tmidlistA.splice(n, 1)
              that.dasC.splice(n, 1);
              that.dasA.splice(n, 1);
            }
          }
        }
      },
      // 提交
      handlesub() {
        let that = this
        var obj = {}
        let newArr = []
        that.dasA.forEach(function(item, suffix) {
          if (!obj[item.valId]) {
            var arr = {
              id: '',
              list: []
            };
            arr.id = item.valId
            arr.list.push({
              id: item.id,
              score: item.value
            })
            newArr.push(arr);
            obj[item.valId] = item;
          } else {
            for (var q = 0; q < newArr.length; q++) {
              if (newArr[q].id == item.valId) {
                newArr[q].list.push({
                  id: item.id,
                  score: item.value
                })
              }
            }
          }
        })
        // for (var i = 0; i < that.infoListA.length; i++) {
        //     var arr = {
        //         id: '',
        //         list: []
        //     };
        //     arr.id = that.infoListA[i].id
        //     for (var e = 0; e < that.infoListA[i].qalist.length; e++) {
        //         arr.list.push({
        //             id: that.infoListA[i].qalist[e].Id,
        //             score: 3
        //         })
        //     }
        //     newArr.push(arr)
        // }
        console.log("去计算", newArr)
        // if (newArr.length < 7 || newArr.length < 9) {
        //     that.$api.msg("请先完成问答")
        //     return
        // }
        that.$model.getbodyresultinfo({
            appid: uni.getStorageSync("appid"),
            familyid: that.user.familyid,
            data: newArr
          })
          .then(res => {
            console.log('res', res)
            that.tmidlistA = []
            that.dasA = []
            that.dasC = []
            if (res.code != 0) {
              that.$tools.msg(res.message)
              return
            }
            that.listA = res.data
            that.isShowA = false
            that.currpage = 1
            console.log("计算成功,去查看结果吧！")
          })
      },
      pre() {
        this.currpage--
      },
      next() {
        let that = this
        that.currpage++
      },
    },
    data() {
      return {
        isShowA: true,
        dasA: [],
        dasC: [],
        listA: [],
        infoListA: [],
        tmidlistA: [],
        pagesum: null, //总页数
        currpage: 1, //当前页数
        eachpage: 2, //每页行数
      }
    },
  }
</script>

<style scoped lang="scss">
  .content {
    font-size: 14px;
    color: #666;
    background-color: #fff;
    padding: 15px;
    min-height: calc(100vh - 30px);
  }

  .h2 {
    font-size: 16px;
    font-weight: bold;
  }

  .h5 {
    margin: 15px 0 10px;

  }

  .bgheight {
    .name {
      font-size: 16px;
      font-weight: bold;
      color: #f19601;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
    }

    .conbt {
      font-size: 14px;
      line-height: 25px;
      width: 100%;
      margin-bottom: 8px;
    }

    .box .conbt:nth-last-child(1) text {
      display: none;
    }

    .title {
      width: 100%;
      font-size: 16px;
      text-align: left;
      font-weight: bold;
      margin: 15px 0;
      color: #333;
    }

    .con {
      line-height: 25px;

      text {
        color: #333;
        font-weight: bold;
      }
    }

    .btn {
      display: block;
      height: 30px;
      line-height: 30px;
      border: none;
      background: #f19601;
      color: #fff;
      margin: 0;
      width: 100px;
      border-radius: 10px;
      text-align: center;
      font-size: 14px;
      float: right;
      // margin-bottom: 10px;
    }
  }


  .uni-list-cell {
    display: flex;
    width: 60%;
    margin-bottom: 10px;
    margin-left: 10px;
  }

  :nth-child(even).uni-list-cell {
    width: 30%;
    margin-left: 0;
  }

  .commonAll {
    background-color: #fff;
  }

  .page {
    width: 100%;
    height: 35px;
    text-align: center;
    margin: 20px auto;
    display: flex;
    justify-content: space-around;

    view {
      width: 150px;
      background: #dfdfdf;
      padding: 5px 0;
      border-radius: 5px;
    }

    .btn {
      background: #f19601;
      color: #fff;
      margin: 0;
      height: auto;
      line-height: inherit;
    }
  }


  .item {
    display: flex;
    flex-wrap: wrap;
  }

  .group {
    display: flex;
    align-items: center;
    align-content: center;
    width: 50%;
    justify-content: end;
    flex-wrap: wrap;
    margin-top: 8px;
  }

  .iconfont {
    width: 22px;
    height: 22px;
    font-size: 20px;
    color: #dfdfdf;
    display: flex;
    margin-right: 3px;
  }

  .icon-radio {
    color: #f19601;
  }

  .tips {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
    line-height: 22px;
  }
</style>
