<template>
  <div class="p20" v-loading="loading">
    <div class="pb20 clearfix flex-center">
      <welfare-item :welfare-id="$route.query.id"></welfare-item>
    </div>
    <div style="height:20px;width:calc(100% + 40px);position:relative;left:-20px;" class="bg-color mb20"></div>
    <div>
      <p class="fz16 mb15">操作记录<span class="fz12 ml10 gray03">主要对手动调整库存，应用占用库存，应用释放库存的场景下对福利“可占库存”引起变更进行记录</span></p>
      <div class="table-search-head">
        <el-select class="mr10 w140" clearable v-model="listParams.status" placeholder="全部操作类型" @change="refresh">
          <el-option v-for="item in stockAdjustStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select class="mr10 w140" clearable v-model="listParams.status" placeholder="全部应用" @change="refresh">
          <el-option label="福利调整(手动)" :value="1"></el-option>
          <el-option label="福利调整(同步)" :value="2"></el-option>
          <el-option label="积分商城" :value="3"></el-option>
        </el-select>
        <el-input class="mr10 w300" v-model="listParams.activityName" clearable placeholder="请输入活动名称搜索" @change="refresh"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
        <el-date-picker class="w300 mr10" v-model="dateTime" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker>
      </div>
    </div>
    <el-table tooltip-effect="dark" :data="tableList" style="width:100%">
      <el-table-column prop="giveTime" label="操作时间" min-width="120">
        <span slot-scope="scope" v-html="listTime(scope.row.createTime)"></span>
      </el-table-column>
      <el-table-column label="调整类型" min-width="120" fixed="left">
        <span slot-scope="scope">{{ scope.row.type | fType }}</span>
      </el-table-column>
      <el-table-column prop="couponCode" label="调整数量" min-width="120"> </el-table-column>
      <el-table-column prop="couponCode" label="可占库存" min-width="120"> </el-table-column>
      <el-table-column prop="couponCode" label="操作人" min-width="120"> </el-table-column>
      <el-table-column prop="couponCode" label="调整应用" min-width="120"> </el-table-column>
      <el-table-column prop="couponCode" label="活动名称" min-width="120"> </el-table-column>
      <el-table-column prop="couponCode" label="备注" min-width="140" show-overflow-tooltip> </el-table-column>
    </el-table>
    <div class="clearfix">
      <dm-pagination class="fr mb0" v-if="tableList.length" background @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>
    </div>
  </div>
</template>

<script>
import { page, formate } from '@/mixins/table.js';
import { listTime } from '@/utils/index.js';
import fetch from '@/api/gic-card.js';
import { cardType } from '@/config/mapping/gic-card';
import { stockAdjustStatus } from '@/config/mapping/common';
import welfareItem from './welfare-item';

const { giveLogList } = fetch;
export default {
  name: 'SendList',
  components: {
    welfareItem,
  },
  mixins: [ page, formate ],
  props: {
    welfareId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      dateTime: [ , ],
      listParams: {
        appCode: '',
        activityName: '',
        receiveBeginTime: '',
        receiveEndTime: '',
        currentPage: 1,
        pageSize: 20
      },
      stockAdjustStatus: Object.keys(stockAdjustStatus).map(v => { return { label: stockAdjustStatus[v], value: v }; }),
      total: 0,
      tableList: [],
    };
  },
  created() {
    this.$emit('updateBread', [  { breadName: '福利中心'  }, { breadName: 'GIC卡券' }, { breadName: '卡券日志' }, { breadName: '转赠记录' } ]);
  },
  mounted() {
    this.getTableList();
  },
  methods: {
    listTime,
    // formatSendStatus(row) {
    //   const st = sendType[row.status];
    //   if(st) {
    //     return `<span class="state-point ${st.cl}">${st.label || '--'}</span>`;
    //   } else {
    //     return '<span class="state-point state-point-default">未知状态</span>';
    //   }
    // },
    formatCardType(row) {
      return cardType[row.cardType].label;
    },
    getTableList() {
      return;
      if(this.loading) {
        return;
      }
      this.loading = true;
      this.formatterTimeFunc('giveBeginTime', 'giveEndTime', 'yyyy-MM-dd', 'dateTime');
      let params = { ...this.listParams, memberCardId: this.currentAreaId };
      // TODO: search
      giveLogList(params).then(res => {
        this.loading = false;
        const data = res.result;
        this.tableList = data.result || [];
        this.total = data.totalCount;
        // 删除至最后一页没数据的情况，页码-1
        if (this.tableList.length === 0 && this.listParams.currentPage !== 1) {
          this.listParams.currentPage -= 1;
          this.getTableList();
        }
      }).finally(() => {
        this.loading = false;
      });
    },
  },
  filter: {
    fType(v) {
      return stockAdjustStatus[v] || '未知操作';
    }
  }
};
</script>
