<template>
  <div class="p20" v-loading="loading">
    <div class="clearfix flex-center">
      <welfare-item :welfare-id="$route.query.id" :type="type" @updateSkulist="(list) => { skuList = list; }"></welfare-item>
    </div>
    <div style="height:20px;width:calc(100% + 40px);position:relative;left:-20px;" class="bg-color mb20"></div>
    <div>
      <p class="fray01 fw500 mb15">操作记录<span class="fz12 ml15 gray03 fw400">主要对手动调整库存，应用占用库存，应用释放库存的场景下对福利“可占库存”引起变更进行记录</span></p>
      <div class="mb20">
        <el-select class="mr10 w160" v-if="type == 1" clearable v-model="listParams.name" placeholder="全部SKU" @change="refresh">
          <el-option v-for="(item, idx) in skuList" :key="idx" :label="item.giftSkuName" :value="item.giftSkuId"></el-option>
        </el-select>
        <el-select class="mr10 w160" clearable v-model="listParams.modifyType" placeholder="全部操作类型" @change="refresh">
          <el-option v-for="item in stockAdjustType" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-select v-model="appCodes" class="w160 mr10" multiple placeholder="全部来源" clearable @change="changeAppCode">
          <el-option v-for="item in appList" :key="item.appCode" :label="item.appName" :value="item.appCode"></el-option>
        </el-select>
        <el-input class="mr10 w260" 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="w350 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="modifyTime" label="操作时间" min-width="120" fixed="left">
        <span slot-scope="scope" v-html="listTime(scope.row.modifyTime)"></span>
      </el-table-column>
      <el-table-column v-if="type == 1 || type == 2" prop="name" label="调整对象" min-width="120"> </el-table-column>
      <el-table-column label="调整类型" min-width="120">
        <span slot-scope="scope">{{ scope.row.modifyType | fType }}</span>
      </el-table-column>
      <el-table-column prop="modifyStock" label="调整数量" min-width="120"> </el-table-column>
      <el-table-column prop="afterRemainedStock" label="可占库存" min-width="120"> </el-table-column>
      <el-table-column prop="creatorName" label="操作人" min-width="120"> </el-table-column>
      <el-table-column prop="appName" label="调整应用" min-width="120"> </el-table-column>
      <el-table-column prop="activityName" label="活动名称" min-width="120"> </el-table-column>
      <el-table-column prop="remark" 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/common.js';
import { cardType } from '@/config/mapping/gic-card';
import { stockAdjustType } from '@/config/mapping/common';
import welfareItem from './welfare-item';

const { getStockList, getAppList } = fetch;
export default {
  name: 'StockList',
  components: {
    welfareItem,
  },
  mixins: [ page, formate ],
  props: {
    welfareId: {
      type: String,
      required: true
    },
    type: {
      type: [ Number, String ], // 1实物礼品 2虚拟礼品 3卡券 4卡券包
      required: true
    }
  },
  data() {
    return {
      loading: false,
      dateTime: [ , ],
      listParams: {
        welfareId: this.welfareId,
        modifyType: '', // 调整类型(1:加，2:减)
        startDate: '',
        endDate: '',
        activityName: '',
        appCodes: '',
        currentPage: 1,
        pageSize: 20
      },
      stockAdjustType: Object.keys(stockAdjustType).map(v => { return { label: stockAdjustType[v], value: v }; }),
      total: 0,
      tableList: [],
      appList: [],
      appCodes: [],
      skuList: []
    };
  },
  mounted() {
    if(this.welfareId) {
      this.getAppList();
      this.getTableList();
    }
  },
  methods: {
    listTime,
    formatCardType(row) {
      return cardType[row.cardType].label;
    },
    changeAppCode(ids) {
      this.listParams.appCodes = ids.join(',');
      this.refresh();
    },
    getAppList() {
      getAppList().then(res => {
        this.appList = res.result || [];
      });
    },
    getTableList() {
      if(this.loading) {
        return;
      }
      this.formatterTimeFunc('startDate', 'endDate', 'yyyy-MM-dd', 'dateTime');
      this.loading = true;
      getStockList(this.listParams).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;
      });
    },
  },
  filters: {
    fType(v) {
      return stockAdjustType[v] || '--';
    }
  }
};
</script>
