<template>
  <div class="orderSchedule">
    <el-row :gutter="20">
      <el-col :span="5">
        <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.orderCount }}</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
          :data="tableData"
          v-loading="listLoading"
          row-key="id"
          border
          stripe
          style="margin-top: 10px"
          size="mini"
          @sort-change="changeSort"
          default-expand-all>
          <el-table-column  fixed label="操作" align="left" width="75px" class-name="small-padding fixed-width">
            <template slot-scope="{row}">
              <!--            <el-button size="mini" @click="test()">测试数据</el-button>-->
              <el-button
                title="查看"
                @click="openDetail(row)"
                type="primary"
                icon="el-icon-view"
                size="mini">
              </el-button>
<!--              <el-button title="编辑发货通知" @click="openNotices(row)" type="green" icon="el-icon-location-information" size="mini">-->
<!--              </el-button>-->
<!--              <el-button-->
<!--                v-if="row.orderState == 0 || row.orderState == 1"-->
<!--                type="warning"-->
<!--                size="mini"-->
<!--                icon="el-icon-upload"-->
<!--                @click="openFileDialog(row)"-->
<!--                title="上传文件"></el-button>-->
<!--              <el-button type="danger" v-if="row.orderState == 0 || row.orderState == 1" size="mini" icon="el-icon-delete" @click="voidOrderbtn(row)" title="回收站"></el-button>-->
              <!--            <el-button type="green" size="mini" @click="getOrderStep(row)" class="iconfont" title="查看脚印">&#xe6ba</el-button>-->
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            fixed
            align="center"
            width="50"
            type="index">
            <template slot-scope="scope">
              <span>{{(listData.page - 1) *listData.pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <template v-for="column in columnnames">
            <el-table-column
              v-if="column.id == 3"
              :prop="column.field"
              :label="column.name"
              :width="column.width"
              sortable="custom"
              fixed
              show-overflow-tooltip>
              <template slot-scope="{row}">
                <a href="javascript:;" style="color: #20a0ff" @click="getOrderStep(row)">{{row[column.field]}}</a>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="column.id == 2"
              :prop="column.field"
              :label="column.name"
              :width="column.width"
              sortable="custom"
              align="left"
              show-overflow-tooltip>
              <template slot-scope="{row}">
                <el-tag size="mini" v-if="row[column.field] == '待编辑'" type="info">{{ row[column.field] }}</el-tag>
                <el-tag size="mini" v-else-if="row[column.field] == '待审核'" type="success">{{ row[column.field] }}</el-tag>
                <el-tag size="mini" v-else-if="row[column.field] == '待组版'">{{ row[column.field] }}</el-tag>
                <el-tag size="mini" v-else-if="row[column.field] == '已组版'" type="danger">{{ row[column.field] }}</el-tag>
                <el-tag size="mini" v-else-if="row[column.field] == '生产中'" type="danger">{{ row[column.field] }}</el-tag>
                <el-tag size="mini" v-else-if="row[column.field] == '待入库'" type="green">{{ row[column.field] }}</el-tag>
                <el-tag size="mini" v-else-if="row[column.field] == '待发货'" >{{ row[column.field] }}</el-tag>
                <el-tag size="mini" v-else-if="row[column.field] == '已发货'" type="info">{{ row[column.field] }}</el-tag>
                <el-tag size="mini" v-else-if="row[column.field] == '文件待处理'" type="warning">{{ row[column.field] }}</el-tag>
                <el-button size="mini" class="button-new-tag" v-else>{{ row[column.field] }}</el-button>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="column.id == 6"
              header-align="center"
              :prop="column.field"
              :label="column.name"
              show-overflow-tooltip
              :width="column.width">
              <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
              v-else-if="column.id == 11"
              header-align="center"
              :prop="column.field"
              :label="column.name"
              :width="column.width"
              show-overflow-tooltip
            >
              <template slot-scope="{row}">
                <el-link :href="row.originFileLink" target="_blank" style="color: #20a0ff">{{row[column.field]}}</el-link>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="column.id == 12"
              header-align="center"
              :prop="column.field"
              :label="column.name"
              :width="column.width"
              sortable="custom"
            >
              <template slot-scope="{row}">
            <span v-if="row.createTime">{{row.createTime | getTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-else-if="column.id == 1 || column.id == 8|| column.id == 10"
              :prop="column.field"
              :label="column.name"
              :width="column.width"
              sortable="custom"
              show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              v-else
              :prop="column.field"
              :label="column.name"
              :width="column.width"
              show-overflow-tooltip>
            </el-table-column>
          </template>

        </el-table>
        <!--      <span>总计：</span>-->
        <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>
    <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>
  </div>
</template>

<script>
import { getPrintOrderStatistics, getPrintOrderListByStatistics } from '@/api/order/orderSchedule'
import {
  getOrderStepList
} from '@/api/order/orderList.js'
import OrderMessage from '@/components/orderMessage/orderMessage'
import OrderDetail from '@/components/orderDetail/orderDetail'
const defaultItems = [
  {
    name: '订单编号', id: 3, field: 'orderCode', width: '125px'
  },
  {
    name: '产品类型', id: 1, field: 'productName', width: '130px'
  },
  {
    name: '印品名称', id: 10, field: 'orderName', width: '190px'
  },
  {
    name: '制单时间', id: 12, field: 'createTime', width: '160'
  },
  {
    name: '订单状态', id: 2, field: 'stateMemo', width: '110'
  },
  // {
  //   name: '应收单号', id: 4, field: 'financeCode', width: '125px'
  // },
  {
    name: '施工单号', id: 5, field: 'printBillCode', width: '125px'
  }, {
    name: '订单消息', id: 6, field: 'orderMessage', width: '170'
  }, {
    name: '客户编码', id: 7, field: 'clientCode', width: '100'
  }, {
    name: '客户名称', id: 8, field: 'clientName', width: '120'
  },
  // {
  // name: '客户级别', id: 9, field: 'clientLevel', width: ''
  // },
  {
    name: '文件描述', id: 11, field: 'fileDescription', width: '190px'
  }, {
    name: '制单人', id: 13, field: 'createMan', width: '75'
  },
  {
    name: '订单印量', id: 14, field: 'orderQty', width: '120'
  },
  // {
  //   name: '成品规格', id: 15, field: 'productSize', width: '125px '
  // },
  {
    name: '定金', id: 16, field: 'orderMoneyPre', width: '100'
  }, {
    name: '总金额', id: 17, field: 'orderMoneyTotal', width: '120'
  }, {
    name: '已收金额', id: 18, field: 'payMoney', width: '120'
  },
  // {
  //   name: '提成比例', id: 19, field: '', width: ''
  // },
  {
    name: '平台单号', id: 20, field: 'platformOrderID', width: '220px'
  }
  // {
  //   name: '订单类型', id: 21, field: 'orderKind', width: ''
  // }
]
export default {
  components: {
    OrderMessage, OrderDetail
  },
  data() {
    return {
      indexNode: null,
      indexNodeId: null,
      lineList: [],
      detailVisible: false,
      drawer: false,
      timeString: '',
      memoDrawer: false,
      columnnames: Object.assign([], defaultItems), // 选中的列名
      // 表格信息
      tableData: [],

      listLoading: false,
      listData: {
        total: 0,
        page: 1,
        pageSize: 20
      },
      stepList: []
    }
  },
  created() {
    this.getStatistics()
  },
  methods: {
    changeActive(item,index) {
      this.indexNode = index
      this.indexNodeId = item.nodeId
      this.getList()
    },
    // 获取节点
    getStatistics() {
      const _that = this;
      var data = {
        'params': ''
      }
      getPrintOrderStatistics(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,
        'page': JSON.stringify(page)
      }
      console.log(data)
      // return;
      getPrintOrderListByStatistics(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)
      })
    },
    openDetail(row) {
      var _that = this
      _that.detailVisible = true
      _that.$nextTick(() => {
        _that.$refs.orderDetail.idOrder = row.id
        _that.$refs.orderDetail.getInfo()
      })
    },
    // 订单消息
    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-y: scroll;
}
</style>
