<template>
  <div class="detail">
    <p-card v-if="detailShow == 1">
      <div slot="title" style="display: inline-block; align-items: center; cursor: pointer" @click="clickEvent('back')">
        <a-icon type="arrow-left" style="color: #1990ff" class="mr-10"/>
        波次详情-查看
      </div>
      <div slot="extra">
        <p-button type="primary" :loading="btnloading" @click="Refresh">刷新</p-button>
      </div>
      <div class="extend-title">
        <span class="title">基本信息</span>
        <div style="margin-top:16px">
          <a-descriptions>
            <a-descriptions-item label="波次号">
              {{ formData.id }}
            </a-descriptions-item>
            <a-descriptions-item label="波次编码">
              {{ formData.code }}
            </a-descriptions-item>
            <!-- <a-descriptions-item label="优先级">
              1
            </a-descriptions-item> -->
            <!-- <a-descriptions-item label="仓库">
              {{formData.warehouseId}}
            </a-descriptions-item> -->
          </a-descriptions>
        </div>
        <div style="margin-top:16px" class="infoRow">
          <a-row>
            <a-col :span="4">
              <span>订单数:<i>{{ statistics.totalBills || 0 }}</i></span>
            </a-col>
            <a-col :span="4">
              <span>挂起订单数:<i>{{ statistics.pendingBills || 0 }}</i></span>
            </a-col>
            <a-col :span="4">
              <span>整件任务数:<i>{{ this.taskStatus ? (statistics.zjTasks || 0) : '未完成' }}</i></span>
            </a-col>
            <a-col :span="4">
              <span>零货任务数:<i>{{ this.taskStatus ? (statistics.lhTasks || 0) : '未完成' }}</i></span>
            </a-col>
            <a-col :span="4">
              <span>功能库房任务数:<i>{{ this.taskStatus ? (statistics.gnkfTasks || 0) : '未完成' }}</i></span>
            </a-col>
            <a-col :span="4">
              <span>整单拣选任务数:<i>{{ this.taskStatus ? (statistics.zdTasks || 0) : '未完成' }}</i></span>
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="extend-title">
        <span class="title">波次状态</span>
        <div style="padding:15px 10px">
          <a-steps :current="formData.statusList.length">
            <a-step
                v-for="item in formData.statusList"
                :key="item.index"
                :title="item.statusName"
                :description="item.startTime"
            />
          </a-steps>
        </div>
      </div>
      <div class="extend-title">
        <span class="title">波次明细</span>
        <div style="padding:15px 10px">
          <p-table
              ref="logTable"
              :columns="detailOrderColumnsConfig"
              :row-selection="rowSelection"
              :execute="false"
              rowKey="id"
              :expandRowByClick="false"
              :dataSource.sync="dataSource"
              :expandedRowKeys="expandedRowKeys"
              @expand="expandedRowRender"
              :pagination="10"
          >
            <p-table
                slot="expandedRowRender"
                slot-scope="text"
                :columns="itemsColumnsConfig"
                :rowSelectType="false"
                :loading="loading"
                :showHeader="true"
                :hasRowCount="false"
                :colorTransformRow="false"
                :hasRowSelectCheck="true"
                :data-source="innerData"
                :pagination="false"
            >
              <div slot="action" slot-scope="text">
                <a @click.stop="itemDet(text)">详情</a>
              </div>
            </p-table>
          </p-table>
        </div>
      </div>
    </p-card>
    <div v-if="detailShow == 2">
      <detailView :columns="tableColumnsConfig" :params="detailData" :title="detaititle" @back="goBack"></detailView>
    </div>
    <itemDetail ref="detailItem" :itemId="itemId"/>
  </div>
</template>
<script>
import {tableColumnsConfig, detailOrderColumnsConfig, itemsColumnsConfig} from '../js/config'
import setPubConsignor from '../js/pubConsignor.js'
import detailView from './detailView.vue'
import {getWaveItemList, getstatusList, getStatistics, getWaveList} from '../api/index'
import itemDetail from '@/views/kzyWMS/components/itemDetail'

