<template>
  <div v-loading="loading" class="hawbWorkbench">
    <div class="hawbWorkbench-slider">
      <div style="display:flex;justify-content:space-between;align-items: center;margin-bottom:5px">
        <h4 style="margin-top:15px;margin-bottom:15px">发货单</h4>
        <el-button
          type="primary"
          size="mini"
          @click="visible=true"
        >
          添加搜索条件
        </el-button>
      </div>

      <div v-loading="loadings.slider" style="overflow:hidden; height: calc(100% - 100px)">
        <ul ref="slider" class="hawbWorkbench-slider__scroll">
          <li
            v-for="item in list"
            :key="item.id"
            :class="{ active: activeKey === item.outCode}"
            @click="onActiveKey(item)"
          >
            {{ item.outCode }}
          </li>
        </ul>
      </div>

      <div style="height:40px;display:flex;align-items:center;justify-content: space-between;font-size:15px">
        <p>共 {{ !pagination.totalPage ? '-' : pagination.totalPage }} 页</p>
        <div style="line-height:40px;display:flex;align-items:center;gap: 5px;">
          前往
          <digital-input
            style="padding:0px;width:60px"
            :values="pagination.page"
            :placeholder="'仓库发货数'"
            :min="1"
            :max="pagination.totalPage"
            :position="'right'"
            :precision="0"
            :controls="false"
            :append="''"
            :size="'mini'"
            @reschange="page_change($event)"
          />
          页
        </div>
      </div>
    </div>

    <div class="hawbWorkbench-main">
      <el-collapse v-if="this.activeKey" v-model="collapseValues">
        <el-collapse-item v-loading="loadings.detail" title="发货详情" name="1">
          <show-data-table
            v-if="newTime"
            :new-time="newTime"
            :sitem="activeItem"
            :columns="showColumns"
          >
            <template slot="order_type">
              <el-tag
                :size="'mini'"
                v-text="(xs_order_type_options.find((item) => item.id == activeItem.order_type) || {}).label || '--'"
              />
            </template>
            <template slot="status">
              <el-tag
                :size="'mini'"
                v-text="(statusOptions.find((item) => item.value == activeItem.status) || {}) .label || '--'"
              />
            </template>
            <template slot="send_status">
              <el-tag
                :size="'mini'"
                v-text="(sendStatusOptions.find((item) => item.value == activeItem.send_status) || {}) .label || '--'"
              />
            </template>

            <template slot="company">
              <span>{{ activelistItem.companyName }}</span>
              <el-popover placement="top" width="300" trigger="hover">
                <ul>
                  <li>
                    <span>业务企业编号：</span><span>{{ activelistItem.companyNo }}</span>
                  </li>
                </ul>
                <i slot="reference" class="el-icon-warning-outline fr" />
              </el-popover>
            </template>

            <template slot="customer">
              <span>{{ activelistItem.company_name }}</span>
              <el-popover placement="top" width="300" trigger="hover">
                <ul>
                  <li>
                    <span>客户公司编号：</span><span>{{ activelistItem.customer_code }}</span>
                  </li>
                </ul>
                <i slot="reference" class="el-icon-warning-outline fr" />
              </el-popover>
            </template>

            <template slot="addr">
              <p>{{ activeItem.addr }}--{{ activeItem.apply_name }}--{{ activeItem.mobile }}</p>
            </template>
          </show-data-table>
        </el-collapse-item>

        <el-collapse-item title="商品信息" name="2">
          <show-goods-data-table
            v-if="newTime !== ''"
            :new-time="newTime"
            :type="activeItem.order_type"
            :skucode="activeItem.skuCode"
            :spucode="activeItem.good_code"
          />
        </el-collapse-item>

        <el-collapse-item
          v-loading="loadings.wsmList"
          title=""
          name="3"
        >
          <div style="width:100%">
            <el-table size="mini" :data="wsmList" border>
              <el-table-column prop="wsm_code" label="仓库编码" width="160" show-overflow-tooltip />
              <el-table-column prop="wsm_name" label="仓库名称" min-width="120" show-overflow-tooltip />
              <el-table-column prop="supplierNo" label="仓库所在供应商编码" width="160" show-overflow-tooltip />
              <el-table-column prop="supplierName" label="仓库所在供应商名称" min-width="140" show-overflow-tooltip />
              <el-table-column prop="contactor_name" label="仓库负责人" width="90" show-overflow-tooltip />
              <el-table-column prop="usable_stock" label="可用库存" width="110" show-overflow-tooltip />
              <!--  <el-table-column label="仓库发货数" min-width="120" show-overflow-tooltip>
             <template slot-scope="scope">
                  <digital-input
                    :values="wsmList[scope.$index].num"
                    :placeholder="'仓库发货数'"
                    :min="0"
                    :max="100000000000"
                    :position="'right'"
                    :precision="0"
                    :controls="false"
                    :append="''"
                    :size="'mini'"
                    @reschange="num_change($event, scope.$index)"
                  />
                </template>
              </el-table-column> -->
            </el-table>

            <!-- <div style="width:100;display: flex;justify-content: flex-end;padding-right: 30px;margin: 20px 0px;">
              <el-button type="primary" size="mini" :loading="loadings.wsmSplit" @click="onSplitWsm">保存</el-button>
            </div> -->
          </div>
        </el-collapse-item>
      </el-collapse>

      <div v-else-if="!currentCompany" class="hawb-error">
        <i class="el-icon-warning" />
        <p>请选择发货单</p>
      </div>

      <search-modal :visible.sync="visible" @change="handleSearchChange" />
    </div>
  </div>
</template>

