<template>
    <a-row :span="16">
        <a-col>
            <a-button @click="showAdd" type="primary">
                <template #icon> <PlusOutlined /> </template>
                {{ $t("website_settings.add_footer_page") }}
            </a-button>
            <a-modal v-model:open="visible" :title="addEditTitle">
                <a-form layout="vertical">
                    <a-row :gutter="16">
                        <a-col :xs="24" :sm="24" :md="24" :lg="24">
                            <a-form-item
                                :label="$t('common.title')"
                                name="title"
                                :help="rules.title ? rules.title.message : null"
                                :validateStatus="rules.title ? 'error' : null"
                                class="required"
                                v-on:keyup="formData.slug = slugify($event.target.value)"
                            >
                                <a-input
                                    v-model:value="formData.title"
                                    :placeholder="
                                        $t('common.placeholder_default_text', [
                                            $t('common.title'),
                                        ])
                                    "
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>

                    <a-row :gutter="16">
                        <a-col :xs="24" :sm="24" :md="24" :lg="24">
                            <a-form-item
                                :label="$t('common.slug')"
                                name="slug"
                                :help="rules.slug ? rules.slug.message : null"
                                :validateStatus="rules.slug ? 'error' : null"
                                class="required"
                            >
                                <a-input
                                    v-model:value="formData.slug"
                                    :placeholder="
                                        $t('common.placeholder_default_text', [
                                            $t('common.slug'),
                                        ])
                                    "
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>

                    <a-row :gutter="16">
                        <a-col :xs="24" :sm="24" :md="24" :lg="24">
                            <a-form-item
                                :label="$t('common.page_content')"
                                name="page_content"
                                :help="
                                    rules.page_content ? rules.page_content.message : null
                                "
                                :validateStatus="rules.page_content ? 'error' : null"
                                class="required"
                            >
                                <a-textarea
                                    v-model:value="formData.page_content"
                                    :placeholder="
                                        $t('common.placeholder_default_text', [
                                            $t('common.page_content'),
                                        ])
                                    "
                                    :rows="4"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>

                    <a-row :gutter="16">
                        <a-col :xs="24" :sm="24" :md="24" :lg="24">
                            <a-form-item
                                :label="$t('front_setting.seo_keywords')"
                                name="seo_keywords"
                                :help="
                                    rules.seo_keywords ? rules.seo_keywords.message : null
                                "
                                :validateStatus="rules.seo_keywords ? 'error' : null"
                            >
                                <a-textarea
                                    v-model:value="formData.seo_keywords"
                                    :placeholder="
                                        $t('common.placeholder_default_text', [
                                            $t('front_setting.seo_keywords'),
                                        ])
                                    "
                                    :rows="2"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row :gutter="16">
                        <a-col :xs="24" :sm="24" :md="24" :lg="24">
                            <a-form-item
                                :label="$t('front_setting.seo_description')"
                                name="seo_description"
                                :help="
                                    rules.seo_description
                                        ? rules.seo_description.message
                                        : null
                                "
                                :validateStatus="rules.seo_description ? 'error' : null"
                            >
                                <a-textarea
                                    v-model:value="formData.seo_description"
                                    :placeholder="
                                        $t('common.placeholder_default_text', [
                                            $t('front_setting.seo_description'),
                                        ])
                                    "
                                    :rows="2"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </a-form>
                <template #footer>
                    <a-button
                        key="submit"
                        type="primary"
                        :loading="loading"
                        @click="onSubmit"
                    >
                        <template #icon>
                            <SaveOutlined />
                        </template>
                        {{
                            addEditType == "add"
                                ? $t("common.create")
                                : $t("common.update")
                        }}
                    </a-button>
                    <a-button key="back" @click="onClose">
                        {{ $t("common.cancel") }}
                    </a-button>
                </template>
            </a-modal>
        </a-col>
    </a-row>
    <a-row :gutter="[18, 18]" class="mt-20 mb-20">
        <a-col :span="24">
            <a-table
                :columns="columns"
                :row-key="(record) => record.id"
                :data-source="tableData"
                :pagination="false"
            >
                <template #bodyCell="{ column, record }">
                    <template v-if="column.dataIndex === 'action'">
                        <a-space>
                            <a-button type="primary" @click="editItem(record)">
                                <template #icon><EditOutlined /></template>
                            </a-button>
                            <a-button type="primary" @click="showDeleteConfirm(record)">
                                <template #icon><DeleteOutlined /></template>
                            </a-button>
                        </a-space>
                    </template>
                </template>
            </a-table>
        </a-col>
    </a-row>
</template>
<script>
import { onMounted } from "vue";
import {
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    SaveOutlined,
} from "@ant-design/icons-vue";
import landingWebsiteSetting from "../../composable/landingWebsiteSetting";
import fields from "./fields";
import common from "../../../common/composable/common";

export default {
    props: ["langKey"],
    components: {
        PlusOutlined,
        EditOutlined,
        DeleteOutlined,
        SaveOutlined,
    },
    setup(props) {
        const landingWebsite = landingWebsiteSetting(props);
        const { details } = fields("footer_pages");
        const { slugify } = common();

        onMounted(() => {
            landingWebsite.columns.value = details.value.columns;
            landingWebsite.settingType.value = details.value.setting_type;
            landingWebsite.langType.value = details.value.lang_type;
            landingWebsite.initData.value = details.value.init_data;
            landingWebsite.getData(props.langKey);
        });

        return {
            ...landingWebsite,
            slugify,
        };
    },
};
</script>
