<template>
  <ui-page-layout title="我的订阅">
    <div class="p-24rem">
      <ui-main-article v-for="item in articles" :item="item" class="mb-24rem">
        
        <!-- <div
          slot="right"
          class="w-120rem h-40rem rounded-full flex items-center justify-center text-primary text-size-14 border-primary absolute right-0 bottom-17rem border-1rem border-solid"
        >
          {{ $t("取消订阅") }}
        </div> -->
        <div
          slot="right"
          @click.stop="handleCancel(item)"
          class="w-120rem h-40rem rounded-full flex items-center justify-center text-primary text-size-14  absolute right-0 bottom-17rem border-1rem border-solid bg-primary !text-white"
        >
          {{ $t("取消订阅") }}
        </div>
      </ui-main-article>
    </div>
  </ui-page-layout>
  
</template>

<script>
  export default {
    components: {},
    data(){
      return {
        articles:[]
      }
    },
    methods:{
      async handleLoad(){
        let resp = await this.$http.post(this.$api.cms.mySubArticles,this.$qs.stringify({onPage:false}));
        this.articles = resp.data.data.cmsArticles;

      },
      async handleCancel(item){

        await this.$dialog.confirm( {
          message:this.$t('您现在正在进行取消订阅操作, 是否继续?'),
          title:this.$t('提示'),
          confirmButtonText: this.$t('确认'),
          cancelButtonText: this.$t('取消'),
        });

        let resp = await  this.$http.post(this.$api.cms.subscribe,this.$qs.stringify({refArticle:item.code}));
        if(resp.data.status === 200){
          this.handleLoad();
        }

      }
    },
    async created() {
      this.handleLoad();
    }

  };
</script>

<style lang="scss" scoped></style>
