<template>
    <div class="release">
      <van-tabs v-model="active" type="card" animated>
        <van-tab title="视频">
          <div class="release-video">
            <van-field v-model="title" label="标题" placeholder="写下你的标题吧！" />
            <div class="release-video__upload">
              <van-uploader
                v-model="videoList"
                accept=".mp4"
                :max-count="1"
              />
            </div>
          </div>
        </van-tab>
        <van-tab title="图文">
          <div class="release-img">
            <h4>添加图片 <span class="text1-1 fs-12">(可选)</span></h4>
            <div class="release-img">
              <van-uploader v-model="imgList" multiple />
            </div>
          </div>
          <van-field v-model="title" label="标题" placeholder="写下你的标题吧！" />
          <div class="release-text">
            <h4>添加内容</h4>
            <van-field
              v-model="message"
              rows="4"
              autosize
              type="textarea"
              maxlength="500"
              placeholder="请填入文字内容~"
              show-word-limit
            />
          </div>
        </van-tab>
      </van-tabs>
      <van-cell :title="categoryTitle" is-link @click="showPicker = true" />
      <van-popup v-model="showPicker" position="bottom">
        <van-tree-select
          :items="columns"
          :active-id.sync="activeId"
          :main-active-index.sync="activeIndex"
          @click-nav="onNavTap"
          @click-item="onConfirm"
        />
      </van-popup>
      <div :class="[active === 0 ? 'release-btn__fixed' : 'release-btn__default']" @click="active ? _uploadImg() : _uploadVideo()">
        <van-button type="default" block>确认发布</van-button>
      </div>
    </div>
</template>

<script>
export default {
  name: 'release',
  data () {
    return {
      imgList: [],
      videoList: [],
      title: '',
      message: '',
      categoryTitle: '请选择分类',
      showPicker: false,
      columns: [],
      videoData: null,
      categoryId: '',
      activeId: 1,
      activeIndex: 0,
      leftNavTitle: '',
      categoryList: [],
      active: 0,
      imgData: []
    }
  },
  created () {
    this._getCategory()
  },
  methods: {
    onConfirm (item) {
      this.categoryId = item.id
      this.categoryTitle = `${this.leftNavTitle ? this.leftNavTitle + '-' : ''}${item.text}`
      this.showPicker = false
    },
    onNavTap (index) {
      this.leftNavTitle = this.categoryList[index].children.length ? this.categoryList[index].name : ''
    },
    _getCategory () {
      this.$http.common.category().then(({ code, data }) => {
        if (code === 200) {
          this.leftNavTitle = data[0].name
          this.categoryList = data
          this._handleCategory(data)
        }
      })
    },
    _handleCategory (data) {
      data.map((item, index) => {
        this.columns[index] = {
          text: item.name,
          children: []
        }
        if (item.children.length) {
          item.children.map(item => {
            this.columns[index].children.push({
              text: item.name,
              id: item.id
            })
          })
        } else {
          this.columns[index].children.push({
            text: item.name,
            id: item.id
          })
        }
      })
    },
    _uploadVideo () {
      if (!this.title) {
        return this.$toast.fail('请填写标题')
      }
      if (this.videoList.length === 0) {
        return this.$toast.fail('请上传视频')
      }
      if (!this.categoryId) {
        return this.$toast.fail('请选择分类')
      }
      this.$toast.loading({
        message: '视频上传中...',
        forbidClick: true,
        duration: 0
      })
      let _formData = new FormData()
      _formData.append('file', this.videoList[0].file)
      this.$http.common.uploadVideo(_formData).then(({ code, data }) => {
        if (code === 200) {
          this.videoData = data
          this._submitVideo()
        }
      })
    },
    _submitVideo () {
      this.$http.video.releaseVideo({
        category_id: this.categoryId,
        title: this.title,
        thumb: this.videoData.img_url,
        video_url: this.videoData.url
      }).then(({ code, msg }) => {
        if (code === 200) {
          this.$toast.clear()
          this.$toast.success(msg)
          this.title = ''
          this.videoList = []
        }
      })
    },
    _uploadImg () {
      if (!this.title) {
        return this.$toast.fail('请填写标题')
      }
      if (!this.message) {
        return this.$toast.fail('请输入文字')
      }
      if (!this.categoryId) {
        return this.$toast.fail('请选择分类')
      }
      this.$toast.loading({
        message: '发布中...',
        forbidClick: true,
        duration: 0
      })
      if (this.imgList.length === 0) {
        this._submitImg()
      } else {
        this._upload()
      }
    },
    _upload (index = 0) {
      let _formData = new FormData()
      _formData.append('file', this.imgList[index].file)
      this.$http.common.uploadImg(_formData).then(({ code, data }) => {
        if (code === 200) {
          this.imgData.push(data)
          if (this.imgList.length > index + 1) {
            this._upload(index + 1)
          } else {
            this._submitImg()
          }
        }
      })
    },
    _submitImg () {
      this.$http.article.create({
        category_id: this.categoryId,
        type: this.imgList.length ? 1 : 2,
        title: this.title,
        content: this.message,
        images: this.imgData.map(item => item.img_url)
      }).then(({ code, msg }) => {
        if (code === 200) {
          this.$toast.clear()
          this.$toast.success(msg)
          this.title = ''
          this.message = ''
          if (this.imgList.length) this.imgList = []
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.release {
  padding-top: 16px;
  padding-bottom: 50px;
  &-video {
    margin: 16px 0 16px;
    background-color: #ffffff;
    &__upload {
      padding: 16px;
    }
  }
  &-btn {
    &__default {
      padding: 16px;
    }
    &__fixed {
      position: fixed;
      bottom: 66px;
      left: 16px;
      right: 16px;
    }
  }
  &-img {
    margin: 16px 0;
    padding: 0 16px;
    background-color: #ffffff;
    overflow: hidden;
    .release-img {
      overflow: initial;
      padding: 0;
    }
  }
  &-text {
    margin: 16px 0;
    padding: 0 16px;
    background-color: #ffffff;
    overflow: hidden;
    .van-cell {
      padding: 0 0 16px;
    }
  }
}
</style>
