<template>
  <vxe-modal v-model="value" id="mergeModel" title="合并订单" width="70%" height="80%" show-zoom resize transfer show-footer v-loading="load">
    <by-table :propConfig="config" ref="table" id="merge-table">
      <template v-slot:id="{row}">
        <span>{{ row.id }}</span>
        <div class="tag-main" v-if="row.isMain == 1">
          <el-tag size="mini">主</el-tag>
        </div>
      </template>
      <template v-slot:address="{row}">
        <div class="addr">{{ row.receiverProvince + '-' + row.receiverCity + '-' + row.receiverDistrict + (row.receiverTown?'-'+row.receiverTown:'') }}</div>
        <div class="de-addr">{{ row.receiverAddress }}</div>
      </template>
      <template v-slot:pay="{row}">
        <div><el-tag type="success">已付款</el-tag></div>
        <div>{{ row.payDate}}</div>
      </template>
      <template v-slot:product="{row}">
        <el-badge :value="item.qty" class="item-pro" type="primary" :max="99" v-for="(item,index) of row.items" :key="index">
          <el-image  style="width: 28px; height: 28px">
            <div slot="error" class="image-slot">
              <i class="el-icon-picture-outline"></i>
            </div>
          </el-image>
        </el-badge>
      </template>
      <template v-slot:status="{row}">
        <span v-if="row.status == 'WaitPay'">待付款</span>
        <span v-if="row.status == 'Delivering'">发货中</span>
        <span v-if="row.status == 'Merged'">被合并</span>
        <span v-if="row.status == 'Question'" style="color:red">异常</span>
        <span v-if="row.status == 'Split'">被拆分</span>
        <span v-if="row.status == 'WaitOuterSent'">等供销商|外仓发货</span>
        <span v-if="row.status == 'WaitConfirm'">已付款待审核</span>
        <span v-if="row.status == 'WaitFConfirm'">已客审待财审</span>
        <span v-if="row.status == 'Sent'">已发货</span>
        <span v-if="row.status == 'Cancelled'">取消</span>
      </template>
      <template v-slot:msg="{row}">
        <div class="buyer-msg">{{ row.buyerMessage }}</div>
        <div>{{ row.remark }}</div>
      </template>
    </by-table>
    <template #footer>
      <div class="btn">
        <el-button plain size="small" @click="value = false">取消</el-button>
        <el-button type="primary" size="small" @click="btn">确定</el-button>
      </div>
    </template>
  </vxe-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { merge } from '@/api/omsOrder'
@Component({components:{}})
export default class MergeModel extends Vue {
  value = false;
  load = false;
  config:any={
    attr:{
      size:'small',
      checkbox:true,
      seq:true,
      visibleMethod:({row}:any) =>{
        return row.isMain != 1
      }
    },
    columns:[{
      title:'订单号',
      field:'id',
      fixed:'left',
      slot:true,
      width:140
    },{
      title:'买家',
      field:'buyerNickname',
      width:150
    },{
      title:'收货人',
      field:'receiverName',
      width:120
    },{
      title:'买家地址',
      field:'address',
      width:200,
      slot:true
    },{
      title:'付款方式+时间',
      field:'pay',
      slot:true,
      width:150
    },{
      title:'商品',
      field:'product',
      slot:true,
      width:150
    },{
      title:'状态',
      field:'status',
      slot:true,
      width:120
    },{
      title:'运费',
      field:'freight',
      width:80
    },{
      title:'重量',
      field:'weight',
      width:80
    },{
      title:'买家留言+卖家备注',
      field:'msg',
      width:160
    }]
  }
  setShow(v:boolean){
    this.value = v
  }
  setData(data:Array<any>){
    this.$nextTick(()=>{
      let height = (document.getElementById('merge-table') as any).parentNode.offsetHeight;
      this.config.attr.height=height - 36;
      if(this.$refs.table){
        (this.$refs.table as any).setConfig(this.config);
        (this.$refs.table as any).setValue(data);
      }
    })
  }
  btn(){
    let va = (this.$refs.table as any).getValue();
    let data = (this.$refs.table as any).getSelectData();
    if(data.length == 0){
      this.$message('请选择需要合并的数据！')
      return
    }
    let params:any={};
    params.idList=[]
    for(const item of va){
      if(item.isMain == 1){
        params.id = item.id;
        break;
      }
    }
    for(const item of data){
      params.idList.push(item.id);
    }
    this.load = true;
    merge(params).then((res:any)=>{
      this.load = false;
      this.$message({
        message:'合并成功！',
        type:'success'
      })
      this.$emit('handleSuccess');
      this.value = false;
    }).catch((err:any) => {
      this.load = false;
    })
  }
}
</script>

<style lang="scss" scoped>
.tag-main{
  width: 100%;
  display: flex;
  // justify-content: flex-end;
}
.buyer-msg,.addr{
  color: dodgerblue;
}
.addr,.de-addr{
  font-size: 12px;
}
</style>