<template>
    <div class="content">
        <div class="sub-title-area mb-30">
            <h2>보도자료</h2>
            <div class="breadcrumb-list">
                <ul>
                    <li><img :src="homeicon" alt="Home Icon">
                        <p>언론에서 바라본 구미시</p>
                    </li>
                    <li><img :src="righticon" alt=""></li>
                    <li>보도자료</li>
                </ul>
            </div>
        </div>
        <form action="" class="gallery-form mb-40">
            <dl class="mb-20">
                <dd>
                    <p>보도자료 제목1
                    </p>
                    <div class="date flex align-center">
                        <img :src="calendaricon" alt="">
                        <span>2025.02.28</span>
                    </div>
                </dd>

            </dl>
            <div>
                <div>
                    <img :src="noimg" alt="">
                </div>
                <div action="" class="info-form mb-50">
                    <h3>기본정보</h3>
                    <dl>
                        <dd class="mb-20">
                            <img :src="addressicon" alt="">
                            <span>주소</span>
                            <p>경상북도 구미시 송정대로 55</p>
                        </dd>
                        <dd class="mb-20">
                            <img :src="yearicon" alt="">
                            <span>생산정보</span>
                            <p>2017</p>

                        </dd>
                        <dd>
                            <img :src="categoryicon" alt="">
                            <span>카테고리</span>
                            <ul class="category">
                                <li v-if="resultitem.category1" class="category1">카테고리1</li>
                                <li v-if="resultitem.category2" class="category2">카테고리2</li>
                            </ul>

                        </dd>

                    </dl>
                </div>
            </div>
        </form>

        <h3>내용</h3>
        <form action="" class=" info-form mb-50">
            <dl>
                <dd>
                    <p> 대한민국 최대의 내륙 산업단지를 보유하고, 서울로부터 277km, 부산으로부터 167km 거리에 있으며, 면적은 615㎢로 경상북도 전체 면적의 3.2%에 달합니다. 인구는
                        41만 명이고, 선산읍, 고아읍, 산동읍을 비롯한 3읍, 5면, 17개 동으로 구성되어 있습니다.</p>

                </dd>
            </dl>
        </form>


        <div class="btn-group flex-center">
            <button class="delete w130" type="button" @click="fnDeleteUser">삭제</button>
            <button class="update w130" type="button" @click="fnUpdateUser">수정</button>
            <button class="list w130" type="button" @click="fnUpdateUser">목록</button>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import { ref } from 'vue';
import { updateUsers, logOutProc, updatePassword } from "../../../resources/api/user"
// Import Swiper Vue components
import { CaretRightOutlined, PauseOutlined } from '@ant-design/icons-vue';
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';

import 'swiper/css/free-mode';
import 'swiper/css/navigation';
import 'swiper/css/thumbs';

// import required modules
import { FreeMode, Navigation, Thumbs } from 'swiper/modules';

export default {
    components: {
        PauseOutlined,
        CaretRightOutlined,
        Swiper,
        SwiperSlide,
    },
    setup() {
        const thumbsSwiper = ref(null);

        const setThumbsSwiper = (swiper) => {
            thumbsSwiper.value = swiper;
        };

        return {
            thumbsSwiper,
            setThumbsSwiper,
            modules: [FreeMode, Navigation, Thumbs],
        };
    },
    data() {
        return {
            resultitem: {
                category1: true,
                category2: true,
            },
            noimg: 'client/resources/images/img7.png',
            calendaricon: 'client/resources/images/icon/calendaricon.png',
            homeicon: 'client/resources/images/icon/home.png',
            erroricon: 'client/resources/images/icon/error.png',
            righticon: 'client/resources/images/icon/right.png',
            addressicon: 'client/resources/images/icon/addressicon.png',
            yearicon: 'client/resources/images/icon/yearicon.png',
            categoryicon: 'client/resources/images/icon/categoryicon.png',
            slides: [
                { img: 'client/resources/images/visual.png', alt: 'Slide 1' },
                { img: 'client/resources/images/visual.png', alt: 'Slide 2' },
                { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
                { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
                { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
                { img: 'client/resources/images/visual.png', alt: 'Slide 3' },
                // Add more slides as needed
            ],

        };
    },
    methods: {
    },
    watch: {},
    computed: {
    },
    mounted() { },
};
</script>