<template>
  <div class="releaseStory">
    <div class="nav">
      <van-nav-bar left-arrow title="意见反馈" :fixed="true" @click-left="onClickLeft" />
    </div>
    <div class="cont">
      <div class="item">
        <textarea v-model="content" name="" id="" cols="30" rows="10" placeholder="请输入您要反馈的问题，我们将尽快回复~"></textarea>
      </div>
    </div>
    <div class="imgs">
      <van-uploader :after-read="uploadFile" @delete="deleFile" v-model="filelist" :max-count="3" />
    </div>
    <div class="btns">
      <span @click="AddFeedBack()">提交</span>
    </div>
  </div>
</template>

<script>
import Axios from 'axios'
export default {
  data() {
    return {
      userInfo: '',
      content: '',
      filelist: [],
      imgsrc: [],
    }
  },
  created() {
    var that = this
    var userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
  },
  methods: {
    deleFile(file, detail) {
      this.imgsrc.splice(detail.index, 1)
    },
    uploadFile(file) {
      var that = this
      let params = new FormData()
      params.append('file', file.file)
      let config = {
        headers: {
          //添加请求头
          'Content-Type': 'multipart/form-data',
        },
      }
      Axios.post('http://121.40.30.78:5000/file/fileUpload', params, config).then((response) => {
        that.imgsrc.push(response.data)
      })
    },
    AddFeedBack() {
      var that = this
      this.$toast.loading({
        message: '请求中...',
      })
      this.http
        .AddFeedBack({
          content: this.content,
          userId: this.userInfo.centerNo,
          imgs: this.imgsrc.join(','),
        })
        .then(function (res) {
          that.$toast.clear()
          if (res.status == 1) {
            that.$toast.success('提交成功')
            setTimeout(function () {
              that.$router.push({ path: '/My' })
            }, 1000)
          }
        })
    },
    onClickLeft() {
      history.back()
    },
  },
}
</script>

<style lang="stylus" scoped>
.releaseStory{
	padding 20px
	padding-top 50px
	box-sizing border-box
	.btns{
		text-align center
		margin-top 20px
		span{
			display inline-block
			padding 10px 0
			width 80%
			text-align center
			border-radius 50px
			border 1px solid #ccc
			font-size 1.4rem
		}
		span:last-child{
			background-color #19D075
			color white
			border none
		}
	}
	.cont{
		textarea{
			width 100%
			font-size 1.2rem
			border none
		}
	}
	.imgs{
		padding 20px 0
		img:first-child::after{
			content '封面图片'
			position absolute
			bottom 0
			left 0
			right 0
			background-color rgba(0,0,0,.5)
			color white
			font-size 1.2rem
			padding 3px
			z-index 1000
		}
		img{
			position relative
			display inline-block
			vertical-align top
			width 50px
			height 50px
			border-radius 5px
			margin-right 10px
		}
		.selectImg{
			display inline-block
			vertical-align top
			width 50px
			height 50px
			text-align center
			line-height 50px
			border-radius 5px
			border 1px solid #eee
			font-size 2rem
			color #eee
		}
	}
}
</style>