<template>
  <div class="app-container">
    <div class="filter-container">

      <el-input size="mini" v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item" />
      <el-input size="mini" v-model="search.printName" placeholder="产品类型" style="width: 200px;" class="filter-item" />

      <el-select size="mini" v-model="search.billState" placeholder="状态" class="filter-item">
        <el-option label="全部" :value="-1"></el-option>
        <el-option label="待下达" :value="0"></el-option>
        <el-option label="已下达" :value="1"></el-option>
      </el-select>
      <el-button size="mini" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>

      <el-select size="mini" @change="checkFactories" v-model="form.factoryName" filterable placeholder="选择来源厂">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.factoryName"
          :value="item.factoryName+','+item.id">
        </el-option>
      </el-select>
      <el-button size="mini" :disabled="btnFalse" class="filter-item" type="primary" @click="convertBtn">
        批量对接外协单
      </el-button>
    </div>
    <div class="table-con">
      <el-table
        ref="multipleTable"
        :data="tableData"
        v-loading="listLoading"
        @sort-change="changeSort"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        size="mini"
        @selection-change="handleSelectionChange"
        border
      >
        <el-table-column
            label="#"
            align="center"
            type="index"
            :index="indexMethod">
        </el-table-column>
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="外协单号"
          prop="billCode"
          sortable="custom"
          width="160px"
        >
          <template slot-scope="{row}">
            <span @click.stop="billCodePrint(row)" style="color: #E6A23C;cursor: pointer">打印&nbsp;&nbsp;</span>
                      <span @click="handleDetail(row)"
                            style="color: #409EFF;cursor: pointer">{{row.billCode}}</span>

          </template>
        </el-table-column>

        <el-table-column
          label="订单编号"
          show-overflow-tooltip
          prop="orderCode"
          sortable="custom"
          width="100px"
        >
          <template slot-scope="{row}">
            <span>{{ row.orderCode }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="施工单号"
          show-overflow-tooltip
          width="160px"
        >
          <template slot-scope="{row}">
          <span @click.stop="printBillCodePrint(row)" style="color: #E6A23C;cursor: pointer">打印&nbsp;&nbsp;</span>
          <span> {{ row.printBillCode }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="产品类型"
          show-overflow-tooltip
          prop="printName"
          sortable="custom"
          width="140px"
        >
          <template slot-scope="{row}">
            <span>{{ row.printName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="单据状态"
          show-overflow-tooltip
          width="140px"
        >
          <template slot-scope="{row}">
            <el-tag size="mini" type="primary" v-if="row.billState == 0">待下达</el-tag>
            <el-tag size="mini" type="success" v-else-if="row.billState == 1">已下达</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="印品名称"
          show-overflow-tooltip
          width="140px"
        >
          <template slot-scope="{row}">
            <span>{{ row.orderName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="后工"
          prop="outProcessName"
          sortable="custom"
          show-overflow-tooltip
          width="100px"
        >
          <template slot-scope="{row}">
            <span>{{ getAfterwork(row) }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="产品名称"
          width="140px"
        >
          <template slot-scope="{row}">
                    <span>{{ row.printName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="加工金额"
        >
          <template slot-scope="{row}">
            <span>{{ row.outAssistMoney }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="印刷下机时间"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{ row.printCompleteTime | getTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="交货时间"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{ row.outSourceTime | getTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注"
          width="200px"
        >
          <template slot-scope="{row}">
            <el-popover
              placement="top-start"
              width="400"
              trigger="hover"
              :content="row.billMemo">
              <span slot="reference" style="width: 200px" class="ellipsis"> {{ row.billMemo }}</span>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="订单制单日期"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{row.orderSubmitTime  | getTime}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="外协制单人"
          width="130px"
        >
          <template slot-scope="{row}">
            <span>{{row.createManName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="订单数量"
        >
          <template slot-scope="{row}">
            <span>{{ row.printQty }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="外协厂名称"
          width="140px"
        >
          <template slot-scope="{row}">
                    <span>{{ row.outAssistFactoryName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="物流方式"
        >
          <template slot-scope="{row}">
            <span>{{ row.deliverMethod }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getTableInfo(idOriginFactory)" />


    </div>
    <outside-detail ref="outsideDetail"></outside-detail>
    <printbill-detail ref="printbillDetail"></printbill-detail>
  </div>
</template>

<script>
import {
  queryRemoteBills,
  queryOriginFactories,
  convertRemoteToLocalOrder,
  doPrintRemoteOutAssistBill,
  doPrintRemotePrintBill
} from '@/api/printbill/preOut/preOut.js'
import outsideDetail from '@/components/outsideDetail/factoryoutsideDetail';
import Pagination from "@/components/Pagination/index";
import PrintbillDetail from "@/components/printbillDetail/printbillDetail";
import {printBillDoPrint} from "@/api/printbill/printbill";
import {doLocalPrint} from "@/utils";
//外协单详情
export default {
  name: "list",
  components: {
    Pagination,
    outsideDetail,
    PrintbillDetail
  },
  data() {
    return {
      orderByString:"",
      btnFalse:false,
      multipleSelection:[],
      form:{},
      options:[],
      idOriginFactory:"",
      listLoading: false,
      tableData: [],
      search: {
        keyWord: '',
        billState: -1,
        printName:""
      },
      listData:{
        total:0,
        page: 1,
        pageSize:20
      },
      listData1:{
        total:0,
        page: 1,
        pageSize:10
      }
    }
  },
  mounted() {
    // this.getTableInfo();
    this.getERPSupplierList();
  },
  methods: {
    billCodePrint(row) {
      const _that = this;
      var idOriginFactory = ""
      if(_that.form.factoryName.split(',').length>1){
        idOriginFactory = _that.form.factoryName.split(',')[1];
      }else {
        idOriginFactory = _that.options[0].id;
      }
      var datas = {
        "idOriginFactory":idOriginFactory,
        "idOutAssistBill": row.id,
      }
      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)
      })
    },
    printBillCodePrint(row) {
      const _that = this;
      var idOriginFactory = ""
      if(_that.form.factoryName.split(',').length>1){
        idOriginFactory = _that.form.factoryName.split(',')[1];
      }else {
        idOriginFactory = _that.options[0].id;
      }
      var datas = {
        "idOriginFactory":idOriginFactory,
        "billCode": row.printBillCode,
      }
      doPrintRemotePrintBill(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)
      })
    },
    // 排序
    changeSort(val) {
      // console.log(val)
      var _that = this;
      if (val.order == 'ascending') {
        _that.orderByString = val.prop + ',' + 'asc'
      } else if (val.order == 'descending') {
        _that.orderByString = val.prop + ',' + 'desc'
      } else {
        _that.orderByString = ''
      }
      _that.getTableInfo( _that.idOriginFactory);
    },
    getAfterwork(row){
      var vals = []
      row.outAssistBillItemList.forEach(item => {
        vals.push(item.outProcessName)
      })
      // console.log(vals.join(','));
      return vals.join(',')
    },
    convertBtn(){
      const _that = this;

      if(_that.multipleSelection.length<=0){
        _that.$message("请选择需要对接的外协单")
        return
      }
      if(_that.multipleSelection.length>20){
        _that.$message("每次最多只能对接20条外协单")
        return
      }
      _that.btnFalse = true;
      var ids = [];
      _that.multipleSelection.forEach(item => {
        ids.push(item.id)
      })
      var idRemotes = ids.join(',')
      var data = {
        "idOriginFactory": _that.idOriginFactory,
        "idRemotes": idRemotes
      }
      convertRemoteToLocalOrder(data).then(res => {
        // console.log(res);

        if(res.httpCode == 200){
          _that.$message({
            message: '对接成功',
            type: 'success'
          });
        }else{
          _that.$message.error(res.msg)
        }
      }).catch(err => {
        _that.$message.error(err)
      })
      setTimeout(() => {
        if (_that.options.length>0){
          _that.form.factoryName =_that.options[0].factoryName;
          _that.idOriginFactory =  _that.options[0].id;
          // console.log(_that.idOriginFactory);
          _that.listData.page = 1;
          _that.getTableInfo(_that.idOriginFactory);
        }
        _that.btnFalse = false;
      }, 500)

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    checkFactories(){
      const _that = this;
      _that.idOriginFactory =  _that.form.factoryName.split(',')[1];
      // console.log(_that.idOriginFactory);
      _that.getTableInfo( _that.idOriginFactory);
    },
    handleDetail(row) {
      const _that = this;
      // _that.idOriginFactory =  _that.form.factoryName.split(',')[1];

      if(_that.form.factoryName.split(',').length>1){
        _that.$refs.outsideDetail.idOriginFactory = _that.form.factoryName.split(',')[1];
      }else {
        _that.$refs.outsideDetail.idOriginFactory = _that.options[0].id;
      }
      _that.$refs.outsideDetail.printType = 1;
      _that.$refs.outsideDetail.idOrder = row.id;
      _that.$refs.outsideDetail.orderIds = row.orderIds;
      _that.$refs.outsideDetail.dialogVisible = true;
      _that.$refs.outsideDetail.getOutsideDetail()
    },
    //获取表格数据
    getTableInfo(idOriginFactory){
      const _that = this
      _that.listLoading = true
      var params = _that.search;
      var page = {
        pageIndex:_that.listData.page,
        pageSize: _that.listData.pageSize,
      }
      var data = {
        'params': JSON.stringify(params),
        'orderBy':_that.orderByString,
        "idOriginFactory": idOriginFactory,
        "page": JSON.stringify(page),
      }
      // console.log(data);
      queryRemoteBills(data).then(response => {
        // console.log("tableData",response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data;
        _that.listData.total = response.total;
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.listLoading = false
      })
    },
    getERPSupplierList(){
      const _that = this
      var page = {
        pageIndex:_that.listData1.page,
        pageSize: _that.listData1.pageSize,
      }
      var data = {
        "params": {},
        "page": JSON.stringify(page),
      }
      // console.log(data);
      queryOriginFactories(data).then(response => {
        const getData = response.data;
        // console.log(getData);
        _that.options = response.data;
        if (response.data.length>0){
          _that.form.factoryName = response.data[0].factoryName;
          _that.idOriginFactory =  response.data[0].id;
          // console.log(_that.idOriginFactory);
          _that.getTableInfo( _that.idOriginFactory);
        }

      }).catch(err => {
      })
    },
    //搜索
    searchData(){
      this.listData.page = 1;
      this.getTableInfo(this.idOriginFactory)
    },
    //序号
    indexMethod(index) {
      return index+1;
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.filter-container {
  margin-bottom: 15px;
}
</style>
