<template>
  <div class="feedback-mes_answer">
    <div class="feedback_mes" :class="{'showBtn-item':isLight}">{{list.length}} {{$t('module.feedback.severalReply')}}
      <Icon :type="isLight?'plus-round':'minus-round'" @click.native="toggleLight"></Icon>
    </div>
    <div class="feedback_mesShow" :class="{'feedback-mes_answer-light':isLight}">
      <div class="answer-item" v-for="(item,index) in list" :key="index">
        <div class="answer_info">
          <span>{{item.userName}}</span>
          <span>{{item.createTime}}</span>
        </div>
        <p>{{item.feedbackContent}}</p>
      </div>

      <div class="feedback-explain">
        <Input style="width:80%" maxlength="1000" v-model="content" :rows="4" type="textarea" :placeholder="$t('module.feedback.enterFbContent')"></Input>
      </div>
      <Button class="to-mes" type="ghost" size="small" :loading="state == 1" icon="md-create" @click="submit">{{$t('module.feedback.toSay')}}</Button>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    id: {
      type: String,
      default() {
        return ""; 21
      }
    },
    list: {
      type: Array,
      default() {
        return [];
      }
    },
    displayLight: {
      type: Boolean,
      default() {
        return true;
      }
    },
    initData: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },
  data() {
    return {
      content: "",
      state: 0,
      isLight: true
    };
  },
  computed: {},
  created: function () {
    if (this.initData) {
      this.GetFeedbackDetail();
    }
    this.isLight = this.displayLight;
  },
  beforeMount: function () { },
  mounted: function () { },
  beforeDestroy: function () { },
  destroyed: function () { },
  methods: {
    toggleLight(e) {
      let from = 0;
      let to = 0;
      let el = e.target.parentNode.parentNode.children[1];
      if (this.isLight) {
        for (let h of el.children) {
          if (h.nodeName != "I") {
            to += h.offsetHeight + 8;
            console.log(h.offsetHeight, h);
          }
        }
      } else {
        from = el.offsetHeight;
      }
      this.toggleAni(from, to, el);
      this.isLight = !this.isLight;
    },
    submit() {
      if (!this.content.replace(/(^\s*)|(\s*$)/g, "")) {
        this.$Message.warning({
          content: this.$t('module.feedback.enterReplyContent'),
          duration: 2
        });
        return;
      }
      this.state = 1;
      $store.dispatch("FeedbackReply", {
        feedbackContent: this.content,
        replyId: this.id
      }).then(res => {
        this.state = 0;
        if (!res.success) {
          this.$Message.warning({
            content: res.msg,
            duration: 3
          });
          return;
        }
        this.content = "";
        this.GetFeedbackDetail()
      });
    },
    GetFeedbackDetail() {
      $store.dispatch('GetFeedbackDetail', { fid: this.id }).then((res) => {
        this.list = res.replyList;
        this.$emit('update:list', this.list);
      })
    },
    toggleAni(form, to, e) {
      Math.animation(
        form,
        to,
        value => {
          this.$nextTick(() => {
            e.style.height = `${value}px`;
            if (to == value && to != 0) {
              e.style.height = `auto`;
            }
          });
        },
        "Cubic.easeInOut",
        380
      );
    }
  },
  watch: {},
  directives: {}
};
</script>
