<template>
  <div class="aboutus">
    <div class="tabs">
        <div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">{{lan.$t('fuwutiaokuan')}}</div>
        <div :class="tabindex == 2 ? 'on' : ''" @click="tabchange(2)">{{lan.$t('yinsizhengce')}}</div>
        <div :class="tabindex == 3 ? 'on' : ''" @click="tabchange(3)">{{lan.$t('yijianfankui')}}</div>
      </div>
    <div class="line"></div>
    <div class="content" v-if="tabindex==1">
      <!-- <div class="title">{{text[0].title}}</div> -->
      <div v-html="text[0].content">
      
      </div>
      <!-- 
         {{lan.$t('guanyuwomen')}}
      <div>
        欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
        如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
      </div>
      <div class="title">关于Beelink</div>
      <div>
        欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
        如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
      </div>
      <div class="title">关于Beelink</div>
      <div>
        欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
        如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
      </div> -->
    </div>
    <div class="content" v-else-if="tabindex==2">
       <!-- <div class="title">{{text[1].title}}</div> -->
      <div v-html="text[1].content">
      
      </div>
      <!-- 
      <div>
        欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
        如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
      </div>
      <div class="title">关于Beelink</div>
      <div>
        欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
        如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
      </div>
      <div class="title">关于Beelink</div>
      <div>
        欢迎来到Beelink！我们邀请您访问我们的网站、使用Beelink服务，但是请注意，对您的邀请以您同意本服务条款为前提。请您务必审慎阅读、充分理解本服务条款内容，特别是免除或者限制责任的条款，以及开通或使用某项服务的独立协议（于下文定义），并选择接受或不接受。限制、免责条款可能以加粗形式提示您注意。
        如果您未满18周岁，请在法定监护人的陪同下阅读本协议及其他相关协议，并特别注意关于未成年人的条款。
      </div> -->
    </div>
    <div v-else>
      
      <div class="fankui">
        <div class="label">{{lan.$t('yijianfankui')}}</div>
        <div>
             <a-textarea v-model:value="value" :placeholder="lan.$t('shurufankui')" :rows="10" />
        </div>
      </div>

      <div class="sub" @click="sub">{{lan.$t('tijiaofankui')}}</div>
    </div>
    <NavBottom class="navbottom"></NavBottom>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import NavBottom from "@/components/NavBottom.vue";
import { feedback, getarticle } from '@/api';
import { useRoute } from 'vue-router';
import { useI18n } from '@/utils/i18n';
export default defineComponent({
  name: "Aboutus",
  components: {
    NavBottom,
  },
  setup() {
    const lan: any = useI18n();
    const tabindex=ref(1)
    const value = ref("")
    console.log(useRoute().query)
    const selected=useRoute().query.selected
    const text = ref<any>([{title:"",content:""},{title:"",content:""}])
    getarticle().then((res)=>{
      text.value = res
    })
    if(useRoute().query.selected){
      tabindex.value=Number(selected)
    }
     const tabchange: (e: number) => void = (e: number) => {
      
      console.log(e);
      tabindex.value=e
    };
    function sub(){
      feedback(value.value)
    }
    return {
      tabchange,
      tabindex,
      sub,
      value,
      lan,
      text
    };
  },
});
</script>
<style lang="scss" scoped>
.aboutus {
  width: 1150px;
  margin: 0 auto;
  background: white;
  border-radius: 17px;
  color: #111111;
  font-size: 13px;
   ::v-deep(.ant-input){
            font-size: 11px;
            width: 350px;
        }
 .tabs {
      display: flex;
      align-items: center;
      font-size: 13px;
      font-weight: bold;
      color: #111;
      padding: 11px 0;
      position: relative;
      top: 10px;
      left:36px;
      > div {
        margin-right: 58px;
        cursor: pointer;
        text-align: center;
        width: 54px;
        &:hover{
          color: #08ae98;
        }
      }
      .on {
        color: #08ae98;
        position: relative;
        &::before {
          content: "";
          display: block;
          position: absolute;
          bottom: -12px;
          width: 57px;
          height: 1px;
          background-color: #08ae98;
        }
      }
    }
  .line {
    width: 1070px;
    height: 1px;
    background: #eeeeee;
    margin-top: 11px;
  }
  .content {
    width: 1069px;
    margin: 0 auto;
    margin-top: 27px;
  }
  .title {
    margin-top: 40px;
  }
  .fankui{
    width: 1070px;
    margin:0 auto;
    margin-top: 35px;
    display:flex;
      .label{
    color: #808080;
    font-size:11px;
    margin-right: 28px;
  }

  }
  .fankuicontent{
    width: 359px;
    height:171px
  }
  .sub{
    width:63px;
    height: 23px;
    background:#08AE98;
    border-radius: 3px;
    color: white;
    font-size: 10px;
    line-height: 23px;
    text-align: center;
    margin-left:40px;
    margin-bottom: 110px;
    margin-top: 80px;
  }
  .navbottom {
    padding-top: 68px;
    padding-bottom: 28px;
  }
}
</style>