import { defineComponent } from 'vue'
import styles from './index.module.less'
import dayjs from 'dayjs'
import { Checkbox } from 'vant'
import activeIcon from './images/activeIcon.png'
import inactiveIcon from './images/inactiveIcon.png'
import { coupontypeDetail } from '@/constant'

export default defineComponent({
  name: 'coupon-item',
  props: {
    item: {
      type: Object,
      default: {}
    },
    isSelect: {
      type: Boolean,
      default: false
    },
    onClick: {
      type: Function,
      default: (item: any) => {}
    }
  },
  render() {
    const item: any = this.item
    return (
      <div
        class={[
          styles.item,
          styles[item.useState],
          this.isSelect && styles.select,
          item.disabled && styles.disabled
        ]}
        onClick={() => {
          if (item.disabled) return
          this.onClick(item)
        }}
        key={item.couponIssueId}
      >
        {/* 可使用的优惠券 & 有选择按钮的 */}
        {item.usageStatus === 0 && this.isSelect && (
          <img
            class={styles['img-icon']}
            src={item.checked ? activeIcon : inactiveIcon}
          />
        )}
        <div class={styles.top}>
          <div class={styles.price}>
            <span class={styles.suffix}>￥</span>
            <span class={styles.number}>{item.faceValue}</span>
          </div>

          <div class={styles.type}>{coupontypeDetail[item.typeDetail]}</div>
        </div>

        <div class={styles.bottom}>
          <div class={styles.condition}>
            <span class={styles.conditionTag}>
              {item.fullAmount > 0 ? `满${item.fullAmount}可用` : '无门槛'}
            </span>
          </div>
          <div class={styles.useTime}>
            有效期：{dayjs(item.useStartDate).format('YYYY.MM.DD')}~
            {dayjs(item.useDeadlineDate).format('YYYY.MM.DD')}
          </div>
        </div>

        {item.useState === 1 && <div class={styles.iconUsed}></div>}
        {item.usageStatus === 2 && <div class={styles.iconExpired}></div>}
      </div>
    )
  }
})
