import { defineComponent, onMounted, reactive, ref } from 'vue'
import { Image, Tabs, Tab, List, Button, Popup, Dialog, Sticky } from 'vant'
import styles from './index.module.less'
import TheSticky from '@/components/the-sticky'
import ColHeader from '@/components/col-header'
import { useWindowScroll, useEventListener } from '@vueuse/core'
import request from '@/helpers/request'
import iconMenu from './images/icon-menu.png'
import iconRightTop from './images/icon-right-top.png'
import iconAlbumCover from '../../images/icon-album-cover.png'
import { state as baseState } from '@/state'
import Song from '../component/song'
import { useRoute, useRouter } from 'vue-router'
import ColResult from '@/components/col-result'
import { moneyFormat } from '@/helpers/utils'
import { orderStatus } from '@/views/order-detail/orderStatus'
import { postMessage } from '@/helpers/native-message'

export default defineComponent({
  name: 'train-tool',
  setup() {
    const subjectType = sessionStorage.getItem('tool-subject-type')
    sessionStorage.removeItem('tool-subject-type')
    const route = useRoute()
    const router = useRouter()
    const background = ref<string>('rgba(55, 205, 177, 0)')
    const color = ref<string>('#fff')
    const state = reactive({
      details: {} as any,
      buy: route.query.buy as any,
      albumId: route.query.albumId || null,
      activeTab: route.query.subjectType || 'SUBJECT',
      loading: false,
      finished: false,
      isError: false,
      list: [] as any,
      popupStatus: false,
      selectMember: {} as any, // 购买的月份
      buyList: [
        {
          purchaseCycle: 6,
          salePrice: 0,
          costPrice: 0,
          status: true
        },
        {
          purchaseCycle: 12,
          salePrice: 0,
          costPrice: 0,
          status: false
        },
        {
          purchaseCycle: 18,
          salePrice: 0,
          costPrice: 0,
          status: false
        },
        {
          purchaseCycle: 24,
          salePrice: 0,
          costPrice: 0,
          status: false
        }
        // {
        //   purchaseCycle: 30,
        //   salePrice: 0,
        //   costPrice: 0,
        //   status: false
        // },
        // {
        //   purchaseCycle: 36,
        //   salePrice: 0,
        //   costPrice: 0,
        //   status: false
        // }
      ],
      ensembleCounts: false,
      musicCounts: false,
      subjectCounts: false,
      tenantAlbumStatus: 0 as any,
      ablumStatus: false,
      heightV: 0
    })
    const params = reactive({
      page: 1,
      rows: 20
    })
    const apiSuffix = ref(
      baseState.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
    )

    const getDetails = async () => {
      try {
        let url = apiSuffix.value + '/userTenantAlbumRecord/detail'
        if (state.albumId) {
          url = url + '?albumId=' + state.albumId
        }
        const { data } = await request.post(url)
        state.details = data || {}
        state.tenantAlbumStatus = data.tenantAlbumStatus
        state.ablumStatus = data.status
        state.buyList.forEach((item: any, index: number) => {
          item.salePrice = (index + 1) * data.salePrice
          item.costPrice = (index + 1) * data.costPrice
        })

        state.selectMember = {
          ...state.buyList[0]
        }

        state.ensembleCounts = data.ensembleCounts <= 0 ? false : true
        state.subjectCounts = data.subjectCounts <= 0 ? false : true
        state.musicCounts = data.musicCounts <= 0 ? false : true

        if (state.subjectCounts) {
          state.activeTab = 'SUBJECT'
        } else if (state.musicCounts) {
          state.activeTab = 'MUSIC'
        } else if (state.ensembleCounts) {
          state.activeTab = 'ENSEMBLE'
        }
        // 带的参数
        if (route.query.subjectType == 'SUBJECT' && state.subjectCounts) {
          state.activeTab = 'SUBJECT'
        } else if (route.query.subjectType == 'MUSIC' && state.musicCounts) {
          state.activeTab = 'MUSIC'
        } else if (
          route.query.subjectType == 'ENSEMBLE' &&
          state.ensembleCounts
        ) {
          state.activeTab = 'ENSEMBLE'
        }
        // subjectType 缓存
        if (subjectType == 'SUBJECT' && state.subjectCounts) {
          state.activeTab = 'SUBJECT'
        } else if (subjectType == 'MUSIC' && state.musicCounts) {
          state.activeTab = 'MUSIC'
        } else if (subjectType == 'ENSEMBLE' && state.ensembleCounts) {
          state.activeTab = 'ENSEMBLE'
        }
      } catch {
        //
      }
    }

    const FetchList = async () => {
      if (state.loading) {
        return
      }
      console.log(state.details, 'state.details')
      state.loading = true
      state.isError = false
      const tempParams = {
        albumId: state.details.id || null,
        subjectType: state.activeTab,
        ...params
      }

      try {
        const { data } = await request.post(
          `${apiSuffix.value}/tenantAlbumMusic/page`,
          {
            data: tempParams
          }
        )
        if (state.list.length > 0 && data.pageNo === 1) {
          return
        }
        state.list = state.list.concat(data.rows || [])
        params.page = data.pageNo + 1
        // showContact.value = state.list.length > 0
        state.loading = false
        state.finished = data.pageNo >= data.totalPage
        params.page = data.pageNo + 1
      } catch (error) {
        state.isError = true
      }
      state.loading = false
    }

    onMounted(async () => {
      useEventListener(document, 'scroll', evt => {
        const { y } = useWindowScroll()
        if (y.value > 20) {
          background.value = `rgba(255, 255, 255)`
          color.value = 'black'
          postMessage({
            api: 'backIconChange',
            content: { iconStyle: 'black' }
          })
        } else {
          background.value = 'transparent'
          color.value = '#fff'
          postMessage({
            api: 'backIconChange',
            content: { iconStyle: 'white' }
          })
        }
      })

      state.loading = true
      await getDetails()
      await FetchList()
      state.loading = false
    })

    const onSubmit = async () => {
      const album = state.selectMember
      const details = state.details
      orderStatus.orderObject.orderType = 'TENANT_ALBUM'
      orderStatus.orderObject.orderName = details.name
      orderStatus.orderObject.orderDesc = details.name
      orderStatus.orderObject.actualPrice = album.salePrice
      // orderStatus.orderObject.recomUserId = route.query.recomUserId || 0
      // orderStatus.orderObject.activityId = route.query.activityId || 0
      orderStatus.orderObject.orderNo = ''
      orderStatus.orderObject.orderList = [
        {
          orderType: 'TENANT_ALBUM',
          goodsName: details.name,
          actualPrice: album.salePrice,
          // recomUserId: route.query.recomUserId || 0,
          price: album.salePrice,
          ...details,
          ...album
        }
      ]

      const res = await request.post('/api-student/userOrder/getPendingOrder', {
        data: {
          goodType: 'TENANT_ALBUM',
          bizId: details.id
        }
      })

      const result = res.data
      if (result) {
        state.popupStatus = false
        Dialog.confirm({
          title: '提示',
          message: '您有一个未支付的订单，是否继续支付？',
          theme: 'round-button',
          className: 'confirm-button-group',
          cancelButtonText: '取消订单',
          confirmButtonText: '继续支付'
        })
          .then(async () => {
            orderStatus.orderObject.orderNo = result.orderNo
            orderStatus.orderObject.actualPrice = result.actualPrice
            orderStatus.orderObject.discountPrice = result.discountPrice
            orderStatus.orderObject.paymentConfig = {
              ...result.paymentConfig,
              paymentVendor: result.paymentVendor,
              paymentVersion: result.paymentVersion
            }
            routerTo()
          })
          .catch(() => {
            Dialog.close()
            // 只用取消订单，不用做其它处理
            cancelPayment(result.orderNo)
          })
      } else {
        routerTo()
      }
    }
    const routerTo = () => {
      const album = state.details
      router.push({
        path: '/orderDetail',
        query: {
          orderType: 'ALBUM',
          album: album.id
        }
      })
    }

    const cancelPayment = async (orderNo: string) => {
      try {
        await request.post('/api-student/userOrder/orderCancel/v2', {
          data: {
            orderNo
          }
        })
      } catch {
        //
      }
    }

    return () => (
      <div class={styles.trainTool}>
        {(state.tenantAlbumStatus === 0 || !state.ablumStatus) &&
        state.buy != '1' ? (
          <>
            <TheSticky
              position="top"
              onBarHeight={(height: any) => {
                console.log(height, 'height', height)
                state.heightV = height
              }}
            >
              <ColHeader border={false} isFixed={false} />
            </TheSticky>
            {!state.loading && (
              <div
                style={{
                  height: 'calc(100vh - var(--header-height))',
                  display: 'flex',
                  alignItems: 'center'
                }}
              >
                <ColResult
                  tips="暂无曲目"
                  classImgSize="SMALL"
                  btnStatus={false}
                />
              </div>
            )}
          </>
        ) : (
          <>
            <TheSticky
              position="top"
              onBarHeight={(height: any) => {
                console.log(height, 'height', height)
                state.heightV = height
              }}
            >
              <ColHeader
                background={background.value}
                border={false}
                isFixed={false}
                color={color.value}
                backIconColor="white"
              />
            </TheSticky>
            <img class={styles.bgImg} src={state.details?.coverImg} />
            <div class={styles.musicContent}></div>
            <div class={styles.bg}>
              <div class={styles.alumWrap}>
                <div class={styles.img}>
                  <Image
                    class={styles.image}
                    width="100%"
                    height="100%"
                    fit="cover"
                    src={state.details?.coverImg || iconAlbumCover}
                    errorIcon={iconAlbumCover}
                  />
                  {/* <span class={styles.numContent}>
                    <img src={iconMenu} class={styles.iconMenu} />共
                    {state.details?.musicNum}首
                  </span> */}

                  <div class={styles.iconPian}>
                    <Image
                      class={styles.image}
                      width="100%"
                      height="100%"
                      fit="cover"
                      src={state.details?.coverImg || iconAlbumCover}
                    />
                  </div>
                </div>
                <div class={styles.alumDes}>
                  <div class={[styles.alumTitle, 'van-ellipsis']}>
                    {state.details?.name}
                  </div>
                  <div
                    class={[styles.des, 'van-multi-ellipsis--l2']}
                    style={{
                      height: '32px',
                      lineHeight: '16px'
                    }}
                  >
                    {state.details?.describe}
                  </div>
                </div>
              </div>
            </div>

            <div class={styles.musicList}>
              <Sticky position="top" offsetTop={state.heightV}>
                <Tabs
                  color="var(--van-primary)"
                  background="transparent"
                  lineWidth={20}
                  shrink
                  v-model:active={state.activeTab}
                  onChange={val => {
                    state.activeTab = val

                    params.page = 1
                    state.list = []
                    FetchList()
                  }}
                >
                  {state.subjectCounts && (
                    <Tab title="声部练习" name="SUBJECT"></Tab>
                  )}
                  {state.musicCounts && (
                    <Tab title="独奏曲目" name="MUSIC"></Tab>
                  )}
                  {state.ensembleCounts && (
                    <Tab title="合奏练习" name="ENSEMBLE"></Tab>
                  )}
                </Tabs>
              </Sticky>

              <div class={styles.alumnList}>
                <List
                  loading={state.loading}
                  finished={state.finished}
                  finished-text={' '}
                  onLoad={FetchList}
                  immediateCheck={false}
                  error={state.isError}
                >
                  {state.list && state.list.length ? (
                    <Song
                      showNumber
                      list={state.list}
                      onDetail={(item: any) => {
                        sessionStorage.setItem(
                          'tool-subject-type',
                          state.activeTab as any
                        )
                        router.push({
                          path: '/music-detail',
                          query: {
                            id: item.id
                            // albumId: route.params.id
                          }
                        })
                      }}
                    />
                  ) : (
                    !state.loading && (
                      <ColResult
                        tips="暂无曲目"
                        classImgSize="SMALL"
                        btnStatus={false}
                      />
                    )
                  )}
                </List>
              </div>
            </div>
            {baseState.platformType === 'STUDENT' && state.buy != '1' && (
              <TheSticky position="bottom">
                <div class={styles.btnGroup}>
                  <Button
                    round
                    block
                    disabled={state.details?.musicNum <= 0}
                    color="linear-gradient(270deg, #FF204B 0%, #FE5B71 100%)"
                    onClick={() => (state.popupStatus = true)}
                  >
                    购买教程
                  </Button>
                </div>
              </TheSticky>
            )}
          </>
        )}

        <Popup
          v-model:show={state.popupStatus}
          position="bottom"
          round
          zIndex={9999}
          safe-area-inset-bottom
          closeable={false}
          class={styles.popupStatus}
          onClose={() => (state.popupStatus = false)}
          // onClosed={() => (this.openStatus = false)}
        >
          <div class={styles.bottom_function}>
            <i
              class={styles.iconClose}
              onClick={() => (state.popupStatus = false)}
            ></i>
            <img src={iconRightTop} class={styles.iconRightTop} />
            <div class={styles.memberMeal}>
              <div class={styles.titleMeal}>
                <span>请选择教程购买周期</span>
              </div>

              <div class={styles['system-list']}>
                {state.buyList.map((item: any) => (
                  <div
                    class={[
                      styles['system-item'],
                      item.status && styles.active
                    ]}
                    onClick={() => {
                      state.buyList.forEach((item: any) => {
                        item.status = false
                      })
                      item.status = true
                      state.selectMember = item
                    }}
                  >
                    <p class={styles.title}>{item.purchaseCycle}个月</p>
                    <p class={styles.price}>
                      <span>￥</span>
                      {moneyFormat(item.salePrice, '0,0[.]00')}
                    </p>
                    {item.salePrice < item.costPrice && (
                      <del class={styles.originalPrice}>
                        ￥{moneyFormat(item.costPrice, '0,0[.]00')}
                      </del>
                    )}
                  </div>
                ))}
              </div>
            </div>
            <div class={styles.btnGroup}>
              <Button round block class={styles.btn} onClick={onSubmit}>
                点击购买
              </Button>
            </div>
          </div>
        </Popup>
      </div>
    )
  }
})
