<template>
  <div class="mall-container-new">
    <div class="record">
      <header>
        <el-select v-model="search" placeholder="全部类型" clearable @change="searchChangd">
          <el-option label="购买" :value="1"></el-option>
          <el-option label="退款" :value="2"></el-option>
          <el-option label="退换货" :value="4"></el-option>
        </el-select>
      </header>
        <div class="table-content" v-loading="load">
        <el-table :class="['only-head-table',!memberData.length?'no-data':'']">
            <el-table-column v-for="colunm in tableColumnList" :key="colunm"  v-bind="{...colunm}" />
        </el-table>
        <div class="only-content-table-list" style=""
          v-if="memberData.length">
          <div class="group-item" v-for="group in memberData" :key="group">
            <div class="group-header">
              <div class="left">
                <p class="order-number">
                  订单编号：{{ group.orderNumber }}
                </p>
                <p class="order-time">
                  下单时间：{{ group.createTime }}
                </p>
              </div>
            </div>
            <el-table class="only-content-table" :data="group.orderItemList"
              :span-method="(obj)=>spanMethod({...obj,length:group.orderItemList.length})">
              <template v-for="colunm in tableColumnList">
                <el-table-column :key="colunm" v-bind="{...colunm}">
                  <template slot-scope="{row}">
                    <template
                      v-if="['orderStatus','deliveryInfo','payAmount'].includes(colunm.prop)">
                      <!-- 订单类型 -->
                      <template v-if="colunm.prop==='orderStatus'">
                        <div :style="{paddingLeft:'14px',color:orderColor[group.orderStatus]}">{{ group.orderStatus|orderTypeFilter }}
                        </div>
                      </template>
                      <!-- 收货信息 -->
                      <template v-else-if="colunm.prop==='deliveryInfo'">
                        <div class="delivery-info">
                          <p class="delivery-info-line">收件人：{{ group.buyerName || '--'}}</p>
                          <p class="delivery-info-line">手机号：{{ group.buyerPhone || '--' }}</p>
                          <el-tooltip class="item" :disabled="!group.addressInfo||(group.addressInfo&&group.addressInfo.length<=25)" effect="dark" :content="`收货地址：${group.addressInfo}`" placement="top-start" :open-delay="200">
                            <p class="delivery-info-line" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">收货地址：{{ group.addressInfo || '--' }}</p>
                          </el-tooltip>
                        </div>
                      </template>
                      <!-- 小计 -->
                      <template v-else>
                        <div style="display:flex;align-items:center;padding-left:14px;">
                          ￥{{ group[colunm.prop]|fomatFloat }}
                        </div>
                      </template>
                    </template>
                    <template v-else>
                      <!-- 商品信息 -->
                      <div class="good-info" v-if="colunm.prop==='mallProName'">
                        <el-image fit="cover"
                          :src="row.mallProImageUrl ? row.mallProImageUrl : './static/img/default-goods.png'">
                          <div slot="error" class="image-slot">
                            <img width="60" :src="brokeImg" alt="">
                          </div>
                        </el-image>
                        <div class="info-detail">
                          <el-tooltip class="item"  :disabled="row.mallProName.length<49" effect="dark" :content="row.mallProName" placement="top-start" :open-delay="200">
                            <div class="good-name">{{ row.mallProName }}</div>
                          </el-tooltip>
                          <div class="good-attr">{{ row.mallProSkuAttr }}</div>
                        </div>
                      </div>
                      <!-- 单价 -->
                      <div class="price-info" v-else-if="colunm.prop==='mallProPrice'">￥{{ row.mallProPrice|fomatFloat }}</div>
                      <!-- 数量 -->
                      <div v-else style="padding-left:14px;">{{ row.mallProNumber }}</div>
                    </template>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
        </div>
        <div class="page mTop20" v-if="page.totalCount > 0">
          <dm-pagination background @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :current-page="page.currentPage"
            :page-sizes="[20, 40, 60, 80]" :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next" :total="page.totalCount" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import nav from "../../common/navbar/navbar.vue";
import { doFetch } from "../../components/axios/api";
import url from "../../components/axios/url";
import {
  checkFalse,
  checkStatus,
} from "../../../static/js/checkStatus";
import { dateformat } from "@/utils/formatTime";

