<template>
  <div class="app-container">
    <!-- 搜索工作栏 -->
    <el-card>
        <div slot="header" class="card-title">拆单申请-{{orderData.orderSn||''}}</div>
        <div class="btn-header">
          <span class="card-title">原单信息</span>
          <div>
             <span v-if="orderData.status==0" class="red">异常无法拆单</span>
             <el-button v-else type="primary" @click="addSplit">新建拆单 </el-button>
          </div>

        </div>
        <el-descriptions :column="4">
            <el-descriptions-item label="唛头">
                {{orderData.marks?orderData.marks:'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="已到箱数/总箱数">
                {{orderData.sumNum?orderData.sumNum:0+'/'+orderData.totalNum?orderData.totalNum:0}}
            </el-descriptions-item>
            <el-descriptions-item label="订单状态">
              <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="orderData.status" />
            </el-descriptions-item>
            <el-descriptions-item label="送货日期">
              {{orderData.date?orderData.date:'无'}}
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="4">
          <el-descriptions-item label="运输方式">
              <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="orderData.transportId" />
          </el-descriptions-item>
          <el-descriptions-item label="始发地">
                {{importCityName(orderData.startWarehouseId)}}
          </el-descriptions-item>
          <el-descriptions-item label="目的地">
            {{importCityName(orderData.startWarehouseId)}}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="4">
          <el-descriptions-item label="发货人姓名">
              {{orderData.consignorVO?orderData.consignorVO.name||'无':'无'}}
          </el-descriptions-item>
          <el-descriptions-item label="发货公司">
              {{orderData.consignorVO?orderData.consignorVO.company||'无':'无'}}
          </el-descriptions-item>
          <el-descriptions-item label="发货电话">
              {{orderData.consignorVO?orderData.consignorVO.phone||'无':'无'}}
          </el-descriptions-item>
        </el-descriptions>
        <el-descriptions :column="4">
            <el-descriptions-item label="收货人姓名">
                {{orderData.consigneeVO?orderData.consigneeVO.name||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="收货公司">
                {{orderData.consigneeVO?orderData.consigneeVO.company||'无':'无'}}
            </el-descriptions-item>
            <el-descriptions-item label="收货电话">
                {{orderData.consigneeVO?orderData.consigneeVO.phone||'无':'无'}}
            </el-descriptions-item>
        </el-descriptions>

    </el-card>
    <el-card class="card">
      <!-- 列表 -->
      <div slot="header" class="card-title">货物信息</div>
      <el-table v-loading="loading" border :data="orderData.list"  :summary-method="getSummaries" show-summary>
        <el-table-column label="序号" align="center" prop="id" type="index">
          <template slot-scope="scope">
              <span>{{scope.$index + 1}}</span>
          </template>
        </el-table-column>
        <el-table-column label="品名" align="center" scope="orderSn">
          <template slot-scope="scope">
             <el-row>{{scope.row.prodTitleEn}}</el-row>
             <el-row>{{scope.row.prodTitleZh}}</el-row>
          </template>
        </el-table-column>
        <el-table-column label="填单货物属性" align="center">
            <template slot-scope="scope">
              <el-row>
                <span>品牌：
                  <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType" />
                </span>
              </el-row>
              <el-row>
                <span>箱数：{{scope.row.totalNum}}</span>
              </el-row>
              <el-row>
                <span>体积：{{scope.row.volume}}m³</span>
              </el-row>
              <el-row>
                <span>重量：{{scope.row.weight}}kg</span>
              </el-row>
            </template>
        </el-table-column>
        <el-table-column label="入库货物属性" align="center">
            <template slot-scope="scope">
              <el-row>
                <span>规格：{{scope.row.boxGauge}}</span>
              </el-row>
              <el-row>
                <span>品牌：
                  <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType" />
                </span>
                <span style="margin-left: 10px;">箱数：{{scope.row.totalNum}}</span>
                <span style="margin-left: 10px;">体积：{{scope.row.volume}}m³</span>
                <span style="margin-left: 10px;">重量：{{scope.row.weight}}kg</span>
              </el-row>
            </template>
        </el-table-column>
        <el-table-column label="最后操作时间" align="center" prop='createTime' />
        <el-table-column label="状态" align="center">
           <template slot-scope="scope">
               <dict-tag :type="DICT_TYPE.ORDER_STATUS" :value="scope.row.status" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="card" v-if="splitData.length>0">
      <!-- 列表 -->
      <div slot="header" class="card-title">拆单信息</div>
      <div v-for="(item, index) in splitData" :key="index">
        <div class="btn-header">
          <div>
            <span class="card-title">
            {{item.orderSn}}
            </span>
            <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="item.transportId" />
            <span>发往：{{importCityName(item.startWarehouseId)}}</span>
          </div>
          <div>
            <el-button type="primary" @click="addShop(index)">放入</el-button>
            <el-button type="primary" plain @click="deleteSplit(index)">删除</el-button>
          </div>
        </div>
        <el-table  border :data="item.list">
          <el-table-column label="序号" align="center" prop="id" type="index">
            <template slot-scope="scope">
                <span>{{scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <el-table-column label="中文名" align="center" scope="prodTitleZh" />
          <el-table-column label="英文名" align="center" scope="prodTitleEn" />
          <el-table-column label="品牌" align="center" scope="brandType">
            <template slot-scope="scope">
              <dict-tag :type="DICT_TYPE.ECW_IS_BRAND" :value="scope.row.brandType" />
            </template>
          </el-table-column>
          <el-table-column label="体积" align="center" >
            <template slot-scope="scope">
                 <span>{{scope.row.volume}}m³</span>
              </template>
          </el-table-column>
          <el-table-column label="重量" align="center">
            <template slot-scope="scope">
                   <span>{{scope.row.weight}}m³</span>
                </template>
            </el-table-column>
          <el-table-column label="箱数" align="center">
            <template slot-scope="scope">
                   <span>{{scope.row.num}}m³</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="mini" type="text" icon="el-icon-delete" @click="removeShop(index,scope.$index)">移出</el-button>
              </template>
            </el-table-column>
        </el-table>
      </div>
    </el-card>

    <div slot="footer" class="card">
        <el-button  v-if="orderData.status!=0" type="primary" @click="submitForm">提交申请</el-button>
        <el-button plain type="primary" @click="submitForm">取消</el-button>
    </div>
     <!-- 对话框(添加 / 修改) -->
        <el-dialog title="新建拆单" :visible.sync="open" width="400px" append-to-body>
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-row>
              <el-form-item label="运输方式">
                 <dict-selector :type="DICT_TYPE.ECW_TRANSPORT_TYPE" v-model="form.transportId" formatter="number"/>
              </el-form-item>
            </el-row>
            <el-row>
              <el-form-item label="目的仓库:" >
                  <el-select v-model="form.destWarehouseId" placeholder="请选择目的仓库"  @change="changeDest">
                   <el-option v-for="item in importCityList" :label="item.titleZh" :value="item.id" :key="item.id" ></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="出货渠道">
                <el-select v-model="form.channelId" placeholder="请选择出货渠道">
                     <el-option v-for="item in channelData" :key="item.channelId" :label="item.nameZh" :value="item.channelId"/>
                 </el-select>
              </el-form-item>
            </el-row>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="haddleAdd">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-dialog>
        <!-- 对话框(添加 / 修改) -->
           <el-dialog title="放入品名" :visible.sync="openShop" width="400px" append-to-body>
             <el-form ref="shopForm" :model="shopForm" :rules="shopRules" label-width="80px">
               <el-row>
                 <el-form-item label="中文品名:">
                   <el-select v-model="shopForm.prodTitleZh" placeholder="请选择中文品名"  @change="changeProdTitleZh">
                    <el-option v-for="item in splitData.list" :label="item.prodTitleZh" :value="item.prodTitleZh" :key="item.prodTitleZh" ></el-option>
                   </el-select>
                 </el-form-item>
               </el-row>
               <el-row>
                 <el-form-item label="英文品名:" >
                     <el-select v-model="shopForm.prodTitleEn" placeholder="请选择英文品名"  @change="changeProdTitleEn">
                      <el-option v-for="item in splitData.list" :label="item.prodTitleEn" :value="item.prodTitleEn" :key="item.prodTitleEn" ></el-option>
                     </el-select>
                 </el-form-item>
                 <el-form-item label="剩余箱数:">
                    {{shopForm.sum||0}}
                 </el-form-item>
                 <el-form-item label="放入箱数:">
                    <el-input-number v-model="shopForm.num" controls-position="right"  :min="1" :max="shopForm.sum"></el-input-number>
                 </el-form-item>
                 <el-form-item label="备注信息:">
                    <el-input v-model="shopForm.remarks"></el-input>
                 </el-form-item>
               </el-row>
             </el-form>
             <div slot="footer" class="dialog-footer">
               <el-button type="primary" @click="shopAdd">确 定</el-button>
               <el-button @click="shopCancel">取 消</el-button>
             </div>
           </el-dialog>
  </div>
</template>

<script>
import {getOrderExceptionPage} from "@/api/ecw/orderException"
import {getTradeCityList} from '@/api/ecw/region'
import {DICT_TYPE} from  '@/utils/dict'
 import {getChannelPage} from '@/api/ecw/channel'

export default {
  name: "SplitApply",
  components: {

  },
  data() {
    return {
      checked:false,
      orderData:{},
      splitData:[],
      splitIndex:0,
      channelData:[],
      tradeCityList:[],
      multipleSelection:[],
      loading:false,
      open:false,
      form:{

      },
      openShop:false,
      shopForm:{},
      // 表单校验
      rules: {
        transportId: [{ required: true, message: "请选择运输方式", trigger: "blur" }],
        warehouseIds: [{ required: true, message: "请选择目的仓库", trigger: "blur" }],
        channelId: [{ required: true, message: "请选择出货渠道", trigger: "blur" }],
      },
      // 表单校验
      shopRules: {
        prodTitleZh: [{ required: true, message: "请选择中文品名", trigger: "blur" }],
        prodTitleEn: [{ required: true, message: "请选择英文品名", trigger: "blur" }],
      },
      query:{
        pageSize:20,
        pageNo:1,
      }
    };
  },
  created() {
    // this.getList();
    getTradeCityList().then(res => this.tradeCityList = res.data)

  },
  computed:{
    importCityList(){
        return this.tradeCityList.filter(item => item.type == 1)
    }
  },
  methods: {
    /** 查询列表 */
    getList() {
      this.loading = true;
      // 执行查询
      getOrderExceptionPage(this.queryParams).then(response => {
        this.orderData = response.data
        this.form.destWarehouseId = response.data.destWarehouseId
        this.loading = false;
        this.query.warehouseIds = response.data.destWarehouseId
        this.getChannel()
      });
    },
    getChannel(){
      getChannelPage(this.query).then(res=>this.channelData = res.data.list)
    },
    changeDest(){
      this.query.warehouseIds = this.form.destWarehouseId
      this.getChannel()
    },
    getSummaries(){
      const sums = [];
      if(!this.orderData || !this.orderData.list ||ths.orderData.length==0){
        return sums
      }
      sums[0] = '小计'
      var orderSum = 0
      var orderV = 0
      var orderW = 0
      var leviteSum = 0
      var leviteV = 0
      var leviteW = 0
      this.orderData.list.forEach((column, index) => {
          orderSum += column.orderSum
          orderV += column.volume
          orderW += column.weight
          leviteSum += column.orderSum
          leviteV += column.volume
          leviteW += column.weight
      });
      sums[1] = ''
      sums[2] = '下单统计：'+ orderSum+' 箱 '+ orderV +' m³ ' + orderW + ' kg'
      sums[3] = '入仓统计：'+ leviteSum+' 箱 '+ leviteV +' m³ ' + leviteW + ' kg'
      sums[4] = ''
      sums[5] = ''
      return sums;
    },
    handleSelectionChange(val) {
       this.multipleSelection = val;
     },
    importCityName(id){
        var arr = this.tradeCityList.filter(item => item.id == id)
        return arr.length>0?arr[0].titleZh:'无'
    },
    submitForm(){

    },
    addShop(index){
      this.splitIndex = index
      this.shopForm.prodTitleZh = this.orderData.list[0].prodTitleZh
      this.shopForm.prodTitleEn = this.orderData.list[0].prodTitleEn
      var sum = list.num
      this.splitData.list.forEach((item)=>{
        if(item.prodTitleZh == this.shopForm.prodTitleZh){
          sum -= item.num
        }
      })
      this.shopForm.sum = sum
      this.shopOpen = true
    },
    addSplit(){
      this.open = true
    },
    changeProdTitleZh(){
        var list = []
        list = this.orderData.list.filter(item=>item.prodTitleZh == this.shopForm.prodTitleZh)
        var sum = list.num
        this.splitData.list.forEach((item)=>{
          if(item.prodTitleZh == this.shopForm.prodTitleZh){
            sum -= item.num
          }
        })
        this.shopForm.sum = sum
        this.shopForm.prodTitleEn = list[0].prodTitleEn
    },
    changeProdTitleEn(){
        var list = []
        list = this.orderData.list.filter(item=>item.prodTitleEn == this.shopForm.prodTitleEn)
        var sum = list.num
        this.splitData.list.forEach((item)=>{
          if(item.prodTitleEn == this.shopForm.prodTitleEn){
            sum -= item.num
          }
        })
        this.shopForm.sum = sum
        this.shopForm.prodTitleZh = list[0].prodTitleZh
    },
    haddleAdd(){
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
      })
      this.splitData.push(this.form)
      if(this.splitData.length==0){
        this.splitData[0].list = this.orderData.list
      }
      this.open = false
    },
    cancel(){
      this.open = false
      this.form = {}
    },
    shopAdd(){
      this.$refs["shopForm"].validate(valid => {
        if (!valid) {
          return;
        }
      })
      var isExit = this.splitData[this.splitIndex].list.filter(item=>item.prodTitleEn == this.shopForm.prodTitleEn)
      if(isExit&&isExit.length==1){
        this.splitData[this.splitIndex].list.forEach((item)=>{
          item.num = this.shopForm.num
          item.remarks = this.shopForm.remarks
        })
      }else{
        var list = this.orderData.list.filter(item=>item.prodTitleEn == this.shopForm.prodTitleEn)
        list.num = this.shopForm.num
        list.remarks = this.shopForm.remarks
        this.splitData[this.splitIndex].list.push(list)
      }
      this.shopOpen = false
    },
    removeShop(splitIndex,index){
      this.splitData[splitIndex].list.splice(index,1)
    },
    shopCancel(){
      this.shopOpen = false
      this.shopForm = {}
    },
    /** 删除按钮操作 */
    deleteSplit(index) {
      const orderId = this.splitData[index].orderSn
      this.$modal.confirm('是否确认删除订单号为"' + orderId + '"的数据项?').then(function () {
        this.splitData.splice(index,1)
      }).then(() => {
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
  }
}
</script>
<style>
  .card-title{
      font-size: 18px;
      font-weight: bold;
       margin-top: 10px;
  }
  .card{
    margin-top: 20px;
  }
  .btn-header{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
  }
  .red{
    color:#ff3430;
    font-size: 15px;
  }
</style>
