<template>
	<view class="container">
		<scanlistener
		v-if="showScanlistener"
		suffixIcon="scan"
		v-model="keyword"
		:placeholder="$t('请扫描订单号、标签')"
		@iconClick="scanCode"
		@confirm="searchCode"
		@submit="keyword=$event;searchCode()"
		></scanlistener>

		<view class="detail" v-if="detail">
			<view class="line">
				<view>{{$t('订单号')}}：{{detail.orderNo}}</view>
        <view class="copy" @click="copyToClip(detail.orderNo)">复制</view>
			</view>
      <view class="line">
        <view>{{$t('唛头')}}：{{detail.marks}}</view>
        <view class="copy" @click="copyToClip(detail.marks)">复制</view>
      </view>
      <template v-if="detail.cardInfo && (detail.cardInfo.cardName || detail.cardInfo.cardNo)">
        <view class="title">
          {{$t('发货人信息')}}：
        </view>
        <view class="line" v-if="detail.cardInfo.cardName">
          <view>{{$t('姓名')}}：{{detail.cardInfo.cardName}}</view>
          <view class="copy" @click="copyToClip(detail.cardInfo.cardName)">复制</view>
        </view>
        <view class="line" v-if="detail.cardInfo.cardNo">
          <view>{{$t('身份证号码')}}：{{detail.cardInfo.cardNo}}</view>
          <view class="copy" @click="copyToClip(detail.cardInfo.cardNo)">复制</view>
        </view>
      </template>
      <view v-else class="title">
        {{$t('暂无发货人身份证信息')}}
      </view>
      <view class="line" v-if="detail.cardInfo">
        <view>{{$t('发货电话')}}：{{detail.cardInfo.phone}}</view>
        <view class="copy" @click="copyToClip(detail.cardInfo.phone)">复制</view>
      </view>
      <template v-if="detail.consigneeInfo && (detail.consigneeInfo.cardName || detail.consigneeInfo.cardNo)">
        <view class="title">
          {{$t('收货人信息')}}：
        </view>
        <view class="line" v-if="detail.consigneeInfo.cardName">
          <view>{{$t('姓名')}}：{{detail.consigneeInfo.cardName}}</view>
          <view class="copy" @click="copyToClip(detail.consigneeInfo.cardName)">复制</view>
        </view>
        <view class="line" v-if="detail.consigneeInfo.cardNo">
          <view>{{$t('身份证号码')}}：{{detail.consigneeInfo.cardNo}}</view>
          <view class="copy" @click="copyToClip(detail.consigneeInfo.cardNo)">复制</view>
        </view>
      </template>
      <view v-else class="title">
        {{$t('暂无收货人身份证信息')}}
      </view>
      <view class="line" v-if="detail.consigneeInfo">
        <view>{{$t('收货电话')}}：{{detail.consigneeInfo.phone}}</view>
        <view class="copy" @click="copyToClip(detail.consigneeInfo.phone)">复制</view>
      </view>
		</view>
	</view>
</template>

<script>
	import {certificateSearch} from '../../api/api.js'
	export default {
		data() {
			return {
				keyword: '',
				detail: null
			}
		},
		methods: {
      /**
       * 复制单行内容到粘贴板
       * content : 需要复制的内容
       * message : 复制完后的提示，不传则默认提示"复制成功"
       */
      copyToClip(content, message) {
        uni.setClipboardData({
          data: content,
          success: () => {
            uni.showToast({title: this.$t('复制成功')})
          }
        });
      },
			scanCode(){
				uni.scanCode({
					success:(res) => {
						this.keyword = res.result
						this.searchCode()
					}
				})
			},
			searchCode(){
				certificateSearch(this.keyword).then(res => {
					this.detail = res
				}).catch(res => {
					uni.showModal({
						content: res.msg || this.$t('查询失败'),
						showCancel: false
					})
				})
			}
		}
	}
</script>

<style lang="scss">
.container{
	padding: 50rpx;
	.detail{
		margin-top: 30rpx;
	}
	.title{
		color: rgba(0,0,0,.5);
    font-weight: bold;
    margin-top: 30rpx;
    margin-bottom: 20rpx;
    font-size: 30rpx;
	}
	.line{
		margin: 10rpx 0;
    display: flex;
    justify-content: space-between;
	}
  .copy{
    padding: 0 30rpx;
    color: #4C94ED;
    width: 128rpx;
  }
}
</style>
