<template>
  <section v-loading="loading">
    <div class="pb22 clearfix">
      <el-input v-model="listParams.search" class="w300" placeholder="卡券名称/卡券代码/用户信息" clearable @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-select clearable class="dm-select" v-model="listParams.giveStatus" placeholder="全部转赠状态" @change="refresh">
        <el-option label="转赠中" :value="0"></el-option>
        <el-option label="已完成" :value="1"></el-option>
        <!-- <el-option label="转赠异常" :value="2"></el-option> -->
      </el-select>
    </div>
    <div class="filter--box"><span class="vertical-middle pl10">转赠时间：</span><el-date-picker v-model="dateTime" :clearable="false" @change="refresh" class="w300" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker> <span class="vertical-middle">领取时间：</span><el-date-picker v-model="dateTime2" @change="refresh" class="w300" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></div>
    <el-table tooltipEffect="light" :data="tableList" style="width: 100%">
      <el-table-column :show-overflow-tooltip="true" min-width="120" header-align="left" align="left" prop="memberId" label="转赠会员">
        <template slot-scope="scope">
          <a v-if="scope.row.fromMemberId" :href="'/member/#/wechatmemberDetail?memberId=' + scope.row.fromMemberId" target="_blank">
            <img class="vertical-middle table__avatar--40" :src="scope.row.fromImageUrl || defaultAvatar" width="60" height="60" />
            <div class="inline-block vertical-middle">
              <p class="table-name--ellipsis">{{ scope.row.fromMemberName || '--' }}</p>
              <p class="fz13 gray">{{ scope.row.fromPhoneNumber || '--' }}</p>
            </div>
          </a>
          <span v-else>游客openid：{{ scope.row.fromOpenId || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" width="100" align="left" prop="giveTime" label="转赠时间">
        <template slot-scope="scope">
          <p class="cell-time">
            {{ formatDateTimeByType(scope.row.giveTime, 'yyyy-MM-dd-HH-mm', true).y }}<br />
            <span>{{ formatDateTimeByType(scope.row.giveTime, 'yyyy-MM-dd-HH-mm', true).h }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" width="140" align="left" prop="cardType" label="卡券类型">
        <template slot-scope="scope">
          <p>{{ scope.row.cardType === 0 ? '抵金券' : scope.row.cardType === 1 ? '折扣券' : '兑换券' }}</p>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" min-width="120" align="left" prop="cardName" label="卡券名称"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" min-width="120" align="left" prop="fromCardCode" label="转赠卡券代码"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" width="140" align="left" prop="cardType" label="转赠状态">
        <template slot-scope="scope">
          {{ scope.row.giveStatus === 0 ? '转赠中' : scope.row.giveStatus === 1 ? '已完成' : '转赠异常' }}
          <el-tooltip v-if="scope.row.giveStatus == 2" :open-delay="300" class="item" effect="dark" :content="scope.row.remark" placement="top-start">
            <i class="el-icon-warning" style="color:#f56c6c;cursor:pointer;"></i>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" min-width="120" header-align="left" align="left" prop="memberId" label="领取会员">
        <template slot-scope="scope">
          <template v-if="scope.row.giveStatus === 1 || scope.row.giveStatus === 2">
            <a v-if="scope.row.friendMemberId" :href="'/member/#/wechatmemberDetail?memberId=' + scope.row.friendMemberId" target="_blank">
              <img class="vertical-middle table__avatar--40" :src="scope.row.friendImageUrl || defaultAvatar" width="60" height="60" />
              <div class="inline-block vertical-middle">
                <p class="table-name--ellipsis">{{ scope.row.friendMemberName || '--' }}</p>
                <p class="fz13 gray">{{ scope.row.friendPhoneNumber || '--' }}</p>
              </div>
            </a>
            <span v-else-if="scope.row.friendOpenId">游客openid：{{ scope.row.friendOpenId || '--' }}</span>
            <span v-else>--</span>
          </template>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" width="100" align="left" prop="receiveTime" label="领取时间">
        <template slot-scope="scope">
          <p v-if="scope.row.giveStatus === 1 || scope.row.giveStatus === 2" class="cell-time">
            {{ formatDateTimeByType(scope.row.receiveTime, 'yyyy-MM-dd-HH-mm', true).y }}<br />
            <span>{{ formatDateTimeByType(scope.row.receiveTime, 'yyyy-MM-dd-HH-mm', true).h }}</span>
          </p>
          <span v-else>--</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" min-width="120" align="left" prop="friendCardCode" label="受赠卡券代码">
        <template slot-scope="scope">
          <span v-if="scope.row.giveStatus === 1">{{ scope.row.friendCardCode }}</span>
          <span v-else>--</span>
        </template>
      </el-table-column>
    </el-table>
    <dm-pagination v-show="tableList.length" background class="dm-pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listParams.currentPage" :page-sizes="[20, 40, 60, 80]" :page-size="listParams.pageSize" layout="total, sizes, prev, pager, next" :total="total"></dm-pagination>
  </section>
</template>
<script>
import { getCouponLogPage } from '@/service/api/cardApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
import talbeMethods from '@/mixins/tableMethods.js';
import filterAvater from '@/mixins/filterAvater.js';

export default {
  name: 'refund-list',
  mixins: [talbeMethods, filterAvater],
  data() {
    return {
      formatDateTimeByType,
      dateTime: [,],
      dateTime2: [,],
      listParams: {
        giveBeginTime: '',
        giveEndTime: '',
        receiveBeginTime: '',
        receiveEndTime: '',
        giveStatus: '',
        search: '',
        currentPage: 1,
        pageSize: 20
      },
      total: 0,
      loading: false,
      tableList: [],
      projectName: 'marketing' // 当前项目名
    };
  },
  created() {
    this.getTableList();
    this.$store.commit('mutations_breadcrumb', [{ name: '营销管理', path: '' }, { name: '卡券营销', path: '' }, { name: '转赠记录', path: '' }]); // eslint-disable-line
  },
  methods: {
    // 加载列表
    async getTableList() {
      this.loading = true;
      this.dataTimeFormat();
      try {
        let res = await getCouponLogPage(this.listParams);
        this.tableList = res.result.result || [];
        this.total = res.result.totalCount || 0;
      } catch (err) {
        this.$tips({ type: 'error', message: '加载列表失败' });
      }
      this.loading = false;
    },
    /**-------辅助方法---------- */
    dataTimeFormat() {
      if (this.dateTime) {
        this.listParams.giveBeginTime = formatDateTimeByType(this.dateTime[0], 'yyyy-MM-dd');
        this.listParams.giveEndTime = formatDateTimeByType(this.dateTime[1], 'yyyy-MM-dd');
      } else {
        this.listParams.giveBeginTime = '';
        this.listParams.giveEndTime = '';
      }
      if (this.dateTime2) {
        this.listParams.receiveBeginTime = formatDateTimeByType(this.dateTime2[0], 'yyyy-MM-dd');
        this.listParams.receiveEndTime = formatDateTimeByType(this.dateTime2[1], 'yyyy-MM-dd');
      } else {
        this.listParams.receiveBeginTime = '';
        this.listParams.receiveEndTime = '';
      }
    }
  }
};
</script>
