<template>
  <view class="all-container">
    <view class="bg"></view>
    <zj-page-layout>
      <view class="status-container">
        <view class="status">{{ statusFilter(detail.payStatus) }}</view>
      </view>
      <view class="content-container">
        <!-- 服务信息 -->
        <view class="info-container card mt30">
          <view class="common-title">延保信息</view>
          <view>
            <view class="row">
              <view class="label">支付单号</view>
              <view class="value">{{ detail.id }}</view>
              <view class="ctrl" @tap="$copy(detail.id)">复制</view>
            </view>
            <view class="row">
              <view class="label">服务类型</view>
              <view class="value">延保</view>
            </view>
            <view class="row">
              <view class="label">产品品牌</view>
              <view class="value">{{ detail.brandName || '' }}</view>
            </view>
            <view class="row">
              <view class="label">产品大类</view>
              <view class="value">{{ detail.mainName || '' }}</view>
            </view>
            <view class="row">
              <view class="label">服务内容</view>
              <view class="value">{{ detail.increContent || '' }}</view>
            </view>
            <view class="row">
              <view class="label">使用限值</view>
              <view class="value">{{ detail.limitNum + '年' || '' }}</view>
            </view>
            <view class="row">
              <view class="label">服务金额</view>
              <view class="value">{{ detail.amount || '' }}</view>
            </view>
            <view class="row">
              <view class="label">下单时间</view>
              <view class="value">{{ detail.createTime || '' }}</view>
            </view>
            <view class="row">
              <view class="label">销售网点</view>
              <view class="value">{{ detail.websitName || '' }}</view>
            </view>
          </view>
        </view>
        <!-- 产品信息 -->
        <view class="info-container card mt30">
          <view class="common-title">产品信息</view>
          <view>
            <view class="row">
              <view class="label">内机条码</view>
              <view class="value">{{ detail.insideCode || '' }}</view>
            </view>
            <view class="row">
              <view class="label">发票价格</view>
              <view class="value">{{ detail.invoiceAmount || '' }}</view>
            </view>
            <view class="row">
              <view class="label">原保到期</view>
              <view class="value">{{ detail.insureTime.substring(0, 10) || '' }}</view>
            </view>
            <view class="row" v-if="detail.payStatus == 'PAID' || detail.payStatus == 'EXPIRE'">
              <view class="label">服务期限</view>
              <view class="value">{{
                detail.insureTime.substring(0, 10) + '至' + detail.serviceEndTime.substring(0, 10)
              }}</view>
            </view>
            <view class="imgs">
              <!-- 内机条码 -->
              <view class="it">
                <block>
                  <image mode="aspectFill" :src="detail.insideCodeImg" @tap="prevImg(detail.insideCodeImg)"> </image>
                </block>
                <view class="name">内机条码</view>
              </view>
              <!-- 机器铭牌 -->
              <view class="it">
                <block>
                  <image mode="aspectFill" :src="detail.machineImg" @tap="prevImg(detail.machineImg)"> </image>
                </block>
                <view class="name">机器铭牌<br />(含出厂日期)</view>
              </view>
              <!-- 购机凭证 -->
              <view class="it">
                <block>
                  <image mode="aspectFill" :src="detail.buyCertImg" @tap="prevImg(detail.buyCertImg)"> </image>
                </block>
                <view class="name">购机凭证</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 客户信息 -->
        <view class="info-container card mt30">
          <view class="common-title">客户信息</view>
          <view>
            <view class="row">
              <view class="value" style="margin-right: 20rpx">{{ detail.userName }}</view>
              <view class="value">{{ detail.userMobile }}</view>
            </view>
            <view class="row">
              <view class="value">{{ detail.userAddress }}</view>
            </view>
          </view>
        </view>
      </view>
    </zj-page-layout>
  </view>
</template>

<script>
import zjDialogPicker from '@/components/zj-dialog/zj-dialog-picker.vue'

export default {
  components: {
    zjDialogPicker
  },
  data() {
    return {
      imageUrl: this.$imageUrl,
      detail: null,
      loadStatus: 1,
      refresherTriggered: false
    }
  },

  async onLoad({ id }) {
    this.getDetail(id)
  },
  computed: {
    statusFilter() {
      return function (val) {
        const statusMap = {
          WAIT: '待支付',
          PAID: '已支付',
          EXPIRE: '已过期',
          CANCEL: '已取消',
          REFUND: '已退款'
        }
        return statusMap[val]
      }
    },
    deadline() {
      return function (time, num) {
        let date = new Date(time)
        date.setFullYear(date.getFullYear() + num)
        let y = date.getFullYear(),
          m = date.getMonth() + 1,
          d = date.getDate()
        return `${y}-${m > 9 ? m : '0' + m}-${d > 9 ? d : '0' + d}`
      }
    }
  },
  methods: {
    // 获取详情
    getDetail(id) {
      this.$api
        .post('/increConfig/detailIncre', {
          id
        })
        .then(res => {
          this.detail = res.data
        })
    },

    copyData(val) {
      this.$copy(val)
    },

    // 预览图片
    prevImg(url) {
      uni.previewImage({
        current: this.imageUrl + url,
        urls: [this.imageUrl + url]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.all-container {
  position: relative;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 300rpx;
  background: linear-gradient(179.48deg, rgba(200, 224, 251, 1) 0.45%, rgba(247, 247, 247, 1) 98.96%);
}

.status-container {
  padding: 30rpx;
  position: relative;
  .status {
    font-size: 36rpx;
    font-weight: 500;
    position: absolute;
    left: 50rpx;
    top: 30rpx;
    z-index: 999;
  }
}

.card {
  @include zj-card;
}

.common-title {
  font-size: 36rpx;
  font-weight: 600;
  padding-bottom: 20rpx;
}

.content-container {
  padding: 0 30rpx 30rpx;
}

.info-container {
  padding: 30rpx;

  .row {
    display: flex;
    margin-top: 20rpx;

    &:first-child {
      margin-top: 0;
    }

    .label {
      font-size: 28rpx;
      color: $sec-font;
      margin-right: 20rpx;
      flex-shrink: 0;
    }

    .value {
      font-size: 28rpx;
    }

    .ctrl {
      font-size: 28rpx;
      color: $theme-color;
      margin-left: 20rpx;
    }
  }
}
.imgs {
  display: flex;
  flex-wrap: wrap;

  .it {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-top: 30rpx;
    margin-right: 30rpx;

    &:nth-child(3n) {
      margin-right: 0;
    }

    image {
      width: 190rpx;
      height: 190rpx;
      background: #f4f4f7;
      border-radius: 20rpx;
      overflow: hidden;
    }

    .name {
      margin-top: 24rpx;
      color: $sec-font;

      text {
        color: $minor-color;
      }
    }
  }
}
</style>
