<template>
  <div class="releaseStory">
    <div class="btns">
      <span @click="AddStory(2)">存草稿</span>
      <span @click="AddStory(3)">发布</span>
    </div>
    <div class="cont">
      <div class="item">
        <input v-model="title" type="text" placeholder="点击输入文章标题" />
      </div>
      <div class="item">
        <textarea v-model="content" name="" id="" cols="30" rows="10" placeholder="记录下你的研学故事,越详实越容易被推荐~"></textarea>
        <p>写120字有机会被评为<span>优质故事</span></p>
      </div>
    </div>
    <div class="imgs">
      <img :src="n.imgUrl" alt="" v-for="(n, i) in imgsrc" :key="i" />
      <div class="selectImg">
        <imgCut @callback="callback" :width="200" :height="200">
          <van-icon name="plus" />
        </imgCut>
      </div>
    </div>
    <div class="base">
      <van-icon name="send-gift" />
      <span>{{ courseInfo.course_name }}</span>
      <van-icon class="arrow" name="arrow" />
    </div>
  </div>
</template>

<script>
import { imgCut } from 'vue-imgcut'
export default {
  data() {
    return {
      userInfo: '',
      courseInfo: '',
      title: '',
      content: '',
      imgsrc: [],
    }
  },
  components: {
    imgCut,
  },
  created() {
    var that = this
    var userInfo = localStorage.getItem('userInfo')
    if (userInfo) {
      this.userInfo = JSON.parse(userInfo)
    }
    var courseInfo = localStorage.getItem('YXNowCourse')
    if (courseInfo) {
      this.courseInfo = JSON.parse(courseInfo)
    }
    if (this.courseInfo.storyId > 0) {
      this.$dialog
        .confirm({
          title: '提示',
          message: '当前存在一条草稿记录，是否使用？',
        })
        .then(() => {
          that.http
            .GetStory({
              id: this.courseInfo.storyId,
            })
            .then(function(res) {
              that.title = res.data.title
              that.content = res.data.content
              if (res.data.imgList.length > 0) {
                res.data.imgList.forEach(function(n, i) {
                  that.imgsrc.push({
                    imgUrl: n.imgUrl,
                  })
                })
              }
            })
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  methods: {
    AddStory(type) {
      var that = this
      if (this.imgsrc.length == 0) {
        this.$toast.fail('请上传图片')
        return false
      }
      this.$toast.loading({
        message: '请求中...',
      })
      this.http
        .AddStory({
          title: this.title,
          content: this.content,
          courseId: this.courseInfo.id,
          userId: this.userInfo.centerNo,
          imgList: this.imgsrc,
          state: type,
        })
        .then(function(res) {
          that.$toast.clear()
          if (res.status == 1) {
            if (type == 3) {
              that.$toast.success('发送成功')
              setTimeout(function() {
                that.$router.push({ path: '/MyStory' })
              }, 1000)
            } else {
              that.$toast.success('保存成功')
            }
          }
        })
    },
    callback(img) {
      this.imgsrc.push({
        imgUrl: img,
      })
    },
  },
}
</script>

<style lang="stylus" scoped>
.releaseStory{
	padding 40px
	box-sizing border-box
	.btns{
		text-align right
		span{
			display inline-block
			padding 6px 10px
			width 100px
			text-align center
			margin-left 10px
			border-radius 100px
			border 2px solid #ccc
			font-size 1.4rem
		}
		span:last-child{
			background-color #19D075
			color white
			border none
		}
	}
	.cont{
		input{
			border none
			width 100%
			height 76px
			font-size 1.4rem
			line-height 76px
		}
		textarea{
			width 100%
			font-size 1.2rem
			border none
		}
		p{
			text-align right
			font-size 1.2rem
			color #909090
			span{
				color #09CE6C
			}
		}
	}
	.imgs{
		padding 40px 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 6px
			z-index 1000
		}
		img{
			position relative
			display inline-block
			vertical-align top
			width 100px
			height 100px
			border-radius 10px
			margin-right 20px
		}
		.selectImg{
			display inline-block
			vertical-align top
			width 100px
			height 100px
			text-align center
			line-height 100px
			border-radius 10px
			border 2px solid #eee
			font-size 2rem
			color #eee
		}
	}
	.base{
		padding 40px 40px 0
		box-sizing border-box
		position relative
		color #09CE6D
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		font-size 1.2rem
		i{
			position absolute
			left 0
			top 40px
			font-size 1.6rem
		}
		.arrow{
			left initial
			right 0
			top 40px
		}
	}
}
</style>