<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input :size="sizeType" v-model="search.keyWord" placeholder="关键字" style="width: 200px;" class="filter-item"/>
      <el-date-picker
        v-model="search.createTime"
        size="mini"
        type="daterange"
        range-separator="-"
        start-placeholder="制单时间"
        end-placeholder="制单时间"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-input :size="sizeType" v-model="search.productName" placeholder="产品类型" style="width: 200px;" class="filter-item"/>
      <el-select size="mini" v-model="search.printedFlag" placeholder="印刷状态">
        <el-option
          :value="-1"
          label="全部"></el-option>
        <el-option
          :value="1"
          label="已印刷"></el-option>
        <el-option
          :value="2"
          label="未印刷"></el-option>
      </el-select>
      <el-select size="mini" v-model="search.stockFlag" placeholder="入库状态">
        <el-option
          :value="-1"
          label="全部"></el-option>
        <el-option
          :value="1"
          label="已入库"></el-option>
        <el-option
          :value="2"
          label="未入库"></el-option>
      </el-select>
      <el-date-picker
        v-model="search.deliverDate"
        size="mini"
        type="daterange"
        range-separator="-"
        start-placeholder="发货日期"
        end-placeholder="发货日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd">
      </el-date-picker>
      <el-input :size="sizeType" v-model="search.sendKind" placeholder="发货方式" style="width: 200px;" class="filter-item"/>
      <el-button :size="sizeType" class="filter-item" type="primary" icon="el-icon-search" @click="searchData">
        搜索
      </el-button>
      <el-button size="mini" type="warning" @click="exportBtn">导出</el-button>
      <div class="top-right-btn">
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button size="mini" circle icon="el-icon-refresh" @click="getList"/>
        </el-tooltip>
      </div>
      <div style="margin-top: 10px">
        <el-tag icon="el-icon-time" style="cursor: pointer" type="danger" @click="searchData(10)">交货超期共{{collection.outTimeCount}}条</el-tag>
        <el-tag icon="el-icon-time" style="cursor: pointer" type="primary" @click="searchData(2)">两小时内将超期共{{collection.withinTwoHoursCount}}条</el-tag>
        <el-tag icon="el-icon-time" style="cursor: pointer" type="warning" @click="searchData(8)">八小时内将超期共{{collection.withinEightHoursCount}}条</el-tag>
        <el-tag icon="el-icon-time" style="cursor: pointer" type="success" @click="searchData(0)">正常未达到预警状态共{{collection.normalCount}}条</el-tag>
<!--        <el-tag icon="el-icon-time" type="info">已发货共{{}}条</el-tag>-->
      </div>
    </div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      row-key="id"
      stripe
      border
      :size="sizeType"
      style="margin-top: 10px"
      @selection-change="handleSelectionChange"
      default-expand-all>
