<template>
  <zj-page-layout>
    <view class="top-container">
      <view class="input">
        <u-input placeholder="请输入条码" v-model="code">
          <template slot="suffix">
            <u-icon @click="scanCode" name="scan" size="30"></u-icon>
          </template>
        </u-input>
      </view>
      <u-button type="primary" @tap="getDetail" text="查询"></u-button>
    </view>

    <view class="all-container" v-for="(item,index) in dataList" :key="index">
      <view class="info-container card">
        <view class="common-title">延保信息</view>
        <view>
          <view class="row">
            <view class="label">订单单号</view>
            <view class="value">{{item.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">{{item.brandName}}</view>
          </view>
          <view class="row">
            <view class="label">产品大类</view>
            <view class="value">{{item.mainName}}</view>
          </view>
          <view class="row">
            <view class="label">服务内容</view>
            <view class="value">{{item.increContent}}</view>
          </view>
          <view class="row">
            <view class="label">使用限值</view>
            <view class="value">{{item.limitNum + '年'}}</view>
          </view>
          <view class="row">
            <view class="label">下单时间</view>
            <view class="value">{{item.createTime}}</view>
          </view>
          <view class="row">
            <view class="label">销售网点</view>
            <view class="value">{{item.websitName}}</view>
          </view>
        </view>
      </view>

      <view class="info-container card">
        <view class="common-title">产品信息</view>
        <view>
          <view class="row">
            <view class="label">内机条码</view>
            <view class="value">{{item.insideCode}}</view>
          </view>
          <view class="row">
            <view class="label">原保到期</view>
            <view class="value">{{item.insureTime.substring(0,10)}}</view>
          </view>
          <view class="row">
            <view class="label">服务期限</view>
            <view class="value">{{item.insureTime.substring(0,10) + '至' + item.serviceEndTime.substring(0,10)}}</view>
          </view>
        </view>
        <view class="imgs">
          <view class="it">
            <image :src="item.insideCodeImg" mode="aspectFill"></image>
            <view class="text">内机条码</view>
          </view>
          <view class="it">
            <image :src="item.machineImg" mode="aspectFill"></image>
            <view class="text">机器铭牌（含出厂日期）</view>
          </view>
          <view class="it">
            <image :src="item.buyCertImg" mode="aspectFill"></image>
            <view class="text">购机凭证</view>
          </view>
        </view>
      </view>

      <view class="user-container card">
        <view class="common-title">客户信息</view>
        <view class="user">{{item.userName}} {{item.userMobile}}</view>
        <view class="address">{{item.userAddress}}</view>
      </view>
    </view>

  </zj-page-layout>
</template>

<script>
  import { wxScanCode } from '@/common/utils/util.js';

  export default {
    data() {
      return {
		dataList: [],
		code: ''
      }
    },

    onLoad() {
      // this.getDetail();
    },

	computed: {
		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() {
        if(!this.code){
          return this.$toast('请先输入或扫描条码！')
        }
        this.$api.post('/increConfig/listIncreCode', {
          pageNum: 1,
          pageSize: 10,
          code: this.code,
          payStatus: 'PAID',
        }).then(res => {
          if(res.data.records.length == 0){
            this.$toast('暂未查询到该条码的延保信息')
          }
          this.dataList = res.data.records
        })
      },

      // 扫码
      async scanCode() {
        var codeVal = await wxScanCode();
        this.code = codeVal;
        this.getDetail();
      },

      // 下拉刷新
      refresherrefresh() {

      },

      // 触底加载
      scrolltolower() {

      }
    },
  }
</script>

<style lang="scss" scoped>
.top-container {
  padding: 30rpx 30rpx 0;
  ::v-deep .u-input {
    background: #ffffff;
	height: 80rpx;
  }
  ::v-deep .u-button {
    margin-top: 20rpx;
  }
}
.card {
  @include zj-card;
  padding: 30rpx;
  margin-top: 30rpx;
}
.common-title {
  font-weight: 500;
}
.all-container {
  padding: 0 30rpx 30rpx;
}
.info-container {
  .row {
    display: flex;
    margin-top: 20rpx;
    .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;
    margin-top: 20rpx;
    .it {
      width: 180rpx;
      margin-right: 30rpx;
      image {
        width: 180rpx;
        height: 180rpx;
      }
      .text {
        font-size: 24rpx;
        text-align: center;
      }
    }
  }
}
.user-container {
  .user {
    font-size: 28rpx;
    margin-top: 20rpx;
  }
  .address {
    font-size: 28rpx;
    margin-top: 20rpx;
  }
}
</style>
