<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <!-- 用户反馈 -->
    <BackBar :title="$t('home.l27')"></BackBar>
    <div class="container">
      <div class="tip">
        <!-- 您的每条建议我们都会认真倾听 -->
        {{ $t('feedback.l') }}
      </div>
      <el-form autocomplete="off" :rules="rules" :model="form" ref="form">
        <el-form-item>
          <div class="label">
            <!-- 我们的产品让您? -->
            {{ $t('feedback.l1') }}
          </div>
          <div class="box flex">
            <div class="item flex" :class="{ active: form.evaluate == '爽' }" @click="form.evaluate = '爽'">
              <img class="icon" src="/img/feedback/icon.png" alt="极度证券">
              <!-- 爽 -->
              {{ $t('feedback.l2') }}
            </div>
            <div class="item flex" :class="{ active: form.evaluate == '不爽' }" @click="form.evaluate = '不爽'">
              <img class="icon" src="/img/feedback/icon1.png" alt="极度证券">
              <!-- 不爽 -->
              {{ $t('feedback.l3') }}
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="label">
            <!-- 建议的方向 -->
            {{ $t('feedback.l4') }}
          </div>
          <van-row type="flex" gutter="5">
            <van-col span="8">
              <div class="item" :class="{ active: form.proposal_path == '安全建议' }" @click="form.proposal_path = '安全建议'">
                <!-- 安全建议 -->
                {{ $t('feedback.l5') }}
              </div>
            </van-col>
            <van-col span="8">
              <div class="item" :class="{ active: form.proposal_path == '功能建议' }" @click="form.proposal_path = '功能建议'">
                <!-- 功能建议 -->
                {{ $t('feedback.l6') }}
              </div>
            </van-col>
            <van-col span="8">
              <div class="item" :class="{ active: form.proposal_path == '设计建议' }" @click="form.proposal_path = '设计建议'">
                <!-- 设计建议 -->
                {{ $t('feedback.l7') }}
              </div>
            </van-col>
            <van-col span="8">
              <div class="item" :class="{ active: form.proposal_path == '运营建议' }" @click="form.proposal_path = '运营建议'">
                <!-- 运营建议 -->
                {{ $t('feedback.l15') }}
              </div>
            </van-col>
            <van-col span="8">
              <div class="item" :class="{ active: form.proposal_path == '其他建议' }" @click="form.proposal_path = '其他建议'">
                <!-- 其他建议 -->
                {{ $t('feedback.l9') }}
              </div>
            </van-col>
          </van-row>
        </el-form-item>
        <el-form-item prop="proposal_content">
          <div class="label">
            <!-- 建议详情 -->
            {{ $t('feedback.l10') }}
          </div>
          <el-input :placeholder="$t('common.l48')" type="textarea" :rows="4" v-model="form.proposal_content" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <van-uploader :after-read="afterRead" result-type="file">
            <van-image width="88px" height="88px" fit="contain" :src="form.file_01">
              <template v-slot:error>
                <van-icon name="plus" />
              </template>
            </van-image>
          </van-uploader>
        </el-form-item>
        <el-form-item>
          <div class="label">
            <!-- 联系方式(可选填) -->
            {{ $t('feedback.l11') }}
          </div>
          <el-input :placeholder="$t('common.l48')" v-model="form.contact" clearable></el-input>
        </el-form-item>
      </el-form>
      <div class="submit-btn" @click="submitClick">
        <!-- 确认 -->
        {{ $t('common.l3') }}
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
import BackBar from '@/components/backBar'
import { insertFeedback } from '@/api/user'
export default {
  components: {
    BackBar,
  },
  data () {
    var validatePass = (rule, value, callback) => {
      if (value.trim() === '') {
        callback(new Error(this.$t('login.empty')))
      }
      callback()
    }
    return {
      form: {
        evaluate: '',
        proposal_path: '',
        file_01: '',
        contact: '',
        proposal_content: '',
      },
      rules: {
        proposal_content: [{ validator: validatePass, trigger: 'blur' }],
      },
    }
  },
  methods: {
    afterRead(file) {
      if (['image/jpg', 'image/jpeg', 'image/png'].indexOf(file.file.type) == -1) {
        // 请上传 jpg/jpeg/png 格式图片
        this.$toast(this.$t('ajax.l5'));
        return false;
      }
      this.upload(file.file)
    },
    upload(file) {
      const formData = new FormData();
      formData.append("file", file);
      axios.post(this.$uploadUrl, formData, {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        })
        .then((res) => {
          var file = res.data
          if (file.msg != 'ok') {
            this.$notify({
              message: file.msg || this.$t('fund.l83'),
              type: 'danger'
            });
            return
          }
          this.form.file_01 = file.data
        })
        .catch((err) => {
          this.$notify({
            message: this.$t('fund.l83'),
            type: 'danger'
          });
        });
    },
    submitClick() {
      this.$refs['form'].validate((valid) => {
        if (!valid) return false
        this.insertFeedback()
      })
    },
    insertFeedback() {
      this.fullscreenLoading = true
      insertFeedback(this.form)
        .then((res) => {
          this.$router.replace('/feedback-success')
        }).catch(() => {
        }).finally(() => {
          this.fullscreenLoading = false;
        })
    },
  }
}
</script>
<style lang="less" scoped>
.container {
  padding: 3px 18px 25px;
}
.tip {
  color: #C0C0C0;
  margin-bottom: 19px;
}
.label {
  font-size: 15px;
  line-height: 18px;
  color: #828282;
  margin-bottom: 14px;
}
.box {
  column-gap: 15px;
  .item {
    min-width: 110px;
    padding: 0 4px;
    height: 41px;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid #E2E2E2;
    cursor: pointer;
    color: #1B1B1B;
    &.active {
      border-color: #000;
    }
  }
  .icon {
    color: #1B1B1B;
    width: 21px;
    margin-right: 11px;
  }
}
.van-row {
  row-gap: 10px;
  .item {
    border-radius: 6px;
    border: 1px solid #E2E2E2;
    color: #1B1B1B;
    text-align: center;
    line-height: 18px;
    cursor: pointer;
    padding: 10px 0;
    &.active {
      border-color: #000;
      background-color: #000;
      color: #fff;
    }
  }
}
.van-uploader {
  display: block;
}
.submit-btn {
  line-height: 44px;
  text-align: center;
  border-radius: 6px;
  background: #000;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
.van-image {
  border-radius: 6px;
  border: 1px solid #E2E2E2;
  overflow: hidden;
}
.el-form-item {
  margin-bottom: 23px;
}
::v-deep {
  .el-upload {
    display: block;
    height: 88px;
  }
  .van-image__error {
    background-color: #fff;
  }
  .el-textarea__inner {
    border-color: #E2E2E2;
    border-radius: 6px;
  }
  .el-input__inner {
    border-color: #E2E2E2;
    border-radius: 6px;
    height: 44px;
    line-height: 42px;
  }
  .van-uploader__input-wrapper {
    height: 88px;
  }
}
</style>