<template>
  <div class="app-container">
    <div class="filter-container">
      <div style="display: inline-block;margin-right: 5px">当前上班人员:<span
        style="font-weight: bold;font-size: 16px;color: #F56C6C"> {{ name }}</span>({{ loginName }})
      </div>
      <el-input size="mini" v-model="search.keyWord" placeholder="请输入施工单号" style="width: 200px;" class="filter-item"/>
      <el-input size="mini" v-model="search.machineName" placeholder="机台名称" style="width: 120px;" class="filter-item"/>
      <el-input size="mini" v-model="search.breedTypeName" placeholder="产品类型" style="width: 120px;" class="filter-item"/>
      <el-input size="mini" v-model="search.printMan" placeholder="下机人" style="width: 100px;" class="filter-item"/>
      <el-select size="mini" v-model="search.printState">
        <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-button size="mini" class="filter-item" icon="el-icon-refresh" type="primary" @click="tableRefresh">
        刷新
      </el-button>
      <el-button size="mini" class="filter-item" type="primary" @click="handleBatch">
        批量反馈
      </el-button>
    </div>
    <div class="rowHoverNone">
      <el-table
        @selection-change="handleSelectionChange"
        :data="tableData"
        max-height="680"
        size="mini"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        ref="multipleTable"
        default-expand-all
        :tree-props="{children: 'semiPartList', hasChildren: 'hasChildren'}"
      >
        <el-table-column
          :selectable="checkboxT"
          type="selection"
          width="55">
          <template slot-scope="scope">
            <el-checkbox :class="[scope.row.semiPartList==undefined ? 'checkBox-style' :'']" v-model="scope.row.checks"
                         @change="toselect(scope.row)"></el-checkbox>

          </template>
        </el-table-column>
        <el-table-column label="" width="140px">
          <template slot-scope="{row}">
            <span @click="handleDetail(row.id)" style="color: #409EFF;cursor: pointer"
                  class="ellipsis"> {{ row.printBillCode }}</span>
            <el-image v-if="row.importantBill == 1" :src="new_badge"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="版名称" width="250px">
          <template slot-scope="{row}">
            <el-tooltip :content="row.partName" placement="top-start" effect="light">
              <span class="ellipsis"> {{ row.partName }}</span>
              <a href="javascript:;" style="color: #20a0ff" @click="openDetail(row)">{{ row.partName }}</a>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="版名称" width="200px">
          <template slot-scope="{row}">
            <el-tooltip :content="row.breedName" placement="top-start" effect="light">
              <span class="ellipsis"> {{ row.breedName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
<!--        <el-table-column label="订单消息" show-overflow-tooltip width="200px">-->
<!--          <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 label="订单消息" show-overflow-tooltip width="140px">
          <template slot-scope="{row}">
              <el-button v-if="row.printBillCode=='' || row.printBillCode=='null' || row.printBillCode==undefined" size="mini" circle icon="el-icon-plus" @click="openMessage(row)"></el-button>
              <a v-if="row.breedMsg!='undefined'" href="javascript:;" style="color: #20a0ff" @click="openMessage(row)">{{ row.orderMessage }}</a>
          </template>
        </el-table-column>
        <el-table-column label="订单名称" width="140px">
          <template slot-scope="{row}">
            <el-tooltip :content="row.orderName" placement="top-start" effect="light">
              <span class="ellipsis"> {{ row.orderName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="客户名称" width="120px">
          <template slot-scope="{row}">
            <el-tooltip :content="row.customerName" placement="top-start" effect="light">
              <span class="ellipsis"> {{ row.customerName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="印刷机台">
          <template slot-scope="{row}">
            <span>{{ row.printMachineName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下机时间" prop="printCompleteTime" width="130px">
          <template slot-scope="{row}">
            <span v-if="row.printCompleteTime">{{ row.printCompleteTime | getTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单印量">
          <template slot-scope="{row}">
            <span>{{ row.orderQty }}</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"/>
    </div>


    <el-dialog title="半成品反馈" :visible.sync="dialogVisible" width="1180px">
      <el-button style="margin-bottom: 10px" size="mini" class="filter-item" type="primary" @click="handlePrint">
        打印订单外协标签
      </el-button>
      <el-table
        size="mini"
        :data="dataArray"
        border
        style="width: 100%">
        <el-table-column label="版名称" width="300px">
          <template slot-scope="{row}">
            <el-tooltip :content="row.breedName" placement="top-start" effect="light">
              <span class="ellipsis"> {{ row.breedName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="订单名称" width="140px">
          <template slot-scope="{row}">
            <el-tooltip :content="row.orderName" placement="top-start" effect="light">
              <span class="ellipsis"> {{ row.orderName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="反馈状态"
          width="130px"
        >
          <template slot-scope="scope">
            <el-select
              style="display: inline-block;width: 100px;"
              size="mini"
              filterable
              placeholder="请选择"
              v-model="scope.row.orderCutKind"
              @change="selectOrderCutKind(scope.$index,scope.row.orderCutKind)"
            >
              <el-option
                v-show="item.type!=2"
                v-for="item in options"
                :key="item.index"
                :label="item.value"
                :value="item.type"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="外协信息" width="240px">
          <template slot-scope="{row}">
            <el-tooltip v-if="row.orderOutassistInfo" :content="row.orderOutassistInfo" placement="top-start"
                        effect="light">
              <span style="color: #E6A23C" class="ellipsis"> {{ row.orderOutassistInfo }}</span>
            </el-tooltip>
            <span v-else>无外协信息</span>
          </template>
        </el-table-column>
        <el-table-column label="客户名称" width="120px">
          <template slot-scope="{row}">
            <el-tooltip :content="row.customerName" placement="top-start" effect="light">
              <span class="ellipsis"> {{ row.customerName }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="印刷机台">
          <template slot-scope="{row}">
            <span>{{ row.printMachineName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="订单印量">
          <template slot-scope="{row}">
            <span>{{ row.orderQty }}</span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="backRecordBtn">确 定</el-button>
      </div>
      <p>注意事项：</p>
      <p>
        1、订单无后工请按订单切成品要求进行反馈,不要反馈外协。<br>
        2、订单有后工未开外协单的,可以先反馈后工外协，等并制外协单，外协反馈即可流转到成品标签。<br>
        3、订单着后立，并且并制外协单，外协单未反馈的，反馈后工外协，等待外协反馈即可流转到成品标签。<br>
        4、订单有后工，并且开制外协单，但外协单已馈的，请反馈不切成品，即可流转到成品标签。<br>
        5、反馈状态显示空的表示不允许反馈。<br>
        6、如果此处列出的订单数和办公台选择的订单数不一致。表示订单未下机或者已经反馈，不会显示。<br>
        7、仅当反馈成品裁切时打包数据才有效。
      </p>
    </el-dialog>
    <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>
    <printbill-detail ref="printbillDetail"></printbill-detail>
    <el-drawer
      title="订单消息"
      :reverse="true"
      :visible.sync="memoDrawer"
      size="600px">
      <order-message ref="orderMessage"></order-message>
    </el-drawer>
  </div>
</template>

<script>
import {getSemiOutassistInfoByPart, querySemiPrintBillFeedback, semiFeedback,semiOutassistInfoDoPrint} from '@/api/feedBack/feedBack.js';
import Pagination from '@/components/Pagination';
import {mapGetters} from 'vuex';
import PrintbillDetail from "@/components/printbillDetail/printbillDetail";
import OrderDetail from '@/components/orderDetail/orderDetail';
import OrderMessage from '@/components/orderMessage/orderMessage';
import {queryProcessForPreOutStock} from "@/api/printbill/preOut/preOut";
import {doLocalPrint} from "@/utils";
import new_badge from '@/assets/new_badge.gif'

export default {
  computed: {
    ...mapGetters([
      'name',
      'loginName'
    ])
  },
  components: {
    Pagination,
    PrintbillDetail,
    OrderDetail,
    OrderMessage
  },
  data() {
    return {
      new_badge: new_badge,
      memoDrawer:false,
      detailVisible:false,
      options: [
        {
          type: 1,
          index: 1,
          value: '不切成品'
        },
        {
          type: 2,
          index: 2,
          value: '后工外协',
        }, {
          type: 3,
          index: 3,
          value: '后工外协',
        }, {
          type: 4,
          index: 4,
          value: '切成品',
        },
        {
          type: 5,
          index: 5,
          value: '订单作废',
        }],
      dialogVisible: false,
      listLoading: false,
      tableData: [],
      search: {
        keyWord: '',
        printState: -1,
        machineName:"",
        breedTypeName:"",
        printMan:""
      },
      listData: {
        total: 0,
        page: 1,
        pageSize: 50
      },
      multipleSelection: [],
      dataArray: [],
      idsArray: [],
      idOrdersArray:[]
    };
  },
  mounted() {
    // this.getTableInfo();
  },
  methods: {
    // 订单消息
    openMessage(row) {
      var _that = this
      _that.memoDrawer = true;
      // console.log(row);
      _that.$nextTick(function() {
        // console.log(_that.$refs.orderMemo);
        _that.$refs.orderMessage.idOrder = row.idOrder
        _that.$refs.orderMessage.getList()
      })
    },
    openDetail(row) {
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = row.idOrder
        _that.$refs.orderDetail.getInfo()
      })
    },
    handleDetail(id) {
      const _that = this;
      _that.$refs.printbillDetail.idOrder = id;
      _that.$refs.printbillDetail.printVisible = true;
      _that.$refs.printbillDetail.getDetail()
    },
    backRecordBtn() {
      const _that = this;
      var reqItemList = [];

      _that.dataArray.forEach(arrayItem => {
        var items = {
          idOrderPart: "",
          feedbackContent: ""
        };
        if (arrayItem.orderCutKind == 1) {
          items.feedbackContent = "不切成品"
        } else if (arrayItem.orderCutKind == 2) {
          items.feedbackContent = "后工外协"
        } else if (arrayItem.orderCutKind == 3) {
          items.feedbackContent = "后工外协"
        } else if (arrayItem.orderCutKind == 4) {
          items.feedbackContent = "切成品"
        } else if (arrayItem.orderCutKind == 5) {
          items.feedbackContent = "订单作废"
        }
        items.idOrderPart = arrayItem.idOrderPart;
        reqItemList.push(items);

      })
      console.log("888888", reqItemList);
      var reqItemListInfo = JSON.stringify(reqItemList)

      var parms = {
        "reqItemList": reqItemListInfo
      }
      semiFeedback(parms).then(response => {
        _that.getTableInfo();
        _that.$message("反馈成功");
        _that.dialogVisible = false;
        // //  组合表单数据
      }).catch(err => {
        _that.$message.error(err);
        _that.dialogVisible = false;
      })
    },
    selectOrderCutKind() {
      const _that = this;
    },
    handlePrint(){
      const _that = this;
      _that.idOrdersArray = [];
      for (let i = 0; i < _that.dataArray.length; i++) {
        var datas = _that.dataArray[i];
        _that.idOrdersArray.push(datas.idOrder)
      }
      var idOrders = _that.unique(_that.idOrdersArray)
      var data = {
        'idOrders': idOrders.toString()
      }
      // console.log(data);
      semiOutassistInfoDoPrint(data).then(response => {
        var PrintData = {
          '_rootData': response.data
        }
        // console.log(PrintData);
        var data = {
          PrintTemplate: 'orderOutAssistBill.fr3',
          NeedPreview: 1,
          PrintData: JSON.stringify(PrintData)
        }
        // 以后打印调这个通用接口
        doLocalPrint(data)
      }).catch(err => {
        _that.listLoading = false
      })

    },
    unique(arr){
      const _that = this;
      for(var i=0; i<arr.length; i++){
        for(var j=i+1; j<arr.length; j++){
          if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
            arr.splice(j,1);
            j--;
          }
        }
      }
      return arr
    },
    handleBatch() {
      const _that = this;
      _that.dataArray = [];
      _that.idsArray = [];
      // console.log(_that.tableData);
      _that.tableData.forEach(arrayItem => {
        for (let i = 0; i < arrayItem.semiPartList.length; i++) {
          var datas = arrayItem.semiPartList[i];
          if (datas.checks == true) {
            _that.dataArray.push(datas);
            _that.idsArray.push(datas.idOrderPart);
          }
        }
      })
      // console.log(_that.idsArray.toString());
      if (_that.dataArray.length <= 0) {
        _that.$message("请勾选要反馈的施工单");
        return
      }
      var parms = {
        idOrderParts: _that.idsArray.toString()
      }
      getSemiOutassistInfoByPart(parms).then(response => {
        // console.log("2", response.data)
        const data = response.data;
        _that.dataArray.forEach(arrayItem => {
          for (let i = 0; i < response.data.length; i++) {
            var datas = response.data[i];
            if (arrayItem.idOrderPart == datas.idOrderPart) {
              _that.$set(arrayItem, 'orderOutassistInfo', datas.orderOutassistInfo);
            }
          }
        })
        _that.dialogVisible = true;
        // console.log("212121", _that.dataArray);
        // //  组合表单数据
      }).catch(err => {
        _that.$message.error(err);
      })

    },

    toselect(row) {
      console.log(row);
      const _that = this;
      if (row.checks) {
        if (row.semiPartList != undefined) {
          row.semiPartList.forEach(arrayItem => {
            // console.log("arrayItem",arrayItem);
            _that.$set(arrayItem, 'checks', true);
          })
        }
      } else {
        if (row.semiPartList != undefined) {
          row.semiPartList.forEach(arrayItem => {
            // console.log("arrayItem",arrayItem);
            _that.$set(arrayItem, 'checks', false);
          })
        }
      }
    },
    checkboxT(row, index) {
      if (row.isChecked) {
        return false;
      } else {
        return true;
      }
    },
    handleSelectionChange(val) {
      // console.log(val);
      const _that = this;
      _that.multipleSelection = val;
      if (_that.multipleSelection.length > 0) {
        for (let i = 0; i < _that.multipleSelection.length; i++) {
          var datas = _that.multipleSelection[i];
          _that.$set(datas, 'checks', true);
          if (datas.semiPartList.length > 0) {
            datas.semiPartList.forEach(arrayItem => {
              // console.log("arrayItem",arrayItem);
              _that.$set(arrayItem, 'checks', true);
            })
          }


        }
      } else {
        for (let i = 0; i < _that.tableData.length; i++) {
          var datas = _that.tableData[i];
          _that.$set(datas, 'checks', false);
          if (datas.semiPartList.length > 0) {
            datas.semiPartList.forEach(arrayItem => {
              // console.log("arrayItem",arrayItem);
              _that.$set(arrayItem, 'checks', false);
            })
          }
        }
      }
    },

    //获取列表
    getTableInfo() {
      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),
        "page": JSON.stringify(page),
      }
      // console.log(data);
      querySemiPrintBillFeedback(data).then(response => {
        // console.log("getPageInfo",response)
        const data = response.data;
        _that.tableData = data;
        _that.tableData.forEach(arrayItem => {
          _that.$set(arrayItem, 'checks', false);
          for (let i = 0; i < arrayItem.semiPartList.length; i++) {
            var datas = arrayItem.semiPartList[i];
            _that.$set(datas, 'checks', false);
          }
        })
        _that.listData.total = response.total;
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err);
        _that.listLoading = false
      })
    },
    searchData() {
      this.listData.page = 1;
      this.getTableInfo()
    },
    tableRefresh() {
      this.listData.page = 1;
      this.getTableInfo()
    },
    getKey() {
      // console.log((Math.random() * 2 + 1).toFixed(2));
      return (Math.random() * 2 + 1).toFixed(2)
    }
  }
}
</script>
<style>
/*.el-drawer__container .el-drawer__open{*/
/*  height: 400px !important;*/
/*}*/
/*.el-drawer__wrapper{*/
/*  height: 400px !important;*/
/*  position: fixed !important;*/
/*  bottom: 0px !important;*/
/*}*/
/*.el-drawer__container{*/
/*  height: 400px !important;*/
/*  position: fixed !important;*/
/*  bottom: 0px !important;*/
/*}*/
</style>

<style lang="scss" scoped>
::v-deep .el-table__fixed {

  bottom: 15px !important;

}
.checkBox-style {
  margin-left: 20px;
}

.process-tit {
  font-size: 14px;
}

.span-header {
  display: block;
  float: left;
  text-align: left;
  height: 24px;
  line-height: 24px;
  color: #7c7c7c;
  font-size: 13px;
}

.span-tit {
  display: block;
  float: left;
  text-align: left;
  height: 24px;
  line-height: 24px;
  color: #3c3c3c;
  font-size: 13px;
}

.semiPart-con {
  color: #3c3c3c;
  margin-top: 15px;
}

.machineInfList {
}

.elTble {
  height: auto !important;

  ::v-deep .el-table__body-wrapper {
    overflow-x: auto;
    max-height: 310px !important;
    overflow-y: auto !important;
  }
}

aside {
  background: #eef1f6;
  padding: 18px 24px;
  margin-bottom: 20px;
  border-radius: 2px;
  display: block;
  line-height: 32px;
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  color: #2c3e50;
  -webkit-font-smoothing: antialiased;
}

.filter-container {
  margin-bottom: 15px;
}

.text-task {
  font-size: 14px;
  text-align: center;
  color: #7c7c7c;
  margin-left: 15px;
}
</style>

