<template>
  <div class="welfare-item">
    <div class="head">
      <el-tag effect="plain">{{ fUseStatus(info.useStatus)  }}</el-tag>
      <label>福利ID：</label><span>{{ welfareId }}</span>
      <label>更新时间：</label><span v-html="formatDateTimeByType(info.updateTime)"></span>
      <label>创建时间：</label><span v-html="formatDateTimeByType(info.createTime)"></span>
      <span class="btn" @click="dialogVisible = true">活动记录<i class="el-icon-arrow-right ml5"></i></span>
    </div>
    <div class="content">
      <div class="f1">
        <div class="detail">
          <p>{{ info.name || '--' }}</p>
          <p class="gray03 fz12"><template v-if="type == 1 || type == 2">礼品编码：</template>{{ info.remarkName || '--' }}</p>
          <img :src="info.imgUrl" draggable="false" />
        </div>
        <p>成本(元)<span>¥{{ info.costPrice || 0 }}</span></p>
        <p>可占库存<span>{{ info.remainedStock || 0 }}</span></p>
      </div>
      <div class="f2">
        <el-row :gutter="10">
          <el-col :span="12" class="mb20">已占用：<span>{{ info.occupyStock || 0 }}</span></el-col>
          <el-col :span="12" class="mb20">总库存：<span>{{ info.totalStock || 0 }}</span></el-col>
          <el-col :span="12">已履约：<span>{{ info.outStock || 0 }}</span></el-col>
          <el-col :span="12" v-if="type == 1 || type == 2">待履约：<span>{{ info.preStock || 0 }}</span></el-col>
        </el-row>
      </div>
    </div>
    <!-- 实物礼品才有sku列表 -->
    <el-table :data="skuList" v-if="type == 1 && goodsStandardInfo.length > 0" style="width: calc(100% - 40px)" max-height="200" class="ml20 mr20 mb10 el-table-list-mini-empty">
      <el-table-column prop="giftSkuName" label="SKU信息" min-width="180" show-overflow-tooltip>
        <template slot-scope="scope">
          <div style="display:flex;align-items:center;">
            <img :src="scope.row.giftSkuImgUrl" width="40" height="40" class="mr10" />
            <span>{{ scope.row.giftSkuName || '--' }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="giftSkuId" 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="outStock" 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: [],
      goodsStandardInfo: []
    };
  },
  methods: {
    formatDateTimeByType,
    getWelfareInfo() {
      if(this.type == 1 || this.type == 2) {
        // 礼品
        giftGet({ id: this.welfareId }).then(res => {
          const { giftImages, updateTime, createTime, giftName, giftNo, virCostPrice, outStock, preStock, occupyStock, remainedStock, totalStock, useStatus } = res.result;
          this.info = {
            imgUrl: giftImages,
            updateTime,
            createTime,
            name: giftName,
            remarkName: giftNo,
            costPrice: virCostPrice,
            outStock, // 已履约数
            preStock, // 待履约数
            occupyStock, // 已占用库存
            remainedStock, // 可占用库存
            totalStock, // 总库存
            useStatus, // 状态
          };
          if(this.type == 1) {
            // this.skuList = res.result.skuList || [];
            this.goodsStandardInfo = res.result.giftSpecInfo ? JSON.parse(res.result.giftSpecInfo) : []; // 礼品规格信息
            this.skuList = this.goodsStandardInfo.length ? res.result.skuList : [];
            this.$emit('updateSkulist', this.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 { imgUrl, updateTime, createTime, name, remarkName, costPriceRemark, outStock, preStock, occupyStock, remainedStock, totalStock, useStatus } = res.result;
          this.info = {
            imgUrl,
            updateTime,
            createTime,
            name,
            remarkName,
            costPrice: costPriceRemark,
            outStock, // 已履约数
            preStock, // 待履约数
            occupyStock, // 已占用库存
            remainedStock, // 可占用库存
            totalStock, // 总库存
            useStatus, // 状态
          };
        });
      }
    },
    fUseStatus(val) {
      const gift = {
        1: '正常',
        2: '仅隐藏',
        3: '正常',
      };
      const card = {
        0: '未生效',
        1: '已生效',
        2: '已过期',
        3: '已禁用',
      };
      return (this.type == 1 || this.type == 2 ? gift[val] : card[val]) || '--';
    }
  },
  watch: {
    welfareId: {
      handler() {
        this.getWelfareInfo();
      },
      immediate: true,
    },
  }
};
</script>

<style lang="scss" scope>
.welfare-item {
  width: 100%;
  background: white;
  .head {
    border-bottom: 1px solid $gray-separator;
    font-size: 13px;
    background: $gray-disable;
    color:  $gray01;
    height: 40px;
    line-height: 40px;
    padding: 0 20px 0;
    border-bottom: 1px solid $gray-tab;
    color: $gray02;
    span {
      margin-right: 30px;
    }
    span.btn {
      margin-right: 5px;
      font-weight: 400;
      color: $gray01;
      line-height: 40px;
      float: right;
      cursor: pointer;
    }
  }
  .content {
    height: 83px;
    overflow: hidden;
    padding: 0;
    display: flex;
    padding: 10px 16px;
    border-bottom: 1px solid #E4E7ED;
    margin-bottom: 20px;;
    .f1{
      flex: 6;
      display: flex;
      > * {
        flex: 1;
      }
      border-right: 1px solid #E4E7ED;
      > p {
        margin-left: 10px;
        padding-top: 4px;
        font-size: 14px;
        font-weight: 400;
        color: #606266;
        line-height: 20px;
        span {
          margin-top: 6px;
          display: block;
          font-size: 18px;
          font-weight: 500;
          line-height: 21px;
          color: $gray01;
        }
      }
      div.detail {
        flex: 2;
        position: relative;
        padding-left: 70px;
        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 60px;
          height: 60px;
          border-radius: 4px;
        }
        p:first-child {
          padding-top: 8px;
          font-weight: 400;
          color: #303133;
          line-height: 22px;
          margin-bottom: 6px;
          & + p {
            font-size: 12px;
            color: #303133;
            line-height: 17px;
          }
        }
      }
    }
    .f2{
      flex: 4;
      padding: 0 20px 0;
      /deep/ .el-col {
        color: #606266;
        line-height: 20px;
        span {
          color: #303133;
        }
      }
    }
  }
}
</style>