<template>
    <div>
      <el-dialog   
        title="意见反馈"
        :visible.sync="feedbackVisible"
        width="700px"
        append-to-body
        :close-on-click-modal="false"
        :before-close="feedbackClose">
          <div>
            <div>
              <div class="head">尊敬的用户:</div>
              <p class="content">您在知识产权风控与组织记忆系统中遇到产品使用的问题，请在这里告诉我们，欢迎提出意见和建议，我们将参考您的建议来改善我们的服务。</p>
              <h3 class="foot"> 感谢您的关注和支持! </h3>
            </div>
            <div>
              <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="反馈类型" prop="feedBackType">
                  <el-select v-model="form.feedBackType" style="width: 50%;" placeholder="请选择反馈类型">
                    <el-option
                      v-for="item in options"
                      :key="item.feedBackType"
                      :label="item.label"
                      :value="item.feedBackType">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="电子邮件" prop="email">
                <el-input v-model="form.email" style="width: 50%;" placeholder="请输入您的Email"></el-input>
                </el-form-item>
                <el-form-item label="详细描述" prop="feedBackContent">
                  <el-input type="textarea" v-model="form.feedBackContent" placeholder="请输入详细描述"></el-input>
                </el-form-item>
              </el-form>
            </div>
          
          </div>
  
        <span slot="footer" class="dialog-footer">
          <el-button @click="feedbackClose">取 消</el-button>
          <el-button type="primary" @click="finish">确 定</el-button>
        </span>
      </el-dialog>
    </div>
</template>
  
<script>
  export default {
    data() {
      const isEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9_\.\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (!this.form.email) {
          return callback(new Error("邮箱不能为空"));
        }
        setTimeout(() => {
          if (mailReg.test(value)) {
            callback();
          } else {
            callback(new Error("请输入正确的邮箱格式"));
          }
        }, 100);
      };
      return {
        form: {
          feedBackType:'1'
        },
        options: [{
          feedBackType: '1',
            id:1,
            label: 'BUG反馈'
          }, {
            feedBackType: '2',
            id:2,
            label: '数据纠错'
          }, {
            feedBackType: '3',
            id:3,
            label: '意见建议'
          }],
        feedbackVisible:false,
        rules: {
          feedBackType:[ { required: true, message: '请选择反馈类型', trigger: 'change' },],
          email:[{ required: true, validator: isEmail, trigger: 'blur' },],
          feedBackContent:[{ required: true, message: '请输入详细描述', trigger: 'blur' },],
        }
      }
    },
    computed: {},
    mounted() { },
    methods: {
      open() {
        this.feedbackVisible=true
      },
      finish() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            // console.log(this.form);
             this.$api.addUserFeedBack(this.form).then(res => {
               if (res.code == 200) {
                 this.feedbackClose()
                  this.$message.success('您的反馈已收到，让我们携手共行，共创美好未来')
                }
             })
          }
        })
      },
      feedbackClose() {
        this.form.email=''
        this.form.feedBackContent = ''
        this.$refs.form.resetFields()
        this.feedbackVisible=false
      },
    },
  }
  </script>

<style lang="scss" scoped>
  .head{
    font-family: var(--fm);
    font-weight: bold;
    color: #5e6064;
    font-size: 20px;
  }
  .content{
    font-family: var(--fm);
    color: #5e6064;
    font-size: 18px;
  }
  .foot{
    font-family: var(--fm);
    font-weight: bold;
    color: var(--color1);
    font-size: 20px;
  }
</style>