<template>
  <!--  卡片样式  于2.22福利中心-卡券ui评审一致决定去掉  -->
  <div class="card">
    <div class="card-head" :style="`background: ${ item._status === 3 || item.deleteFlag == 1 ? '#c0c4cc' : item.color }`">
      <p class="title" p-key="couponId" :title="item.couponId">
        <el-tooltip effect="dark" :content="item.couponId" open-delay="200" placement="bottom">
          <span>{{ item.cardName }}</span>
        </el-tooltip>
      </p>
      <p>{{ item.remarkName }}</p>
    </div>
    <div class="card-body">
      <ul>
        <li class="ellipsis-100">
          <label>使用期限：</label>
            <el-tooltip open-delay="200" placement="top">
              <div slot="content" style="max-width:400px;line-height:18px;">{{ formateEffectDate(item) }}</div>
              <div class="ellipsis-100 tip-li">
                <span>{{ formateEffectDate(item) }}</span>
              </div>
            </el-tooltip>
        </li>
        <li>
          <label>领券限制：</label>每人限制 {{ item.getLimit }} 张
        </li>
        <li>
          <label>卡券成本：</label>¥{{ item.costPrice }}
        </li>
        <li>
          <label>可占库存：</label>{{ item.remainedStock || 0 }}
          <!-- 需要根据状态判断库存是否可以改变  使用中,随机生成才可以改 -->
          <a class="btn-a hover-btn" v-if="[2].includes(item._status) && item.customCodeFlag === 0" title="编辑库存" @click="preAdjustStock(item)"><i class="el-icon-edit-outline ml3"></i></a>
          <!-- 导入券码的卡券  使用中才可以改 -->
          <a class="btn-a hover-btn ml5" v-if="[2].includes(item._status) && item.customCodeFlag == 2" title="上传券码" @click="$emit('upload-code', item)"><i class="iconfont-market4 icon-shangchuan ml3"></i></a>
        </li>
        <li>
          <label>已占用：</label>{{ item.occupyStock || 0 }}
        </li>
        <li>
          <label>总库存：</label>{{ item.totalStock || 0 }}
        </li>
        <li class="flex">
          <!-- {{ item._status }} -->
          <label>卡券状态：</label>
          <span class="inline-block" v-html="renderStatus(item)"></span>
          <template v-if="item.deleteFlag">
            <el-tooltip open-delay="200" :content="item.remark" placement="top">
              <span v-if="item.remark"><i style="top:1px" class="el-icon-info unuse-icon"></i></span>
            </el-tooltip>
          </template>
        </li>
      </ul>
    </div>
    <!-- <div class="card-hover" :class="{ show }" @mouseover="show = true" @mouseout="show = false"> -->
    <div class="card-hover show">
      <!-- :close-delay="40000000" -->
      <el-popover open-delay="200" placement="bottom" trigger="hover" popper-class="option-dropdown">
        <!-- 可操作按钮 -->
        <div @mouseover="show = true" @mouseout="show = false">
          <!--  v-if="[1, 2].includes(item._status)" -->
          <li :class="{ disabled: $itemPerm($itemCode.gicCardFormEdit) || item.deleteFlag }"><mk-button type="text" :option="{ perm: $itemPerm($itemCode.gicCardFormEdit), deleteFlag: item.deleteFlag, deleteRemark: item.remark }" @click="handler(3, item)">编辑</mk-button></li>
          <li :class="{ disabled: $itemPerm($itemCode.gicCardFormCopy) || item.deleteFlag }"><mk-button type="text" :option="{ perm: $itemPerm($itemCode.gicCardFormCopy), deleteFlag: item.deleteFlag, deleteRemark: item.remark }" @click="handler(6, item)">复制</mk-button></li>
          <li :class="{ disabled: $itemPerm($itemCode.gicCardFormInfo) }"><dm-perm-button type="text" @click="handler(5, item)" :option="{ perm: $itemPerm($itemCode.gicCardFormInfo), deleteFlag: item.deleteFlag, deleteRemark: item.remark }">详情</dm-perm-button></li>
          <li :class="{ disabled: $itemPerm($itemCode.gicCardFormDel) }"><dm-perm-button type="text" @click="handler(4, item)" :disabled="$itemPerm($itemCode.gicCardFormDel)">删除</dm-perm-button></li>
          <li v-if="item._status == 2"><mk-button type="text" @click="handler(10, item)">禁用</mk-button></li>
          <li v-if="[1,2].includes(item._status)"><mk-button type="text" @click="handler(9, item)">库存记录</mk-button></li>
          <li v-if="[2, 3, 4].includes(item._status)" :class="{ disabled: $itemPerm($itemCode.gicCardGroupBtn) || item.deleteFlag }"><mk-button type="text" @click="handler(8, item)"  :option="{ perm: $itemPerm($itemCode.gicCardGroupBtn), deleteFlag: item.deleteFlag, deleteRemark: item.remark }">领取记录</mk-button></li>
        </div>
        <i class="icon-gengduo iconfont-market4 more" slot="reference"></i>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { cardStatus } from '@/config/mapping/gic-card';
