<template>
  <template-page
    ref="pageRef"
    :get-list="getList"
    :export-list="exportList"
    :operation="operation()"
    :options-evens-group="optionsEvensGroup"
    :column-parsing="columnParsing"
    :default-search-data="searchData"
    :replace-or-not-map="false"
  >
    <el-dialog title="物流信息" :visible.sync="visible" width="60%" :close-on-click-modal="false" @close="onClose">
      <el-timeline v-if="logisticsDetail.length" class="logistics" :reverse="false">
        <el-timeline-item
          v-for="(item, index) in logisticsDetail"
          :key="index"
          placement="top"
          type="success"
          :timestamp="item.time"
        >
          <el-row :gutter="20">
            <el-col class="logistics-title"> {{ item.status }} </el-col>
            <el-col>
              <div class="flex">
                <div>{{ item.context }}</div>
                <!-- <div>{{ item.createTime }}</div> -->
              </div>
            </el-col>
          </el-row>
        </el-timeline-item>
      </el-timeline>
      <div v-else class="tip">暂无物流信息</div>
    </el-dialog>
  </template-page>
</template>

<script>
import TemplatePage from '@/components/template/template-page-1.vue'
import import_mixin from '@/components/template/import_mixin.js'
import add_callback_mixin from '@/components/template/add_callback_mixin.js'
import Popu from '@/components/template/popu.vue'
import {
  getPickupList,
  getPickupManList,
  getListOrderTrack,
  getPickupListV2,
  exportPickupListV2
} from '@/api/supply/pickup'
import { getLogisticsList } from '@/api/basic_data/logistics'
import { getWarehouseList } from '@/api/supply/engin'
export default {
  components: { TemplatePage, Popu },
  mixins: [import_mixin, add_callback_mixin],
  data() {
    return {
      visible: false,
      // 事件组合
      optionsEvensGroup: [],
      // 表格属性
      tableAttributes: {
        // 启用勾选列
        selectColumn: true
      }, // 关闭新增弹窗

      // 表格事件
      tableEvents: {
        'selection-change': this.selectionChange
      },
      recordSelected: [],
      currentPage: 1, // 当前页码
      pageSize: 10, // 每页数量
      listTotal: 0, // 列表总数
      dataList: null, // 列表数据
      listLoading: false, // 列表加载loading
      screenForm: {
        // 筛选表单数据
        orderNum: '',
        jxsName: '',
        jxsNum: '',
        correspondId: '',
        date: [],
        status: '',
        takerPhone: '',
        takerId: '',
        printTime: [],
        salesOrderId: '',
        logisticsId: ''
      },
      pickupManList: '',
      isCollapse: true,
      logisticsList: [],
      warehouseList: [],
      visible: false,
      orderId: '',
      logisticsDetail: [],
      flag: false,
      searchData: this.$route.query.id ? [
        {
          param: 'pms.invoice_id',
          compare: '=',
          value: this.$route.query.id || ''
        }
      ] : []
    }
  },
  watch: {
    $route(val, oval) {
      if (val && this.$route.path === '/supply/pickup/sum_list') {
        if (this.$route.query.id) {
          this.screenForm.orderNum = val.query.id
          this.searchData = [
            {
              param: 'pms.invoice_id',
              compare: '=',
              value: val.query.id
            }
          ]
          // this.$refs.pageRef.refreshList()
        }
      }
    }
  },

  methods: {
    // 列表请求函数
    getList(...p) {
      this.recordSelected = []
      return getPickupListV2(...p)
    },
    // 列表导出函数
    exportList: exportPickupListV2,
    // 表格列解析渲染数据更改
    columnParsing(item, defaultData) {
      return defaultData
    },
    // 监听勾选变化
    selectionChange(data) {
      this.recordSelected = data
    },
    operation() {
      return (h, { row, index, column }) => {
        return (
          <div class='operation-btns'>
            {row.pickType != '1' ? (
              <el-button onClick={() => this.handLogistics(row)} type='text' size='small'>
                物流信息
              </el-button>
            ) : null}
            <el-button onClick={() => {
              this.$router.push({
                name: 'pickup_list',
                query: {
                  id: row.id
                }
              })
            }} type='text' size='small'>
                详情
            </el-button>
          </div>
        )
      }
    },
    handleClose() {
      this.addOff(() => {
        this.visible = false
      })()
    },
    // 获取仓库列表
    getWarehouseList() {
      getWarehouseList({
        pageNum: 1,
        pageSize: -1
      }).then(res => {
        this.warehouseList = res.data.records
      })
    },
    getPickupManList() {
      getPickupManList({ pageNum: 1, pageSize: -1 }).then(res => {
        this.pickupManList = res.data.records
      })
    },
    getLogisticsList() {
      const params = {
        pageNum: 1,
        pageSize: -1
      }
      getLogisticsList(params).then(res => {
        this.logisticsList = res.data.records
        console.log(this.logisticsList, 'kkk')
      })
    },
    // 提交筛选表单
    submitScreenForm() {
      this.currentPage = 1
      this.$refs.pageRef.refreshList()
    },

    // 重置筛选表单
    resetScreenForm() {
      this.$refs.screenForm.resetFields()
      this.currentPage = 1
      this.$refs.pageRef.refreshList()
      if (this.$route.query && this.$route.query.id) {
        this.$router.replace('/exwarehouse/sum_list')
      }
    },

    handLogistics(row) {
      getListOrderTrack({ orderId: row.invoiceId }).then(res => {
        this.logisticsDetail = res.data
      })
      this.orderId = row.invoiceId
      this.visible = true
    },
    onClose() {
      this.logisticsDetail = []
      this.orderId = ''
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.logistics-title {
  padding-bottom: 10px;
}
.tip {
  height: 200px;
  text-align: center;
  line-height: 200px;
}
</style>
