<template>
  <div class="welfare-item">
    <div class="head">
      <el-tag type="success" class="mr10">使用中</el-tag>
      <label>更新时间：</label><span v-html="formatDateTimeByType(info.updateTime)"></span><label class="ml30">福利ID：</label>{{ welfareId }}
    </div>
    <div class="content">
      <div>
        <p>{{ info.name || '--' }}</p>
        <p class="gray03 fz12"><template v-if="type == 1 || type == 2">礼品编码：</template>{{ info.remarkName || '--' }}</p>
        <p class="gray03 fz12">创建时间：<span v-html="formatDateTimeByType(info.createTime)"></span></p>
      </div>
      <div>
        <p>成本:¥{{ info.costPrice || 0 }}</p>
        <p>可占库存：{{ info.remainedStock || 0 }}</p>
      </div>
      <div style="position:relative;">
        <p>已占用：{{ info.occupyStock || 0 }}</p>
        <p>总库存：{{ info.totalStock || 0 }}</p>
        <p>已履约：{{ info.outStock || 0 }}</p>
        <p v-if="type == 1 || type == 2">待履约：{{ info.reStock || 0 }}</p>
      </div>
      <div style="flex-shrink: 0;width:100px;">
        <el-button type="primary" class="fr mr20" @click="dialogVisible = true">活动记录</el-button>
      </div>
    </div>
    <!-- 实物礼品才有sku列表 -->
    <el-table :data="skuList" v-if="type == 1" style="width: calc(100% - 40px)" max-height="200" class="ml20 mr20 mb10 el-table-list-mini-empty">
      <el-table-column prop="num" label="SKU信息" min-width="200">
        <template slot-scope="scope">
          <img :src="scope.row.giftSkuImgUrl" width="50" height="50" />
          {{ scope.row.giftSkuName || '--' }}
        </template>
      </el-table-column>
      <el-table-column prop="giftSkuCode" label="SKU编码" min-width="150"></el-table-column>
      <el-table-column prop="totalStock" label="总库存" min-width="150"></el-table-column>
      <el-table-column prop="occupyStock" label="已占用" min-width="150"></el-table-column>
      <el-table-column prop="remainedStock" label="可占库存" min-width="150"></el-table-column>
      <el-table-column prop="num" label="已履约" min-width="150"></el-table-column>
    </el-table>
    <act-dialog :dialog-visible.sync="dialogVisible" :welfare-id="$route.query.id"></act-dialog>
  </div>
</template>

<script>
import actDialog from './dialog';
import giftApi from '@/api/gift.js';
import cardApi from '@/api/gic-card.js';
const { giftGet } = giftApi;
const { couponStockInfo } = cardApi;
import { formatDateTimeByType } from '@/utils/index.js';

export default {
  name: 'WelfareItem',
  components: {
    actDialog
  },
  props: {
    welfareId: {
      type: String,
      required: true
    },
    type: {
      type: [ Number, String ], // 1实物礼品 2虚拟礼品 3卡券 4卡券包
      required: true
    }
  },
  data() {
    return {
      info: {},
      dialogVisible: false,
      skuList: Array(5).fill({ num: 50 })
    };
  },
  methods: {
    formatDateTimeByType,
    getWelfareInfo() {
      if(this.type == 1 || this.type == 2) {
        // 礼品
        giftGet({ id: this.welfareId }).then(res => {
          const { updateTime, createTime, giftName, giftNo, virCostPrice, outStock, preStock, occupyStock, remainedStock, totalStock } = res.result;
          this.info = {
            updateTime,
            createTime,
            name: giftName,
            remarkName: giftNo,
            costPrice: virCostPrice,
            outStock, // 已履约数
            preStock, // 待履约数
            occupyStock, // 已占用库存
            remainedStock, // 可占用库存
            totalStock, // 总库存
          };
          this.skuList = res.skuList || [];
        });
      }
      if(this.type == 3 || this.type == 4) {
        // 入参: welfareId福利id, type: 1:卡券,2:卡券包
        couponStockInfo({ welfareId: this.welfareId, type: this.type == 3 ? 1 : 2 }).then(res => {
          const { updateTime, createTime, name, remarkName, costPriceRemark, outStock, preStock, occupyStock, remainedStock, totalStock } = res.result;
          this.info = {
            updateTime,
            createTime,
            name,
            remarkName,
            costPrice: costPriceRemark,
            outStock, // 已履约数
            preStock, // 待履约数
            occupyStock, // 已占用库存
            remainedStock, // 可占用库存
            totalStock, // 总库存
          };
        });
      }
    }
  },
  watch: {
    welfareId: {
      handler() {
        this.getWelfareInfo();
      },
      immediate: true,
    },
  }
};
</script>

<style lang="scss" scope>
.welfare-item {
  width: 100%;
  border: 1px solid $gray-tab;
  background: white;
  .head {
    font-size: 13px;
    background: $gray-thead;
    color:  $gray01;
    height: 40px;
    line-height: 40px;
    padding: 0 20px 0;
    border-bottom: 1px solid $gray-tab;
    label {
      color: $gray02;
    }
    &-type {
      margin-right: 20px;
      min-width: 100px;
    }
  }
  .content {
    height: 115px;
    overflow: hidden;
    padding: 0;
    display: flex;
    > div {
      margin-left: 20px;
      padding-top: 20px;
      flex: 1;
      line-height: 28px;
    }
  }
}
</style>