<template>
    <div class="card table-box">
        <div>
            <h3>/authorize</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="10" type="textarea" readonly />
        </div>
    </div>
</template>

<script setup lang="ts" name="product">
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";
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(
        {
            client_id: "682c22b746aef",
            client_secret: "oibmLhFdEVWhX6lFSF4rWVXnATKI8Oml",
            grant_type: "client_credentials",
            refresh_token: ""
        },
        null,
        2
    )
);

let returnTextareaTitleValue = ref(
    JSON.stringify(
        {
            code: 0,
            msg: "success",
            data: {
                access_token: "ZjY3ZjVjMTU2MmJjYjVlY2Q1M2IwOTNmNDUwMjJiMjhhMTRlZDc3MTIzYzlhOWUzMDE2ZWUwOGVhODViYWQxMQ",
                expires_in: 3600,
                token_type: "bearer",
                scope: null,
                refresh_token: "OWY3NDgyMzE3NzY0Y2UwNjkwNTNlZGE1YzI0ZDFkZDIzNmI1NWQyNjk2NjFlNjU3MmY0ZThmYTEwNjgwOTA1YQ"
            }
        },
        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>
