<script setup>
import {ref} from "vue";
import XNav from "../../components/XNav.vue";
import {copy, download} from "../../utils/uils.js";
import XLink from "../../components/XLink.vue";
import XImage from "../../components/XImage.vue";
import testIcon from "../../static/images/test.png";

const mock = [
    'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/mock-1.png',
    'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/mock-2.png',
    'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/mock-3.png',
    'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/mock-4.png',
    'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/mock-5.png',
    'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/mock-6.png',
    'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/mock-7.png',
    'https://udnsunusn.oss-cn-hangzhou.aliyuncs.com/mock-8.png',
];
const current = ref(0);
const tabs = ref([
    {
        id: 1,
        name: '素材1',
    },
    {
        id: 2,
        name: '素材2',
    },
    {
        id: 3,
        name: '素材3',
    },
]);
</script>

<template>
    <!--下载素材-->
    <x-nav></x-nav>

    <tui-tabs :tabs="tabs" :currentTab="current" @change="({index})=>current=index"></tui-tabs>

    <view class="block">
        <view class="title">标题</view>
        <view class="info">
            我是标题我是标题我是标题我是标题我是标题

            <view class="copy-button" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制</view>
        </view>
    </view>

    <view class="block">
        <view class="title">
            话题
            <x-link class="!ml-auto" show-description>查看引导</x-link>
        </view>
        <view class="info">
            我是标题我是标题我是标题我是标题我是标题
            <view class="copy-button" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制</view>
        </view>
    </view>

    <view class="block">
        <view class="title">正文</view>
        <view class="info">
            正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文文正文正文文正文正文文正文正文

            <view class="copy-button" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制</view>
        </view>
    </view>

    <view class="block">
        <view class="title">素材（请按顺序下载&发布）</view>
        <view class="info">
            <view class="!grid grid-cols-5 flex-wrap gap-[32rpx]">
                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
            </view>

            <view class="copy-button" @click="download(mock)">批量保存</view>
        </view>
    </view>

    <view class="block">
        <view class="title">评论1</view>
        <view class="info">
            正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文文正文正文文正文正文文正文正文

            <view class="!grid grid-cols-5 flex-wrap gap-[32rpx]">
                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
            </view>

            <view class="!flex gap-[24rpx] justify-center">
                <view class="copy-button !mx-0" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制文字</view>
                <view class="copy-button !mx-0" @click="download(mock)">保存图片</view>
            </view>
        </view>
    </view>

    <view class="block">
        <view class="title">评论2<x-link class="!ml-auto" show-description>查看引导</x-link></view>
        <view class="info">
            正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文正文文正文正文文正文正文文正文正文

            <view class="!grid grid-cols-5 flex-wrap gap-[32rpx]">
                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
                <x-image :src="testIcon" class="!w-[100%] !h-auto !aspect-square"></x-image>
            </view>

            <view class="!flex gap-[24rpx] justify-center">
                <view class="copy-button !mx-0" @click="copy('我是标题我是标题我是标题我是标题我是标题')">复制文字</view>
                <view class="copy-button !mx-0" @click="download(mock)">保存图片</view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
.block {
    background-color: #fff;
    padding: 20rpx;

    .copy-button {
        padding: 7rpx 24rpx;
        background: rgb(22, 93, 255);
        color: #fff;
        border-radius: 4rpx;
        width: fit-content;
        margin-top: 24rpx;
        margin-left: auto;
        margin-right: auto;
        color: rgb(255, 255, 255);
        font-size: 12px;
        font-weight: 400;
        line-height: 140%;
        letter-spacing: 0;
        font-weight: 300;
    }

    .info {
        color: rgb(29, 33, 41);
        font-size: 14px;
        font-weight: 500;
        line-height: 22px;
        letter-spacing: 0;
        text-align: left;
        padding: 24rpx;
        background-color: #F7F8FA;
        border: 1px solid #E5E6EB;
        border-radius: 8rpx;
        position: relative;
    }

    .title {
        color: rgb(78, 89, 105);
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: 0;
        padding-bottom: 14rpx;
        display: flex;
    }
}
</style>
