<template>
  <view class="box" style="position: relative;">
    <view style="height: 30rpx;"></view>
    <view class="">
      <block v-for="(item, index) in list" :key="index">
        <view class="card">
          <view class="card-tit">
            <view class="" style="font-size: 32rpx;display: flex;align-items: center;">
              <view class="">
                {{item.title}}
              </view>
            </view>
            <view class="" style="display: flex;align-items: center;" @click='open(index)'>
              展开
              <u--image src="https://lihai001.oss-cn-chengdu.aliyuncs.com/def/bceaf202401271439428345.png" width="24rpx"
                height="24rpx" class='icon' :style=" {transform:isOpen[index]? 'rotate(180deg)' :'rotate(0)'} " />
            </view>

          </view>
        </view>
        <view class="card-content" :style="{height:isOpen[index]?'0':'auto',padding: isOpen[index]?'0':'20rpx'  } "
          style="height: 0;padding: 0;">
          <view id="formheight1">
            <view class="content" v-if="!isOpen[index]" v-html="item.content.content"></view>
          </view>
        </view>
      </block>
      <u-empty :show="list.length == 0" mode="list" text="没有找到数据呢" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
    </view>
  </view>
</template>

<script>
  import { getArticleList } from "@/api/api.js"
  export default {
    data() {
      return {
        isOpen: [],
        list: [],
      }
    },
    computed: {},
    onReady() {},
    onLoad() {
      this.getArticleList();
    },
    methods: {
      getArticleList() {
        getArticleList(27).then(res => {
          res.data.list.forEach(e => {
            e.content.content = e.content.content.replace(/\<video /g, '<video style="width: 100%; background-color: #888888;" ');
            this.isOpen.push(true);
          })
          this.list = res.data.list;
        })
      },
      open(index) {
        this.isOpen.forEach((item, i) => {
          if (i == index) {
            this.isOpen.splice(index, 1, this.isOpen[index] ? false : true);
          } else {
            this.isOpen.splice(i, 1, true);
          }
        })
      },

    }
  }
</script>
<style lang="scss" scoped>
  .box {
    background: linear-gradient(to bottom, #FFF4DB, #FFEAC3);
    min-height: 100vh;
    font-size: 28rpx;
    padding-bottom: 5vh;
  }

  .tit {
    display: flex;
    width: 638rpx;
    margin: 230rpx auto 30rpx;
    justify-content: space-between;
    font-size: 28rpx;
    color: #000;
  }

  .card {
    width: 686rpx;
    margin: 0 auto;
    background-color: white;
    padding: 30rpx;
    border-radius: 20rpx;
    position: relative;

    .card-tit {
      display: flex;
      justify-content: space-between;
    }

  }

  .card-content {
    background-color: #FFE7B9;
    border-radius: 20rpx;
    padding: 20rpx;
    overflow: hidden;
    transition: 300ms;
    width: 690rpx;
    margin: 18rpx auto;

    .content {
      width: 100%;
      height: auto;
      overflow: hidden;
      
    }
  }

  .icon {
    margin-left: 10rpx;
    transform: translateY(2rpx);
    transition: 300ms !important;
  }
</style>