<template>
  <view>
    <!-- 导航栏 -->
    <!-- 图片 -->
    <block v-if="info.media_type==0">
      <u-image height="400rpx" :src="info.cover" :lazy-load="true"></u-image>
    </block>
    <!-- 视频 -->
    <block v-if="info.media_type==3">
      <video class="w-full h-400rpx" object-fit="contain" :poster="info.cover" id="myVideo"
      :src="info.media_content[0]"></video>
    </block>
    <!-- 轮播图 -->
    <block v-if="info.media_type==1">
      <cu-swiper indicator-pos="bottomRight" mode="number" height="400" border-radius="0" :list="swiperList">
      </cu-swiper>
    </block>
    <!-- 音频 -->
    <block v-if="info.media_type==2">
       <!-- #ifndef MP-WEIXIN -->
      <view  class=" pt-base flex items-center justify-center">
        <audio  :src="info.media_content[0]" :poster="info.cover" controls id="myAudio"></audio>
      </view>
       <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <view @tap="audioClick" class=" pt-base flex items-center justify-center">
        <audio :src="info.media_content[0]" :poster="info.cover" controls id="myAudio"></audio>
      </view>
       <!-- #endif -->
    </block>
    <!--  -->
    <view class="px-36rpx mt-40rpx text-xl font-extrabold text-txBase">{{info.title}}</view>
    <view class="px-36rpx mt-15rpx text-md text-txBase">{{info.subtitle}}</view>
    <view class="px-36rpx flex items-center justify-between text-md text-txGray">
      <view class="">{{info.created_at}}</view>
    </view>
    <view class="mx-base mt-base  h-2rpx bg-txBorder"></view>
    <view class="px-36rpx mt-30rpx text-md text-txBase leading-60rpx">
      <u-parse :tag-style="style" :html="info.content"></u-parse>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        swiperList: [], //轮播图
        info: {},
        style: {
          table: 'width:100% !important',
          p: 'text-indent:20px'
        },
        isPlaying:false,
        audioCtx:''
      };
    },
    async onLoad({id}) {
      await this.getDate(id)
    },
    onReady() {
      this.audioCtx = uni.createAudioContext('myAudio')
    },
    methods: {
      audioClick(){
        this.isPlaying=!this.isPlaying
       if(this.isPlaying){
          this.audioCtx.play();
       }else{
          this.audioCtx.pause();
       }
      },
      async getDate(id) {
        let resDate = await this.$api.get('/v1/articles/' + id)
        //处理轮播图
        if (resDate.media_type == 1) {
          this.getSwiper(resDate.media_content)
        }
        this.info = resDate
      },
      getSwiper(val) {
        let arr = val.split(',')
        this.swiperList = arr
      },
    },
  }
</script>

<style lang="scss">
  page {
    background: #FFFFFF;
    min-height: 100vh;
  }

  .borders {
    border-top-left-radius: 20rpx;
    border-bottom-left-radius: 20rpx;
  }
</style>
