<template>
<div class="printBillView">
  <div class="filter-container">
    <el-select v-model="activeBreed">
      <el-option
        v-for="(billBreed,index) in breedList"
        :label="billInfo.billCode+'-'+billBreed.breedName"
        :value="index"
      ></el-option>
    </el-select>
  </div>
  <template v-for="(billBreed,index) in breedList" v-if="activeBreed==index">
    <el-form inline style="margin-left: 40px">
      <el-form-item label="施工单名称">
        <el-input disabled v-model="billInfo.billName"></el-input>
      </el-form-item>
      <el-form-item label="联版规格">
        <el-input disabled v-model="billBreed.breedSize"></el-input>
      </el-form-item>
      <el-form-item label="纸张">
        <el-input disabled v-model="billBreed.paperName"></el-input>
      </el-form-item>
      <el-form-item label="印量">
        <el-input disabled v-model="billBreed.printCount"></el-input>
      </el-form-item>
    </el-form>
    <transition-group  :key="billBreed.id" name="fade" tag="div" class="container" :style="{width:`${billBreed.breedSize.split('*')[0]}px`,height:`${billBreed.breedSize.split('*')[1]}px`}">
      <div
        class="item"
        v-for="(breedPart,index) in billBreed.breedPartList"
        :key="index"
        :style="getRotaion(breedPart)">
        <div
          class="item"
          :style="{width:`${breedPart.orderPartSizeWidth}px`,height: `${breedPart.orderPartSizeHeight}px`,border:'1px solid red'}">
          <div class="orderInfo" @click="openOrderDetail(breedPart.idOrder)">
          <div>{{breedPart.orderCode}}</div>
          <div>{{breedPart.orderName}}</div>
          <div>{{breedPart.clientName}}</div>
          <div>{{breedPart.orderPartSize}}({{breedPart.orderQty}})</div>
          <div>{{breedPart.orderPartProcessStr}}</div>
          </div>
        </div>
      </div>
    </transition-group>
  </template>

  <el-dialog title="订单详情" :close-on-click-modal="false" class="orderDetailDialog" :visible.sync="detailVisible" top="10px" width="1200px">
    <order-detail ref="orderDetail"></order-detail>
  </el-dialog>
</div>
</template>

<script>
import { printBillViewPlateHint } from '@/api/printbill/printbill'
import OrderDetail from "@/components/orderDetail/orderDetail";

export default {
  name: 'PrintBillView',
  components: {OrderDetail},
  data() {
    return {
      idBill: null,
      activeBreed: 0,
      detailVisible: false,
      billInfo: null, // 施工单信息
      breedList: [] // 版信息列表
    }
  },
  mounted() {
    this.idBill = this.$route.query.idPrintBill
    this.getPrintInfo()
  },
  methods: {
    getPrintInfo() {
      const _that = this
      const data = {
        idBill: _that.idBill
      }
      printBillViewPlateHint(data).then(res => {
        // console.log(res)
        _that.billInfo = res.data
        _that.thumbRoot = res.data.thumbRoot
        _that.breedList = res.data.billBreedList
      })
    },
    getRotaion(breedPart) {
      const _that = this
      var pdfname = encodeURIComponent(breedPart.pDFFileObverse.substring(0,breedPart.pDFFileObverse.length-4))
      // console.log('pdfname',pdfname);
      var backgroundUrl = _that.thumbRoot + breedPart.orderCode.substring(2, 6) + '/' + breedPart.orderCode + '/' + pdfname + '_' + breedPart.pDFFileObversePageIndex+'.png'
      // console.log('backgroundUrl',backgroundUrl);
      switch (breedPart.rotationAngle) {
        case 0 :
          return { transform: 'rotate(0deg)', left: `${breedPart.locationX}px`, top: `${breedPart.locationY}px`, width: `${breedPart.partWidth}px`, height: `${breedPart.partHeight}px`, background: `url('${backgroundUrl}') no-repeat`, backgroundSize: 'cover' }
        case 1 :
          return { transform: 'rotate(270deg)', left: `${breedPart.locationX}px`, top: `${breedPart.locationY+ breedPart.partWidth}px`, width: `${breedPart.partWidth}px`, height: `${breedPart.partHeight}px`, background: `url('${backgroundUrl}') no-repeat` , backgroundSize: 'cover' }
        case 2 :
          return { transform: 'rotate(180deg)', left: `${breedPart.locationX + breedPart.partWidth}px`, top: `${breedPart.locationY + breedPart.partHeight}px`, width: `${breedPart.partWidth}px`, height: `${breedPart.partHeight}px`, background: `url('${backgroundUrl}') no-repeat` , backgroundSize: 'cover' }
        case 3 :
          return { transform: 'rotate(90deg)', left: `${breedPart.locationX + breedPart.partHeight}px`, top: `${breedPart.locationY}px`, width: `${breedPart.partWidth}px`, height: `${breedPart.partHeight}px`, background: `url('${backgroundUrl}') no-repeat` , backgroundSize: 'cover' }
      }
    },
    // 订单详情
    openOrderDetail(id) {
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = id
        _that.$refs.orderDetail.getInfo()
      })
    },
  }
}
</script>

<style scoped>
.printBillView{
  margin-top: 25px;
}
.filter-container{
  margin-left: 40px;
}
.container{
  position: relative;
  display:flex;
  flex-direction: column;
  padding: 0;
  margin: 0 40px;
  border: 1px solid #99a9bf;
/*//transform:scale(0.35,0.35);*/
/*//-ms-transform:scale(0.35,0.35); 	!* IE 9 *!*/
/*//-moz-transform:scale(0.35,0.35); 	!* Firefox *!*/
/*//-webkit-transform:scale(0.35,0.35); !* Safari 和 Chrome *!*/
/*//-o-transform:scale(0.35,0.35); 	!* Opera *!*/
  transform-origin: 0 0;
}
.item {
  display: -webkit-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  position: absolute;
  transition-timing-function:ease ;
  background-size: cover;
  border: 1px solid #42b983;
  transform-origin:0 0;
}
.orderInfo{
  width: 100%;
  background-color: white;
  text-align: center;
  opacity:0.95;
}
.orderInfo:hover{
   cursor:pointer
 }
</style>