import { formatDateTimeByType } from '@/utils/index.js';
export default {
  name: 'CardItem',
  props: {
    item: {
      type: Object,
      default() {
        return {
          cardEffectiveMode: 0
        };
      }
    },
  },
  data() {
    return {
      show: false
    };
  },
  methods: {
    handler(val, item, disabled) {
      this.$emit('handler', val, item, disabled);
    },
    formateEffectDate(item = {}) {
      const { cardEffectiveMode, startDate, expireDate, effectTimeMode, expireTimeCount, effectTimeCount } = item;
      if (cardEffectiveMode === 0) {
        return `${formatDateTimeByType(startDate, 'yyyy-MM-dd')} ~ ${ formatDateTimeByType(expireDate, 'yyyy-MM-dd') }`;
      }
      if (cardEffectiveMode === 1) {
      // 领取后第{{ info.effectTimeCount }}{{ info.effectTimeMode ? '月' : '天' }} - 第{{ info.expireTimeCount + info.effectTimeCount - 1 }}{{ info.effectTimeMode ? '月' : '天' }}
        const unit = effectTimeMode ? '月' : '天';
        let pre = '';
        switch (effectTimeCount) {
          case 1:
            pre = '当';
            break;
          case 2:
            pre = '次';
            break;
          default:
            pre = effectTimeCount;
            break;
        }
        return `领取后${pre}${unit}生效，有效天数${expireTimeCount}${unit}`;
      }
      return '--';
    },
    // 编辑库存 前置
    preAdjustStock() {
      this.$emit('adjust-stock', this.item);
    },
    delShelf(obj) {
      this.$emit('del-shelf', obj);
    },
    renderStatus({ _status }) {
      let _cl = '';
      switch (_status) {
        case 2:
          _cl = 'state-point-loading-scale'; // 使用中
          break;
        case 1:
          _cl = 'state-point-warning'; // 未生效
          break;
        case 3:
        case 4:
          _cl = 'state-point-default'; // 已过期
          break;
        default:
          _cl = 'state-point-default';
          break;
      }
      return `<span class="state-point ${_cl}">${cardStatus[_status] || '未知状态'}</span>`;
    }

  },
};
</script>

<style lang="scss" scoped>
.card {
  position: relative;
  width: 244px;
  min-height: 326px;
  overflow: hidden;
  float: left;
  margin-right: 20px;
  margin-bottom: 30px;
  .card-head {
    border-radius:2px 2px 0 0;
    text-align: center;
    height: 120px;
    position: relative;
    color: white;
    background:#60C996;
    p.title {
      font-size:20px;
      line-height:28px;
      padding: 37px 0 8px;
    }
    p {
      font-size:14px;
      line-height:20px;
    }
    &::before {
      content: '';
      position: absolute;
      display: block;
      background: url('../../../../assets/images/circle-icon.png') no-repeat;
      width: 30px;
      height: 15px;
      top: 0;
      left: 50%;
      margin-left: -15px;
    }
    &::after {
      content: '';
      width: 100%;
      height: 3px;
      position: absolute;
      left: 0;
      bottom: 0;
      background: url('../../../../assets/images/dot-icon.png') repeat-x 4px 0;
    }
  }
  .card-body {
    min-height: 200px;
    background:rgba(248,248,248,1);
    padding: 10px 8px 12px;
    border-radius: 0 0 2px 2px;
    ul {
      font-size:12px;
      color:rgba(48,49,51,1);
      line-height:17px;
      li {
        margin-bottom: 8px;
        &:last-child {
          margin-bottom: 0px;
        }
        &.flex {
          display: flex;
          align-items: center;
        }
        .tip-li {
          display: inline-block;
          width: 67%;
          vertical-align: bottom;
          cursor: pointer;
          height: 17px;
          line-height: 17px;
        }
      }
      label {
        color:rgba(96,98,102,1);
        display: inline-block;
        width: 72px;
        // margin-right: 12px;
      }
    }
  }
  .card-hover {
    &.show {
      opacity: 1;
    }
    cursor: pointer;
    opacity: 0;
    transition: 0.2s all ease;
    position: absolute;
    width: 24px;
    height: 24px;
    text-align: center;
    right: 10px;
    top: 6px;
    background: white;
    border-radius: 50%;
    line-height: 24px;
    i.more {
      font-size: 14px;
      color: $gray03;
    }
  }
}

</style>