<commit_before><template>
  <md-tab md-label="letters" :md-active="defaultActive" class="letters-container" md-tooltip="letters" ref="letters">
    <transition name="letter-mask-transition" enter-active-class="animated-p3 fadeIn" leave-active-class="animated-p3 fadeOut">
      <div class="letter-mask" v-if="activeIndex!=-1" @click="resetActiveIndex"></div>
    </transition>
    <div class="letter-item init-transition-p3" v-for="(item, index) in letters" :key="item" :class="activeIndex==index?'active':(activeIndex!=-1&&activeIndex!=index?'blur':'')" :data-index="index" @click="handleClick($event)" data-before="dragBefore" data-after="dragAfter" v-ls-init>
      <div class="letter-header"></div>
      <div class="letter-logo">
        <img :src="item.image" onerror="this.src='http://static.dei2.com/imgs/default.jpg'">
      </div>
      <div class="letter-title" :title="item.title">
        <span v-text="item.title"></span>
      </div>
      <div class="letter-content" v-text="item.content">

      </div>
      <div class="letter-time">
        <span data-format="YYYY年MM月DD日 H:m:s" :data-value="item.update_time*1000" v-time-format></span>
      </div>
    </div>

    <md-button md-theme="teal" class="md-fab md-primary md-fab-bottom-right zi99999" @click.native="showLetterForm">
      <md-icon>edit</md-icon>
      <md-tooltip md-direction="left">我也要发一个</md-tooltip>
    </md-button>

    <transition name="letter-form-transition"
      @before-enter="letterFormBeforeEnter"
      @enter="letterFormEnter"
      @after-enter="letterFormAfterEnter"
      @before-leave="letterFormBeforeLeave"
      @leave="letterFormLeave"
      @after-leave="letterFormAfterLeave"
                v-bind:css="false">
      <div class="letter-form-container" v-if="letterFormShown" @click.self="hideLetterForm">
        <div class="letter-form">
          <div class="letter-form-header">
            <p>新建Letter</p>
            <p class="close" @click="hideLetterForm">×</p>
          </div>
          <div class="letter-form-body">
            <form novalidate>
              <div class="letter-image">
                <span>图片</span>
                <div class="image">
                  <img class="preview-image" :src="letterFormInfo.image" onerror="this.src='http://static.dei2.com/imgs/favicon.ico'" alt="">
                  <com-upload
                          :style="uploadComStyle"
                          class="test"
                          name="file"
                          data-accept="jpg|jpeg|png|gif"
                          :data-max-size="2*1024*1024"
                          :data-action="requestUrl + '/index/uploadImage'"
                          :data-body="{'age': 10}"
                          :data-preview="true"
                          :data-progress="true"
                          @preview="uploadFilePreview"
                          @beforeSend="uploadFileBeforeSend"
                          @progress="uploadFileProgress"
                          @success="uploadFileSuccess"
                          @error="uploadFileError"
                  ></com-upload>
                </div>
              </div>
              <md-input-container md-clearable>
                <label>标题</label>
                <md-input v-model="letterFormInfo.title"></md-input>
              </md-input-container>
              <md-input-container>
                <label>描述</label>
                <md-textarea maxlength="70" style="max-height: 70px;" v-model="letterFormInfo.content"></md-textarea>
              </md-input-container>
            </form>
          </div>
          <div class="letter-form-footer">
            <md-button md-theme="teal" class="md-raised md-primary" @click.native="saveLetter">保存</md-button>
            <md-button md-theme="red" class="md-primary" @click.native="hideLetterForm">取消</md-button>
          </div>
        </div>
      </div>
    </transition>
  </md-tab>
</template>

