<template>
  <div :class="isMobile?'m-from-container':'from-container flex-vh'">
    <div :class="isMobile?'m-from-view':''">

      <h2 :class="isMobile?'m-from-title':'heading_2'">{{$t('heading.HText_2')}}</h2>

      <el-form :model="fromData" :rules="rules" ref="ruleForm" class="from-block">
        <el-form-item prop="name">
          <el-input v-model="fromData.name" class="input" :placeholder="$t('placeholder.PText_1')"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input v-model="fromData.phone" class="input" :placeholder="$t('placeholder.PText_2')"></el-input>
        </el-form-item>
        <el-form-item prop="content">
          <el-input type="textarea" v-model="fromData.content" :rows="10" resize="none" maxlength="225" show-word-limit
            :placeholder="$t('placeholder.PText_3')"></el-input>
        </el-form-item>
      </el-form>

      <div class="bottom-section flex-hc" v-if="!isMobile">
        <div class="commit mouse-poi disabled-copy" @click="clickSubmit">{{$t('btn.btnText_2')}}</div>
      </div>

      <div v-else class="button-m" @click="clickSubmit">{{$t('btn.btnText_2')}}</div>

    </div>
  </div>
</template>

<script>
import { hasMobile } from '@/utils/mobile.js'
import mixinsHomeMsg from '@/mixins/forestage/homeMsg.js'
import { checkStr } from '@/utils/validate.js'
export default {
  name: 'FromMsg',
  mixins: [mixinsHomeMsg],
  data () {
    const phoneValidate = (rule, value, callback) => {
      const permit = checkStr(value, 'phone')
      if (!permit) {
        return callback(new Error(this.$t('placeholder.PText_4')))
      } else {
        return callback()
      }
    }
    return {
      isMobile: false,
      isRequest: false,
      rules: {
        name: [{
          required: true,
          message: this.$t('placeholder.PText_1'),
          trigger: 'change'
        }],
        phone: [{
          required: true,
          validator: phoneValidate,
          trigger: 'change'
        }],
        content: [{
          required: true,
          message: this.$t('placeholder.PText_3'),
          trigger: 'change'
        }]
      }
    }
  },
  created () {
    this.isMobile = hasMobile()

    this.$eventBus.$on('langChange', (langType, routePath) => {
      if (routePath === '/Home') {
        this.rules.name[0].message = this.$t('placeholder.PText_1')
        this.rules.content[0].message = this.$t('placeholder.PText_3')
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.resetFields()
        }
      }
    })
  },
  methods: {
    clickSubmit () {
      if (this.isRequest) return
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.isRequest = true
          const result = await this.submitMessage()
          if (result.code === 1) {
            this.$refs.ruleForm.resetFields()
          }
          this.isRequest = false
        }
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.m-from-container{
  width: 1756.16px;
  box-sizing: border-box;
  margin: 153.6px 81.92px;

  .button-m{
    width: 972.8px;
    height: 225.28px;
    background-color: #1B74E5;
    font-size: 81.92px;
    line-height: 225.28px;
    text-align: center;
    color: #fff;
    border-radius: 30.72px;
    margin: 153.6px auto 0 auto;
  }

  :deep(.el-input__count){
    font-size: 61.44px;
    bottom:0.43604rem;
    right: 0.43604rem;
  }
  :deep(.el-input__inner) {
    height: 276.48px;
    font-size: 81.92px;
    border-radius: 30.72px;
    padding: 0 61.44px;
  }
  :deep(.el-textarea__inner) {
    border-radius: 30.72px;
    font-size: 81.92px;
    padding: 61.44px 61.44px;
  }
  :deep(.el-form-item__error){
    font-size: 81.92px;
  }
  :deep(.el-form-item){
    margin-bottom: 100px;
  }

  .m-from-view{
    width: 100%;
    min-height: 1237.44px;
    background-color: #fff;
    border-radius: 30.72px;
    padding:153.6px 0 81.92px 0;
    .m-from-title{
      color: #333;
      font-size: 102.4px;
      margin: 0 0 102.4px 81.92px;
    }
    .from-block{
      margin: 102.4px 81.92px;
      .input{
        width: 100%;
        height: 276.48px;
      }
    }
  }
}

.from-container {
  padding: 120px 0;

  :deep(.el-input__inner) {
    height: 64px;
  }

  :deep(.el-textarea__inner) {
    font-size: 16px;
  }

  .from-block {
    margin-top: 60px;
    width: 800px;
  }

  .input {
    font-size: 16px;
  }

  .bottom-section {
    margin-top: 60px;

    .commit {
      height: 64px;
      padding: 0 38px;
      font-size: 20px;
      color: #ffffff;
      background: #1B74E5;
      border: 1px solid #1B74E5;
      border-radius: 6px;
      line-height: 64px;

      &:active {
        background: #115cbd;
      }
    }
  }
}

</style>
