<template>
  <div>
    <n-grid :x-gap="24">
      <n-grid-item span="6">
        <n-card :bordered="false" size="small" class="proCard">
          <n-thing
            class="thing-cell"
            v-for="item in typeTabList"
            :key="item.key"
            :class="{ 'thing-cell-on': type === item.key }"
            @click="switchType(item)"
          >
            <template #header>{{ item.name }}</template>
            <template #description>{{ item.desc }}</template>
          </n-thing>
        </n-card>
      </n-grid-item>
      <n-grid-item span="18">
        <n-card :bordered="false" size="small" :title="typeTitle" class="proCard">
          <IosPay v-if="type === 1" />
          <AdvIncome v-if="type === 2" />
          <DrainageServer v-if="type === 3" />
          <DisplayServer v-if="type === 4" />
          <Whitelist v-if="type === 5" />
          <ServerDate v-if="type === 6" />
          <ReleaseVersion v-if="type === 7" />
          <JsonConfig v-if="type === 10" />
        </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue';
  import IosPay from './IosPay.vue';
  import AdvIncome from './AdvIncome.vue';
  import JsonConfig from './JsonConfig.vue';
  import DrainageServer from './DrainageServer.vue';
  import DisplayServer from './DisplayServer.vue';
  import Whitelist from './Whitelist.vue';
  import ReleaseVersion from './ReleaseVersion.vue';
  import ServerDate from '@/views/system/config/ServerDate.vue';
  import { useUserStoreWidthOut } from '@/store/modules/user';
  import { useRouter } from 'vue-router';

  const typeTabList = ref([
    {
      name: '引流服务器',
      key: 3,
      desc: '新玩家默认登录的服务器',
    },
    {
      name: '显示服务器',
      key: 4,
      desc: '客户端服务器列表配置',
    },
    {
      name: '登录白名单',
      key: 5,
      desc: '用于版本更新时内部测试',
    },
    {
      name: '服务器时间',
      key: 6,
      desc: '用于版本测试修改时间',
    },
    // {
    //   name: '提审发布',
    //   key: 7,
    //   desc: '用于切换提审时的游戏服务器',
    // },
    {
      name: '苹果/安卓支付',
      key: 1,
    },
    // {
    //   name: '广告收益',
    //   key: 2,
    // },

    // {
    //   name: 'json配置',
    //   key: 10,
    // },
  ]);

  export default defineComponent({
    components: {
      ServerDate,
      IosPay,
      AdvIncome,
      JsonConfig,
      DrainageServer,
      DisplayServer,
      Whitelist,
      ReleaseVersion,
    },
    setup() {
      const router = useRouter();
      const useUserStore = useUserStoreWidthOut();

      const state = reactive({
        type: 3,
        typeTitle: '引流服务器',
      });

      onMounted(() => {
        if (router.currentRoute.value.query?.type) {
          setDefaultOption();
        }

        // 正式服隐藏部分功能
        if (useUserStore.config.mode === 'release') {
          typeTabList.value = typeTabList.value.filter((item) => {
            return item.key !== 6;
          });
        }
      });

      function setDefaultOption() {
        const key = router.currentRoute.value.query.type as unknown as number;
        if (key !== undefined && key > 0) {
          for (const item of typeTabList.value) {
            if (item.key == key) {
              switchType(item);
            }
          }
        }
      }

      function switchType(e) {
        state.type = e.key;
        state.typeTitle = e.name;
      }

      return {
        ...toRefs(state),
        switchType,
        typeTabList,
        useUserStore,
      };
    },
  });
</script>
<style lang="less" scoped>
  .thing-cell {
    margin: 0 -16px 10px;
    padding: 5px 16px;

    &:hover {
      background: #f3f3f3;
      cursor: pointer;
    }
  }

  .thing-cell-on {
    background: #f0faff;
    color: #2d8cf0;

    ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
      color: #2d8cf0;
    }

    &:hover {
      background: #f0faff;
    }
  }
</style>
