<template>
  <view class="wrap">
    <view style="height: 100px; background: #2f4dae"></view>
    <view class="content-wrap">
      <view class="title">
        <view class="title-label">{{$t('自编号')}}</view>
        <view>{{ selfNo }}</view>
      </view>
	  <view class="list-title">
	  	<image class="message" src="../../static/images/message.png" mode=""></image>
	  	<text class="status-name">{{$t('状态')}}</text>
	  	<view class="list-status">
	  		<picker :value="statusIndex" :range="statusData" @change="statusChange" v-if="statusData.length > 0">
	  			<view class="uni-input">{{statusData[statusIndex]}}</view>
	  		</picker>
	  		<image src="../../static/images/down.png" mode=""></image>
	  	</view>
	  </view>
      <view class="flex padding">
        <button type="primary" size="mini" @tap="createMergePkg">{{$t('新建合包箱号')}}</button>
        <button type="primary" size="mini" @tap="patch">{{$t('补单')}}</button>
      </view>

      <view class="info-wrap">
        <empty v-if="!list.length" style="margin-top: 30rpx"></empty>
        <view v-for="(item, index) in list" :key="index" class="item">
          <view class="info-header">
            <view class="header-title">{{$t('序号')}}: {{ index + 1 }}</view>
            <view class="header-status">{{$t('箱号')}}:{{item.pkgNum}}</view>
          </view>
          <view class="info-content">
            <view>
              <view>
                <view class="label">{{$t('订单数')}}: </view>
                <view class="content">{{ item.orderCount }}</view>
              </view>
              <view>
                <view class="label">{{$t('尺寸')}}: </view>
                <!--高度是pkgHight，不是pkgHeight，接口拼错了前端沿用-->
                <view class="content">{{ item.pkgLength }}*{{item.pkgWidth}}*{{item.pkgHight}}</view>
              </view>
            </view>
            <view>
              <view>
                <view class="label">{{$t('箱数')}}: </view>
                <view class="content">{{ item.sumNum || 0}}{{$t('箱')}}</view>
              </view>
              <view>
                <view class="label">{{$t('入仓重量')}}: </view>
                <view class="content">{{ item.sumWeight || 0 }}kg</view>
              </view>
            </view>
            <view>
              <view>
                <view class="label">{{$t('入仓体积')}}: </view>
                <view class="content">{{ (item.sumVolume || 0).toFixed(2) }}m³</view>
              </view>
              <view>
                <view class="label">{{$t('入仓个数')}}: </view>
                <view class="content">{{ item.sumQuantity  || 0 }}</view>
              </view>
            </view>
            <view>
              <view>
                <view class="label">{{$t('状态')}}: </view>
                <view :class="item.status==2?'red':'content'">
                  {{getStatusText(item.status)}}
                </view>
              </view>
              <view style="flex:2;">
                <button size="mini" type="primary" @click="editMergePkg(item)">编辑</button>
                <button size="mini" type="warn" @click="package(item)">装箱</button>
                <button size="mini" type="danger" @click="del(item)">删除</button>
              </view>
            </view>
          </view>
        </view>
      </view>
      <button type="primary" @tap="finishMergePkg" style="margin: 40rpx 0">{{$t('完成合包')}}</button>
    </view>
	<!-- 未封箱 -->
	<view class="cu-modal" :class="noPkgData.length>0 ? 'show' : ''" style="z-index: 900;">
	  <view class="cu-dialog">
	    <view class="cu-bar bg-white justify-end bottom-line">
	      <view class="content title-bolder" style="width:100%;">{{$t('存在未封箱箱号')}}</view>
	    </view>
	    <scroll-view scroll-y="true" style="height: 400px;">
	        <view class="item-content" v-for="(v, index) in noPkgData" :key="index">
	            <view>{{v}}</view>
	        </view>
	    </scroll-view>
	
	    <view class="cu-bar bg-white justify-end top-line">
	      <view class="action"><button class="cu-btn bg-grey" @tap="noPkgData=[]">{{$t('返回')}}</button></view>
	    </view>
	  </view>
	</view>
    <edit-merge-pkg-dialog v-if="showEditDialog" :merge-pkg="currentMergePkg" :shipmentId="shipmentId" @cancel="showEditDialog=false"
                           @success="onEditSuccess"></edit-merge-pkg-dialog>
  </view>
</template>

<script>
import {uniIcons} from '@dcloudio/uni-ui';
import {
  boxMergePkeDelete,
  boxMergePkePage, finishMergePkg
} from "./api";
import EditMergePkgDialog from "@/pages/mergePkg/components/editMergePkgDialog.vue";
import { confirm, msg, alert } from "@/util/tools";
import Empty from "@/pages/mergePkg/components/empty.vue";

