<template>
  <div>
    <div class="box" style="padding: 0 10%">
      <el-row class="contest-title">
        <el-col>
          <h3>{{ languageLibrary[language].a }}</h3>
        </el-col>
      </el-row>
      <el-row>
        <div class="content" v-html="itemData.content" />
      </el-row>
      <el-row class="contest-title" style="text-align: center">
        <el-col :span="24"><h3>{{ languageLibrary[language].b }}</h3></el-col>
        <el-col :span="24">
          <el-form :model="form">
            <el-row style="width: 100%;">
              <el-col :span="12" style="display: flex; flex-direction: column">
                <el-form-item label="" prop="paymentName">
                  <el-input
                      v-model.trim="form.paymentName" :placeholder="languageLibrary[language].c" clearable style="width: 95%;margin-bottom: 20px;height: 50px"
                  />
                </el-form-item>
                <el-form-item label="" prop="paymentName">
                  <el-input
                      v-model.trim="form.paymentName" :placeholder="languageLibrary[language].d" clearable style="width: 95%;height: 50px"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="" prop="payDeptName"  style="height: 100%">
                  <el-input
                      v-model.trim="form.payDeptName" type="textarea" :placeholder="languageLibrary[language].e" clearable style="width: 100%;height: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-button class="submit-btn">{{ languageLibrary[language].f }}</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup>
import { ArrowRight, Search } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { getNewsListById } from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
import {useStorage} from "@vueuse/core/index";
import * as match from "@/apiPc/match";

const language = useStorage('language', 1)
const languageLibrary = ref([{
  a:'关于我们',
  b:'联系我们',
  c:'联系人',
  d:'邮箱',
  e:'留言',
  f:'提交',
},{
  a:'About US',
  b:'Contact Us',
  c:'Contact person',
  d:'Email',
  e:'Message',
  f:'Submit',
},{
  a:'회사 소개',
  b:'문의하기',
  c:'담당자',
  d:'이메일',
  e:'메시지',
  f:'Submit',
},{
  a:'会社概要',
  b:'お問い合わせ',
  c:'担当者',
  d:'メールアドレス',
  e:'メッセージ',
  f:'Submit',
},{
  a:'Giới thiệu',
  b:'Liên hệ',
  c:'Người liên hệ',
  d:'Email',
  e:'Tin nhắn',
  f:'Submit',
}])
const router = useRouter()
const form = ref({
  paymentName:'',
  payDeptName:'',
})

const noteId = ref()
const itemData = ref({})

onMounted(() => {
  getMain()
})

const getMain = () => {
  match.getNoteList({
    sortId:7000
  }).then(res => {
    if (res.code === 200) {
      noteId.value = res.rows[0].noteId
      getList(noteId.value)
    }
  })
}

const getList = (id) => {
  match.getNoteDetail(id).then(res => {
    if (res.code === 200) {
      itemData.value = res.data
    }
  })
}


const goDetail = (id) => {
  router.push({
    path: `/photo/detail/${id}`
  })
}
</script>
<style lang="scss" scoped>
.content {
  text-align: justify;
  color: #fff;
  background: #1f2644;
  width: 100%;
}


.photo-space {
  padding: 10px;
}

.photo-img-group {
  padding: 20px;
  width: 100%;
  position: relative;
}

.photo-img {
  width: 100%;
  aspect-ratio: 2/1;
  cursor: pointer;
}

.contest-title {
  h3 {
    color: #fff;
    font-size: 32px;
  }

  :deep(.el-form-item--default) {
    margin: 0;
  }

  :deep(.el-textarea__inner) {
    height: 100%;
    background: #1f2644;
    border-color: #838CB3;
    box-shadow: 0 0 0 1px #838CB3 inset;
  }

  :deep(.el-input__wrapper) {
    background: #1f2644;
    box-shadow: 0 0 0 1px #838CB3 inset;
  }

  .submit-btn {
    margin-top: 20px;
    padding: 18px 80px;
    color: #143E6A;
    background: linear-gradient(90deg, #F0E1A5, #DEC172);
    font-weight: bold;
  }
}

@media (max-width: 500px) {
  .box{width: 100%}
  .forPc{display: none}
  :deep(.el-tabs__nav-scroll){overflow: auto;}
  :deep(.el-card__body){padding: 10px;}
}
</style>