<template>
  <div class="p20" v-loading="loading">
    <div class="pb20 clearfix flex-center">
      <el-date-picker class="w250 mr10" v-model="dateTime" type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" @change="refresh"></el-date-picker>
      <el-select class="dm-select w140 mr10" clearable v-model="listParams.optType" placeholder="所有操作类型" @change="refresh">
        <el-option v-for="(v, i) in optType" :key="i" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <el-select class="dm-select w140 mrAuto" clearable v-model="listParams.status" placeholder="所有状态" @change="refresh">
        <el-option v-for="(v, i) in syncStatus" :key="i" :label="v.label" :value="v.value"></el-option>
      </el-select>
      <el-button @click="syncStock.type = 2; syncStock.visible = true;">返还</el-button>
      <!-- <el-button @click="toWelfare">查看</el-button> -->
      <el-button type="primary" @click="syncStock.type = 1; syncStock.visible = true;">同步</el-button>
    </div>
    <el-table tooltip-effect="dark" :data="tableList" style="width:100%">
      <template>
        <el-table-column v-for="(v, i) in tableHeader" :fixed="v.fixed" :show-overflow-tooltip="v.tooltip" :width="v.width" :min-width="v.minWidth" :align="v.align" :key="i" :prop="v.prop" :label="v.label" :formatter="v.formatter" :sortable="v.sortable">
          <template slot-scope="scope">
            <span v-if="v.formatter" v-html="v.formatter(scope.row)"></span>
            <span v-else>{{ scope.row[v.prop] }}</span>
          </template>
        </el-table-column>
      </template>
    </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>
    <!-- 同步库存 -->
    <sync-stock :visible.sync="syncStock.visible" :coupon-id="couponId" :type="syncStock.type" :show-link="false" @syncSuccess="getTableList" />
  </div>
</template>

<script>
import { page, formate } from '@/mixins/table.js';
import { listTime } from '@/utils/index.js';
import { cardType, syncStatus } from '@/config/mapping/gic-card';
import fetch from '@/api/gic-card.js';
import syncStock from './module/sync-stock';
const { getSyncWelfareList } = fetch;
export default {
  name: 'SyncStockList',
  components: {
    syncStock
  },
  mixins: [ page, formate ],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      couponId: this.$route.query.couponId,
      syncStock: {
        visible: false,
        type: 1,
      },
      couponInfo: {}, // 卡券信息
      dateTime: [ , ],
      listParams: {
        couponId: this.$route.query.couponId,
        optType: '',
        beginTime: '',
        endTime: '',
        status: '',
        currentPage: 1,
        pageSize: 20
      },
      optType: [ { label: '同步', value: 1 }, { label: '返还', value: 2 } ],
      syncStatus: Object.keys(syncStatus).map(v=> { return syncStatus[v]; }),
      tableList: [],
      total: 0,
      tableHeader: [
        {
          label: '操作时间',
          minWidth: '120',
          align: 'left',
          fixed: 'left',
          formatter: function(row) {
            return listTime(row.modifyTime);
          }
        },
        {
          label: '卡券',
          minWidth: '120',
          align: 'left',
          formatter: (row) => {
            const _cardType = cardType[this.couponInfo.cardType] || {};
            return `<p class="fz14">${this.couponInfo.cardName}</p><p class="fz12">${_cardType.label}</p>`;
          }
        },
        {
          label: '操作类型',
          align: 'left',
          minWidth: '120',
          formatter: function(row) {
            // 1: 同步; 2: 返还
            return row.modifyType === 1 ? '同步' : '返还';
          }
        },
        {
          label: '调整库存',
          minWidth: '120',
          align: 'left',
          formatter: function(row) {
            return  (row.modifyType === 1 ? '- ' : '+ ') + row.modifyStock;
          }
        },
        // { label: '操作人', prop: 'cardName', align: 'left', minWidth: '120' },
        // {
        //   label: '状态',
        //   minWidth: '120',
        //   align: 'left',
        //   formatter: function(row) {
        //     return '??????';
        //   }
        // }
      ]
    };
  },
  created() {
    this.$emit('updateBread', [  { breadName: '福利中心'  }, { breadName: 'GIC卡券' }, { breadName: '卡券库', breadPath: '/gic-card/list' }, { breadName: '同步记录' } ]);
  },
  mounted() {
    if(this.currentAreaId && this.couponId) {
      this.getTableList();
    }
  },
  methods: {
    toWelfare() {
      window.open(`/welfare/stock/log/list?id=${this.couponInfo.welfareId}`);
    },
    getTableList() {
      if(this.loading) {
        return;
      }
      this.loading = true;
      this.formatterTimeFunc('beginTime', 'endTime');
      let params = { ...this.listParams, ...{ memberCardId: this.currentAreaId } };
      getSyncWelfareList(params).then(res => {
        this.loading = false;
        const data = res.result.page;
        this.couponInfo = res.result.coupon || {};
        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;
      });
    }
  },
};
</script>
