<template>
  <div class="list">
    <div class="item" v-for="i in list">
      <el-card :body-style="{ padding: '0px' }">
        <img :src="i.img" class="image" />
        <div style="padding: 14px">
          <span>{{i.name}}</span>
          <div class="bottom">
            <time class="time">正在订阅：{{i.skip}}/{{i.count}}</time>
            <el-button text class="button" @click="del(i.id)">删除</el-button>
          </div>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue";
import {delSubscribe, getSubscribe} from '../../api/Video.js'
import {ElMessage, ElMessageBox} from "element-plus";

const list = ref([])
onMounted(async ()=>{
    const res = await getSubscribe()
    list.value = res.data
})
function del(id){
    ElMessageBox.confirm(
        '确认删除?',
        'Warning',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            del2(id)
        })
        .catch(() => {

        })
}
async function del2(id){
    let res = await delSubscribe(id)
    if(res.data == "删除成功"){
        ElMessage({
            message: '删除成功',
            type: 'success',
        })
    }else{
        ElMessage({
            message:"删除失败",
            type:"error"
        })
    }
    const res2 = await getSubscribe()
    list.value = res2.data
}

</script>

<style lang="scss">
.list {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 200px;
    margin: 20px;

    & img {
      height: 300px;
    }
  }
}

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
  min-width: 40px;
}

.image {
  width: 100%;
  display: block;
}
</style>
