<template>
  <div class="orderSchedule">
    <el-row :gutter="20">
      <el-col :span="5" style="overflow-y: scroll">
        <el-timeline class="line">
          <el-timeline-item
            v-for="(item,index) in lineList"
            :key="index"
            size="large"
            :color="index == indexNode? '#54a790':''"
            placement="top">
            <el-card style="cursor: pointer;width: 80%" :class="{boxActive:index == indexNode}" @click.native="changeActive(item,index)">
              <h4>{{ item.nodeName }}</h4>
              <p>{{ item.breedCount }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-col>
      <el-col :span="19">
        <div class="filter-container" style="margin-bottom: 15px">
<!--          <el-input-->
<!--            v-model="search.keyWord"-->
<!--            placeholder="关键字"-->
<!--            style="width: 200px;"-->
<!--            class="filter-item"-->
<!--            @keyup.enter.native="handleFilter"/>-->

<!--          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">-->
<!--            搜索-->
<!--          </el-button>-->
        </div>
        <el-table
          size="mini"
          :data="tableData"
          v-loading="listLoading"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          border
          default-expand-all>
          <el-table-column
            label="#"
            align="center"
            type="index"
            :index="indexMethod">
          </el-table-column>
          <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
            <template slot-scope="{row}">

              <el-button icon="el-icon-view" @click="handleDetail(row.idPrintBill)" type="success" title="查看详情" size="mini">
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
          prop="companyName"
          label="分厂名称">
        </el-table-column>
          <el-table-column
            width="110"
            prop="printBillCode"
            label="施工单号">
          </el-table-column>
          <el-table-column
            width="150px"
            prop="breedName"
            label="版名称">
          </el-table-column>
          <el-table-column
            width="150"
            prop="breedTypeName"
            label="版类型">
          </el-table-column>
          <el-table-column
            width="150"
            prop="wholePaperSize"
            label="大纸尺寸">
          </el-table-column>
          <el-table-column
            width="150"
            prop="paperName"
            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="printCount"
            label="版正印量">
          </el-table-column>
          <el-table-column
            prop="wholePaperCount"
            label="大纸张数">
          </el-table-column>
          <el-table-column
            prop="actualPaperName"
            label="实际纸张名称">
          </el-table-column>
          <el-table-column
            prop="machineName"
            label="机台名称">
          </el-table-column>
          <el-table-column
            prop="colorCount"
            label="印刷色数">
          </el-table-column>


          <el-table-column
            prop="breedStatusStr"
            label="版状态描述">
          </el-table-column>


        </el-table>
        <pagination v-show="listData.total>0" :total="listData.total" :page.sync="listData.page" :limit.sync="listData.pageSize" @pagination="getList" />

      </el-col>
    </el-row>
    <el-drawer
      title="订单脚印"
      :reverse="true"
      :visible.sync="drawer"
      :with-header="false">
      <el-timeline style="width: 90%;margin-top: 20px">
        <el-timeline-item v-for="step in stepList" :timestamp="timeString ? (step.workTime).substring(0,19):step.workMan+'  '+(step.workTime).substring(0,19)" placement="top" >
          <el-card class="stepList">
            <h4 style="margin: 5px 0">{{step.workMemo}}</h4>
            <p>{{step.workExplain}}</p>
          </el-card>
        </el-timeline-item>

      </el-timeline>
    </el-drawer>
    <el-drawer
      title="订单消息"
      :reverse="true"
      :visible.sync="memoDrawer"
      size="600px">
      <order-message ref="orderMessage"></order-message>
    </el-drawer>
    <printbill-detail ref="printbillDetail"></printbill-detail>
  </div>
</template>

<script>
import { getPrintBreedStatistics, getPrintBreedListByStatistics } from '@/api/printbill/printbillSchedule'
import {
  getOrderStepList
} from '@/api/order/orderList.js'
import OrderMessage from '@/components/orderMessage/orderMessage'
import PrintbillDetail from "@/components/printbillDetail/printbillDetail"
export default {
  components: {
    OrderMessage, PrintbillDetail
  },
  data() {
    return {
      indexNode: null,
      indexNodeId: null,
      indexNodeValue:null,
      lineList: [],
      detailVisible: false,
      drawer: false,
      timeString: '',
      memoDrawer: false,
      // 表格信息
      tableData: [],

      listLoading: false,
      listData: {
        total: 0,
        page: 1,
        pageSize: 20
      },
      stepList: []
    }
  },
  created() {
    this.getStatistics()
  },
  methods: {
    // 序号
    indexMethod(index) {
      return index + 1;
    },
    changeActive(item,index) {
      this.indexNode = index
      this.indexNodeId = item.nodeId
      this.indexNodeValue = item.nodeValue
      this.getList()
    },
    // 获取节点
    getStatistics() {
      const _that = this;
      var data = {
        'params': ''
      }
      getPrintBreedStatistics(data).then(response => {
        console.log(response)
        const data = response.data
        _that.lineList = data
        // _that.tableData = data
        // _that.listData.total = response.total
        // // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },
    // 获取列表
    getList() {
      const _that = this
      _that.listLoading = true
      // if (_that.searchTime == null || _that.searchTime < 0) {
      //   _that.searchForm.beginTime = ''
      //   _that.searchForm.endTime = ''
      // } else {
      //   _that.searchForm.beginTime = _that.searchTime[0]
      //   _that.searchForm.endTime = _that.searchTime[1]
      // }
      // if (_that.search.keyWord != '') {
      //   if (_that.searchTime == null || _that.searchTime < 0) {
      //     _that.$message.error('请选择时间')
      //     return
      //   }
      // }
      var params
      if (_that.queryType == 1) {
        params = _that.search
      } else {
        params = _that.searchForm
      }
      var orderBy = _that.orderByString
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        'params': JSON.stringify(params),
        'orderBy': orderBy,
        'nodeId': _that.indexNodeId,
        'nodeValue': _that.indexNodeValue,
        'page': JSON.stringify(page)
      }
      console.log(data)
      // return;
      getPrintBreedListByStatistics(data).then(response => {
        console.log(response)
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },
    // 获取脚印
    getOrderStep(row) {
      const _that = this
      _that.drawer = true
      var data = {
        idOrder: row.id
      }
      // console.log(data);
      getOrderStepList(data).then(response => {
        console.log(response)
        const data = response.data
        _that.stepList = data
      }).catch(err => {
        _that.$message.error(err)
      })
    },

    handleDetail(id) {
      const _that = this;
      _that.$refs.printbillDetail.idOrder = id;
      _that.$refs.printbillDetail.printVisible = true;
      _that.$refs.printbillDetail.getDetail()
    },
    // 订单消息
    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()
      })
    },
    // 排序
    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.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.orderSchedule{
  margin-top: 20px;
  .line{
    ::v-deep .el-card__body{
      padding: 0 20px;
      height: 50px;
      h4{
        margin: 10px 0;
      }
    }
  }
}
.boxActive{
  border-color: rgb(84, 167, 144);
}
.line{
  height: 800px;
  overflow: scroll;
}
</style>