export default {
  name: "infoMall",
  filters: {
    orderTypeFilter: (v) => {
      switch (v) {
        case 1: return '购买'; case 2: return '退款'; case 4: return '退换货'; default: return '';
      }
    },
    formatColorSize: val => {
      let temp = "";
      if (val) {
        let oldval = JSON.parse(val);
        let nowval = oldval.map(item => {
          return `${item.key}: ${item.value}`;
        });
        temp = nowval[0];
      }
      return temp;
    },
    mallname: val => {
      let temp = "";
      if (val) {
        let tempArr = JSON.parse(val);
        tempArr.forEach(item => {
          temp += item.propName + ":" + item.valueName + " ";
        });
      }
      return temp;
    }
  },
  data() {
    return {
      memberId: this.$route.query.memberId || "",
      navpath: [
        {
          name: "首页",
          path: ""
        },
        {
          name: "客户列表",
          path: "/allCustomers"
        },
        {
          name: "客户详情",
          path: "/customerDetail?memberId=" + this.$route.query.memberId || ""
        },
        {
          name: "微盟订单",
          path: ""
        }
      ],
      page: {
        currentPage: 1,
        pageSize: 20,
        totalCount: 0
      },
      memberData: [],
      search: '',
      isWm:true, //当前页面是微盟
      tableColumnList: [
        { label: '商品', width: '500', prop: 'mallProName', 'show-overflow-tooltip':false },
        { label: '单价', 'min-width': '55', prop: 'mallProPrice', 'show-overflow-tooltip':true },
        { label: '数量', 'min-width': '55', prop: 'mallProNumber', 'show-overflow-tooltip':true },
        { label: '订单类型', 'min-width': '80', prop: 'orderStatus', 'show-overflow-tooltip':true },
        { label: '小计（实付）', 'min-width': '110', prop: 'payAmount', 'show-overflow-tooltip':true },
        { label: '收货信息', width: '400', prop: 'deliveryInfo', 'show-overflow-tooltip':false },
      ],
      orderColor:{1:'#303133',2:'#FA8C16',4:'#F5222D'},
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getMemberOrderPage();
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getMemberOrderPage();
    },
    getMemberOrderPage() {
      doFetch(this.isWm?url.getWMList:url.getOtherList, {
        memberId: this.memberId,
        pageSize: this.page.pageSize,
        currentPage: this.page.currentPage,
        orderStatus: this.search || undefined
      })
        .then(res => {
          if (res.data.errorCode === 0) {
            this.memberData = res.data.result.page.result.map(ele => ({
              ...ele,
              createTime: !!ele.createTime
                ? dateformat(new Date(ele.createTime), "yyyy-MM-dd hh:mm:ss")
                : "--"
            }));  
              console.log(this.memberData);
            this.page.currentPage = res.data.result.page.currentPage;
            this.page.totalCount = res.data.result.page.totalCount;
          } else {
            checkFalse(res.data.message);
          }
        })
        .catch(err => {
          checkStatus(err);
        });
    },
    goback() {
      this.$router.push({
        path: "customerDetail",
        query: { memberId: this.memberId }
      });
    },
    searchChangd() {
      this.page.currentPage = 1;
      this.getMemberOrderPage();
    },
     spanMethod({ rowIndex, columnIndex, length }) {
      if ([ 3, 4, 5 ].includes(columnIndex)) {
        if (rowIndex === 0) {
          return {
            rowspan: length,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
      return {
        rowspan: 1,
        colspan: 1,
      };
    },
  },
  mounted(){
    console.log(this.$route)
    if(this.$route.meta.title == '微盟订单'){
      this.isWm = true;
      this.navpath[3].name = '微盟订单'
    }else{
      this.isWm = false;
      this.navpath[3].name = '其他订单'
    }
    if (this.memberId) {
      this.getMemberOrderPage();
    }
    this.$store.commit("mutations-slide", true);
  },
  components: {
    "v-nav": nav
  }
};
</script>
<style lang="less" scoped>
.record {
  padding: 20px;
  background-color: #fff;

  header{
    margin-bottom: 20px;
  }
}
.table-content {
  .only-head-table {
    /deep/.el-table__body-wrapper {
      display: none;
    }
    /deep/.el-table__header-wrapper {
      margin-bottom: 16px;
    }
    &.no-data {
      /deep/.el-table__body-wrapper {
        display: block;
      }
    }
  }
  .only-content-table-list {
    overflow-y: scroll;
    max-height:calc(100vh - 292px);
    .only-content-table {
      /deep/.el-table__header-wrapper {
        display: none;
      }
      /deep/td:nth-child(4) {
        border-left: 1px solid #ebeef5;
      }
    }
    /deep/.el-table--enable-row-hover
      .el-table__body
      tr:hover
      > td.el-table__cell {
      background: none;
    }
    .group-item {
      cursor: default;
      .group-header {
        display: flex;
        justify-content: space-between;
        padding: 0 20px 0 14px;
        height: 48px;
        background: #f7f8fa;
        font-size: 14px;
        color: #303133;
        line-height: 22px;
        .left {
          display: flex;
          align-items: center;
          gap: 134px;
        }
        p {
          line-height: 48px;
        }
      }
      .delivery-info {
        padding-left: 14px;
        p{
          margin: 0;
        }
        .delivery-info-line {
          font-size: 14px;
          font-weight: 400;
          color: #303133;
          line-height: 20px;
          &+.delivery-info-line{
            margin-top: 4px;
          }
        }
      }
      .good-info {
        position: relative;
        width: inherit;
        height: 60px;
        overflow-y: hidden;
        p{
          margin: 0;
        }
        .el-image {
          position: absolute;
          top: 0;
          left: 0;
          flex-shrink: 0;
          width: 60px;
          height: 60px;
          border-radius: 2px;
        }
        .info-detail {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          position: absolute;
          left: 70px;
          top: 0;
          width: calc(100% - 120px);
          height: 60px;
          .good-name {
            width: 100%;
            // margin-bottom: 7px;
            font-size: 14px;
            color: #303133;
            line-height: 20px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow:ellipsis;
            word-break: break-all; /* 文本行的任意字内断开 */
            word-wrap: break-word; /* IE */
            white-space: -moz-pre-wrap; /* Mozilla */
            white-space: -hp-pre-wrap; /* HP printers */
            white-space: -o-pre-wrap; /* Opera 7 */
            white-space: -pre-wrap; /* Opera 4-6 */
            white-space: pre; /* CSS2 */
            white-space: pre-wrap; /* CSS 2.1 */
            white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
          }
          .good-attr {
            font-size: 12px;
            color: #909399;
            line-height: 17px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
          }
        }
      }

      .icon-span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 30px;
        height: 30px;
        margin-left: 4px;
        border-radius: 2px;
        text-align: center;
        cursor: pointer;
        .icon-zhangdan {
          font-size: 19px;
          color: #909399;
        }
        &:hover {
          background: #f0f5ff;
          .icon-zhangdan {
            color: #606266;
          }
        }
      }
    }
  }
}
</style>
