<template>
  <div>
    <Tabs type="card" :animated="false">
      <TabPane :label="$t('module.feedback.wantFeedback')">
        <h2 class="feedback-tips">{{$t('module.feedback.welcomeSentence')}}</h2>
        <Form class="run-modal-style run-feedback-con" inline :label-width="80">
          <Form-item :label="$t('module.feedback.fbType')">
            <div class="feedback-type">
              <span v-for="(item,index) in category" :class="{'active':item.active}" :key="index" @click="chooseCategory(item.id)">{{item.text}}
                <Icon type="checkmark"></Icon>
              </span>
            </div>
          </Form-item>
          <Form-item :label="$t('module.feedback.questionDesc')">
            <div class="feedback-explain" style="width:60%;">
              <template style="width:50%">
                <Input v-model="form.feedbackContent" maxlength="1000" :rows="4" type="textarea" :placeholder="$t('module.feedback.enterContent')"></Input>
              </template>
            </div>
          </Form-item>
          <Form-item :label="$t('module.feedback.addEnclosure')">
            <img-upload ref="uploader" @FileUploaded="FileUploaded" :max="5" action="/sys/feedback/upload"></img-upload>
          </Form-item>
        </Form>
        <div class="run-modal-ftbButton feedback-btn">
          <Button type="primary" :loading="state == 1" @click="submit">{{$t('common.submit')}}</Button>
        </div>
      </TabPane>
      <!-- 历史反馈 -->
      <TabPane :label="$t('module.feedback.historyOfFb')">
        <div class="feedback-mes-con" v-for="(feedback,index) in feedbackData" :key="index">
          <div class="feedback-mes-item">
            <h2>{{feedback.feedbackContent}}</h2>
            <div class="feedback-img-item" :style="{'background-image':'url('+file.url+')'}" v-for="(file,i) in feedback.fileList" :key="i" @click="browse(file.url)"></div>
            <div class="feedback-mes_info">
              {{$t('module.feedback.type')}}:
              <span>{{categoryText(feedback.feedbackType)}}</span>
              {{$t('module.feedback.time')}}:{{feedback.createTime}}
            </div>
            <reply :id="feedback.fid" :list.sync="feedback.replyList" @news="loadFeedbackMy"></reply>
          </div>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>
<style lang="less">
@import "./feedback.less";
</style>
<script>
import Reply from './Reply.vue'
export default {
  components: {
    Reply
  },
  data() {
    return {
      loading: false,
      form: {
        feedbackType: 0,
        items: "",
        feedbackContent: ""
      },
      category_: [
        {
          id: 0,
          text: this.$t('module.feedback.useFeedBack'),
          active: true
        },
        {
          id: 1,
          text: this.$t('module.feedback.pageSuggestion'),
          active: false
        },
        {
          id: 2,
          text: this.$t('module.feedback.proInfoDesc'),
          active: false
        }
      ],
      uploader: null,
      fileList: [],
      category: [],
      uploadResolve: null,
      state: 0,
      feedbackData: []
    };
  },
  computed: {},
  created: function () {
    // this.initCategory();
    this.loadFeedbackMy();
  },
  beforeMount: function () { },
  mounted: function () {
    this.initCategory();
   },
  beforeDestroy: function () { },
  destroyed: function () { },
  methods: {
    loadFeedbackMy() {
      this.loading = true;
      $store.dispatch("GetFeedbackMy").then(data => {                                                                                                                             
        this.feedbackData = data;
        this.loading = false;
      });
    },
    initCategory() {
      this.category = JSON.parse(JSON.stringify(this.category_));
      this.$forceUpdate();
    },
    submit() {
      if (!this.form.feedbackContent.replace(/(^\s*)|(\s*$)/g, "")) {
        this.$Message.warning({
          content: this.$t('module.feedback.enterDesc'),
          duration: 2
        });
        return;
      }
      this.state = 1;
      let i = this.category.findIndex(item => {
        return item.active == true;
      });
      this.form.feedbackType = this.category[i].id;
      this.fileUploadStart().then(() => {
        this.form.items = this.fileList.join(",");
        return $store.dispatch("AddFeedback", this.form);
      }).then(res => {
        if (!res.success) {
          this.$Message.warning({
            content: res.msg,
            duration: 3
          });
          return;
        }
        this.$Message.success({
          content: this.$t('module.feedback.saveSuccessfully'),
          duration: 2
        });
        this.state = 0;
        this.reset();
        this.loadFeedbackMy();
      });
    },
    fileUploadStart() {
      if (this.$refs["uploader"].isEmpy()) {
        return new Promise((resolve) => {
          resolve();
        })
      }
      return this.$refs["uploader"].start();
    },
    FileUploaded(obj) {
      this.fileList.push(JSON.parse(obj.response).dataResult[0].uri);
    },
    chooseCategory(id) {
      for (let item of this.category) {
        item.active = item.id == id ? true : false;
      }
    },
    reset() {
      this.form = {
        feedbackType: 0,
        items: "",
        feedbackContent: ""
      };
      this.fileList = [];
      this.initCategory();
      this.$refs["uploader"].upLoadInit();
      this.$forceUpdate();
    },
    categoryText(id) {
      return this.category_[this.category_.findIndex((row) => {
        return row.id == id;
      })].text;
    },
    browse(source) {
      new this.$BrowseImage(source);
    }
  },
  watch: {},
  directives: {}
};
</script>