<!--      <el-table-column-->
<!--        type="selection"-->
<!--        fixed="left"-->
<!--        width="55">-->
<!--      </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 defaultItem">
        <el-table-column
          header-align="center"
          v-if="column.id == 4"
                          :prop="column.field"
                          :label="column.name"
                          :width="column.width"
                          show-overflow-tooltip>
          <template slot-scope="{row}">
            <a href="javascript:;" style="color: #20a0ff" @click="getOrderStep(row)">{{ row[column.field] }}</a>
            <el-image v-if="row.firstOrderFlag == 1" :src="new_badge"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="column.id == 5"
          :prop="column.field"
          :label="column.name"
          :width="column.width"
          show-overflow-tooltip>
          <template slot-scope="{row}">
            <a href="javascript:;" style="color: #20a0ff" @click="openDetail(row)">{{ row[column.field] }}</a>
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="column.id == 1"
          :prop="column.field"
          :label="column.name"
          :width="column.width"
          show-overflow-tooltip>
          <template slot-scope="{row}">
            <i @click="openEditDeliverDate(row)" style="color: #20a0ff;cursor: pointer" title="修改交货日期" class="el-icon-date"></i>&nbsp;&nbsp;
            {{ row[column.field] }}
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="column.id == 12"
          :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"
              style="background: #9876aa !important;color: #fff !important"
              v-else-if="row[column.field] == '已印刷'"
              type="Success">{{ 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" type="warning" 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 == 3"
          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
          header-align="center"
          :prop="column.field"
          :label="column.name"
          :width="column.width"
          show-overflow-tooltip>
        </el-table-column>
      </template>
    </el-table>
    <pagination
v-show="listData.total>0"
:total="listData.total"
:page.sync="listData.page"
                :limit.sync="listData.pageSize"
@pagination="getList"/>

    <el-drawer
      title="订单消息"
      :reverse="true"
      :visible.sync="memoDrawer"
      size="600px">
      <order-message ref="orderMessage" @addMessageHandle="addMessageHandle"></order-message>
    </el-drawer>
    <cancledialog @tableRefresh="tableRefresh" ref="confirmDialog"></cancledialog>
    <order-step ref="orderStep"></order-step>
    <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>
    <el-dialog title="修改交货日期" :visible.sync="editDeliverDateDialog" width="400px">
      <el-form>
        <el-form-item label="交货日期">
          <el-date-picker
            v-model="deliverDate"
            type="datetime"
            value-format='yyyy-MM-dd HH:mm:ss'
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
            style="margin-top: 5px">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDeliverDateDialog = false">取 消</el-button>
        <el-button type="primary" :disabled="clickLoading" @click="editDeliverDate()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { getOrderList, backPrintOrder, checkCompleteDispatchOrder, documentCommitOrder } from '@/api/order/tobeReviewed'
import orderMessage from '@/components/orderMessage/orderMessage'
import plupload from '@/components/plupload/plupload.vue'
import Cancledialog from '@/components/Dialog/Cancledialog.vue'
import { getConfigInfo } from '@/api/system/config'
import OrderStep from '@/components/orderStep/orderStep'
import { execInquireResult } from '@/api/invoice/sendWarning'
import OrderDetail from "@/components/orderDetail/orderDetail"
import new_badge from '@/assets/new_badge.gif';
import {updateOrderDeliverDate} from "@/api/order/tobeAssembled";

const defaultItems = [
  {
    name: '到期预警', id: 1, field: 'outTimeWarning', width: '200'
  },
  {
    name: '产品类型', id: 2, field: 'productName', width: '130px'
  },
  {
    name: '订单消息', id: 3, field: 'orderMessage', width: '170'
  },
  {
    name: '订单编号', id: 4, field: 'orderCode', width: '125px'
  },
  {
    name: '印品名称', id: 5, field: 'orderName', width: '190px'
  },
  {
    name: '客户名称', id: 6, field: 'clientName', width: '120'
  },
  {
    name: '制单时间', id: 7, field: 'createTime', width: '120'
  },
  {
    name: '制单人', id: 8, field: 'createMan', width: '75'
  },
  {
    name: '物流名称', id: 9, field: 'logisticName', width: ''
  },
  {
    name: '订单印量', id: 10, field: 'orderQty', width: '120'
  },
  {
    name: '订单备注', id: 11, field: 'orderMemo', width: '120'
  },
  {
    name: '订单状态', id: 12, field: 'stateMemo', width: ''
  },
  {
    name: '发货方式', id: 13, field: 'sendKind', width: ''
  },
  {
    name: '付款方式', id: 14, field: 'payKind', width: '100'
  },
  {
    name: '施工单号', id: 15, field: 'printBillCode', width: '100'
  },
  {
    name: '组版人', id: 16, field: 'composeplateMan', width: '100'
  }, {
    name: '组版时间', id: 17, field: 'composeplateTime', width: '120'
  }, {
    name: '制版人', id: 18, field: 'psmakedMan', width: '120'
  },
  {
    name: '制版时间', id: 19, field: 'psmakedTime', width: '120'
  },
  {
    name: '切白料人', id: 20, field: 'croppaperMan', width: ''
  },
  {
    name: '切白料时间', id: 21, field: 'croppaperTime', width: '120'
  },
  {
    name: '印刷人', id: 22, field: 'printedMan', width: ''
  },
  {
    name: '印刷时间', id: 23, field: 'printedTime', width: '120'
  },
  {
    name: '成品裁切人', id: 24, field: 'preparedMan', width: ''
  },
  {
    name: '成品裁切时间', id: 25, field: 'preparedTime', width: '120'
  },
  {
    name: '外协人', id: 26, field: 'outAssistWaitMan', width: ''
  },
  {
    name: '外协时间', id: 27, field: 'outAssistWaitTime', width: ''
  },
  {
    name: '入库人', id: 28, field: 'inStockMan', width: ''
  },
  {
    name: '入库时间', id: 29, field: 'inStockDate', width: '120'
  },
  {
    name: '客户交货时间', id: 30, field: 'deliverDate', width: '120'
  }
]
export default {
  name: 'sendWarning',
  components: {
    OrderDetail,
    OrderStep,
    orderMessage, plupload, Cancledialog
  },
  data() {
    return {
      clickLoading: false, // 双击等待
      // 交货日期
      deliverDate: '',
      currentIdOrder:"",
      editDeliverDateDialog: false,
      sizeType: 'mini',
      pluploadVisible: false,
      memoDrawer: false,
      detailVisible: false,
      defaultItem: Object.assign([], defaultItems), // 默认列
      orderStatus: '',
      search: {
        keyWord: '',
        createTime: [],
        conditionValue: 10,
        productName: '',
        printedFlag: '',
        stockFlag: '',
        deliverDate: [],
        sendKind: ''
      },

      tableData: [],

      listLoading: false,
      listData: {
        total: 0,
        page: 1,
        pageSize: 20
      },
      voidVisible: false,
      sMemo: '',
      versionCode: '',
      orderId: '',

      // 上传文件
      showUpload: true,
      files: [],
      upIdOrder: '',
      upOrderCode: '',
      confirmdialog: false,
      commitVisible: false,
      commitInfo: {
        chooseInfo: {},
        needImageProcess: 1,
        infoList: []
      },
      collection: {},
      new_badge: new_badge
    }
  },
  watch: {
    // memoDrawer(val) {
    //   // console.log(val)
    //   if (!val) {
    //     this.getList()
    //   }
    // }
  },
  created() {
    this.getList()
  },
  methods: {
    editDeliverDate() {
      const _that = this
      _that.editDeliverDateDialog = true
      _that.clickLoading = true
      var data = {
        'id': _that.currentIdOrder,
        'deliverDate': _that.deliverDate
      }
      updateOrderDeliverDate(data).then(res => {
        console.log(res)

        if (res.httpCode == 200) {
          _that.clickLoading = false
          _that.$message({
            message: '修改成功',
            type: 'success'
          })
          _that.editDeliverDateDialog = false
          _that.tableRefresh()
        }
      }).catch(err => {

        _that.clickLoading = false
      })
    },
    openEditDeliverDate(row){
      this.editDeliverDateDialog = true
      this.currentIdOrder = row.id
      this.deliverDate = row.deliverDate
    },
    getList() {
      var _that = this;
      _that.listLoading = true;
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        'conditionList': JSON.stringify([{
          'conditionField': 'outTimeHours',
          'conditionValue': _that.search.conditionValue
        },
        {
          'conditionField': 'keyword',
          'conditionValue': _that.search.keyWord
        },
        { 'conditionField': 'createTime', 'conditionValue': _that.search.createTime },
        { 'conditionField': 'productName', 'conditionValue': _that.search.productName },
        { 'conditionField': 'printedFlag', 'conditionValue': _that.search.printedFlag },
        { 'conditionField': 'stockFlag', 'conditionValue': _that.search.stockFlag },
        { 'conditionField': 'deliverDate', 'conditionValue': _that.search.deliverDate },
        { 'conditionField': 'sendKind', 'conditionValue': _that.search.sendKind }
        ]),
        'idInquire': 14,
        'exportFlag': 0,
        // 'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      if (_that.listData.pageSize == 10) {
        _that.sizeType = 'medium'
      } else {
        _that.sizeType = 'mini'
      }
      // console.log(data);
      // return;
      execInquireResult(data).then(response => {
        const data = response.data
        // //  组合表单数据
        _that.tableData = data
        _that.listData.total = response.total
        _that.collection = response.collection
        // console.log(_that.tableData)
        _that.listLoading = false
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },
    // 搜索
    searchData(conditionValue = 10) {
      this.listData.page = 1
      this.search.conditionValue = conditionValue
      this.getList()
    },
    addMessageHandle(data) {
      const _that = this
      _that.tableData.forEach(item => {
        if (item.id == data.idBill) {
          item.orderMessage = data.messageStr
        }
      })
    },

    exportBtn(){
      var _that = this
      var page = {
        pageIndex: _that.listData.page,
        pageSize: _that.listData.pageSize
      }
      var data = {
        'conditionList': JSON.stringify([{
          'conditionField': 'outTimeHours',
          'conditionValue': _that.search.conditionValue
        },
          {
            'conditionField': 'keyword',
            'conditionValue': _that.search.keyWord
          },
          { 'conditionField': 'createTime', 'conditionValue': _that.search.createTime },
          { 'conditionField': 'productName', 'conditionValue': _that.search.productName },
          { 'conditionField': 'printedFlag', 'conditionValue': _that.search.printedFlag },
          { 'conditionField': 'stockFlag', 'conditionValue': _that.search.stockFlag },
          { 'conditionField': 'deliverDate', 'conditionValue': _that.search.deliverDate },
          { 'conditionField': 'sendKind', 'conditionValue': _that.search.sendKind }
        ]),
        'idInquire': 14,
        'exportFlag': 1,
        // 'params': JSON.stringify(params),
        'page': JSON.stringify(page)
      }
      if (_that.listData.pageSize == 10) {
        _that.sizeType = 'medium'
      } else {
        _that.sizeType = 'mini'
      }
      // console.log(data);
      // return;
      execInquireResult(data).then(response => {
        if(response.httpCode == 200) {
          _that.$message.success('导出成功，请前至系统管理-我的任务中进行查看和下载')
        }
      }).catch(err => {
        _that.$message.error(err)
        _that.listLoading = false
      })
    },
    handleSelectionChange(val) {
      console.log(val)
    },
    // 获取脚印
    getOrderStep(row) {
      const _that = this
      _that.$refs.orderStep.idOrder = row.id
      _that.$refs.orderStep.getOrderStep()
    },
    // 订单详情
    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()
      })
    },
    // 刷新变革
    tableRefresh() {
      // 刷新变革
      this.getList()
    },

  }
}
</script>
<style>
/*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
.el-drawer__body {
  overflow: auto;
}
.stepList .el-card__body{
  padding: 10px;
}
:focus{
  outline:0;
}
</style>

<style scoped>
.filter-container {
  margin-bottom: 15px;
}
</style>