export default {
  name: 'modelForm',
  components: {detailView, itemDetail},
  props: {
    formItem: {
      type: Array,
      default: () => []
    },
    waveId: {
      type: String
    }
  },
  data() {
    return {
      pubConsignor: setPubConsignor({
        on: {
          ok: this.ok
        }
      }),
      btnloading: false,
      detailOrderColumnsConfig,
      itemsColumnsConfig,
      fmd: null,
      itemId: '',
      tableColumnsConfig,
      selectedRows: [],
      dataSource: [
        {
          customername: 1,
          branchid: '90',
          branchname: '121'
        }
      ],
      formData: {
        statusList: []
      },
      detailShow: 1,
      pUrl: '',
      detaiParams: {},
      detaititle: '波次-订单明细',
      detailData: {},
      innerData: [],
      expandedRowKeys: [],
      taskStatus: null,
      loading: false,
      statusList: [],
      statistics: {
        gnkfTasks: null,
        lhTasks: null,
        pendingBills: null,
        totalBills: null,
        zjTasks: null
      }
    }
  },
  created() {
    // console.log(this.formData,'this.formData')
    // this.formData.statusList = this.formData.statusList.reverse()
    // console.log(this.waveId, 'waveIdwaveIdwaveId')
    this.lookat()
    getstatusList().then(res => {
      if (res.success) {
        for (let i = 0; i < 5; i++) {
          this.statusList.push(res.data[i])
        }
      } else {
        this.$exception(res)
      }

    })

  },
  mounted() {
  },
  computed: {
    rowSelection() {
      let _this = this
      return {
        onSelectAll(selected, selectedRows, changeRows) {
          var checked = selected
          var key = changeRows.map(item => item.id)
        },
        onSelect(record, selected, selectedRows, nativeEvent) {
          var checked = selected
          var key = record.id
          console.log(selectedRows)
        },
        onChange(selectedRowKeys, selectedRows) {
          _this.selectedRows = selectedRowKeys
          console.log(selectedRowKeys)
        }
      }
    }
  },
  watch: {
    formData: {
      handler(newVal) {
        this.dataSource = newVal.bills
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    expandedRowRender(expanded, record) {
      this.loading = true
      console.log('展开')
      console.log(expanded, record)
      if (expanded) {
        this.expandedRowKeys = [record.id]
        console.log(this.expandedRowKeys)
        getWaveItemList(record.id).then(res => {
          if (res.success) {
            this.innerData = res.data.items
          } else {
            this.$exception(res)
          }
          console.log(res)
          this.loading = false
        })
      } else {
        this.expandedRowKeys = this.expandedRowKeys.filter(item => {
          return item !== record.id
        })
      }
    },
    lookat() {
      getWaveList(this.waveId).then(res => {
        if (res.success) {
          this.btnloading = false
          this.formData = res.data
          let statuslist = res.data.statusList

          function sortDownDate(a, b) {
            return Date.parse(a.startTime) - Date.parse(b.startTime);
          }

          function sortUpDate(a, b) {
            return Date.parse(b.startTime) - Date.parse(a.startTime);
          }

          res.data.statusList = res.data.statusList.sort(sortDownDate)
          this.taskStatus = this.formData.status == '已经完成' ? true : false
          console.log(this.taskStatus)
        } else {
          this.$exception(res)
        }
      })
      getStatistics({waveId: this.waveId}).then(res => {
        if (res.success) {
          this.statistics = res.data
        } else {
          this.$exception(res)
        }
      })
    },
    itemDet(data) {
      console.log(data)
      this.itemId = data.itemId
      this.$refs.detailItem.open()
    },
    Refresh() {
      this.btnloading = true
      this.lookat()
    },
    filterCode(data) {
      const arr = []
      data.forEach(element => {
        if (element.name.indexOf('code') !== -1 || (element.name.indexOf('Code') !== -1 && !element.hidden)) {
          arr.push(element.name)
        }
      })
      this.$refs.formdetail.form.disableItem(arr)
    },
    oderDetail(data) {
      getWaveItemList(data.id).then(res => {
        console.log(res)
        if (!res.success) {
          this.$exception(res)
          return
        }
        this.detailData = res.data
        this.detailShow = 2
      })
    },
    goBack() {
      this.detailShow = 1
    },
    clickEvent(event) {
      // let data = this.$refs.formdetail.form.getFieldsValue()
      // let params = Object.assign(this.formData, data)
      let params = ''
      if (event === 'back') {
        this.$emit('clickEven', event, params)
      } else if (event === 'save') {
        this.$refs.formdetail.form.validateFields((error, values) => {
          if (!error) {
            this.$emit('clickEven', event, params)
          } else {
            return
          }
        })
      } else {
        this.$emit('clickEven', event, params)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.infoRow {
  .ant-col {
    background: lightgoldenrodyellow;
    padding-bottom: 13px;
    padding-left: 15px;

    span {
      font-size: 1.2em;

      i {
        font-style: normal;
        font-size: 1.8em;
        color: #2b80ff;
        position: relative;
        left: 5px;
        top: 5px;
      }
    }
  }
}

.buttonlist1 {
  display: flex;
  justify-content: space-between;
}

.extend-title {
  .title {
    font-weight: bold;
    font-size: 14px;
  }

  padding: 12px 0;
  border-bottom: 1px solid #e8e8e8;
  margin-bottom: 12px;
}
</style>
