<template>
  <div class="mark_container">
    <!--      <van-row gutter="20">-->
    <div
      v-for="(item, index) in info"
      :key="index"
      class="market-item"
      @click.stop="toDetail(item)"
    >
      <div class="content">
        <div class="title fw-bold fs-14">
          <div class="flex align-center">
            <p class="title_con">{{ item.title }}</p>
          </div>
          <van-icon
            v-if="userInfo?.userName === item.created_user"
            name="delete1"
            class-prefix="mobilefont"
            size="18"
            style="color: #ff6214"
            @click.stop="deleteItem(item)"
          />

          <van-icon
            v-else
            name="delete1"
            class-prefix="mobilefont"
            size="18"
            style="color: #c1c1c1"
          />
        </div>
        <div class="desc flex space-between align-center">
          <div>
            <p>创建人</p>
            <p>{{ item.created_user }}</p>
          </div>
          <div class="line"></div>
          <div>
            <p>引用次数</p>
            <p>{{ item.quote_nums }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { defineProps, onMounted, ref } from 'vue';
import { deleteTemplate } from '@/api/home/index.js';
import { showDialog, showFailToast, showSuccessToast } from 'vant';
import { useRouter } from 'vue-router';

const router = useRouter();
const { info, marketItem } = defineProps({
  info: {
    type: Array,
    required: true,
    default: () => []
  },
  marketItem: {
    type: Object,
    default: () => ({})
  }
});
const userInfo = ref({ userName: '' });
const toDetail = (item) => {
  const marketList = JSON.parse(sessionStorage.getItem('marketList'));
  const marketItem = marketList.find((market) => item.scene_code_info === market.code);
  router.push({
    path: '/templatePreview',
    query: {
      sn: item.sn,
      is_template: 1,
      source: item.sn,
      title: marketItem.h5Title,
      parentCode: marketItem.parentCode,
      scene_code_info: marketItem.code,
      user: item.created_user,
      quote_nums: item.quote_nums
    }
  });
};
const deleteItem = (item) => {
  showDialog({
    title: '是否确认删除此模板？',
    showCancelButton: true,
    confirmButtonColor: '#03B03C'
  })
    .then(async () => {
      const res = await deleteTemplate(item.sn);
      if (res.status === 204) {
        info.splice(info.indexOf(item), 1);
        showSuccessToast('删除成功');
      } else {
        showFailToast(res.data);
      }
    })
    .catch(() => {
      // on cancel
    });
};

onMounted(() => {
  userInfo.value = JSON.parse(sessionStorage.getItem('userInfo'));
});
</script>

<style lang="scss" scoped>
@use '@/assets/css/theme' as *;

.mark_container {
  background-color: $nav-header-color;
  display: grid;
  grid-gap: $gap;
  grid-template-columns: repeat(2, 1fr);
  //flex-wrap: wrap;
  //justify-content: space-between;
  padding: $gap;
}

.market-item {
  //margin-right: 4%;
  //flex: 1;
  box-sizing: border-box;
  //margin-bottom: 5px;
  //margin-left: 7px;
  padding: 15px 12px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: #fff;

  &:nth-child(n-1) {
    margin-right: 7px;
    margin-left: 0;
  }

  &:nth-child(2n) {
    margin-right: 0;
  }

  //width: 49%;
  //margin-bottom: 12px;
  //padding: 10px;
  //border-radius: 8px;
  //background: #fff;
  //box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  .content {
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
      color: #000;

      .title_con {
        display: block;
        overflow: hidden;
        max-width: 100px;
        margin-left: 4px;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      img {
        width: 20px;
        height: 20px;
      }
    }

    .desc {
      color: #666;
      font-size: 12px;

      .line {
        width: 1px;
        height: 20px;
        background: #979797;
        opacity: 0.1;
      }
      div p:first-child {
        font-size: 11px;
        color: #828282;
        //color: #000;
      }
      div p:last-child {
        margin-top: 13px;
        font-size: 13px;
        //color: #000;
      }
    }
  }
}
</style>
