<template>
    <div v-if="order">
        <el-row class="wrapper">
          <el-col :span="10" class="icon">
                <img src="../../../assets/images/u5.png" />
          </el-col>
          <el-col :span="14">
                <div class="title">新增订单生成成功</div>
                <div class="line">订单号：{{order.orderNo}}</div>
                <div class="line">运输方式：<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="order.transportId" /></div>
                <div class="line">路线：{{order.logisticsInfoDto.startTitleZh}} >> {{order.logisticsInfoDto.destTitleZh}}</div>
                <div class="line">商品列表：
                    <span v-for="(item, index) in order.orderItemVOList" :key="index">
                        {{item.titleZh}}
                        <template v-if="index < order.orderItemVOList.length - 1">、</template>
                    </span>
                </div>
                <div class="line">仓库地址：{{order.logisticsInfoDto.startAddressZh}}</div>
                <div class="line">仓库电话： {{order.logisticsInfoDto.startTell}}</div>
                <div class="line"></div>
                <div class="line">您的订单已提交，谢谢您选择捷道物流！</div>
          </el-col>
        </el-row>
        <div class="actions">
            <el-button type="primary" @click="$router.replace('detail?orderId=' + order.orderId)">查看订单</el-button>
            <el-button type="warning" @click="showNotice = true">入仓须知</el-button>
            <el-button type="info" @click="$router.replace('edit')">再来一单</el-button>
        </div>

        <el-dialog title="查看须知" :visible.sync="showNotice" width="700px">
            <img :src="noticeUrl" id="noticeImg" />
            <div style="text-align:center">
                <el-button type="primary" @click="download">下载</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {getOrder} from '@/api/ecw/order'
import FileSaver from 'file-saver'
import {dataURLtoBlob} from '@/utils/index'
export default {
    data(){
        return {
            order: null,
            showNotice: false,
            noticeUrl: 'http://v4.groupage.cn/Public/images/notice.png'
        }
    },
    created(){
        this.loadData()
    },
    methods:{
        loadData(){
            getOrder(this.$route.query.orderId)
                .then(res => {
                    this.order = res.data
                })
        },
        download(){
            let el = document.getElementById('noticeImg')
            this.downloadIamge(this.noticeUrl, 'ce')
        },
        downloadIamge(imgsrc, name) {
            //下载图片地址和图片名
            var image = new Image()
            // 解决跨域 Canvas 污染问题
            image.setAttribute('crossOrigin', 'anonymous')
            image.onload = function () {
                var canvas = document.createElement('canvas')
                canvas.width = image.width
                canvas.height = image.height
                var context = canvas.getContext('2d')
                context.drawImage(image, 0, 0, image.width, image.height)
                var base64 = canvas.toDataURL('image/png') //得到图片的base64编码数据
                document.getElementById('noticeImg').setAttribute('src', base64)
                window.base64 = base64
                let blob = dataURLtoBlob(base64)
                FileSaver.saveAs(blob, '入仓须知.png');
            }
            image.src = imgsrc

        }
    }
}
</script>
<style scoped lang="scss">
.wrapper{
    padding:100px;
    display: flex;
    justify-content: center;
    .icon{
        display: flex;
        justify-content: flex-end;
        margin-right: 20px;
        align-items: center;
        img{
            width: 200px;
            height: 200px;
        }
    }
    .title{
        font-size: 30px;
        margin-bottom: 20px;
    }
    .line{
        font-size: 14px;
        margin-bottom: 10px;
    }
}
.actions{
    display: flex;
    justify-content: center;
}
</style>