<script>
  import * as types from '../../store/mutation-types'
  import Velocity from 'velocity-animate'

  export default {
    data () {
      return {
        letters: [],
        activeIndex: -1,
        letterFormShown: false,
        letterFormInfo: {
          title: '',
          content: '',
          image: ''
        },
        uploadFileInfo: {
          accept: 'jpg|png|jpeg|gif',
          maxSize: 2 * 1024 * 1024
        },
        requestUrl: this.$store.state.requestUrl,
        uploadComStyle: {
          color: '#ee3333',
          fontSize: '16px',
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          wordWrap: 'break-word'
        },
        refuseHideLetterForm: ''
      }
    },
    computed: {
      theme () {
        return this.$store.state.theme
      },
      defaultActive () {
        return (this.$route.hash.substring(1).toLowerCase() === 'letters')
      }
    },
    created () {
//      for (var i = 0; i < 1; i++) {
//        this.letters.push({
//          logo: 'http://static.dei2.com/imgs/favicon.ico',
//          title: '这是标题' + (i + 1),
//          content: (i + 1) + '习近平指出，中韩地理相近、文化相通，互补优势明显。建交25年来，中韩双方秉持建交联合公报精神，本着相互理解、相互尊重原则，推动中韩关系实现跨越式发展，给两国和两国人民带来巨大福祉，也为地区和平稳定繁荣作出了重要贡献。',
//          time: +new Date()
//        })
//      }
      const that = this
      $.ajax({
        async: false,
        url: that.$store.state.requestUrl + '/index/getLetters',
        dataType: 'jsonp',
        success: function (res) {
          if (Number(res.code) === 200) {
            that.letters = res.data
          }
        }
      })
    },
    methods: {
      saveLetter () {
        const that = this
        $.ajax({
          async: false,
          url: that.$store.state.requestUrl + '/index/saveLetter',
          data: {
            title: this.letterFormInfo.title,
            content: this.letterFormInfo.content,
            image: this.letterFormInfo.image
          },
          dataType: 'jsonp',
          success: function (res) {
            if (Number(res.code) === 200) {
              that.letters.push(res.data)
              that.letterFormInfo = {
                title: '',
                content: '',
                image: ''
              }
              that.hideLetterForm()
            }
          }
        })
      },
      uploadFilePreview (file) {

      },
      uploadFileBeforeSend (xhr) {
//        console.log('before send: ', xhr)
        this.refuseHideLetterForm = '正在上传中...'<commit_msg>no message<commit_after><template>
  <md-tab md-label="letters" :md-active="defaultActive" class="letters-container" md-tooltip="letters" ref="letters">
    <transition name="letter-mask-transition" enter-active-class="animated-p3 fadeIn" leave-active-class="animated-p3 fadeOut">
      <div class="letter-mask" v-if="activeIndex!=-1" @click="resetActiveIndex"></div>
    </transition>
    <div class="letter-item init-transition-p3" v-for="(item, index) in letters" :key="item" :class="activeIndex==index?'active':(activeIndex!=-1&&activeIndex!=index?'blur':'')" :data-index="index" @click="handleClick($event)" data-before="dragBefore" data-after="dragAfter" v-ls-init>
      <div class="letter-header"></div>
      <div class="letter-logo">
        <img :src="item.image" onerror="this.src='http://static.dei2.com/imgs/default.jpg'">
      </div>
      <div class="letter-title" :title="item.title">
        <span v-text="item.title"></span>
      </div>
      <div class="letter-content" v-text="item.content">

      </div>
      <div class="letter-time">
        <span data-format="YYYY年MM月DD日 H:m:s" :data-value="item.update_time*1000" v-time-format></span>
      </div>
    </div>

    <md-button md-theme="teal" class="md-fab md-primary md-fab-bottom-right zi99999" @click.native="showLetterForm">
      <md-icon>edit</md-icon>
      <md-tooltip md-direction="left">我也要发一个</md-tooltip>
    </md-button>

    <transition name="letter-form-transition"
      @before-enter="letterFormBeforeEnter"
      @enter="letterFormEnter"
      @after-enter="letterFormAfterEnter"
      @before-leave="letterFormBeforeLeave"
      @leave="letterFormLeave"
      @after-leave="letterFormAfterLeave"
                v-bind:css="false">
      <div class="letter-form-container" v-if="letterFormShown" @click.self="hideLetterForm">
        <div class="letter-form">
          <div class="letter-form-header">
            <p>新建Letter</p>
            <p class="close" @click="hideLetterForm">×</p>
          </div>
          <div class="letter-form-body">
            <form novalidate>
              <div class="letter-image">
                <span>图片</span>
                <div class="image">
                  <img class="preview-image" :src="letterFormInfo.image" onerror="this.src='http://static.dei2.com/imgs/favicon.ico'" alt="">
                  <com-upload
                          :style="uploadComStyle"
                          class="test"
                          name="file"
                          data-accept="jpg|jpeg|png|gif"
                          :data-max-size="2*1024*1024"
                          :data-action="requestUrl + '/index/uploadImage'"
                          :data-body="{'age': 10}"
                          :data-preview="true"
                          :data-progress="true"
                          @preview="uploadFilePreview"
                          @beforeSend="uploadFileBeforeSend"
                          @progress="uploadFileProgress"
                          @success="uploadFileSuccess"
                          @error="uploadFileError"
                  ></com-upload>
                </div>
              </div>
              <md-input-container md-clearable>
                <label>标题</label>
                <md-input v-model="letterFormInfo.title"></md-input>
              </md-input-container>
              <md-input-container>
                <label>描述</label>
                <md-textarea maxlength="70" style="max-height: 70px;" v-model="letterFormInfo.content"></md-textarea>
              </md-input-container>
            </form>
          </div>
          <div class="letter-form-footer">
            <md-button md-theme="teal" class="md-raised md-primary" @click.native="saveLetter">保存</md-button>
            <md-button md-theme="red" class="md-primary" @click.native="hideLetterForm">取消</md-button>
          </div>
        </div>
      </div>
    </transition>
  </md-tab>
</template>

<script>
  import * as types from '../../store/mutation-types'
  import Velocity from 'velocity-animate'

  export default {
    data () {
      return {
        letters: [],
        activeIndex: -1,
        letterFormShown: false,
        letterFormInfo: {
          title: '',
          content: '',
          image: ''
        },
        uploadFileInfo: {
          accept: 'jpg|png|jpeg|gif',
          maxSize: 2 * 1024 * 1024
        },
        requestUrl: this.$store.state.requestUrl,
        uploadComStyle: {
          color: '#ee3333',
          fontSize: '16px',
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          wordWrap: 'break-word'
        },
        refuseHideLetterForm: ''
      }
    },
    computed: {
      theme () {
        return this.$store.state.theme
      },
      defaultActive () {
        return (this.$route.hash.substring(1).toLowerCase() === 'letters')
      }
    },
    created () {
//      for (var i = 0; i < 1; i++) {
//        this.letters.push({
//          logo: 'http://static.dei2.com/imgs/favicon.ico',
//          title: '这是标题' + (i + 1),
//          content: (i + 1) + '习近平指出，中韩地理相近、文化相通，互补优势明显。建交25年来，中韩双方秉持建交联合公报精神，本着相互理解、相互尊重原则，推动中韩关系实现跨越式发展，给两国和两国人民带来巨大福祉，也为地区和平稳定繁荣作出了重要贡献。',
//          time: +new Date()
//        })
//      }
      const that = this
      $.ajax({
        async: false,
        url: that.$store.state.requestUrl + '/index/getLetters',
        dataType: 'jsonp',
        success: function (res) {
          if (Number(res.code) === 200) {
            that.letters = res.data
          }
        }
      })
    },
    methods: {
      saveLetter () {
        const that = this
//        $.ajax({
//          async: false,
//          url: that.$store.state.requestUrl + '/index/saveLetter',
//          data: {
//            title: this.letterFormInfo.title,
//            content: this.letterFormInfo.content,
//            image: this.letterFormInfo.image
//          },
//          dataType: 'post',
//          success: function (res) {
//            if (Number(res.code) === 200) {
//              that.letters.push(res.data)
//              that.letterFormInfo = {
//                title: '',
//                content: '',
//                image: ''
//              }
//              that.hideLetterForm()
//            }
//          }
//        })
        $.post({
          url: that.$store.state.requestUrl + '/index/saveLetter',
          data: {
            title: this.letterFormInfo.title,
            content: this.letterFormInfo.content,
            image: this.letterFormInfo.image
          },
          success: function (res) {
            if (Number(res.code) === 200) {
              that.letters.push(res.data)
              that.letterFormInfo = {
                title: '',
                content: '',
                image: ''
              }
              that.hideLetterForm()
            }
          }
        })
      },
      uploadFilePreview (file) {

      },
      uploadFileBeforeSend (xhr) {
//        console.log('before send: ', xhr)
        this.refuseHideLetterForm = '正在上传中...'
{'fraction_non_alphanumeric': 0.15790634418878188, 'fraction_numerical': 0.009189149452326692, 'mean_word_length': 1.7262525050100201, 'pattern_counts': {'":': 0, '<': 155, '<?xml version=': 0, '>': 153, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1995098', 'n_tokens_mistral': 4347, 'n_tokens_neox': 4217, 'n_words': 613}