<template>
  <div>
    <div style="display: flex;justify-content: space-around;margin-top: 30px;">
      <div class="el-icon-check" style="font-size: 100px;color: #67C23A;" />
      <div v-if="flag">
        <el-row>
          <span style="font-weight: bold;font-size: 18px;">{{ $t('deliverysuccess.success') }}</span>
        </el-row>
        <el-row style="margin-top: 10px;">
          <span style="font-size: 16px; font-weight: bold; color: #666;">{{ $t('deliverysuccess.orderNo') }}：{{ order.orderNo }}</span>
        </el-row>
        <el-row style="margin-top: 10px;">
          <span style="font-size: 14px;color: #666;">{{ $t('delivery.marks') }}：{{ order.marks }}</span>
        </el-row>
        <el-row v-if="order.channelId" style="margin-top: 10px;">
          <span style="font-size: 14px;color: #666;">{{ $t('delivery.channel') }}：{{ order.channelName }}</span>
        </el-row>
        <el-row style="margin-top: 10px;">
          <span style="font-size: 14px;color: #666;">{{ $t('delivery.router') }}：{{ $l(order.logisticsInfoDto, 'startTitle') }} >> {{ $l(order.logisticsInfoDto, 'destTitle') }}</span>
        </el-row>
        <el-row style="margin-top: 10px;">
          <span style="font-size: 14px;color: #666;">{{ $t('delivery.customsType') }}：<dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="order.customsType" /></span>
        </el-row>
        <el-row style="margin-top: 10px;">
          <span style="font-size: 14px;color: #666;">{{ $t('delivery.isCargoControl') }}：<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="order.isCargoControl" /></span>
        </el-row>

        <el-row style="margin-top: 10px;">
          <span style="font-size: 14px;color: #666;">
            {{ $t('deliverysuccess.products') }}：
            <span v-for="(item, index) in order.orderItemVOList" :key="index">
              {{ $l(item, 'prodTitle') }}
              <template v-if="index < order.orderItemVOList.length - 1">{{ $t('、') }}</template>
            </span>
          </span>
        </el-row>
        <el-row style="margin-top: 10px;">
          <span style="font-size: 14px;color: #666;">{{ $t('deliverysuccess.productCount') }}：{{ order.costVO.totalNum }}</span>
        </el-row>

        <el-row style="margin-top: 30px;">
          <span style="font-size: 14px;color: #666;">{{ $t('deliverysuccess.startAddress') }}：{{ order.logisticsInfoDto.startAddressZh }}</span>
        </el-row>
        <el-row style="margin-top: 10px;">
          <span style="font-size: 14px;color: #666;">{{ $t('deliverysuccess.startTell') }}：{{ order.logisticsInfoDto.startTell }}</span>
        </el-row>
        <el-row style="margin-top: 10px;">
          <span style="font-size: 14px;color: #666;">{{ $t('deliverysuccess.notice') }}</span>
        </el-row>
        <el-row style="margin-top: 20px;">
          <span style="text-decoration: underline;font-size: 14px;color: #999;">{{ $t('deliverysuccess.text') }}</span>
        </el-row>
      </div>
    </div>
    <div style="text-align: center;margin-top: 30px;">
      <el-row>
        <el-col :span="6">
          <jd-button style="width: 150px;font-size: 14px;height: 35px;line-height: 33px;" :name="$t('deliverysuccess.delivery')" @click.native="transVisble=true" />
        </el-col>
        <el-col :span="4">
          <jd-button style="width: 150px;font-size: 14px;height: 35px;line-height: 33px;" :name="$t('deliverysuccess.profile')" @click.native="$router.push('/jiedao/jd-profile')" />
        </el-col>
        <el-col :span="4">
          <jd-button style="width: 150px;font-size: 14px;height: 35px;line-height: 33px;" :name="$t('deliverysuccess.detail')" @click.native="$router.push('/jiedao/jd-orderdetail?orderId='+order.orderId)" />
        </el-col>
        <el-col :span="4">
          <jd-button style="width: 150px;font-size: 14px;height: 35px;line-height: 33px;" :name="$t('deliverysuccess.push')" @click.native="show=true" />
        </el-col>
        <el-col :span="6">
          <jd-button style="width: 150px;font-size: 14px;height: 35px;line-height: 33px;" :name="$t('deliverysuccess.copy')" class="copy-btn" :data-clipboard-text="orderInfoForCopy" />
        </el-col>
      </el-row>
    </div>
    <el-dialog :title="$t('deliverysuccess.push')" :visible.sync="show" width="80%" append-to-body :close-on-click-modal="false">
      <div v-html="detail.contentZh">
        {{ detail.contentZh }}
      </div>
      <div style="text-align:center">
        <el-button type="primary" @click="downloadPdf()">{{ $t('下载') }}</el-button>
      </div>
    </el-dialog>
    <!-- 选择运输方式 -->
    <el-dialog :title="$t('sidebar.transport')" :visible.sync="transVisble" width="564px" append-to-body :close-on-click-modal="false">
      <img style="width: 100%;height: 100%;position: absolute;left: 0;top:0;z-index:0" src="@/assets/profile/bg.png">
      <img style="width: 205px;height: 70px;position: absolute;right: 72px;top:0;z-index:0" src="@/assets/profile/bg2.png">
      <div style="display: flex; flex-wrap: wrap;margin:0 auto;width:100%">
        <template v-for="item in getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE)">
          <div class="transtype" @click="delivery(item.value)">
            <span>{{ $l(item, 'label') }}</span>
            <img v-if="item.value==1" src="@/assets/profile/type1.png">
            <img v-else-if="item.value==2" src="@/assets/profile/type2.png">
            <img v-else-if="item.value==3" src="@/assets/profile/type3.png">
            <img v-else src="@/assets/profile/type4.png">
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getOrder } from '@/api/order'
import { getNeedKnow, download } from '@/api/data'
import JdButton from '@/components/JdButton'
import DictTag from '@/components/DictTag/index.vue'
import ClipboardJS from 'clipboard'
import { getDictDatas } from '@/utils/dict'
let clipboard
export default {
  components: {
    DictTag,
    JdButton
  },
  data() {
    return {
      order: {},
      show: false,
      flag: false,
      detail: {},
      transVisble: false
    }
  },
  computed: {
    orderInfoForCopy() {
      return `订单号：${this.order.orderNo}\n唛头：${this.order.marks}\n提货点：${this.order.logisticsInfoDto?.destTitleZh}\n送货地址：${this.order.logisticsInfoDto?.startAddressZh}\n仓库电话：${this.order.logisticsInfoDto?.startTell}`
    }
  },
  created() {
    if (this.$route.query.orderId) {
      getOrder(this.$route.query.orderId).then(async(response) => {
        this.order = response.data
        this.flag = true

        await this.$nextTick()
        clipboard = new ClipboardJS('.copy-btn')
        clipboard.on('success', () => {
          this.$message.success(this.$t('复制成功'))
        })
        clipboard.on('error', () => {
          this.$message.error(this.$t('复制失败'))
        })
      })
      getNeedKnow({ key: 'warehousing' }).then((res) => {
        this.detail = res.data
      })
    }
  },
  destroyed() {
    clippboard && clippboard.destroy()
  },
  methods: {
    downloadPdf() {
      download({ id: this.detail.id }).then(res => {
        this.$download.pdf(res, '入仓须知.pdf')
      })
    },
    delivery(tranfId) {
      this.transVisble = false
      this.$router.push('/jiedao/jd-delivery?tranfId=' + tranfId)
    }
  }
}
</script>

<style scoped>
.transtype{
	color: #333;
	font-weight: 600;
	font-family: 'PingFang-SC-Bold';
	border-radius: 4px;
	width: 121px;
	height: 165px;
	padding: 16px;
	font-size: 16px;
  position: relative;
	background-size: 100% 100%;
  margin-right: 10px;
  z-index:9;
}
.transtype img{
	width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top:0;
  z-index:-1
}
</style>
