<template>
  <div 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('您的包裹号') }}：{{ cons.expressNo }}</span>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-button type="primary" @click="$redirect('create')">{{ $t('继续添加') }}</el-button>
        </el-row>
        <el-row style="margin-top: 10px;">
          <template v-for="(item, index) in warehouseList">
            <el-button disabled :type="warehouseList.length === 1 ||cons.wareId === item.id ? 'primary' : 'default'"
                       @click="setWarehouseId(item)">
              {{ item.titleZh }}
            </el-button>
          </template>
        </el-row>
        <el-row style="margin-top: 10px;" type="flex" justify="center">
          <el-col>
            <span style="font-size: 14px;color: #666;">{{ $t('会员号') }}：{{ cons.customerNumber }}</span><el-link class="copy-children" :data-clipboard-text="consCustomerNumberCopy" type="primary" style="margin-left:10px;vertical-align: bottom;">复制</el-link>
          </el-col>
          <el-col>
            <span style="font-size: 14px;color: #666;">{{ $t('运输偏好') }} :</span>
            <el-radio-group style="margin-left: 5px" v-model="transport">
              <el-radio v-for="dict in getDictDatas(DICT_TYPE.ECW_PREFERENCE_TRANSPORT_TYPE)" :key="dict.label" :label="dict.label">{{ $l(dict, "label") }}</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row style="margin-top: 30px;"  type="flex" justify="center">
          <el-col>
            <span style="font-size: 14px;color: #666;">{{ $t('收件人') }}：{{warehouse.head}} {{ cons.customerNumber }}</span><el-link class="copy-children" :data-clipboard-text="consCustomerHeadCopy" type="primary" style="margin-left:10px;vertical-align: bottom;">复制</el-link>
          </el-col>
          <el-col>
            <span style="font-size: 14px;color: #666;">{{ $t('电话') }}：{{warehouse.tell}}</span><el-link class="copy-children" :data-clipboard-text="consCustomerPhoneCopy" type="primary" style="margin-left:10px;vertical-align: bottom;">复制</el-link>
          </el-col>
        </el-row>
        <el-row style="margin-top: 30px;">
          <span style="font-size: 14px;color: #666;">{{ $t('仓库地址') }}：{{ warehouse.addressZh }} {{ cons.customerNumber }}</span><el-link class="copy-children" :data-clipboard-text="consCustomerWarehouseCopy"  type="primary" style="margin-left:10px;vertical-align: bottom;">复制</el-link>
        </el-row>
      </div>
    </div>
    <div class="actions mt-50">
      <el-button class="copy-btn" :data-clipboard-text="consCopy">{{ $t('一键复制') }}</el-button>
      <el-button type="warning" @click="showNotice = true">{{ $t('入仓须知') }}</el-button>
      <el-button type="success" @click="showEmbargoNotice = true">{{ $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>
    <el-dialog :title="$t('禁运物品')" :visible.sync="showEmbargoNotice" width="700px">
      <need-know keyname="warehousing" ref="needKnow"/>
    </el-dialog>
  </div>
</template>
<script>
import NeedKnow from '@/components/NeedKnow'
import ClipboardJS from "clipboard";
import {getCons} from "@/api/ecw/cons";
import {getConsWarehouse} from "@/api/ecw/warehouse";
import { getDictDatas, DICT_TYPE } from '@/utils/dict'


let clipboard;

export default {
  components: {NeedKnow},
  data() {
    return {
      cons: null,
      showNotice: false,
      showEmbargoNotice: false,
      warehouseList: [],
      warehouse:{},
      transport:null
      // noticeUrl: 'http://v4.groupage.cn/Public/images/notice.png'
    }
  },
  computed: {
    consCopy(){
      if (this.transport){
        return `会员号：${this.cons.customerNumber}\n运输偏好:${this.transport}\n收件人：${this.warehouse.head} ${this.cons.customerNumber}\n电话：${this.warehouse.tell}\n仓库地址：${this.warehouse.addressZh} ${this.cons.customerNumber}`;
      }else{
        return `会员号：${this.cons.customerNumber}\n收件人：${this.warehouse.head} ${this.cons.customerNumber}\n电话：${this.warehouse.tell}\n仓库地址：${this.warehouse.addressZh} ${this.cons.customerNumber}`;
      }
    },
    consCustomerNumberCopy(){
      return `会员号：${this.cons.customerNumber}`;
    },
    consCustomerHeadCopy(){
      return `收件人：${this.warehouse.head} ${this.cons.customerNumber}`;
    },
    consCustomerPhoneCopy(){
      return `电话：${this.warehouse.tell}`;
    },
    consCustomerWarehouseCopy(){
      return `仓库地址：${this.warehouse.addressZh} ${this.cons.customerNumber}`;
    }
  },
  async created() {
    await this.loadData()
    await this.$nextTick()
    clipboard = new ClipboardJS('.copy-btn,.copy-children')
    clipboard.on('success', () => {
      this.$message.success(this.$t('复制成功'))
    })
    clipboard.on('error', () => {
      this.$message.error(this.$t('复制失败'))
    })
    getConsWarehouse().then((r) => {
      this.warehouseList = r.data;
      this.setWarehouseId()
    });
  },
  destroyed() {
    clipboard.destroy()
  },
  methods: {
    getDictDatas,
    setWarehouseId(item) {
      if (item){
        this.warehouse=item
      }else {
        this.warehouse=this.warehouseList.find(item=>item.id===this.cons.wareId)
        console.log(this.warehouse)
      }
    },
    async loadData() {
      await getCons(this.$route.query.consId)
        .then(res => {
          this.cons = res.data
          console.log(this.cons)
        })
    }
  }
}
</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>
