<template>
  <div>
    <div class="h-34px"></div>
    <ui-title-devider title="我的订阅"></ui-title-devider>
    <div class="px-40px">
      <div class="h-20px"></div>
      <ui-main-article v-for="item in articles" :item="item" class="mb-20px">
        <div
                slot="right"
                @click.stop="handleCancel(item)" v-if="item.subscribe"
                @click="$emit('choose')"
                class="pl-12px pr-12px text-size-12px hover:bg-[#124026] hover:text-[white] h-34px rounded-full text-primary border-1px border-solid border-primary flex items-center justify-center cursor-pointer right-19px bottom-10px absolute"
        >
          {{$t('取消订阅')}}
        </div>
      </ui-main-article>
      <ui-empty-tips v-if="!articles.length"></ui-empty-tips>

    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        articles:[]
      }
    },
    methods:{
      handleCancel(){

      },
      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.$confirm('您现在正在进行取消订阅操作, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        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>
