import { moneyFormat } from '@/helpers/utils'
import dayjs from 'dayjs'
import { CellGroup, Cell, Image, Row, Col } from 'vant'
import { defineComponent, onMounted, ref } from 'vue'
import { state } from '@/state'
import request from '@/helpers/request'
import { useRoute } from 'vue-router'
import ColHeader from '@/components/col-header'
import TheSticky from '@/components/the-sticky'
import styles from './index.module.less'
import { orderType } from '@/constant'
import iconMember from '@common/images/icon_member.png'

export default defineComponent({
  name: 'trade-detail',
  setup() {
    const route = useRoute()
    const result = ref<any>({})
    const getOrder = async (status?: true) => {
      try {
        const urlFix =
          state.platformType === 'TEACHER' ? '/api-teacher' : '/api-student'
        const res = await request.get(
          `${urlFix}/userOrder/detailByOrderNo/${route.query.orderNo}`,
          {
            hideLoading: status
          }
        )
        const temp = res.data || {}

        temp.orderDetailList?.forEach((item: any) => {
          const bizContent = item.bizContent ? JSON.parse(item.bizContent) : {}
          if (bizContent && bizContent.purchaseType) {
            const template = {
              MONTH: 1,
              QUARTERLY: 3,
              YEAR_HALF: 6,
              YEAR: 12
            }
            if (bizContent.purchaseType === 'DAY') {
              item.unit = '天'
            } else {
              item.unit = '个月'
              item.bizInfo.bizValidTime =
                item.bizInfo.bizValidTime * template[bizContent.purchaseType]
            }
          } else {
            item.unit = '个月'
          }
        })

        result.value = temp
      } catch {
        //
      }
    }

    onMounted(() => {
      getOrder()
    })
    return () => (
      <div>
        <TheSticky>
          <ColHeader isFixed={false} border={false} color="#131415" />
        </TheSticky>
        <div class={styles.tradeList}>
          <CellGroup border={false} class={styles.orderDetailGroup}>
            <Cell
              border={false}
              title={dayjs(result.value.createTime).format('YYYY-MM-DD HH:mm')}
              value={orderType[result.value.status]}
              valueClass={styles.tradeType}
            />
            {result.value.orderDetailList &&
              result.value.orderDetailList.map((orderDetail: any) => (
                <Cell
                  border={false}
                  class={styles.orderSection}
                  v-slots={{
                    icon: () => (
                      <Image
                        src={
                          orderDetail.goodType === 'VIP'
                            ? iconMember
                            : orderDetail.bizInfo?.bizCover
                        }
                        class={styles.tradeLogo}
                      />
                    ),
                    title: () => (
                      <div class={styles.goodsSection}>
                        <div class={[styles.title]}>
                          <span class={[styles.name, 'van-ellipsis']}>
                            {orderDetail.bizInfo?.bizName}
                          </span>
                          <span class={styles.desc}>
                            ¥{moneyFormat(orderDetail.actualPrice)}
                          </span>
                        </div>

                        <div class={styles.description}>
                          <span class={[styles.d, 'van-ellipsis']}>
                            {orderDetail.bizInfo?.bizDesc}
                          </span>
                          {orderDetail.goodType !== 'VIP' && (
                            <>
                              {orderDetail.goodType === 'TENANT_ALBUM' ? (
                                <span class={styles.t}>
                                  x{orderDetail.bizInfo?.bizValidTime}
                                  {orderDetail.unit}
                                </span>
                              ) : (
                                <span class={styles.t}>永久</span>
                              )}
                            </>
                          )}
                        </div>

                        {/* {orderDetail.bizInfo?.bizMusicCount > 0 && (
                          <span class={styles.songLength}>
                            共{orderDetail.bizInfo?.bizMusicCount}首
                          </span>
                        )} */}
                      </div>
                    )
                  }}
                />
              ))}

            <div class={styles.paymentPrice}>
              {['PAYING', 'WAIT_PAY'].includes(result.value.status)
                ? '需付款'
                : '实付款'}
              <span>
                <i>¥</i>
                {moneyFormat(result.value.actualPrice)}
              </span>
            </div>
          </CellGroup>

          <div class={styles.optionGroup}>
            <Row class={styles.optionRow}>
              <Col span="8" offset={1}>
                订单号:
              </Col>
              <Col span="14">{result.value.orderNo}</Col>
              <Col span="1"> </Col>
            </Row>
            <Row class={styles.optionRow}>
              <Col span="8" offset={1}>
                交易流水号:
              </Col>
              <Col span="14">{result.value.transNo}</Col>
              <Col span="1"> </Col>
            </Row>
            <Row class={styles.optionRow}>
              <Col span="8" offset={1}>
                创建时间:
              </Col>
              <Col span="14">{result.value.createTime}</Col>
              <Col span="1"> </Col>
            </Row>
            <Row class={styles.optionRow}>
              <Col span="8" offset={1}>
                付款时间:
              </Col>
              <Col span="14">{result.value.payTime}</Col>
              <Col span="1"> </Col>
            </Row>
          </div>
        </div>
      </div>
    )
  }
})
