<template>
  <vxe-table size="mini" border stripe ref="table" :height="height" :row-config="{ isCurrent: true, isHover: true }"
    :data="data">
    <vxe-column field="id" title="内部订单号" width="100">
      <template #default="{ row }">
        <div class="col-cont">
          <span>{{ row.id }}</span>
          <!-- <div class="update">
            <div class="tag-update" @click="detail(row)">详</div>
          </div> -->
        </div>
      </template>
    </vxe-column>
    <vxe-column field="rawSourceId" title="线上订单号" width="140"> </vxe-column>
    <vxe-column field="buyerNickname" title="买家/分销商昵称" show-overflow width="140"></vxe-column>
    <vxe-column field="isSubmitted" title="提交状态" width="100">
      <template #default="{ row }">
        <el-tag v-if="row.isSubmitted == 1" size="small">已提交</el-tag>
        <el-tag v-else type="warning" size="small"> 未提交 </el-tag>
      </template>
    </vxe-column>
    <vxe-column field="product" title="商品" width="140">
      <template #default="{ 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>
    </vxe-column>
    <!-- <vxe-column field="businessType" title="业务类型" width="80"></vxe-column> -->
    <vxe-column field="orderType" title="订单类型" width="100">
      <template #default="{ row }">
        <span v-if="row.orderType == 'Common'">普通订单</span>
        <span v-if="row.orderType == 'Reissue'">补发订单</span>
        <span v-if="row.orderType == 'DistributionPlus'">分销Plus</span>
        <span v-if="row.orderType == 'SupplyPlus'">供销Plus</span>
        <span v-if="row.orderType == 'Exchange'">换货订单</span>
      </template>
    </vxe-column>
    <vxe-column field="status" title="订单状态" width="120">
      <template #default="{ 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>
    </vxe-column>
    <vxe-column field="upSourceName" title="订单来源" width="110"></vxe-column>
    <vxe-column field="operationFlag" title="操作标记" width="120">
      <template #default="{ row }">
        {{ getFromText(row.operationFlag) }}
      </template>
    </vxe-column>
    <vxe-column field="shopName" title="店铺名称" width="140"></vxe-column>
    <vxe-column field="orderDate" title="订单日期" width="140">
      <!-- <template #default="{ row }">
        {{ formatDate(row.orderDate) }}
      </template> -->
    </vxe-column>
    <!-- <vxe-column field="sellType" title="售卖类型" width="80">
      <template #default="{ row }">
        {{ getSellType(row.sellType) }}
      </template>
    </vxe-column> -->
    <vxe-column field="weight" title="重量" width="70"></vxe-column>
    <vxe-column field="isCod" title="是否货到付款" width="120">
      <template #default="{ row }">
        {{ row.isCod == 1 ? '是' : ' 否' }}
      </template>
    </vxe-column>
    <vxe-column field="sendDate" title="发货日期" width="120"></vxe-column>
    <!-- <vxe-column field="signTime" title="预计送达时间" width="120"></vxe-column>
    <vxe-column field="endTime" title="确认收货时间" width="120"></vxe-column> -->
    <vxe-column field="receiverAddress" title="收货地址" show-overflow width="160"></vxe-column>
    <vxe-column field="receiverName" title="收件人" show-overflow width="120"></vxe-column>
    <vxe-column field="receiverMobile" title="手机" show-overflow width="120"></vxe-column>
    <vxe-column field="buyerMessage" title="买家/分销商留言" show-overflow width="120"></vxe-column>
    <!-- <vxe-column field="wmsCoId" title="发货仓编号" width="120"></vxe-column> -->
    <vxe-column field="payDate" title="支付时间" width="140"></vxe-column>
    <vxe-column field="freeAmount" title="抵扣金额" align="right" width="120"></vxe-column>
    <vxe-column field="payAmount" title="应付+运费" align="right" width="120">
      <template #default="{ row }">
        <span>{{ row.payAmount }}</span> <br />
        <span style="color: #b9b8b8;">{{ row.freight ? row.freight : 0 }}</span>
      </template>
    </vxe-column>
    <vxe-column field="paidAmount" title="实付金额" align="right" width="120"></vxe-column>
    <!-- <vxe-column field="openId" title="平台买家唯一值" show-overflow width="140"></vxe-column> -->
    <vxe-column field="buyerPaidAmount" title="买家/分销商总实付" width="120"></vxe-column>
    <vxe-column field="sellerIncomeAmount" title="总卖家实收" width="120"></vxe-column>
    <!-- <vxe-column field="invoiceType" title="发票类型" width="120"></vxe-column> -->
    <vxe-column field="invoiceTitle" title="发票抬头+税号" width="120">
      <template #default="{ row }">
        <span>{{ row.invoiceTitle }}</span> <br />
        <span style="color: #b9b8b8;">{{ row.buyerTaxNo }}</span><br />
        <span>{{ row.invoiceType }}</span>
      </template>
    </vxe-column>
  </vxe-table>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import Format from '@/benyun/utils/dateFormat'
@Component
export default class OrderTable extends Vue {
  @Prop()
  data!: Array<any>
  height = null