export default {
  components: { Empty, EditMergePkgDialog, uniIcons },
  data() {
    return {
      shipmentId: null, // 出货Id
      selfNo: null, // 自编号
      submitting: false,
      // 合包列表
      list: [],
      // 是否显示编辑对话框
      showEditDialog: false,
      // 当前编辑的合包对象
      currentMergePkg: null,
	  noPkgData:[],
	  statusData: [this.$t('全部'),this.$t('未装箱'), this.$t('装箱中'), this.$t('已封箱')],
	  statusValue: [0,1,2,3],
	  statusIndex: 0,
    }
  },
  computed:{
    getStatusText(status){
      return status => {
        return ['', this.$t('未装箱'), this.$t('装箱中'), this.$t('已封箱')][status]
      }
    }
  },
  onShow(){
    this.getData()
  },
  onLoad: function(option) {
    uni.setNavigationBarTitle({
      title: this.$t('合包详情')
    })
    this.shipmentId = +option.id
    this.selfNo = option.selfNo || '-'
    this.getData()
  },
  methods: {
    getData(){
		let params = {}
		params.shipmentId = this.shipmentId
	  if(this.statusIndex>0){
		  params.status =  this.statusValue[this.statusIndex]
	  }
      boxMergePkePage(params).then(res => {
        this.list = res.list
      })
    },
    // 新建合包箱编号
    createMergePkg(){
      this.showEditDialog= true
    },
    // 补单
    patch(){
      uni.navigateTo({
        url: `./patch?selfNo=${this.selfNo}&id=${this.shipmentId}`
      })
    },
    // 编辑合包箱编号
    editMergePkg(mergePkg){
      this.currentMergePkg = mergePkg
      this.showEditDialog= true
    },
    // 编辑成功回调
    onEditSuccess(){
      this.showEditDialog = false
      this.currentMergePkg = null
      this.getData()
    },
    // 装箱
    package(item){
      uni.navigateTo({
        url: `./package?selfNo=${this.selfNo}&shipmentId=${this.shipmentId}&pkgNum=${item.pkgNum}&pkgId=${item.id}`
      })
    },
    // 删除
    del(item){
      confirm(this.$t('确定要删除此合包箱么？')).then(() => {
        return boxMergePkeDelete(item.id)
      }).then(() => {
        msg(this.$t('删除成功'))
        this.getData()
      })
    },
    // 完成合包
    finishMergePkg(){
	  let pkg = ''
	  this.list.forEach(item=>{
		  if(item.status<3){
			  this.noPkgData.push(item.pkgNum) 
		  }
	  })
	  if(this.noPkgData.length>0){
		  return 
	  }
      finishMergePkg(this.shipmentId).then(res => {
        alert(this.$t('合包完成'))
        this.getData()
      })
    },
	statusChange (e) {
		this.statusIndex = e.detail.value
		this.page = 1
		this.getData()
	}
  }
}
</script>

<style lang="scss" scoped>
.red{
  color: #ff4949;
}
.green{
  color: #13ce66;
}
.item{
  border-bottom: 1px solid #ccc;
}
 .item-content {
    text-align: left;
    padding: 10px 20px 0px 20px;

    &.noPadding {
      padding: 0;
    }

    > view {
      display: flex;
      padding: 4px 0;

      > view {
        flex: 1;
        word-break: break-all;
        padding-left: 4px;
      }
    }
  }
.wrap {
  padding-bottom: 120px;
  .content-wrap {
    margin: -75px 0 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background: #fff;
    min-height: calc(100vh - 69px - 120px);
    padding: 0 16px 8px;
    .title {
      display: flex;
      line-height: 48px;
      font-size: 18px;
      border-bottom: 0.5px solid #eee;
      .title-label {
        font-weight: bold;
      }
      > view + view {
        margin-left: auto;
        color: #69696b;
      }
    }
    .info-wrap {
      .info-header {
        display: flex;
        font-size: 16px;
        line-height: 40px;
        .header-title {
          font-weight: bold;
        }
        .header-status {
          margin-left: auto;
          color: #50ddae;
        }
      }
      .info-content {
        > view {
          display: flex;
          margin-bottom: 8px;
          > view {
            flex: 1;
            display: flex;
            .label {
              color: #000;
              font-weight: bold;
              white-space: nowrap;
            }
            .content {
              color: #706d71;
              padding-left: 4px;
            }
          }
        }
      }
      .info-card {
        margin: 10px 0px 0px !important;
        .card-btn {
          border-top: 0.5px solid #eee;
          margin-top: 4px;
          padding: 8px;
          overflow: hidden;
          padding-bottom: 0;
          > view {
            float: right;
            height: 32px;
          }
          .mini-btn {
            border-radius: 20px;
            border: 1px solid #007aff;
          }
          .mini-btn + .mini-btn {
            color: #007aff;
            margin-left: 24px;
          }
        }
      }
    }
  }
}
.list-title{
    padding: 0;
    display: flex;
    width: 100%;
    height: 42px;
    background: #ffffff;
    align-items: center;
    margin-bottom: 16px;
	border-bottom: 0.5px solid #eee;
}
.list-title .message {
    width: 19px;
    height: 19px;
    vertical-align: middle;
    margin: 0 5px 0 16px;
}
.list-title .status-name {
    font-size: 16px;
    font-weight: 700;
}
.list-status {
    position: absolute;
    right: 16px;
    display: flex;
    align-items: center;
    height: 100%;
}
.list-status image{
    width: 19px;
    height: 19px;
    margin-top: 2px;
    margin-left: 5px;
}
</style>
