<template>
  <div>
    <el-dialog title="外协单详情" :visible.sync="dialogVisible" width="1200px">
      <el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>外协单</span>
            <span v-if="printOrder.billCode">({{ printOrder.billCode }})</span>
            <el-button  size="mini" type="warning" @click="printData()">打印</el-button>
          </div>
          <div>
            <el-form size="mini" label-width="130px" ref="ruleForm"
                     label-position="right">
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="订单编号">
                    <span>{{ printOrder.orderCode }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="施工单号">
                    <span>{{ printOrder.printBillCode }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="下单时间">
                    <span v-if="printOrder.createTime">{{ printOrder.createTime | getTime }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="外协单位">
                    <el-button  size="mini">{{ outAssistName }}</el-button>
                  </el-form-item>
                </el-col>
                <!--                <el-col :span="8">-->
                <!--                  <el-form-item label="联系人">-->
                <!--                    <el-input v-model="printOrder.financeCode"></el-input>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <!--                <el-col :span="8">-->
                <!--                  <el-form-item label="联系电话">-->
                <!--                    <el-input v-model="printOrder.financeCode"></el-input>-->
                <!--                  </el-form-item>-->
                <!--                </el-col>-->
                <el-col :span="8">
                  <el-form-item label="印品名称">
                    <span>{{ printOrder.orderName }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="交货时间">
                    <span>{{ printOrder.outSourceTime | getTime }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <el-col :span="8">
                  <el-form-item label="订单印量">
                    <el-input :disabled="true" v-model="printOrder.printQty"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="物流方式">
                    <el-select v-model="printOrder.deliverMethod" placeholder="请选择">
                      <el-option label="自提自送" value="自提自送"></el-option>
                      <el-option label="管接不送" value="管接不送"></el-option>
                      <el-option label="不接管送" value="不接管送"></el-option>
                      <el-option label="不接不送" value="不接不送"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="外协单备注">
                    <el-input
                      type="textarea"
                      :rows="4"
                      placeholder="请输入备注"
                      v-model="billMemo">
                    </el-input>
                    <!--                    <div-->
                    <!--                      class="ProduceInfo-con"-->
                    <!--                      style="width: 600px;height: 192px;border: 1px solid #dddd;padding: 5px;line-height: 18px;font-size: 12px">-->
                    <!--                      <p-->
                    <!--                        v-for="(item,indexItem) in orderProduceInfosArray"-->
                    <!--                        :key="item.indexItem"-->
                    <!--                      >{{ item }}</p>-->
                    <!--                      <p v-if="printOrder.orderMemo">{{printOrder.orderMemo}}</p>-->
                    <!--                    </div>-->
                  </el-form-item>
                </el-col>

              </el-row>
            </el-form>

          </div>

        </el-card>
      </el-row>
      <el-row style="margin-top: 20px">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="外协工序" name="first">
            <div>
              <el-table
                ref="multipleTable"
                size="mini"
                class="tb-edit"
                row-key="id"
                highlight-current-row
                :data="uniqueProcessList"
                tooltip-effect="dark"
                style="width: 100%"
              >
                <el-table-column
                  label="外协工序"
                >
                  <template slot-scope="scope">{{ scope.row.outProcessName }}</template>
                </el-table-column>
                <el-table-column
                  label="尺寸"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.outProcessSize }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="工序数量"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.outProcessQty }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="金额"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.outProcessMoney }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="备注"
                >
                  <template slot-scope="scope">
                    <span>{{ scope.row.outProcessMemo }}</span>
                  </template>
                </el-table-column>
              </el-table>

            </div>
          </el-tab-pane>
<!--          <el-tab-pane label="施工单列表" name="second">-->
<!--            <div>-->
<!--              <el-table-->
<!--                size="mini"-->
<!--                :data="tableDataPrint"-->
<!--                style="width: 100%;"-->
<!--                row-key="id"-->
<!--                border-->
<!--                default-expand-all>-->
<!--                <el-table-column-->
<!--                  label="#"-->
<!--                  width="50px"-->
<!--                  align="center"-->
<!--                  type="index"-->
<!--                  :index="indexMethod">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  label="施工单号"-->
<!--                  width="110px"-->
<!--                >-->
<!--                  <template slot-scope="{row}">-->
<!--                    <span>{{row.billCode}}</span>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  label="施工单名称"-->
<!--                  width="140px"-->
<!--                  show-overflow-tooltip-->
<!--                >-->
<!--                  <template slot-scope="{row}">-->
<!--          <span @click="handleDetailPrint(row.id)" style="color: #409EFF;cursor: pointer"-->
<!--                class="ellipsis"> {{ row.billName }}</span>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  width="160px"-->
<!--                  prop="createManName"-->
<!--                  label="建单人">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  width="220px"-->
<!--                  label="订单详细信息">-->
<!--                  <template slot-scope="scope">-->
<!--                    <el-tooltip v-if="scope.row.orderProduceInfos" placement="top-start" effect="light">-->
<!--                      <div v-html="getOrderProduceInfos(scope.row.orderProduceInfos)" slot="content"></div>-->
<!--                      <span class="ellipsis">{{scope.row.orderProduceInfos}}</span>-->
<!--                    </el-tooltip>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  prop="billNote"-->
<!--                  label="备注">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                  width="130px"-->
<!--                  label="建单时间"-->
<!--                >-->
<!--                  <template slot-scope="scope">-->
<!--                    <span v-if="scope.row.createTime">{{ scope.row.createTime | getTime }}</span>-->
<!--                  </template>-->
<!--                </el-table-column>-->
<!--              </el-table>-->
<!--            </div>-->
<!--          </el-tab-pane>-->
          <el-tab-pane label="订单原图下载列表" name="three">
            <div>
              <el-table
                size="mini"
                :data="fileInfoList"
                style="width: 100%;"
                row-key="id"
                border
                default-expand-all>
                <el-table-column
                  label="#"
                  width="50px"
                  align="center"
                  type="index"
                  :index="indexMethod">
                </el-table-column>
                <el-table-column
                  label="订单编号"
                  width="110px"
                >
                  <template slot-scope="{row}">
                    <span>{{row.orderCode}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="订单名称"
                  width="200px"
                  show-overflow-tooltip
                >
                  <template slot-scope="{row}">
                    <span class="ellipsis"> {{ row.orderName }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="文件下载"
                  show-overflow-tooltip
                >
                  <template slot-scope="{row}">
                    <el-link :href="row.originFileLink" target="_blank" style="color: #20a0ff">{{ row.fileDescription }}
                    </el-link>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <p>金额合计：<span style="font-size: 15px;color: #409EFF">{{totalMoney}}</span>&nbsp;元</p>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
    <printbill-detail ref="printbillDetail"></printbill-detail>
  </div>
</template>

<script>
import {
  viewRemoteBill, getOrderPrintBillList,
  outAssistDoPrint
} from '@/api/outsidebill/outsidebill.js'
import PrintbillDetail from "@/components/printbillDetail/printbillDetail";
import {doLocalPrint} from "@/utils";
import {doPrintRemoteOutAssistBill} from "@/api/printbill/preOut/preOut";
export default {
  name: "outsideDetail",
  components: {
    PrintbillDetail
  },
  data() {
    return {
      printType:"",
      idOriginFactory:"",
      fileInfoList:[],
      tableDataPrint:[],
      activeName: 'first',
      totalMoney:0,
      uniqueProcessList: [],
      printOrder: {},
      outAssistName: "",
      factoryId: "",
      orderProduceInfosArray: [],
      dialogVisible:false,
      idOrder: '',
      orderIds:'',
      billMemo:"",
    }
  },
  created() {
    // this.getList()
  },
  methods: {
    getOrderProduceInfos(str){
      // console.log(str);
      //郑州鑫源制衣_6000`[封面]尺寸：210*285_样式：横板_P数：双面印4_数量：6000_克重纸张类型：128克鹿鸣铜版C_`[内文]P数：24_克重纸张类型：105克通用铜版C_`
      var newStr = str.replace(/`/g,"<br/>")
      // console.log(newStr);
      return newStr
    },
    handleDetailPrint(id) {
      const _that = this;
      _that.$refs.printbillDetail.idOrder = id;
      _that.$refs.printbillDetail.printVisible = true;
      _that.$refs.printbillDetail.getDetail()
    },
    printData(){
      const _that = this;
      if(_that.printType==1){
        var datas = {
          "idOriginFactory":_that.idOriginFactory,//来源厂id,
          "idOutAssistBill": _that.idOrder
        }
        doPrintRemoteOutAssistBill(datas).then(response => {
          // console.log("printBillDoPrint", response);
          var PrintData = {
            '_rootData': response.data
          }
          // console.log(PrintData);
          var data = {
            PrintTemplate: 'OutSourceBill_XQD.fr3',
            NeedPreview: 1,
            PrintData: JSON.stringify(PrintData)
          }
          // 以后打印调这个通用接口
          doLocalPrint(data)
        }).catch(err => {
          _that.$message.error(err)
        })
      }else {
        var datasIds = {
          "ids": _that.idOrder
        }
        outAssistDoPrint(datasIds).then(response => {
          // console.log("printBillDoPrint", response);
          var PrintData = {
            '_rootData': response.data
          }
          // console.log(PrintData);
          var data = {
            PrintTemplate: 'OutSourceBill_XQD.fr3',
            NeedPreview: 1,
            PrintData: JSON.stringify(PrintData)
          }
          // axios.post('http://127.0.0.1:19876', JSON.stringify(data), { headers: { 'Content-Type': 'application/json;charset=UTF-8' }}).then((res) => {
          //   console.log(res)
          // }).catch((error) => {
          //   console.log(error)
          // })
          // 以后打印调这个通用接口
          doLocalPrint(data)
        }).catch(err => {
          _that.$message.error(err)
        })
      }

    },
    getOutsideDetail(){
      const _that = this;
      _that.activeName= "first";
      var data = {
        "idOriginFactory": _that.idOriginFactory,//来源厂id
        "idRemoteBill": _that.idOrder//来源外协单id
      }
      viewRemoteBill(data).then(res => {
        // console.log("getOutAssistOrderDetail22", res);
        _that.totalMoney= 0;
        _that.billMemo="";
        if (res.httpCode == 200) {
          _that.uniqueProcessList = [];
          _that.printOrder = res.data;
          _that.factoryId = res.data.idOutAssistFactory;
          _that.outAssistName = res.data.outAssistFactoryName;
          _that.printOrder.deliverMethod = res.data.deliverMethod;
          _that.fileInfoList = res.data.fileInfoList
          // console.log("412141423",_that.fileInfoList);
          // console.log(_that.printOrder.deliverMethod);
          //_that.outAssistName
          for (let i = 0; i < res.data.outAssistBillItemList.length; i++) {
            var item = res.data.outAssistBillItemList[i];
            if(!item.outProcessMoney){
              _that.totalMoney= 0
            }else {
              _that.totalMoney+=parseInt(item.outProcessMoney);
            }
            _that.uniqueProcessList.push(item);
          }
          _that.orderProduceInfosArray = res.data.billMemo.split('`');
          // console.log(_that.orderProduceInfosArray);
          for (let i = 0; i < _that.orderProduceInfosArray.length; i++) {
            var datas = _that.orderProduceInfosArray[i];
            _that.billMemo += datas;
          }

        } else {
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
      })

      // var dataOrders = {
      //   "idOrders": _that.orderIds
      // }
      // getOrderPrintBillList(dataOrders).then(res => {
      //   console.log("getOrderPrintBillList11", res);
      //   if (res.httpCode == 200) {
      //     _that.tableDataPrint = res.data;
      //
      //   } else {
      //     _that.$message.error(res.msg)
      //   }
      // }).catch(err => {
      //   _that.$message.error(err)
      // })

    },
    handleProcessMoneyTotal(index, value){
      var _that = this;
      _that.totalMoney=0;
      for (let i = 0; i < _that.uniqueProcessList.length; i++) {
        var item =  _that.uniqueProcessList[i];

        if(!item.outProcessMoney){
          _that.totalMoney= 0
        }else {
          _that.totalMoney+=parseFloat(item.outProcessMoney);
        }

      }
    },
    //序号
    indexMethod(index) {
      return index + 1;
    }
  }
}
</script>

<style scoped>

</style>
