<template>
  <div>
    <van-sticky>
      <m-header :isFixed="false"> </m-header>
    </van-sticky>
    <van-cell title-class="title-class" class="head-cell" :center="true">
      <!--  @click="gotoStudentMisic(item)" -->
      <template slot="icon">
        <img class="logo" v-if="user.avatar" :src="user.avatar" alt="" />
        <img
          class="logo"
          v-else
          src="@/assets/images/icon_student.png"
          alt=""
        />
      </template>
      <template slot="title">
        <div class="label">
          {{ user.username }}
        </div>
      </template>
      <template slot="default">
        <a :href="'tel:' + user.phone">
          {{ user.phone }}
        </a>
      </template>

      <template #right-icon>
        <a :href="'tel:' + user.phone" v-if="user.phone">
          <img class="phone" src="@/assets/images/icon_phone.png" alt="" />
        </a>
      </template>
    </van-cell>
    <van-list
      v-model="loading"
      v-if="dataShow"
      style="margin-top: 0.15rem"
      key="ing"
      :finished="finished"
      finished-text=" "
      :immediate-check="false"
      @load="getList()"
    >
      <van-cell-group
        v-for="item in dataList"
        :key="item.id"
        class="input-group"
        style="margin: 0 0.12rem 0.12rem"
      >
        <van-cell
          :center="true"
          class="input-cell"
          style="align-items: flex-start"
          title-class="input-title"
        >
          <template slot="icon">
            <van-image :src="item.goodsImg" class="logo">
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
            </van-image>
          </template>
          <template slot="title">
            <div>
              <p>{{ item.goodsName }}</p>
              <van-tag plain color="#C2A076" v-if="item.goodsBrand">{{
                item.goodsBrand
              }}</van-tag>
            </div>
            <div
              style="color: #666666; font-size: 0.14rem"
              v-if="item.specification"
            >
              乐器型号：{{ item.specification }}
            </div>
          </template>
        </van-cell>
        <van-cell
          :center="true"
          class="input-cell"
          value-class="style"
          title-style="flex: 1 auto;"
          style="align-items: flex-start"
        >
          <template slot="icon">
            <img
              src="./images/icon_privilege.png"
              v-if="item.open"
              class="icon_logo"
              alt=""
            />
            <img
              src="./images/icon_privilege_default.png"
              v-else
              class="icon_logo"
              alt=""
            />
          </template>
          <template slot="title">
            <div
              style="color: #999999; font-size: 0.14rem; line-height: 1.4"
              v-if="item.open"
            >
              该乐器保养特权到期时间 <br /><span style="color: #01c1b5">{{
                item.endTime | dayjsFormat("YYYY-MM-DD HH:mm")
              }}</span>
            </div>
            <div style="color: #c0c0c0; font-size: 0.14rem" v-else>
              该乐器暂无乐器维护特权
            </div>
          </template>
          <!--   @click="openPrivilege(item)" -->
        </van-cell>
      </van-cell-group>
    </van-list>
    <m-empty v-else class="empty" msg="暂无数据" />
  </div>
</template>
<script>
import MHeader from "@/components/header";
import MEmpty from "@/components/MEmpty";
import dayjs from "dayjs";
import isBetween from "dayjs/plugin/isBetween";
dayjs.extend(isBetween);
import { getStudentShopList } from "./api";

export default {
  components: {
    MHeader,
    MEmpty,
  },
  data() {
    return {
      dataShow: true,
      loading: false,
      finished: false,
      params: {
        studentId: this.$route.query.studentId,
        page: 1,
        rows: 20,
      },
      dataList: [],
      user: {
        username: null,
        avatar: null,
        phone: null,
      },
    };
  },
  mounted() {
    this.user = { ...this.$route.query };
    this.getList();
  },
  methods: {
    async getList() {
      let params = this.params;
      await getStudentShopList(params).then((res) => {
        let result = res.data.data;

        this.loading = false;

        if (res.data.code == 200) {
          // 如果列表有值且，在请求在第一页时
          if (this.dataList.length > 0 && result.pageNo == 1) {
            return;
          }

          let rows = result.rows || [];
          rows.forEach((item) => {
            if (dayjs().isBetween(item.startTime, item.endTime)) {
              item.open = 1;
            } else {
              item.open = 0;
            }

            item.dayNum = this.dateDifference(new Date(), item.endTime);
          });
          this.dataList.push(...rows);
          if (params.page >= Math.ceil(result.total / params.rows)) {
            this.finished = true;
          }
          this.params.page++;
        } else {
          this.finished = true;
        }
        if (this.dataList.length <= 0) {
          this.dataShow = false;
        }
      });
    },
    dateDifference(k1, k2) {
      k1 = dayjs(k1).valueOf();
      k2 = dayjs(k2).valueOf();
      return Math.floor(Math.abs(k1 - k2) / 1000 / 60 / 60 / 24 + 0.5);
    },
  },
};
</script>
<style lang="less" scoped>
.input-group {
  margin: 0 0.12rem 0.12rem;
}
.input-cell {
  padding: 0.12rem 0.16rem;

  .logo {
    width: 0.82rem;
    height: 0.82rem;
    margin-right: 0.15rem;
    border-radius: 0.05rem;
    overflow: hidden;
  }

  .icon_logo {
    width: 0.16rem;
    height: 0.15rem;
    margin-right: 0.06rem;
    margin-top: 0.02rem;
  }

  /deep/.van-cell__title {
    font-size: 0.16rem;
    color: #000000;
  }

  .input-title > div {
    margin-bottom: 0.1rem;
    // display: flex;
    // align-items: center;
    flex-wrap: wrap;
  }

  .style {
    flex: 1 auto;
  }
}
.head-cell {
  align-items: center;
  .logo {
    width: 0.42rem;
    height: 0.42rem;
    margin-right: 0.12rem;
    border-radius: 100%;
  }
  .phone {
    width: 0.17rem;
    height: 0.21rem;
    margin-left: 0.1rem;
    display: block;
  }
}
.title-class {
  display: flex;
  align-items: center;
  .label {
    display: flex;
    flex-direction: column;
    font-size: 0.16rem;
    color: #1a1a1a;
  }
}
</style>
