<template>
    
    <div class=" lg:ml-[25%] w-full lg:w-3/7 items-center mt-5 mb-5">
        <div class=" bg-[#fff9e6] p-4 flex flex-row items-center">
            <div class=" mr-4">
                <ShieldCheckIcon class="w-6 h-6 text-black-600" />
            </div>
            <p style="font-size: 15px;">To request a copy of your data, exercise rights to your data, or express concerns about how your data is used, please fill out a form via this <a href="https://privacyportal-cdn.onetrust.com/dsarwebform/8b68dfee-6954-490c-a365-b74dfb0bf235/caa7addb-eb56-4b4d-a57f-8038ce071190.html" target="_blank" rel="noreferrer">link.</a></p>
        </div>
        <div class="text-gray-500 mt-7">Name</div>
        <div class=" mt-2.5">{{person.first_name + person.next_name}}</div>
        <div class="text-gray-500 mt-7">Email Address</div>
        <div class=" mt-2.5">{{ person.username }}</div>
        <div class="mt-7 mb-2.5">Category</div>
        <el-select 
          v-model="selectModel"
          placeholder="Please select"
          style="width:100%;"
        >
            <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="item.label"
            />
        </el-select>
        <div class=" mt-7">Subject</div>
        <el-input class=" mt-2.5" v-model="subModel"></el-input>
        <div class=" mt-7 mb-2.5">Description</div>
        <el-input v-model="desModel" type="textarea" :rows="4"></el-input>
        <div style="color: #e8e8e8;">300 characters remaining</div>

        <el-button v-show="loading==false" @click="contactUsAction" class=" mt-7" style="width: 100%;height: 46px;" type="primary">Submit</el-button>
        <div v-show="loading==true" v-loading="loading" class=" mt-7" style="width: 100%;height: 46px;" >Submit</div>
    </div>
</template>
<script setup lang="js">
import {onMounted, ref} from 'vue'
import { ShieldCheckIcon } from '@heroicons/vue/24/solid'
import {getPersonInfo,contactUs} from '@/http/register.js'
import {getToken} from '@/utils/local.js'
import { ElMessage } from 'element-plus'

const selectModel = ref('')
const subModel = ref('')
const desModel = ref('')
const person = ref({})
const options = [
  {
    id: 'Account Verification',
    label: 'Account Verification',
  },
  {
    id: 'Feedback',
    label: 'Feedback',
  },
  {
    id: 'Other',
    label: 'Other',
  },
  {
    id: 'Points',
    label: 'Points',
  },
  {
    id: 'Profile Information',
    label: 'Profile Information',
  },
  {
    id: 'Promotions',
    label: 'Promotions',
  },
  {
    id: 'Pulse',
    label: 'Pulse',
  },
  {
    id: 'Redemption',
    label: 'Redemption',
  },
  {
    id: 'Surveys Experience',
    label: 'Surveys Experience',
  },
  {
    id: 'Taxes',
    label: 'Taxes',
  },
]
const loading = ref(false)


const contactUsAction = async() => {
  const myToken = getToken()
  if(selectModel.value == ''){
    ElMessage.warning('Please select Category')
    return
  }
  if(subModel.value == ''){
    ElMessage.warning('Please input Subject')
    return
  }
  if(desModel.value == ''){
    ElMessage.warning('Please input Description')
    return
  }
  try{
    loading.value =true
    const res = await contactUs(myToken,person.value.first_name+person.value.next_name,person.value.username,selectModel.value,subModel.value,desModel.value)
    if(res.code == 1){
      selectModel.value = ''
      subModel.value = ''
      desModel.value = ''
      ElMessage.success('submit success')
    }
    loading.value = false
  }catch(err){
    loading.value = false
  }

}

const getPerson = async() => {
  const myToken = getToken()
  const res = await getPersonInfo(myToken)
  if(res.code == 1){
    person.value = res.data
  }
}

onMounted(() => {
  getPerson()
})

</script>