<template>
  <div class="welfare-item">
    <div class="head">
      <el-tag type="success" class="mr10">使用中</el-tag>
      <label>更新时间：</label>2020-12-21 12:12:12<label class="ml30">福利ID：</label>567856785678567867867
    </div>
    <div class="content">
      <div>
        <p>100元卡券（线下）</p>
        <p class="gray03 fz12">100元卡券（线下）</p>
        <p class="gray03 fz12">创建时间：2020-12-12 12:12:12</p>
      </div>
      <div>
        <p>成本:¥12.00</p>
        <p>可占库存：1000</p>
      </div>
      <div style="position:relative;">
        <p>已占用：200</p>
        <p>总库存：1200</p>
        <p>已履约：140</p>
        <el-tag style="position:absolute;right:20px;top:20px;">实际库存</el-tag>
      </div>
      <div style="flex-shrink: 0;width:100px;">
        <el-button type="primary" class="fr mr20" @click="dialogVisible = true">活动记录</el-button>
      </div>
    </div>
    <el-table :data="skuList" style="width: calc(100% - 40px)" max-height="200" class="ml20 mr20 mb10">
      <el-table-column prop="num" label="SKU信息" min-width="150"></el-table-column>
      <el-table-column prop="num" label="SKU编码" min-width="150"></el-table-column>
      <el-table-column prop="num" label="总库存" min-width="150"></el-table-column>
      <el-table-column prop="num" label="已占用" min-width="150"></el-table-column>
      <el-table-column prop="num" 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';
export default {
  name: 'WelfareItem',
  components: {
    actDialog
  },
  props: {
    welfareId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      info: {},
      dialogVisible: false,
      skuList: Array(5).fill({ num: 50 })
    };
  },
  methods: {
    getWelfareInfo() {
      console.log('info');
    }
  },
  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>