<template>
  <sail-page type="feedback" title="功能异常与产品建议" isHead>
    <div slot="content">
        <div class="feedback-apply-wrapper">
          <van-cell-group class="feedback-part">
              <van-field
                v-model="funInfo.feedbackContent"
                type="textarea"
                placeholder="此处填写您要反馈的功能异常与产品建议"
                rows="8"
                autosize
                required
              />
            </van-cell-group>
          <div class="feedback-form">
            <div class="feedback-min-part">
              <!-- <cube-upload
                :action="action"
                v-model="files"
                :simultaneous-uploads="1"
                @file-success="successHandler"
                @file-removed="removeHandler"
                @files-added="filesAdded"
                @file-error="errHandler"
                /> -->
                <cube-upload
                :action="action"
                v-model="files"
                :simultaneous-uploads="1"
                @file-success="successHandler"
                @file-removed="removeHandler"
                @files-added="filesAdded"
                @file-error="errHandler"
                >
                <div class="cube-upload-def clear-fix">
                  <cube-upload-file v-for="(file, i) in files" :file="file" :key="i"/>
                  <cube-upload-btn :multiple="false"/>
                </div>
              </cube-upload>
            </div>
            <div class="weui-cells feedback-part">
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">联系人</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" v-model="funInfo.contactName" type="text" placeholder="请输入姓名(选填)">
                    </div>
                </div>
                <div class="weui-cell">
                    <div class="weui-cell__hd"><label class="weui-label">联系方式</label></div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" v-model="funInfo.contactTele" type="number" pattern="[0-9]*" placeholder="请输入联系方式(选填)">
                    </div>
                </div>
            </div>
            <van-button :loading="loading" @click="submit" class="submit-btn gradient-green">确定</van-button>
          </div>
        </div>
      </div>
  </sail-page>
</template>

<script>
import { mapState } from "vuex";
import { Toast } from "vant";
import api from "@/api/index.js";
import sailPage from "@/components/sail-page.vue";
export default {
  components: {
    sailPage
  },
  computed: {
    ...mapState({
      funInfo: state => state.feedbackModule.funInfo,
    })
  },
  data: function(){
    return {
      message: "",
      loading: false,
      action: {
        target: api.getURL("uploader/upload"),
        data: {
          inputId: "file"
        }
      },
      files: []
    }; 
  },
  initData({store}) {
    store.commit("feedbackModule/CLEAR_FUN_INFO");
  },
  methods: {
    submit() {
      this.loading = true;
      this.$store.dispatch("feedbackModule/sendFunSuggest").then(res => {
        this.loading = false;
        if(res) {
          res.Toast.success({
            duration: 2000,
            message: "反馈成功"
          });
          this.$router.back();
        }
      });
      //
    },
    successHandler(file) {
      
      this.$store.commit("feedbackModule/FUN_ADD_IMG_INFO", file);
      ///this.$emit('updateFiles', file, this.imgType, true)
    },
    removeHandler(file) {
      
      this.$store.commit("feedbackModule/FUN_REMOVE_IMG_INFO", file);
      //this.$emit('updateFiles', file, this.imgType, false)
    },
    errHandler(file) {
      // const msg = file.response.message
      this.$createToast({
        type: "warn",
        txt: "上传失败",
        time: 2000
      }).show();
    },
    filesAdded(files) {
      let hasIgnore = false;
      const maxSize = 8 * 1024 * 1024; // 1M
      for (let k in files) {
        const file = files[k];
        if (file.size > maxSize) {
          file.ignore = true;
          hasIgnore = true;
        }
      }
      hasIgnore && Toast.fail("选择的图片过大，无法上传");
    }
  }
};
</script>
<style lang="less">
   .feedback-apply-wrapper .van-hairline--top-bottom::after {
      border-width: 1px 0 0 0;
   }
   .spec-placeholder .van-field__control::-webkit-input-placeholder {
      text-align: right;
      color: #808080;
   }
   .feedback-apply-wrapper {
      .cube-upload {
          overflow: hidden;
      }
      .clear-fix:after {
         clear: unset;
      }
   }
   .feedback-apply-wrapper .van-cell--required:before{
    color:red;
   }
</style>
<style lang="less" scoped>
    @nice-desc-gray: #ADADAD;
    .feedback-apply-wrapper {
      .feedback-min-part {
        margin-top: 1px;
        background: white;
        padding-top: 19.5px;
        padding-left: 21px;
      }
      .feedback-part {
        margin-top: 13px;
      }
      .feedback-desc {
        font-size: 11px;
        margin-top: 11.5px;
        margin-bottom: 11.5px;
        color: @nice-desc-gray;
      }
    }
</style>