import { Cell, CellGroup, Icon, Image, Stepper } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
// import { orderStatus } from '../orderStatus'

import iconMember from '@common/images/icon_member.png'
import iconMemberSvip from '@common/images/icon_member_svip.png'
import iconStudycard from '@common/images/icon_studycard.png'
import dayjs from 'dayjs'
import { memberSimpleType, studyCardType } from '@/constant'
// import iconTimer from '@common/images/icon_timer.png'
// import request from '@/helpers/request'

export default defineComponent({
  name: 'OrderVideo',
  props: {
    item: {
      type: Object,
      default: () => ({})
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  emits: ['priceChange'],
  computed: {
    needBuyNums() {
      const item = this.item
      if (item.vipEndDays > 0) {
        const endTime = dayjs(item.startTime).add(item.vipEndDays, 'day')
        const unit = item.period === 'YEAR' ? 'years' : 'months'
        const months = endTime.diff(dayjs(item.startTime), unit)
        if (item.period === 'MONTH') {
          return months + 1
        } else if (item.period === 'QUARTERLY') {
          return Math.ceil((months + 1) / 3)
        } else if (item.period === 'YEAR_HALF') {
          return Math.ceil((months + 1) / 6)
        } else if (item.period === 'YEAR') {
          return months + 1
        } else {
          return 1
        }
      }
      return 1
    },
    startTime() {
      const item = this.item
      if (this.disabled) {
        return item.startTime
      }
      if (item.svipEndDays > 0 && item.orderType === 'SVIP') {
        return dayjs(item.startTime).add(1, 'day').format('YYYY-MM-DD')
      }
      if (item.vipEndDays > 0 && item.orderType === 'VIP') {
        return dayjs(item.startTime).add(1, 'day').format('YYYY-MM-DD')
      }
      return item.startTime
    },
    // 畅学卡 活动计算
    studyCardTimes() {
      const { activityList, discountEndTime, discountCardFlag } = this.item
      const studyCardVals = (activityList || []).filter(item => {
        return item.goodType === 'DISCOUNT'
      })
      if (studyCardVals.length) {
        const startTime = discountCardFlag ? dayjs(discountEndTime || new Date()).toDate() : dayjs(new Date()).toDate()
        let endTime = startTime
        studyCardVals.map(studyCardVal => {
          if (studyCardVal.unit === 'MONTH') {
            endTime = dayjs(endTime)
              .add(1 * studyCardVal.goodsNum, 'month')
              .toDate()
          } else if (studyCardVal.unit === 'QUARTERLY') {
            endTime = dayjs(endTime)
              .add(3 * studyCardVal.goodsNum, 'month')
              .toDate()
          } else if (studyCardVal.unit === 'YEAR_HALF') {
            endTime = dayjs(endTime)
              .add(6 * studyCardVal.goodsNum, 'month')
              .toDate()
          } else if (studyCardVal.unit === 'YEAR') {
            endTime = dayjs(endTime)
              .add(1 * studyCardVal.goodsNum, 'year')
              .toDate()
          }
        })
        return {
          startTime: discountCardFlag ? dayjs(startTime).add(1, 'day').format('YYYY-MM-DD') : dayjs(startTime).format('YYYY-MM-DD'),
          endTime: dayjs(endTime).format('YYYY-MM-DD')
        }
      } else {
        return {
          startTime: null,
          endTime: null
        }
      }
    },
    // vip 结束时间
    vipEndTime() {
      const vipVals = (this.item.activityList || []).filter(item => {
        return this.item.orderType === item.goodType
      })
      let endTime = this.item.endTime
      vipVals.map(vipVal => {
        if (vipVal.unit === 'MONTH') {
          endTime = dayjs(endTime)
            .add(1 * vipVal.goodsNum, 'month')
            .toDate()
        } else if (vipVal.unit === 'QUARTERLY') {
          endTime = dayjs(endTime)
            .add(3 * vipVal.goodsNum, 'month')
            .toDate()
        } else if (vipVal.unit === 'YEAR_HALF') {
          endTime = dayjs(endTime)
            .add(6 * vipVal.goodsNum, 'month')
            .toDate()
        } else if (vipVal.unit === 'YEAR') {
          endTime = dayjs(endTime)
            .add(1 * vipVal.goodsNum, 'year')
            .toDate()
        }
      })
      return dayjs(endTime).format('YYYY-MM-DD')
    }
  },
  watch: {
    'item.num'() {
      ;(this.item.activityList || []).map(item => {
        item.goodsNum = this.item.num
        item.goodNum = this.item.num
      })
    }
  },
  render() {
    const item = this.item
    return (
      <div class={styles.videoOrder}>
        <CellGroup class={['mb12', styles.cellGroup]} border={false}>
          <Cell
            // center
            titleClass={styles.titleClass}
            v-slots={{
              icon: () => (
                <Image
                  class={styles.memberLogo}
                  src={item.orderType === 'SVIP' ? iconMemberSvip : iconMember}
                />
              ),
              title: () => (
                <>
                  <div class={styles.container}>
                    <div class={styles.title}>
                      {item.goodsName || item.goodName}
                    </div>
                    <div class={styles.price}>
                      <i>¥ </i>
                      {(this as any).$filters.moneyFormat(item.price)}
                    </div>
                  </div>
                  <div class={styles.addNum}>
                    <Stepper
                      disableInput
                      longPress={false}
                      disabled={item.period === 'PERPETUAL' || this.disabled}
                      v-model={item.num}
                      theme="round"
                      min={1}
                      max={
                        // 活动会设置能买几份
                        (item.activityList || []).length > 0
                          ? item.activityBuyCount
                          : 99
                      }
                      onChange={() => {
                        let endTime = new Date()
                        if (item.period === 'MONTH') {
                          endTime = dayjs(item.startTime)
                            .add(1 * item.num, 'month')
                            .toDate()
                        } else if (item.period === 'QUARTERLY') {
                          endTime = dayjs(item.startTime)
                            .add(3 * item.num, 'month')
                            .toDate()
                        } else if (item.period === 'YEAR_HALF') {
                          endTime = dayjs(item.startTime)
                            .add(6 * item.num, 'month')
                            .toDate()
                        } else if (item.period === 'YEAR') {
                          endTime = dayjs(item.startTime)
                            .add(1 * item.num, 'year')
                            .toDate()
                        }
                        item.endTime = dayjs(endTime).format('YYYY-MM-DD')
                        // 价格变化
                        this.$emit(
                          'priceChange',
                          (item.price * item.num).toFixed(2)
                        )
                      }}
                    ></Stepper>
                  </div>
                </>
              )
            }}
          />
          {(item.activityList || []).map(actItem => {
            return (
              <Cell
                titleClass={[styles.titleClass, styles.activityClass]}
                v-slots={{
                  icon: () => (
                    <Image
                      class={styles.memberLogo}
                      src={
                        actItem.goodType === 'DISCOUNT'
                          ? iconStudycard
                          : actItem.goodType === 'SVIP'
                          ? iconMemberSvip
                          : iconMember
                      }
                    />
                  ),
                  title: () => (
                    <>
                      <div class={styles.container}>
                        <div class={styles.title}>
                          {actItem.goodsName || actItem.goodName}
                        </div>
                        <div class={styles.activityTit}>赠送</div>
                      </div>
                      <div class={styles.activityTitNum}>
                        {`x${actItem.goodsNum}`}
                      </div>
                    </>
                  )
                }}
              />
            )
          })}
        </CellGroup>

        {item.orderType === 'SVIP' && item.vipEndDays > 0 && (
          <div class={styles.discountTips}>
            {item.num >= this.needBuyNums ? (
              <>
                当前购买SVIP已达免费升级标准，
                <span>VIP({item.vipEndDays}天)可免费升级为SVIP</span>
              </>
            ) : (
              <>
                购买{this.needBuyNums}个{memberSimpleType[item.period]}
                SVIP会员，
                <span>剩余VIP({item.vipEndDays}天)可免费升级为SVIP</span>
              </>
            )}
          </div>
        )}

        {item.period !== 'PERPETUAL' && (
          <CellGroup
            class={['mb12', styles.cellGroup, styles.cellGroupTimer]}
            border={false}
          >
            <Cell
              center
              v-slots={{
                title: () => (
                  <div class={styles.timerCell}>
                    <div class={styles.timerTitle}>
                      {/* <Icon name={iconTimer} size={18} /> */}
                      <span>{item.orderType}会员生效时间</span>
                    </div>
                    <div class={styles.timer}>
                      {this.startTime} 至 {this.vipEndTime}
                    </div>
                  </div>
                )
              }}
            />
            {this.studyCardTimes.startTime && (
              <Cell
                center
                v-slots={{
                  title: () => (
                    <div class={styles.timerCell}>
                      <div class={styles.timerTitle}>
                        <span>畅学卡生效时间</span>
                      </div>
                      <div class={styles.timer}>
                        {this.studyCardTimes.startTime} 至{' '}
                        {this.studyCardTimes.endTime}
                      </div>
                    </div>
                  )
                }}
              />
            )}
          </CellGroup>
        )}
      </div>
      // 视频课
    )
  }
})
