<script setup>
import { showConfirmDialog, showToast } from 'vant';


const router = useRouter()
const route = useRoute()
const type = route.query.type

const onClickLeft = () => {
  if (type == 'my') {
    router.push('/main/personal');
  } else {
    router.push('/login');
  }
}

let fromData = $ref({
  tw_contact: '',
  tw_content: ''
})
let hintShow = $ref(false)
let hintText = $ref('')
function confirm() {
  if (!fromData.tw_contact || !fromData.tw_content) {
    hintText = '请填写联系方式和描述内容'
    hintShow = true
    return
  } else {
    hintText = ''
    hintShow = false
  }
  showConfirmDialog({
    title: '提示',
    message:
      '是否提交此次反馈？',
  })
    .then(() => {
      request({
        url: '/txwx/wtfk/add',
        data: {
          token: '',
          txwx_wtfk: fromData
        }
      }).then(res => {
        if (res.code === '1') {
          showToast(res.msg);
          fromData = {
            tw_contact: '',
            tw_content: ''
          }
        }
      })
    })
    .catch(() => {
      // on cancel
    });

}
</script>
<template>
  <div>
    <van-nav-bar title="问题与反馈" left-text="" left-arrow fixed placeholder @click-left="onClickLeft" />
    <div class="inputDiv">
      <div class="inputHeight">
        <input v-model="fromData.tw_contact" placeholder="请输入联系方式" style="width: 100%;" />
      </div>
    </div>
    <div class="inputTextArea">
      <textarea v-model="fromData.tw_content" placeholder="请输入描述内容" style="width: 100%;height: 100%;"></textarea>
    </div>
    <div class="contact">如有急事请联系胡工:18015656482李工:19953824229</div>
    <div style="text-align: center;width: 100%;height: 10vw;">
      <span v-show="hintShow" class="hint">提示:{{ hintText }}</span>
    </div>
    <div class="loginButton" @click="confirm()">
      提交
    </div>
  </div>
</template>
<style lang="scss" scoped>
.hint {
  color: #E63333;
  font-size: 12px;
}

.loginButton {
  margin: auto;
  // margin-top: 40px;
  width: 290px;
  height: 46px;
  line-height: 46px;
  background-color: #154A9A;
  color: white;
  font-size: 18px;
  text-align: center;
  border-radius: 4px;
}

.contact {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  color: #154a9a;
}

.inputTextArea {
  margin: auto;
  margin-top: 20px;
  width: 345px;
  height: 391px;
  background: #f4f6f7;
  border: 0.5px solid #e5e5e5;
  border-radius: 3px;

  textarea {
    background: #f4f6f7;
    font-size: 16px;
  }
}

.inputDiv {
  margin: auto;
  width: 345px;
  display: flex;
  padding-top: 20px;
  border-bottom: 1px solid #999999;

  .inputHeight {
    height: 30px;
    display: flex;
    align-items: center;
    width: 100%;
  }

}
</style>
