<template>
  <div class="fruitCheck">
    <div class="bg">
      <div class="card">
        <div class="name">核验总次数</div>
        <div class="num">{{ totalNum }}</div>
        <div class="subName">今日核验总次数</div>
        <div class="subNum">{{ todayTotalNum }}</div>
      </div>
      <div class="card">
        <div class="name">核验总重量(kg)</div>
        <div class="num">{{ totalWeight }}</div>
        <div class="subName">今日核验总重量(kg)</div>
        <div class="subNum">{{ todayTotalWeight }}</div>
      </div>
    </div>
    <div class="content" v-if="supplyType == 1">
      <div class="card" v-for="(item, index) in list" :key="index">
        <div class="top">
          <div class="title" @click="open(item)">
            <div class="left">
              <div class="icon"></div>
              <div class="name">
                {{ index + 1 }}.&nbsp;{{ item.supplyName }}
              </div>
            </div>
            <img v-if="item.supplyType == null" src="./images/c-2.png" alt="" />
            <img v-else src="./images/c-3.png" alt="" />
          </div>
          <div class="statis">
            <div class="times">
              总次数
              <div class="total1">{{ item.totalNum }}</div>
            </div>
            <div class="times">
              总质量(kg)
              <div class="total1">{{ item.totalWeight }}</div>
            </div>
          </div>
          <div class="statis">
            <div class="times">
              今日总次数
              <div class="total1">{{ item.todayTotalNum }}</div>
            </div>
            <div class="times">
              今日总质量(kg)
              <div class="total1">{{ item.todayTotalWeight }}</div>
            </div>
          </div>
        </div>
        <div class="bottom" v-if="item.supplyType == null">
          <div class="fruit" v-for="el in item.fruitsList" :key="el">
            <div class="fruitname">{{ el.fruitsName }}</div>
            <div class="total">
              <div class="times">
                总次数<span class="total1">{{ el.totalNum }}</span>
              </div>
              <div class="times">
                总质量<span class="total1">{{ el.totalWeight }}kg</span>
              </div>
            </div>
            <div class="total">
              <div class="times">
                今日总次数<span class="total1">{{
                  el.todayTotalNum
                }}</span>
              </div>
              <div class="times">
                今日总质量<span class="total1"
                  >{{ el.todayTotalWeight }}kg</span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="safe-area"></div>
    </div>
    <div class="content2" v-else>
      <div class="card" v-for="(item, index) in list" :key="index">
        <div class="name">{{ item.fruitsName }}</div>
        <div class="times">
          <div class="total">总次数<span class="total1">{{ item.totalNum }}</span></div>
          <div class="todayTotal">今日总次数<span class="total1">{{ item.todayTotalNum }}</span></div>
        </div>
        <div class="times">
          <div class="total">总质量<span class="total1">{{ item.totalWeight }}kg</span></div>
          <div class="todayTotal">今日总质量<span class="total1">{{ item.todayTotalWeight }}kg</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { verificationStatistics } from "@/api/fruit.js";
export default {
  data() {
    return {
      userInfo: {},
      supplyType: "",
      totalNum: "",
      totalWeight: "",
      todayTotalNum: "",
      todayTotalWeight: "",
      list: [],
    };
  },
  created() {
    if (window.android !== undefined) {
      const res = window.android.getUserInfo(); // 这是一个json字符串
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
      if (this.userInfo) {
        this.init();
      }
    } else if (window.webkit) {
      window.webkit &&
        window.webkit.messageHandlers.getUserInfo.postMessage("getUserInfo");
    } else {
      this.$toast("请先登录镇合意app");
    }
  },
  mounted() {
    window.getUserInfo = this.getUserInfo;
  },
  methods: {
    open(item) {
      if (item.supplyType == null) {
        item.supplyType = 1;
      } else {
        item.supplyType = null;
      }
    },
    getUserInfo(res) {
      sessionStorage.setItem("ZJCD-UserInfo", res);
      this.userInfo = JSON.parse(res);
      if (window.webkit) {
        if (this.userInfo) {
          this.init();
        }
      }
    },
    init() {
      let params = {
        uid: this.userInfo.userId,
        userMobile: this.userInfo.mobileNo,
      };
      verificationStatistics(params).then((res) => {
        this.supplyType = res.supplyType;
        this.totalNum = res.totalNum;
        this.totalWeight = res.totalWeight;
        this.todayTotalNum = res.todayTotalNum;
        this.todayTotalWeight = res.todayTotalWeight;
        this.list = res.supplyList || res.fruitsList;
      });
    },
  },
};
</script>

<style lang="stylus" scoped>
.fruitCheck {
  height: 100vh;
  overflow-y: auto;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  height: calc(100vh - 50px);

  .bg {
    background: url('./images/c-1.png');
    height: 320px;
    color: #fff;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .card {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .name {
        font-size: 35px;
        line-height: 2;
      }

      .num {
        font-size: 50px;
      }

      .subName {
        font-size: 30px;
        line-height: 2;
        margin-top: 30px;
      }

      .subNum {
        font-size: 40px;
      }
    }
  }

  .content {
    display: flex;
    flex-direction: column;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);

    .card {
      margin-top: 20px;
      display: flex;
      flex-direction: column;

      .top {
        display: flex;
        flex-direction: column;

        .title {
          background: #fff;
          padding: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .left {
            display: flex;
            align-items: center;

            .icon {
              width: 8px;
              height: 36px;
              background: #EB4E3F;
            }

            .name {
              font-size: 36px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #333333;
              margin-left: 10px;
            }
          }

          img {
            width: 36px;
            height: 36px;
          }
        }

        .statis {
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: space-around;
          margin-top: 10px;
          padding: 20px 0;

          .times {
            width: 40%;
            font-size: 30px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            text-align: center;

            .total1 {
              font-size: 36px;
              color: #333333;
              padding-top: 20px;
            }
          }
        }
      }

      .bottom {
        display: flex;
        flex-direction: column;

        .fruit {
          display: flex;
          flex-direction: column;

          .fruitname {
            background: #fff;
            padding: 20px;
            margin-top: 10px;
            font-size: 35px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
          }

          .total {
            background: #fff;
            padding: 20px;
            margin-top: 5px;
            display: flex;
            justify-content: space-around;

            .times {
              font-size: 35px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #999999;

              .total1 {
                font-size: 35px;
                margin-left: 50px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
              }
            }
          }
        }
      }
    }
  }

  .content2 {
    display: flex;
    flex-direction: column;
    margin-top: 10px;

    .card {
      display: flex;
      flex-direction: column;

      .name {
        background: #fff;
        padding: 20px;
        margin-top: 10px;
        font-size: 35px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }

      .times {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 20px;
        margin-top: 1px;
        font-size: 35px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 400;
        color: #666666;
        .total {
          width: 50%;
        }
        .todayTotal {
          width: 50%;
        }
        .total1 {
          color: #333333;
          margin-left: 40px;
        }
      }

    }
  }
}
</style>