import OEmpty from '@/components/m-empty';
import { Button, Loading } from 'vant';
import { defineComponent } from 'vue';
import styles from './index.module.less';

export default defineComponent({
  name: 'choice-coupon',
  props: {
    orderAmount: {
      type: Number,
      default: 0
    },
    useCoupon: {
      type: Array,
      default: () => []
    },
    couponCategory: {
      type: String,
      default: 'UNIVERSAL'
    },
    couponList: {
      type: Array,
      default: () => []
    }
  },
  emits: ['close', 'submit'],
  data() {
    return {
      list: [] as any,
      // consumeAmount: 0 // 消耗金额
      dataLoading: false
    };
  },
  computed: {
    // 使用优惠券的数量
    useLength() {
      return this.list.filter((list: any) => list.checked).length || 0;
    }
  },
  async mounted() {
    // this.getList()
    // 处理显示已选择的优惠券
    // 处理可用优惠券是否支付使用
    this.couponList.forEach((item: any) => {
      this.useCoupon.forEach((coupon: any) => {
        if (item.couponIssueId === coupon.couponIssueId) {
          item.checked = true;
        }
      });
    });
    const canUsable = this.couponList.filter((list: any) => !list.disabled);
    const canUsed = this.couponList.filter((list: any) => list.disabled);
    this.list = [...canUsable, ...canUsed];
    this.calcCoupon();
  },
  methods: {
    // async getList() {
    //   if (this.dataLoading) return
    //   this.dataLoading = true
    //   try {
    //     const res = await request.post(`${state.platformApi}/couponInfo/page`, {
    //       data: {
    //         couponCategory: this.couponCategory,
    //         couponType: 'FULL_DISCOUNT',
    //         useState: 'USABLE',
    //         page: 1,
    //         rows: 100
    //       }
    //     })
    //     this.dataLoading = false
    //     const result = res.data || {}
    //     // 处理重复请求数据
    //     if (this.list.length > 0 && result.pageNo === 1) return
    //     this.list = result.rows || []

    //     // 处理可用优惠券是否支付使用
    //     this.list.forEach((item: any) => {
    //       item.checked = false
    //       // 如果使用金额大于订单金额则优惠券不可用
    //       if (item.useLimit > this.orderAmount) {
    //         item.disabled = true
    //       } else {
    //         item.disabled = false
    //       }

    //       // 处理显示已选择的优惠券
    //       this.useCoupon.forEach((coupon: any) => {
    //         if (item.couponIssueId === coupon.couponIssueId) {
    //           item.checked = true
    //         }
    //       })
    //     })
    //     // 初始化排序
    //     const canUsable = this.list.filter((list: any) => !list.disabled)
    //     const canUsed = this.list.filter((list: any) => list.disabled)
    //     this.list = [...canUsable, ...canUsed]

    //     this.calcCoupon()
    //   } catch {
    //     //
    //   }
    // },
    onSubmit() {
      // 返回选中的优惠券
      this.$emit(
        'submit',
        this.list.filter((list: any) => list.checked)
      );

      this.list.forEach((item: any) => {
        item.checked = false;
      });
    },
    onSelect(item: any) {
      item.checked = !item.checked;
      this.calcCoupon();
    },
    calcCoupon() {
      // 计算优惠券
      // 已使用的优惠券
      const useList = this.list.filter((list: any) => list.checked);
      const limitCount = useList.map((list: any) => {
        return Number(list.useLimit || 0);
      });
      const usePrice =
        limitCount.length > 0
          ? limitCount.reduce((sum: any, list: any) => {
              return sum + list;
            })
          : 0;
      // 使用优惠券后，可判断的金额
      const useLastAmount = this.orderAmount - usePrice;
      // 判断使用优惠券之后还有没有其它优惠券可用
      this.list.forEach((item: any) => {
        if (Number(item.useLimit) > useLastAmount && !item.checked) {
          item.disabled = true;
        } else {
          item.disabled = false;
        }
      });
    }
  },
  render() {
    return (
      <div class={styles.choiceCoupon}>
        <div class={styles.couponTitle}>
          <span>优惠券</span>
          <i class={styles.iconClose} onClick={() => this.$emit('close')}></i>
        </div>

        <div class={styles.couponContent}>
          {!this.dataLoading ? (
            <>
              {this.list.length > 0 ? (
                <>
                  {this.list.map((item: any) => (
                    // <Item item={item} isSelect onClick={this.onSelect} />
                    <>1212</>
                  ))}
                </>
              ) : (
                <OEmpty description="暂无优惠券" />
              )}
            </>
          ) : (
            <Loading
              size={48}
              color="#2dc7aa"
              vertical
              style={{ height: '100%', justifyContent: 'center' }}>
              加载中...
            </Loading>
          )}
        </div>

        <div class={[styles.couponFooter, 'van-hairline--top']}>
          <div class={styles.couponSelectText}>
            已选<span>{this.useLength}</span>张
          </div>
          <Button
            type="primary"
            round
            style={{ minWidth: '105px', fontSize: '16px' }}
            onClick={this.onSubmit}>
            确定
          </Button>
        </div>
      </div>
    );
  }
});
