<template>
  <div class="performance-record">
    <header>
      <el-select style="width:160px" v-model="query.appCode" placeholder="请选择来源" @change="handleSearch" clearable>
        <el-option label="积分商城" :value="1"></el-option>
        <el-option label="口令福利" :value="2"></el-option>
      </el-select>
      <el-select style="width:160px;margin-left:10px" placeholder="配货方式" v-model="query.deliveryType" @change="handleSearch" clearable>
        <el-option label="物流发货" :value="1"></el-option>
        <el-option label="门店自提" :value="2"></el-option>
        <el-option label="文本券码" :value="3"></el-option>
      </el-select>
      <el-select style="width:160px;margin-left:10px" placeholder="履约状态" v-model="query.orderFlag" @change="handleSearch" clearable>
        <el-option label="待履约" :value="0"></el-option>
        <el-option label="已履约" :value="1"></el-option>
        <el-option label="已关闭" :value="2"></el-option>
      </el-select>
      <el-input style="width:300px;margin-left:10px" placeholder="请输入关键词搜索" v-model="searchValue" clearable @keyup.enter.native="handleSearch" @change="handleSearch">
        <el-select v-model="searchType" slot="prepend" style="width:140px;">
          <el-option label="礼品名称" value="giftName"></el-option>
          <el-option label="礼品编码" value="giftNo"></el-option>
          <el-option label="sku编码" value="giftSkuCode"></el-option>
          <el-option label="会员姓名" value="memberName"></el-option>
          <el-option label="会员卡号" value="memberCardNo"></el-option>
          <el-option label="履约单号" value="orderId"></el-option>
        </el-select>
      </el-input>
      <el-date-picker class="w350" style="margin-left:10px" v-model="daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="handleSearch"></el-date-picker>
      <div style="float:right">
        <el-button type="primary" @click="add">导出</el-button>
      </div>
    </header>

    <el-table style="margin-top:20px" :data="list">
      <el-table-column label="礼品信息" width="300">
        <template slot-scope="{ row }">
          <div class="goods-info">
            <img class="imgs-style" :src="row.giftImgUrl" alt="" />
            <div class="goods-text">
              <div class="goods-text-name">
                {{row.giftName}}
              </div>
              <div class="goods-text-info">
                <div>
                  <span v-for="(item, i) in JSON.parse(row.giftSkuStrand)" :key="i">{{ item.specStandardName }}：{{ item.specStandardValueName }} &nbsp;&nbsp;</span>
                </div>
                <div>SKU编码：{{ row.giftSkuCode }}</div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="数量" prop="exchangeQuantity"></el-table-column>
      <el-table-column label="创建时间" sortable>
        <template slot-scope="{ row }">
          <p>{{ row.createTime | formatDate }}</p>
          <p>{{ row.createTime | formatDate('time') }}</p>
        </template>
      </el-table-column>
      <el-table-column label="履约单号">
        <template slot-scope="{ row }">
          <el-popover
            placement="bottom-end"
            width="200"
            trigger="click">
            <el-button type="text" slot="reference">{{row.orderId}}</el-button>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="会员信息">
        <template slot-scope="{ row }">
          <p>{{ row.memberName }}</p>
          <p>{{ row.memberCardNo }}</p>
        </template>
      </el-table-column>
      <el-table-column label="来源">
        <template slot-scope="{ row }">
          <p>{{ row.createTime | formatDate }}</p>
          <p>{{ row.createTime | formatDate('time') }}</p>
        </template>
      </el-table-column>
      <el-table-column label="履约状态">
        <template slot-scope="{ row }">
          {{orderFlagMap[row.orderFlag]}}
        </template>
      </el-table-column>
    </el-table>

    <dm-pagination
      background
      layout="total, sizes, prev, pager, next"
      style="text-align: right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pager.currentPage"
      :page-sizes="[20, 40, 60, 80]"
      :page-size="pager.pageSize"
      :total="pager.totalCount">
    </dm-pagination>
  </div>
</template>

<script>
import fetch from '@/api/performance.js';
const { getPerformanceList } = fetch;

const orderFlagMap = {
  0: '待履约',
  1: '已履约',
  2: '已关闭'
};

export default {
  name: 'DeliveryList',
  data() {
    return {
      pager: {
        currentPage: 1,
        pageSize: 20,
        totalCount: 0,
      },
      list: [],
      searchType: 'orderId',
      searchValue: '',
      query: {
        deliveryType: '',
        appCode: '',
        startTime: '',
        endTime: '',
        orderFlag: ''
      },
      orderFlagMap
    };
  },
  methods: {
    handleWiped() {
      this.$alert('自提核销', '请确认买家出示的提货码<div>{{123123}}</div>确认无误后，将商品交付给买家，确认核销后发货单完成', {
        dangerouslyUseHTMLString: true,
        confirmButtonText: '确认',
        showClose: false,
      });
    },
    async getList(sort = 'desc') {
      let query = {
        ...this.query,
        pageNum: this.pager.currentPage,
        pageSize: this.pager.pageSize,
        [this.searchType]: this.searchValue,
        deliveryFlag: this.type,
        sort
      };
      this.loading = true;
      let { result: { result, totalCount } } = await getPerformanceList(query).finally(() => this.loading = false);
      this.list = result || [];
      this.totalCount = totalCount;
    },
    // 搜索
    handleSearch() {
      this.pager.currentPage = 1;
      this.getList();
    },
    // 改变每页显示数量
    handleSizeChange(pageSize) {
      this.pager.currentPage = 1;
      this.pager.pageSize = pageSize;
      this.getList();
    },
    // 换页
    handleCurrentChange(currentPage) {
      this.pager.currentPage = currentPage;
      this.getList();
    },
  },
  filters: {
    formatDate(ms, type = 'date') {
      if (!ms) return '--';
      const date = [];
      const time = [];
      ms = new Date(ms);
      date.push(ms.getFullYear());
      date.push((ms.getMonth() + 1).toString().padStart(2, '0'));
      date.push(ms.getDate().toString().padStart(2, '0'));

      time.push(ms.getHours().toString().padStart(2, '0'));
      time.push(ms.getMinutes().toString().padStart(2, '0'));
      time.push(ms.getSeconds().toString().padStart(2, '0'));

      return {
        date: date.join('-'),
        time: time.join(':')
      }[type];
    }
  },
  computed: {
    daterange: {
      get() {
        return [ this.query.startTime, this.query.endTime ];
      },
      set(v) {
        [ this.query.startTime, this.query.endTime ] = v || [ '', '' ];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.performance-record {
  padding: 20px;
}
.goods-info {
  height: 100%;
  display: flex;
  img {
    width: 62px;
    height: 62px;
    border: 1px solid rgba(241, 243, 247, 1);
    border-radius: 5px;
  }
  .goods-text {
    margin-left: 18px;
    font-size: 13px;
    color: #303133;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .goods-text-info {
    color: #909399;
    font-size: 12px;
  }
  .goods-text-name {
    margin-bottom: 5px;
    line-height: 16px;
  }
}
</style>
