<template>
  <section class="AppVote">
    <AiGroup noBorder description class="mar-b32">
      <u-parse :html="detail.preface"/>
    </AiGroup>
    <div class="voteItem" flex @click="handleDetail(row.id)" v-for="row in list" :key="row.id">
      <div class="fill">
        <b class="mar-b16" v-text="row.videoName"/>
        <div class="color-999 line3" v-text="row.videoIntroduction"/>
      </div>
      <div class="thumb">
        <img :src="row.imageFileUrl"/>
        <span v-text="`${row.voteNumber}票`"/>
      </div>
    </div>
    <AiGroup noBorder description>
      <u-parse :html="detail.ending"/>
    </AiGroup>
    <weixin-login :autoShow="!user.token" content="投票需要您授权您的微信信息" @login="getList"/>
  </section>
</template>

<script>
import {mapState} from "vuex"
import WeixinLogin from "./weixinLogin";

export default {
  name: "AppVote",
  components: {WeixinLogin},
  appName: "公众投票",
  data() {
    return {
      detail: {},
      list: []
    }
  },
  computed: {
    ...mapState(['user']),
  },
  methods: {
    getDetail() {
      this.$http.post("/app/appvideovoteconfig/queryDetailByCorpId", null, {
        withoutToken: true
      }).then(res => {
        if (res?.data) {
          this.detail = res.data
        }
      })
    },
    getList() {
      this.$http.post("/app/appvideoinfo/list", null, {
        withoutToken: !this.user.token,
        param: {size: 20}
      }).then(res => {
        if (res?.data) {
          this.list = res.data.records
        }
      })
    },
    handleDetail(id) {
      uni.navigateTo({url: './voteDetail?id=' + id})
    }
  },
  onShow() {
    this.getDetail()
    this.getList()
  },
}
</script>

<style lang="scss" scoped>
.AppVote {
  min-height: 100vh;
  background: #fff;

  .AiGroup {
    width: 100%;
    padding-right: 32px;
    box-sizing: border-box;
  }

  .voteItem {
    height: 240px;
    border: 1px solid #CCCCCC;
    border-radius: 16px;
    margin: 0 32px 24px;
    padding: 24px;
    box-sizing: border-box;
    font-family: PingFangSC;
    align-items: flex-start;

    b {
      font-size: 34px;
      color: #333333;
      display: block;
      line-height: 48px;
    }

    .line3 {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    .thumb {
      position: relative;
      flex-shrink: 0;
      margin-left: 24px;
      width: 192px;
      height: 192px;
      border-radius: 8px;
      overflow: hidden;
      background-repeat: no-repeat;
      background-size: 100%;
      background-color: #eee;

      & > span {
        position: absolute;
        right: 0;
        top: 0;
        padding: 0 8px;
        line-height: 44px;
        background: #FF883C;
        color: #fff;
        z-index: 2;
      }

      & > img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