  operationFlag: any = {
    'OMS': '手工下单',
    'COPY': '复制',
    'MERGE': '合并',
    'SPLIT': '拆分；拆分还原',
    'MOBILE': '导入',
    'DRP-S': '供销推送',
    'DRP-D': '分销推送',
    'KWAISHOP': '快手；微商城',
    'PINDUODUO': '拼多多',
    'TOUTIAOFXG': '头条放心购',
    'JUSHUITAN': '聚水潭'
  }
  //转换售卖类型
  getSellType(n: any) {
    let name = ''
    switch (n) {
      case '1':
        name = '自营';
        break;
      case '2':
        name = '代发';
        break;
      case '3':
        name = '代销';
        break;
      case '4':
        name = '经销';
        break;
      case '5':
        name = '线下';
        break;
    }
    return name;
  }
  //订单来源转换文字信息
  getFromText(f: any) {
    let t = '';
    if (f) {
      let arr: Array<any> = f.split(',');
      for (const item of arr) {
        if (this.operationFlag[item]) {
          if (t) {
            t = t + ' , ' + this.operationFlag[item]
          } else {
            t = this.operationFlag[item]
          }
        }
      }
    }
    return t;
  }
  //是否显示发货
  showSend(item: any) {
    let noStatus = ['WaitPay', 'Delivering', 'Merged', 'Split', 'Question', 'Sent', 'Cancelled'];
    if (item.isSubmitted == 1 && item.pays && item.pays.length > 0 && noStatus.indexOf(item.status) == -1) {
      return true
    }
    return false
  }
  //合并按钮是否显示
  showMerge(item: any) {
    let r = false;
    if (item.isSubmitted == 1 && item.pays && item.pays.length > 0 && (!item.operationFlag || item.operationFlag.indexOf('MERGE') == -1 && item.operationFlag.indexOf('SPLIT') == -1
      && item.operationFlag.indexOf('JUSHUITAN') == -1)) {
      if (item.status == 'WaitConfirm' || item.status == 'Question') {
        r = true;
      }
    }
    return r;
  }
  showSplit(item: any) {
    let r = false;
    if (item.isSubmitted == 1 && item.pays && item.pays.length > 0 && (!item.operationFlag || item.operationFlag.indexOf('MERGE') == -1 && item.operationFlag.indexOf('SPLIT') == -1
      && item.operationFlag.indexOf('JUSHUITAN') == -1)) {
      let s = ['WaitConfirm', 'Question', 'Split']
      if (s.indexOf(item.status) >= 0) {
        r = true;
      }
    }
    return r;
  }

  formatDate(v: string) {
    return Format(v, 'yyyy-MM-dd');
  }

  mounted() {
    this.$nextTick(() => {
      this.height = (this as any).$el.offsetHeight;
    })
  }
  detail(row: any) {
    this.$emit('detail', row)
  }
  getSelectData() {
    let data = (this as any).$lodash.cloneDeep((this.$refs.table as any).getCheckboxRecords());
    return data;
  }
  sendGoods(row: any) {
    this.$emit('sendGoods', row)
  }
  sendGoodsDetail(row: any) {
    this.$emit('sendGoodsDetail', row)
  }
  mergeHandle(row: any) {
    let v = (this as any).$lodash.cloneDeep(row);
    v.isMain = 1;
    let data: Array<any> = [];
    data.push(v);
    for (const item of this.data) {
      if (row.id != item.id && item.isSubmitted == 1 && row.buyerId == item.buyerId && row.receiverMobile == item.receiverMobile && row.receiverProvince == item.receiverProvince && row.receiverCity == item.receiverCity && row.receiverDistrict == item.receiverDistrict && row.receiverTown == item.receiverTown && row.receiverAddress == item.receiverAddress && item.pays && item.pays.length > 0 && item.operationFlag.indexOf('SPLIT') == -1 &&
        item.operationFlag.indexOf('MERGE') == -1 && (item.status == 'WaitConfirm' || item.status == 'Question')) {
        data.push(item);
      }
    }
    this.$emit('mergeHandle', data);
  }
  splitHandle(row: any) {
    this.$emit('splitHandle', row);
  }
}
</script>

<style lang="scss" scoped>
.detail {
  color: #0089ff;
  cursor: pointer;
}

.col-cont {

  // display: flex;
  // justify-content: space-between;
  // align-items: center;
  // flex-direction: column;
  .update {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    visibility: hidden;
  }

  .tag-update {
    height: 24px;
    width: 24px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: #2d99f7;
    color: #FFF;
    flex-shrink: 0;
    margin-left: 4px;
    cursor: pointer;
  }

  .tag-update:hover {
    opacity: 0.7;
  }
}
</style>

<style lang="scss">
.row--hover {
  .update {
    visibility: visible !important;
  }
}

.row--current {
  .update {
    visibility: visible !important;
  }
}

.image-slot {
  .el-icon-picture-outline {
    font-size: 28px;
    color: #999;
  }
}

.item-pro {
  .el-badge__content {
    z-index: 1;
  }
}
</style>