<template>
  <div>
    <el-dialog v-loading="fullscreenLoading" title="施工单详情" :fullscreen="true"  :modal-append-to-body='false' :visible.sync="printVisible" width="1000px">
      <el-row :gutter="20">
        <el-col :span="24">
          <div
            style="margin-bottom: 15px;font-size: 16px;color: #3c3c3c;border-bottom: 1px solid #ddd;padding-bottom: 5px;"
            class="clearfix"><span>单据详情</span>
            <el-button v-if="printBillDetail.billState>=1" size="mini" type="warning" @click="printData()">打印
            </el-button>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-print">
            <span class="print-tit">单据号:</span>
            <span class="print-con">{{ printBillDetail.billCode }}</span>
          </div>

        </el-col>
        <el-col :span="6">
          <div class="item-print">
            <span class="print-tit">单据名称:</span>
            <span class="print-con">{{ printBillDetail.billName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-print">
            <span class="print-tit">产品类型:</span>
            <span class="print-con">{{ printBillDetail.productName }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-print">
            <span class="print-tit">客户名称:</span>
            <el-tooltip class="item" effect="dark" :content="printBillDetail.clientName" placement="top-start">
              <span style="width: 120px;display: inline-block;vertical-align:middle" class="ellipsis"> {{ printBillDetail.clientName }}</span>
            </el-tooltip>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="item-print">
            <span class="print-tit">工序:</span>
            <span class="print-con">{{ printBillDetail.processText }}</span>
          </div>
        </el-col>
        <el-col :span="24" style="margin-top: 15px;">
          <div class="item-print">
            <el-tabs type="border-card">
              <el-tab-pane label="生产信息">
                <div style="border: 1px solid #ddd; margin-top: 15px;width: 100%;overflow-y: auto">
                  <div class="card-tit">用料</div>
                  <div style="float: left;">
                    <el-table
                      class="tb-edit"
                      row-key="id"
                      highlight-current-row
                      border
                      size="mini"
                      :data="printBillBreedList"
                      style="">
                      <el-table-column
                        width="120px"
                        prop="breedName"
                        label="版名称"
                      >
                        <template slot-scope="scope">
                          <el-tooltip :content="scope.row.breedName" placement="top-start" effect="light">
                            <span class="ellipsis"> {{ scope.row.breedName }}</span>
                          </el-tooltip>
                        </template>

                      </el-table-column>
                      <el-table-column
                        width="120px"
                        prop="breedTypeName"
                        label="版类型"
                      >
                        <template slot-scope="{row}">
                          <el-tooltip :content="row.breedTypeName" placement="top-start" effect="light">
                            <span class="ellipsis"> {{ row.breedTypeName }}</span>
                          </el-tooltip>
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="自带标记"
                      >
                        <template slot-scope="{row}">
                          <span v-if="row.selfProvidedPaper==1">自带</span>
                          <span v-if="row.selfProvidedPaper==0">不自带</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="paperName"
                        show-overflow-tooltip
                        width="160px"
                        show-overflow-tooltip
                        label="纸张类型"
                      >
                      </el-table-column>
                      <el-table-column
                        width="140"
                        show-overflow-tooltip
                        prop="actualPaperName"
                        label="实际发纸"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="wholePaperSize"
                        label="大纸规格"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="printCount"
                        label="版正印量"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="cutCount"
                        label="纸张开数"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="cutSize"
                        label="开纸尺寸"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="breedSets"
                        label="版套数"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="printCount"
                        label="正印量"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="printFlowCount"
                        label="印刷伸放"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="craftFlowCount"
                        label="后工放数"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="wholePaperCount"
                        label="大纸张数"
                      >
                      </el-table-column>

                      <el-table-column
                        prop="paperPrice"
                        label="纸张价格"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="breedPaperPrice"
                        label="版纸张价格"
                      >
                      </el-table-column>

                    </el-table>
                  </div>
                  <div style="clear: both"></div>
                </div>
                <div style="border: 1px solid #ddd;margin-top: 15px;width: 100%;overflow-y: auto">
                  <div class="card-tit">印刷</div>
                  <div style="float: left;">
                    <el-table
                      class="tb-edit"
                      row-key="id"
                      highlight-current-row
                      border
                      size="mini"
                      :data="printBillBreedList"
                      style="width: 100%">
                      <el-table-column
                        prop="breedName"
                        width="120px"
                        label="版名称"
                      >
                        <template slot-scope="scope">
                          <el-tooltip :content="scope.row.breedName" placement="top-start" effect="light">
                            <span class="ellipsis"> {{ scope.row.breedName }}</span>
                          </el-tooltip>
                        </template>
                      </el-table-column>
                      <el-table-column
                        width="120"
                        prop="machineTypeName"
                        label="印刷机型"
                      >
                      </el-table-column>
                      <el-table-column
                        width="120"
                        prop="machineName"
                        label="印刷机台"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="colorCount"
                        label="印刷色数"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="specialColor"
                        label="专色"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="breedFlipType"
                        label="翻版方式"
                      >
                        <template slot-scope="scope">
                          <span v-if="scope.row.breedFlipType==1">正反</span>
                          <span v-if="scope.row.breedFlipType==2">滚翻</span>
                          <span v-if="scope.row.breedFlipType==3">自翻</span>
                          <span v-if="scope.row.breedFlipType==4">单面</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="psGroupCount"
                        label="PS版套数"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="psSize"
                        label="ps版规格"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="psCount"
                        label="ps版块数"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="printCount1000"
                        label="千印数"
                      >
                        <template slot-scope="{row}">
                          <span>{{row.printCount1000.toFixed(3)}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="completeCount"
                        label="下机数量"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="printCosts"
                        label="印刷费"
                      >
                      </el-table-column>
                    </el-table>
                  </div>
                  <div style="clear: both"></div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="订单列表">
                <el-button-group style="margin-bottom: 7px;margin-top: -5px">
                  <el-button @click="sendPrintBillFileBtn(0)" size="mini" type="warning" plain>下载原图</el-button>
                  <el-button @click="sendPrintBillFileBtn(1)" size="mini" type="success" plain>下载PDF图</el-button>
                  <el-button @click="sendPrintBillFileBtn(2)" size="mini" type="primary" plain>打开下载目录</el-button>
                </el-button-group>
                <el-table
                  border
                  size="mini"
                  :data="printOrderList"
                  style="width: 100%">
                  <el-table-column
                    label="印品名称"
                    width="140px"
                  >
                    <template slot-scope="{row}">
                      <el-tooltip :content="row.orderName" placement="top-start" effect="light">
                      <span @click="handleOrderPDFFiles(row.id)" style="color: #409EFF;cursor: pointer"
                            class="ellipsis"> {{ row.orderName }}</span>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column
                    show-overflow-tooltip
                    prop="orderCode"
                    label="订单编号"
                    width="160"
                  >
                    <template slot-scope="{row}">
                       <span @click="handleDetail(row.id)" style="color: #409EFF;cursor: pointer"
                             class="ellipsis"> {{ row.orderCode }}<span v-if="row.businessKind==3" style="display: inline-block;color: red">(补{{ row.rePrintIndex }})</span></span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="orderMessage"
                    show-overflow-tooltip
                    width="220"
                    label="订单消息"
                  >
                    <template slot-scope="{row}">
                      <template v-if="row.orderMessage">
                        <el-button size="mini" circle icon="el-icon-plus" @click="openMessage(row)"></el-button>
                        <a href="javascript:;" style="color: #20a0ff" @click="openMessage(row)">{{ row.orderMessage }}</a>
                      </template>
                      <template v-else>
                        <el-button size="mini" circle icon="el-icon-plus" @click="openMessage(row)"></el-button>
                      </template>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="clientName"
                    show-overflow-tooltip
                    width="120"
                    label="客户名称"
                  >
                  </el-table-column>

                  <el-table-column
                    prop="orderQty"
                    width="90"
                    show-overflow-tooltip
                    label="数量"
                  >
                  </el-table-column>

                  <el-table-column
                    prop="orderMemo"
                    label="生产备注"
                  >
                    <template slot-scope="{row}">
                      <el-popover
                        placement="top-start"
                        width="400"
                        trigger="hover"
                        :content="row.orderMemo">
                        <span slot="reference" style="width: 170px" class="ellipsis"> {{ row.orderMemo }}</span>
                      </el-popover>
                    </template>
                  </el-table-column>
<!--                  <el-table-column-->
<!--                    prop="orderPrice"-->
<!--                    label="订单价格"-->
<!--                  >-->
<!--                  </el-table-column>-->
<!--                  <el-table-column-->
<!--                    prop="orderPrice"-->
<!--                    label="订单价格"-->
<!--                  >-->
<!--                  </el-table-column>-->
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="工序信息">
                <div
                  v-for="(item,indexItem) in printBillBreedList"
                  :key="item.id"
                >
                  <div>
                    <div class="process-tit">{{ item.breedName }}</div>
                    <ul>
<!--                      <li-->
<!--                        v-for="(order,index) in item.processList"-->
<!--                        :key="index"-->
<!--                      >-->
<!--                        <span>{{ order.processName }}</span><span v-if="order.orderName">（{{ order.orderName }}）</span>-->
<!--                        <div v-if="order.taskStatus!=undefined && order.taskStatus>=0" style="display: inline-block">-->
<!--                          <span>状态</span>-->
<!--                        </div>-->
<!--                      </li>-->
                      <el-table
                        size="mini"
                        :data="item.processList"
                        style="width: 100%">
                        <el-table-column
                          prop="processName"
                          label="工序名称"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          prop="orderName"
                          show-overflow-tooltip
                          label="印品名称"
                          width="180">
                        </el-table-column>
                        <el-table-column
                          prop="taskStatus"
                          label="状态"
                          width="180">
                          <template slot-scope="{row}">
                            <el-tag size="mini" type="info" v-if="row.taskStatus==0">未开始</el-tag>
                            <el-tag size="mini" type="warning" v-if="row.taskStatus==1">生产中</el-tag>
                            <el-tag size="mini" type="success" v-if="row.taskStatus==10">已完工</el-tag>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="feedbackMan"
                          width="120"
                          label="反馈人">
                          <template slot-scope="{row}">
                            <span v-if="row.taskStatus>0">{{row.feedbackMan}}</span>
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="feedbackTimeLong"
                          width="120"
                          label="反馈时间">
                          <template slot-scope="{row}">
                            <span v-if="row.taskStatus>0">{{row.feedbackTime | getLongTime}}</span>
                          </template>
                        </el-table-column>
                      </el-table>
                    </ul>
                  </div>

                </div>
                <!--                <el-tree default-expand-all :data="printBillBreedList" :props="defaultProps">-->
                <!--                  <span class="custom-tree-node" slot-scope="{ node, data }">-->
                <!--                    <span>{{ node.label }}</span>{{node.orderName}}<span></span>-->
                <!--                  </span>-->
                <!--                </el-tree>-->
              </el-tab-pane>
              <el-tab-pane label="版式示意">
                <el-button type="primary" v-if="printBillDetail.billType==1" size="mini" icon="el-icon-view" @click="$router.push({path:'/printbill/printBillView',query:{idPrintBill:printBillDetail.id,billName:printBillDetail.billName}})">查看版式</el-button>
              </el-tab-pane>
              <el-tab-pane label="外协单">
              </el-tab-pane>
            </el-tabs>

          </div>
        </el-col>
      </el-row>

      <div style="margin-top: 10px;line-height: 18px;font-size: 13px">
        <el-row>
          <el-col :span="24">
            <span style="color: #3c3c3c;">说明:</span><span style="color: #7c7c7c">{{printBillDetail.billNote}}</span>
          </el-col>
          <el-col :span="24">
            <span style="color: #3c3c3c;">订单备注:</span><span style="color: #7c7c7c">{{printBillDetail.orderMemos}}</span>
          </el-col>
          <el-col :span="24">
            <span style="color: #3c3c3c;">订单详细信息:</span>
            <span
              v-for="(item,indexItem) in orderProduceInfosArray"
              :key="item.indexItem"
              style="color: #7c7c7c"
            >{{item}}&nbsp;&nbsp;&nbsp;</span>
          </el-col>
        </el-row>
      </div>




      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="printVisible = false;">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog size="mini" title="PDF文件列表" :visible.sync="dialogPdfVisible" width="560px">
      <el-table :data="gridDataPdf">
        <el-table-column
          label="#"
          align="center"
          type="index"
          :index="indexMethod">
        </el-table-column>
        <el-table-column
          label="PDF文件名称"
          width="450px"
        >
          <template slot-scope="{row}">
            <a  target="_blank" :href="row.url" style="color: #409EFF;cursor: pointer"
               class="ellipsis"> {{ row.fileName }}</a>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="订单详情" :close-on-click-modal="false" class="orderDetailDialog" :modal-append-to-body='false' :visible.sync="detailVisible" top="10px" width="1200px">
      <order-detail ref="orderDetail"></order-detail>
    </el-dialog>
    <el-drawer
      title="订单消息"
      :reverse="true"
      :visible.sync="memoDrawer"
      size="600px">
      <order-message ref="orderMessage" @addMessageHandle="addMessageHandle"></order-message>
    </el-drawer>
  </div>
</template>

<script>
import {getInfoById, printBillDoPrint,getOrderPDFFiles} from '@/api/printbill/printbill.js'
import {doLocalPrint} from "@/utils";
// import OrderDetail from '@/components/orderDetail/orderDetail'
import OrderMessage from '@/components/orderMessage/orderMessage'

export default {
  name: 'printbillDetail',
  components: {
    OrderMessage,
    OrderDetail: () => import('@/components/orderDetail/orderDetail')
  },
  data() {
    return {
      fullscreenLoading: false,
      memoDrawer:false,
      detailVisible: false,
      dialogPdfVisible:false,
      gridDataPdf:[],
      orderProduceInfosArray: [],
      printVisible: false,
      idOrder:'',
      printBillBreedList: [],//生产信息
      printOrderList: [],//订单列表
      processListObj: [],//工序
      activities: [],
      printBillDetail: {}
    }
  },
  created() {
    // this.getList()
  },
  methods: {
    addMessageHandle(data) {
      const _that = this
      _that.printOrderList.forEach(item => {
        if (item.id == data.idBill) {
          item.orderMessage = data.messageStr
        }
      })
    },
    // 订单消息
    openMessage(row) {
      var _that = this
      _that.memoDrawer = true
      _that.$nextTick(function() {
        // console.log(_that.$refs.orderMemo);
        _that.$refs.orderMessage.idOrder = row.id
        _that.$refs.orderMessage.getList()
      })
    },
    handleDetail(id) {
      const _that = this;
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = id
        _that.$refs.orderDetail.getInfo()
      })
    },
    handleOrderPDFFiles(id){
      //查看pdf
      const _that = this;
      var datas = {
        "idOrder": id
      }
      getOrderPDFFiles(datas).then(response => {
        // console.log(response.data);
        _that.dialogPdfVisible = true;
        _that.gridDataPdf = response.data

      }).catch(err => {
        console.log(err);
      })
    },
    sendPrintBillFileBtn(type){
      const _that = this;
      var userAgent = navigator.userAgent
      // console.log(_that.idOrder.toString());
      // console.log(_that.printBillDetail.billCode);
      if (userAgent.indexOf('DnyERPBrowser') > 0) {
        if(type==0){
          dyERP.sendPrintBillFile(_that.idOrder.toString(), _that.printBillDetail.billCode, '0')
        }else if(type==1){
          dyERP.sendPrintBillFile(_that.idOrder.toString(), _that.printBillDetail.billCode, '1')
        }else if(type==2){
          dyERP.sendPrintBillFile(_that.idOrder.toString(), _that.printBillDetail.billCode, '2')
        }

      } else {
        // alert('请使用开发商提供的ERP客户端')
        _that.$message({
          message: '请使用开发商提供的ERP客户端',
          type: 'warning'
        })
      }
    },
    printData() {
      const _that = this;
      var datas = {
        "ids": _that.idOrder
      }
      printBillDoPrint(datas).then(response => {
        // console.log("printBillDoPrint", response);
        var PrintData = {
          '_rootData': response.data
        }
        // console.log(PrintData);
        var data = {
          PrintTemplate: 'printBill.fr3',
          NeedPreview: 1,
          PrintData: JSON.stringify(PrintData)
        }
        // 以后打印调这个通用接口
        doLocalPrint(data)
      }).catch(err => {
        _that.$message.error(err)
      })
    },
    getDetail() {
      const _that = this;
      _that.printBillDetail  = {};
      _that.printOrderList = [];
      _that.printBillBreedList = [];
      // console.log(_that.idOrder);
      var data = {
        idPrintBill: _that.idOrder
      }
      getInfoById(data).then(res => {
        // console.log(res);
        var datas = res.data;
        _that.printVisible = true;
        _that.printBillDetail = res.data;
        if (_that.printBillDetail.orderProduceInfos) {
          // console.log(_that.printBillDetail.orderProduceInfos);
          _that.orderProduceInfosArray = _that.printBillDetail.orderProduceInfos.split('`')
        } else {
          _that.orderProduceInfosArray = []
        }
        _that.printOrderList = datas.printOrderList;

        _that.printBillBreedList = datas.printBillBreedList;
        _that.fullscreenLoading = false;
        // console.log(_that.printBillBreedList);
        // _that.fullscreenLoading = false;
        // _that.processList = datas.printBillBreedList[0].processList;
        _that.printBillBreedList.forEach(arrayItem => {
          // _that.$set(arrayItem, 'processName', arrayItem.breedName);
          for (let i = 0; i < arrayItem.processList.length; i++) {
            for (let j = 0; j < _that.printOrderList.length; j++) {
              if (arrayItem.processList[i].idOrder == _that.printOrderList[j].id && arrayItem.processList[i].workProcess.feedBackFlag == 2) {
                _that.$set(arrayItem.processList[i], 'orderName', _that.printOrderList[j].orderName);
              }
            }
          }
        })
        // console.log("_that.printBillBreedList",_that.printBillBreedList);
      }).catch(err => {
        _that.$message.error(err);
        _that.fullscreenLoading = false;
        _that.printVisible = false;
      })
    },
    indexMethod(index) {
      return index + 1;
    }
  }
}
</script>

<style scoped>
.item-print {
  line-height: 28px;
}
.ellipsis{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.card-tit {
  line-height: 28px;
  margin-left: 8px;
}

</style>
