<template>
    <div class="card table-box">
        <div>
            <h3>/article/categories</h3>
        </div>
        <div>
            <h4>{{ paramsValue }}</h4>
        </div>
        <template v-for="(item, index) in tableData" :key="index">
            <MyTable :title="item.title" :columns="item.columns" :tableData="item.data" />
        </template>
        <div>
            <h5>{{ queryTextareaTitle }}</h5>
            <el-input v-model="queryTextareaValue" style="width: 840px" :rows="10" type="textarea" readonly />
        </div>
        <div>
            <h5>{{ returnTextareaTitle }}</h5>
            <el-input v-model="returnTextareaTitleValue" style="width: 840px" :rows="30" type="textarea" readonly />
        </div>
    </div>
</template>

<script setup lang="ts" name="productIndex">
import { ZH_DATA } from "./data/zh_data";
import { EN_DATA } from "./data/en_data";
import { useUserStore } from "@/stores/modules/user";
import MyTable from "@/components/MyTable/index.vue";
import { RETURN_VALUE } from "./example/index";
const userStore = useUserStore();
const PARAMS_DATA = {
    1: ZH_DATA,
    2: EN_DATA
};
const TEXTAREA_TITLES = {
    1: "请求示例",
    2: "Request Example"
};
const TEXTAREA_TITLES1 = {
    1: "响应示例",
    2: "Response Example"
};
const PARAMS_VALUE = {
    1: "公共参数",
    2: "Common parameters"
};

let tableData = ref(ZH_DATA);
let queryTextareaValue = ref(
    JSON.stringify(
        {
            parent_id: 1,
            language: "zh-cn",
            page: 1,
            size: 50
        },
        null,
        2
    )
);
let returnTextareaTitleValue = ref(JSON.stringify(RETURN_VALUE, null, 2));
let queryTextareaTitle = ref("请求示例");
let returnTextareaTitle = ref("响应示例");
let paramsValue = ref("公共参数");
watch(
    () => userStore.languageValue,
    newVal => {
        tableData.value = PARAMS_DATA[newVal];
        queryTextareaTitle.value = TEXTAREA_TITLES[newVal];
        returnTextareaTitle.value = TEXTAREA_TITLES1[newVal];
        paramsValue.value = PARAMS_VALUE[newVal];
    },
    {
        immediate: true,
        deep: true
    }
);
</script>

<style scoped></style>
