<template>
    <div v-if="order" style="width: 1120px">
      <div style="display: flex;justify-content: space-around;margin-top: 30px;">
        <div class="el-icon-check" style="font-size: 100px;color: #67C23A;" />
        <div>
          <el-row>
            <span style="font-weight: bold;font-size: 18px;">{{ $t('新建订单成功') }}</span>
          </el-row>
          <el-row style="margin-top: 10px;">
            <span style="font-size: 16px; font-weight: bold; color: #666;">{{ $t('您的订舱号') }}：{{ order.orderNo }}</span>
          </el-row>
          <el-row style="margin-top: 10px;">
            <span style="font-size: 14px;color: #666;">{{ $t('唛头') }}：{{ order.marks }}</span>
          </el-row>
          <el-row v-if="order.channelId" style="margin-top: 10px;">
            <span style="font-size: 14px;color: #666;">{{ $t('出货渠道') }}：{{ order.channelName }}</span>
          </el-row>
          <el-row style="margin-top: 10px;">
            <span style="font-size: 14px;color: #666;">{{ $t('路线') }}：{{ $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('单证报关') }}：<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('是否控货') }}：<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('商品列表') }}：
            <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('总件数') }}：{{ order.costVO.totalNum }}</span>
          </el-row>

          <el-row style="margin-top: 30px;">
            <span style="font-size: 14px;color: #666;">{{ $t('仓库地址') }}：{{ order.logisticsInfoDto.startAddressZh }}</span>
          </el-row>
          <el-row style="margin-top: 10px;">
            <span style="font-size: 14px;color: #666;">{{ $t('仓库电话') }}：{{ order.logisticsInfoDto.startTell }}</span>
          </el-row>
          <el-row style="margin-top: 10px;">
            <span style="font-size: 14px;color: #666;">{{ $t('为保证入仓数据准确性，入仓请带上一份装箱单（品名，件数，毛重，尺寸方数，是否有牌）') }}</span>
          </el-row>
          <el-row style="margin-top: 20px;">
            <span style="text-decoration: underline;font-size: 14px;color: #999;">{{ $t('您的订单已提交，谢谢您选择捷道物流！') }}</span>
          </el-row>
        </div>
      </div>
        <div class="actions mt-50">
            <el-button type="primary" @click="$redirect('detail?orderId=' + order.orderId)">{{$t('查看订单')}}</el-button>
            <el-button type="warning" @click="showNotice = true">{{$t('入仓须知')}}</el-button>
            <el-button type="info" @click="$redirect('create')">{{$t('再来一单')}}</el-button>
            <el-button class="copy-btn" :data-clipboard-text="orderInfoForCopy">{{$t('复制订单信息')}}</el-button>
        </div>

        <el-dialog :title="$t('查看须知')" :visible.sync="showNotice" width="700px">
            <!-- <img :src="noticeUrl" id="noticeImg" /> -->
            <need-know keyname="warehousing" ref="needKnow" />
            <div style="text-align:center">
                <el-button type="primary" @click="$refs.needKnow.downloadPdf()">{{$t('下载')}}</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {getOrder} from '@/api/ecw/order'
import FileSaver from 'file-saver'
import {dataURLtoBlob} from '@/utils/index'
import NeedKnow from '@/components/NeedKnow'
import ClipboardJS from "clipboard";

let clipboard;

export default {
    components: {NeedKnow},
    data(){
        return {
            order: null,
            showNotice: false,
            // noticeUrl: 'http://v4.groupage.cn/Public/images/notice.png'
        }
    },
  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}`
      }
  },
    async created(){
      await this.loadData()
      await this.$nextTick()
      clipboard = new ClipboardJS('.copy-btn')
      clipboard.on('success', () => {
        this.$message.success(this.$t('复制成功'))
      })
      clipboard.on('error', () => {
        this.$message.error(this.$t('复制失败'))
      })
    },
    destroyed() {
      clipboard.destroy()
    },
    methods:{
      async loadData(){
          await getOrder(this.$route.query.orderId)
              .then(res => {
                  this.order = res.data
              })
      }
    }
}
</script>
<style scoped lang="scss">
.wrapper{
    padding:100px;
    display: flex;
    justify-content: center;
    .icon{
        display: flex;
        justify-content: flex-end;
        margin-right: 50px;
        align-items: center;
        img{
            width: 100px;
            height: 100px;
        }
    }
    .title{
        font-size: 30px;
        margin-bottom: 20px;
    }

}
.line{
  font-size: 14px;
  margin-bottom: 10px;
}
.actions{
    display: flex;
    justify-content: center;
}
.bold{
  font-weight: bold;
}
.font-lg{
  font-size: 1.5rem !important;
}
</style>