<script>
import { xs_order_type_options } from '@/assets/js/statusList'
import asyncRequest from '@/apis/service/sellOut/sellOutOrder'
import companyHelper from '@/mixins/companyHelper'
import privateField from '@/mixins/privateField'
import SearchModal from './search-modal.vue'
import { showColumns } from './columns'

export default {
  name: 'HawbWorkbench',
  components: {
    SearchModal
  },
  mixins: [privateField, companyHelper],
  data: () => ({
    list: [],
    loading: false,
    visible: false,
    showColumns,
    activeKey: null,
    newTime: null,
    activeItem: {},
    activelistItem: {},
    params: {},
    wsmList: [],
    xs_order_type_options,
    collapseValues: ['1', '2', '3'],
    statusOptions: [
      { value: '0', label: '待采购备货' },
      { value: '1', label: '待库管发货' },
      { value: '2', label: '已发货待收货' },
      { value: '3', label: '已收货' },
      { value: '4', label: '已全部退货' }
    ],
    sendStatusOptions: [
      { value: '0', label: '不可拆单' },
      { value: '1', label: '可拆单' },
      { value: '2', label: '已拆单未发货' },
      { value: '3', label: '部分发货' },
      { value: '4', label: '全部发货' },
      { value: '5', label: '已收货' },
      { value: '6', label: '已退货' }
    ],
    pagination: {
      page: 1,
      size: 30,
      totalPage: 0
    },
    loadings: {
      slider: false,
      wsmList: false,
      wsmSplit: false,
      detail: false
    },
    state: {
      loading: false,
      noMore: false
    }
  }),
  methods: {
    async initData() {
      const result = await this.onLoad()
      if (result.length === 0) return
      this.onActiveKey(result[0])
    },

    isRequestWsmList() {
      const { send_status } = this.activeItem
      return send_status === '1'
    },

    async onLoad() {
      if (this.state.noMore) return
      this.loadings.slider = true
      const { data } = await asyncRequest.list({ ...this.pagination, ...this.params, needRela: true })
      const totalPage = Math.ceil(data.count / this.pagination.size)
      this.pagination.totalPage = totalPage > 0 ? totalPage : 1
      this.loadings.slider = false
      this.list = data.list
      return data.list
    },

    async num_change(e, index) {
      this.$set(this.wsmList, index, { ...this.wsmList[index], num: Number(e) })
    },

    handleSearchChange(params) {
      this.params = params
      this.resetState()
      this.initData()
    },

    async onActiveKey(activeItem) {
      const { outCode } = activeItem
      this.activeKey = outCode
      await this.requsetDetail(outCode)
      await this.requesetWsmListWithOutCode(outCode)
      this.activelistItem = activeItem
      this.computeTime()
    },

    onCompanyChange() { // TODO
      this.resetState()
      this.initData()
    },

    resetState() {
      this.pagination.page = 1
      this.pagination.totalPage = 0
      this.loadings.wsmList = false
      this.loadings.wsmSplit = false
      this.activeItem = {}
      this.activeKey = ''
      this.list = []
    },

    page_change(page) {
      this.pagination.page = page
      this.onLoad()
    },

    async onSplitWsm() {
      this.loadings.wsmSplit = true
      const outCode = this.activeKey
      const list = this.wsmList.map(({ wsm_code, num }) => ({ wsm_code, num }))
      const { message, code } = await asyncRequest.wsmSplit({ list, outCode })
      this.loadings.wsmSplit = false
      switch (code) {
        case 0:
          await this.requsetDetail(outCode)
          this.isRequestWsmList() && await this.requesetWsmListWithOutCode(outCode)
          break
        default:
          this.$message.warning(message)
          break
      }
    },

    async requesetWsmListWithOutCode(outCode) {
      this.loadings.wsmList = true
      const { data } = await asyncRequest.wsmList({ outCode })
      this.loadings.wsmList = false
      this.wsmList = data.map(item => ({ ...item, num: 0 }))
    },

    async requsetDetail(outCode) {
      this.loadings.detail = true
      const { message, code, data } = await asyncRequest.detail({ outCode })
      this.loadings.detail = false
      switch (code) {
        case 0:
          this.activeItem = data
          break
        default:
          this.$message.warning(message)
          break
      }
    },

    computeTime() {
      this.newTime = new Date().valueOf()
    }
  }
}
</script>

<style lang="scss">
@import "~@/styles/mixin.scss";
.hawbWorkbench{
  height: calc(100vh - 50px);
  position: relative;
  width: 100%;
  display: flex;

  &-slider{
    height: 100%;
    min-width: 240px;
    padding: 0px 10px;
    border-right: 1px solid #ccc;

    &__scroll{
     overflow-y: auto;
     height: 100%;
     @include scrollBar();

     li{
      width: 100%;
      line-height: 25px;
      margin-bottom: 8px;
      border-radius: 5px;
      user-select: none;
      cursor: pointer;
      text-align: center;

      &.active{
        background-color: #f7f7f7;
        color:#6954f0;
      }
     }
    }
  }

  &-main{
    flex: 1;
    box-sizing: border-box;
    position: relative;
    padding: 10px;

    .hawb-error{
      top: 50%;
      left: 50%;
      display: flex;
      position: absolute;
      transform: translate(-50%, -50%);
      align-items: center;
      gap: 10px;
    }
  }

.hawb-more {
  text-align: center;
  color: #999;
  font-size: 14px;
  line-height: 38px;
}

.hawb-loading {
  display: flex;
  font-size: 14px;
  justify-content: center;
  align-items: center;
  color: #999;
  gap: 10px;
  line-height: 38px;
}
}
</style>
