<template>
  <view class="warranty_page">
    <BackBar title="电子保修卡" />
    <view class="all_warranty">
      <view v-for="(i, idx) in warrantyList" :key="idx" class="warranty">
        <view class="warranty_date">
          <view>
            <view class="title">
              <text>电子保修卡</text>
              <image :src="eplainIcon" mode="" class="explain_icon" @click="showPolicyFun"></image>
            </view>
            <text :class="['item', 'date', { out_date: i.warrantyStatus === 1 }]"
              >{{ i.warrantyStatus === 1 ? '已过期' : '保修中' }}｜保修期至{{
                i.warrantyEndTime
              }}</text
            >
          </view>
          <image :src="learningCard" mode="" class="learning_card"></image>
        </view>
        <view class="serial">序列号：{{ i.simSerialNumber }} </view>
      </view>
    </view>
    <view class="service">
      <view class="service_title"> 快捷服务 </view>
      <view class="service_list">
        <view class="item" @click="applyServiceFun">
          <image :src="applyServiceIcon" mode="" class="service_icon"></image>
          <view>申请售后</view>
        </view>
        <view class="item" @click="lookServiceHistory">
          <image :src="serviceHistoryIcon" mode="" class="service_icon"></image>
          <view>售后历史</view>
        </view>
      </view>
    </view>
    <PolicyPopup v-model="showPopup" />
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { getWarrantyCardMsgApi } from '@/api';
import PolicyPopup from './policyPopup.vue';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const CardBg = `url(${OSS_URL}/warranty_bg.png)`;
const eplainIcon = `${OSS_URL}/warranty_explain.png`;
const learningCard = `${OSS_URL}/learning_card.png`;
const applyServiceIcon = `${OSS_URL}/apply_service_icon.png`;
const serviceHistoryIcon = `${OSS_URL}/service_history_icon.png`;
const showPopup = ref(false);
const warrantyList = ref([]); // 电子报修卡列
// 保修政策
function showPolicyFun() {
  showPopup.value = true;
}
function applyServiceFun() {
  uni.navigateTo({
    url: `/pages/mine/warranty/applyService?simList=${JSON.stringify(warrantyList.value)}`,
  });
}
function lookServiceHistory() {
  uni.navigateTo({
    url: '/pages/mine/warranty/serviceHistory',
  });
}
function getWarrantyList() {
  uni.showLoading({
    title: '加载中...',
  });
  getWarrantyCardMsgApi()
    .then(res => {
      warrantyList.value = res.data;
      uni.hideLoading();
    })
    .catch(err => {
      console.log(err);
      uni.hideLoading();
    });
}

onMounted(() => {
  getWarrantyList();
});
</script>

<style lang="scss" scoped>
.warranty_page {
  padding: 0 30rpx 0;
  box-sizing: border-box;
  color: #333;

  .all_warranty {
    margin-top: 40rpx;
    border-bottom: 2rpx solid #eeeeee;

    .warranty {
      width: 690rpx;
      height: 279rpx;
      padding: 30rpx;
      margin-bottom: 30rpx;
      box-sizing: border-box;
      background-image: v-bind(CardBg);
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .explain_icon {
        padding-left: 8rpx;
        width: 30rpx;
        height: 30rpx;
      }

      .learning_card {
        width: 242rpx;
        height: 156rpx;
      }

      .warranty_date {
        display: flex;
        justify-content: space-between;

        .title {
          display: flex;
          align-items: center;
          margin: 0 0 20rpx 0;
          font-size: 32rpx;
          font-weight: 500;
        }

        .date {
          font-size: 26rpx;
          color: #615dff;
        }

        .out_date {
          color: #a9aab5;
        }
      }

      .serial {
        margin-top: 24rpx;
        font-size: 28rpx;
        white-space: nowrap;
      }
    }
  }

  .service {
    padding: 30rpx;
    margin-top: 40rpx;

    &_title {
      margin-bottom: 40rpx;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 45rpx;
    }

    &_list {
      display: flex;

      .service_icon {
        width: 80rpx;
        height: 80rpx;
      }

      .item {
        margin-right: 40rpx;
        font-size: 28rpx;
        text-align: center;
      }
    }
  }
}
</style>
