<template>
  <div class="createPost-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
      <sticky :class-name="'sub-navbar '+postForm.status">
        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">保存
        </el-button>
      </sticky>

      <div class="createPost-main-container">
        <el-row :gutter="20">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>明星相关</span>
            </div>
            <el-row>
              <el-col :span="24">
                <div class="postInfo-container">
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label-width="75px" label="帖子ID:" class="postInfo-container-item" v-if="isEdit">
                        <el-input :rows="1" v-model="postForm.id" type="number" class="article-textarea"
                                  style="width: 230px" readonly/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label-width="75px" label="举报时间:" class="postInfo-container-item" v-if="isEdit">
                        <el-input :rows="1" v-model="postForm.report_time" type="text" class="article-textarea"
                                  style="width: 230px" readonly/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label-width="65px" label="发帖人:" class="postInfo-container-item">
                        <el-select v-model="postForm.author" :remote-method="getRemoteGroupList" filterable remote
                                   placeholder="搜索用户" style="width: 230px;margin-left: 10px">
                          <el-option v-for="(item,index) in groupListOptions" :key="item+index" :label="item"
                                     :value="item"/>
                        </el-select>
                        <el-tag type="danger" v-if="is_puppet">马甲</el-tag>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label-width="75px" label="发帖时间:" class="postInfo-container-item">
                        <el-date-picker v-model="postForm.posting_time " type="datetime" format="yyyy-MM-dd HH:mm:ss"
                                        placeholder="选择日期时间" style="width: 230px"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label-width="75px" label="明星名称:" class="postInfo-container-item">
                        <el-select v-model="postForm.author" :remote-method="getRemoteStarList" filterable remote
                                   placeholder="搜索小组" style="width: 230px">
                          <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item"
                                     :value="item"/>
                        </el-select>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label-width="75px" label="小组名称:" class="postInfo-container-item">
                        <el-select v-model="postForm.author" :remote-method="getRemoteGroupList" filterable remote
                                   placeholder="搜索用户" style="width: 230px">
                          <el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item"
                                     :value="item"/>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label-width="75px" label="帖子星级:" class="postInfo-container-item">
                        <el-select v-model="postForm.topic_level" :placeholder="'级别:'" clearable
                                   class="postInfo-container-item" style="width:230px">
                          <el-option v-for="item in TopicLevelOptions" :key="item.key" :label="item.display_name"
                                     :value="item.key"/>
                        </el-select>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label-width="75px" label="标签:" class="postInfo-container-item">
                        <el-select v-model="postForm.author" :remote-method="getRemoteTagList" filterable remote
                                   placeholder="搜索标签" style="width: 230px">
                          <el-option v-for="(item,index) in tagListOptions" :key="item+index" :label="item"
                                     :value="item"/>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
            <el-form-item style="margin-bottom: 40px;" label-width="75px" label="帖子内容:">
              <el-input :rows="1" v-model="postForm.content" type="textarea" class="article-textarea" autosize
                        placeholder="请输入内容"/>
              <span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>
            </el-form-item>
            <div class="item real">
              <div class="name">
                <span>帖子图片</span>
              </div>
              <div class="value">
                <edit-upload :value="edit.hospital_pics" @input="uploadPics" multiple :limit="9" :uploadType="'26'"
                             @limit="uploadRealLimit"></edit-upload>
                <div class="error_icon" v-show="showHospitalPicTip">
                      <span class="icon-warn">
                          <span class="path1"></span>
                          <span class="path2"></span>
                          <span class="path3"></span>
                      </span>
                </div>
              </div>
            </div>

            <div v-if="hide">
              <div class="item video">
                <div class="name">
                  <i></i><span>帖子视频</span>
                </div>
                <div class="value">
                  <div class="up-video">
                    <ul class="video-items clearfix" v-if="edit.video_url">
                      <li class="video-item" @click.stop="playVideo">
                        <video ref="previewVideo" :src="videoUrl"></video>
                        <span class="close" @click.stop="removeVideo"></span>
                      </li>
                    </ul>
                    <form v-else :class="{ uploading: uploading }">
                      <input name="token" type="hidden" v-model="video_token">
                      <input name="file" type="file" class="file" @change="uploadVideo"
                             accept="video/mp4, video/x-m4v, video/quicktime, video/*">
                      <div class="loader" v-show="uploading">
                        <span class="preloader"></span>
                        <p>上传中...</p>
                      </div>
                    </form>

                  </div>
                  <modal :show="videoVisible" @click="videoVisible = false">
                    <div class="preview-video" @click.stop="">
                      <video-player
                        :options="opts"
                        :playsinline="true"
                        ref="videoPlayer">
                      </video-player>
                    </div>
                  </modal>
                </div>
              </div>
            </div>
          </el-card>
        </el-row>


        <el-row :gutter="20" style="margin-top:50px;">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>帖子相关</span>
            </div>
            <div style="margin-bottom:50px;">
              <div class="filter-container">
                <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="handleCreate">回复</el-button>
                <el-button v-waves class="filter-item" type="primary" icon="el-icon-delete" @click="delUser">下线
                </el-button>
              </div>
              <el-table :data="list" border fit highlight-current-row style="width: 100%"
                        ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column type="selection" align="center"></el-table-column>
                <el-table-column align="center" label="用户ID ">
                  <template slot-scope="scope">
                    <router-link :to="'/push/edit/'+scope.row.id" class="link-type">
                      <span>{{ scope.row.id }}</span>
                    </router-link>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="评论用户">
                  <template slot-scope="scope">
                    <span>{{ scope.row.username }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="被评论用户">
                  <template slot-scope="scope">
                    <span>{{ scope.phone }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="评论时间">
                  <template slot-scope="scope">
                    <span>{{ scope.row.topic_nums }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="贴主评论">
                  <template slot-scope="scope">
                    <span>{{ scope.row.user_identity }}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" label="评论内容">
                  <template slot-scope="scope">
                    <span>{{ scope.row.internal_identity }}</span>
                  </template>
                </el-table-column>

              </el-table>

              <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
                          style="margin-left: 250px;" @pagination="getList"/>
            </div>
          </el-card>
        </el-row>

      </div>
    </el-form>

    <el-dialog :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px"
               style="width: 400px; margin-left:50px;">
        <el-form-item :label="'被评论用户'" prop="be_remarked_user">
          <el-select v-model="temp.be_remarked_user" :remote-method="getRemoteUserList" filterable remote multiple
                     value-key="id"
                     placeholder="搜索用户" style="width: 100%">
            <el-option v-for="(item,index) in remarkListOptions" :key="item+index" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="'评论用户'" prop="remark_user">
          <el-select v-model="temp.remark_user" :remote-method="getRemoteUserList" filterable remote
                     value-key="id"
                     placeholder="搜索用户" style="width: 100%">
            <el-option v-for="(item,index) in remarkListOptions" :key="item+index" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item :label="'评论内容'">
          <el-input :autosize="{ minRows: 2, maxRows: 4}" v-model="temp.remark" type="textarea"
                    placeholder="Please input"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('table.cancel') }}</el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">{{ $t('table.confirm') }}
        </el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios'
  import MDinput from '@/components/MDinput'
  import Sticky from '@/components/Sticky' // 粘性header组件
  import Dropzone from '@/components/Dropzone'
  import Pagination from '@/components/Pagination'
  import EditUpload from '@/components/Upload/EditUpload'
  import Modal from '@/components/Modal'
  import VideoPlayer from '@/components/Video'
  import waves from '@/directive/waves'
  import {createRemark, fetchTopic} from '@/api/topic'
  import {fetchList} from '@/api/user'
  import {getToken} from '@/api/qiniu'
  import {postVideo} from '@/api/upload'
  import {userSearch, groupSearch, starSearch, tagSearch} from '@/api/remoteSearch'
  import {VIDEO_PREFIX} from '@/components/Upload/utils/default'

  const VIDEO_MAX_SIZE = 100 * 1024 * 1024
  const defaultForm = {
    status: 'draft',
    title: '', // 文章题目
    content: '',
    source_uri: '', // 文章外链
    image_uri: '', // 文章图片
    display_time: undefined, // 前台展示时间
    id: undefined,
    platforms: ['a-platform'],
    comment_disabled: false,
    posting_time: undefined,
  }

  export default {
    name: 'GroupDetail',
    components: {MDinput, Sticky, Dropzone, Pagination, EditUpload, VideoPlayer, Modal},
    directives: {waves},
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      const validateRequire = (rule, value, callback) => {
        if (value === '') {
          this.$message({
            message: rule.field + '为必传项',
            type: 'error'
          })
          callback(new Error(rule.field + '为必传项'))
        } else {
          callback()
        }
      }
      return {
        postForm: Object.assign({}, defaultForm),
        loading: false,
        userListOptions: [],
        groupListOptions: [],
        remarkListOptions: [],
        edit: {
          video_url: '',
          hospital_pics: []
        },
        rules: {
          posting_time: [{validator: validateRequire, trigger: 'blur'}]
        },
        tempRoute: {},
        TopicLevelOptions: [
          {'key': 1, 'display_name': '1星'},
          {'key': 2, 'display_name': '2星'},
          {'key': 3, 'display_name': '3星'},
          {'key': 4, 'display_name': '4星'},
          {'key': 5, 'display_name': '5星'},
        ],
        list: null,
        total: 1,
        listLoading: true,
        showHospitalPicTip: false,
        areaType: 1,
        multipleSelection: [],
        tagListOptions: [],
        del_list: [],
        is_puppet: 0,
        listQuery: {
          page: 0,
          limit: 10,
          filter: {
            value: '',
            key: '',
          },
        },

        // 视频上传
        video_token: '',
        uploading: false,
        poster: '',
        progress: 0,
        complete: false,
        // 视频弹窗
        videoVisible: false,

        editInstrument: false,
        opts: {
          muted: true,
          language: 'zh-CN',
          playbackRates: [0.7, 1.0, 1.5, 2.0],
          sources: [],
          poster: '',
          height: 400
        },

        temp: {
          remark: '',
          be_remarked_user: '',
          remark_user: '',
        },
        dialogFormVisible: false,
        dialogStatus: '',
      }
    },
    computed: {
      contentShortLength() {
        return this.postForm.content.length
      },
      lang() {
        return this.$store.getters.language
      },
      player() {
        return this.$ref.videoPlayer
      },
    },
    created() {
      if (this.isEdit) {
        const id = this.$route.params && this.$route.params.id
        this.fetchData(id)
      } else {
        this.postForm = Object.assign({}, defaultForm)
        getToken().then(response => {
          this.video_token = response.data.data.token;
        })
      }
      this.tempRoute = Object.assign({}, this.$route)
    },
    methods: {
      fetchData(id) {
        fetchTopic(id).then(response => {
          this.postForm = response.data
          // Just for test
          this.postForm.title += `   Article Id:${this.postForm.id}`
          this.postForm.content_short += `   Article Id:${this.postForm.id}`

          // Set tagsview title
          this.setTagsViewTitle()
        }).catch(err => {
          console.log(err)
        })
      },
      setTagsViewTitle() {
        const title = this.lang === 'zh' ? '编辑文章' : 'Edit Article'
        const route = Object.assign({}, this.tempRoute, {title: `${title}-${this.postForm.id}`})
        this.$store.dispatch('updateVisitedView', route)
      },
      submitForm() {
        this.postForm.display_time = parseInt(this.display_time / 1000)
        console.log(this.postForm)
        this.$refs.postForm.validate(valid => {
          if (valid) {
            this.loading = true
            this.$notify({
              title: '成功',
              message: '发布文章成功',
              type: 'success',
              duration: 2000
            })
            this.postForm.status = 'published'
            this.loading = false
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      draftForm() {
        if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
          this.$message({
            message: '请填写必要的标题和内容',
            type: 'warning'
          })
          return
        }
        this.$message({
          message: '保存成功',
          type: 'success',
          showClose: true,
          duration: 1000
        })
        this.postForm.status = 'draft'
      },
      getRemoteUserList(query) {
        userSearch(query).then(response => {
          if (!response.data.items) return
          this.userListOptions = response.data.data.data
        })
      },
      getRemoteGroupList(query) {
        groupSearch(query).then(response => {
          if (!response.data.items) return
          this.userListOptions = response.data.data.data
        })
      },
      getRemoteStarList(query) {
        starSearch(query).then(response => {
          if (!response.data.items) return
          this.userListOptions = response.data.data.data
        })
      },
      getRemoteTagList(query) {
        tagSearch(query).then(response => {
          if (!response.data.items) return
          this.userListOptions = response.data.data.data
        })
      },
      appendUser() {

      },
      delUser() {

      },
      getList() {
        this.listLoading = true
        fetchList(this.listQuery).then(response => {
          this.list = []
          this.total = 100
          this.listLoading = false
        })
      },
      dropzoneS(file) {
        console.log(file)
        this.$message({message: 'Upload success', type: 'success'})
      },
      dropzoneR(file) {
        console.log(file)
        this.$message({message: 'Delete success', type: 'success'})
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },


      uploadPics(images) {
        this.edit.hospital_pics = images
      },
      uploadRealLimit() {
        this.$message({
          message: '最多上传9张',
          type: 'warning'
        })
      },
      hide() {
        return Number(this.areaType) === 1
      },
      // 上传视频
      uploadVideo(e) {
        let file = e.target.files[0]
        let token = this.video_token
        // 校验video类型
        if (!/video\/\w+/.test(file.type)) {
          this.$message({
            message: '请上传视频格式',
            type: 'warning'
          })
          return false
        }
        if (file.size > VIDEO_MAX_SIZE) {
          this.$message({
            message: '视频大小不能超过100M, 请压缩后上传',
            type: 'warning'
          })
          return false
        }
        const uploadQiniu = (file, token) => {
          if (this.uploading) return
          this.uploading = true
          let formdata = new window.FormData()
          formdata.append('file', file)
          formdata.append('token', token)
          axios.post('http://upload.qiniu.com/', formdata, {
            headers: {'Content-Type': 'multipart/form-data'}
          }).then(res => {
            let key = res.data.key
            axios.get(VIDEO_PREFIX + `${key}?avinfo`).then(res => {
              let data = res.data
              this.uploading = false
              let duration = data.format.duration
              if (Math.round(duration) > 60) {
                this.$message({
                  message: '视频时长不能大于1分钟',
                  type: 'warning'
                })
                this.edit.video_url = ''
              } else {
                this.edit.video_url = `${key}`
              }
            }).catch(() => {
              this.uploading = false
            })
          }).catch(() => {
            this.uploading = false
          })
        }
        if (window.FileReader) {
          let reader = new window.FileReader()
          reader.readAsDataURL(file)
          reader.onprogress = (e) => {
            this.progress = Math.round(e.loaded / e.total * 100 * 2)
          }
          reader.onload = () => {
            console.log('support FileReader')
            this.complete = true
            uploadQiniu(file, token)
          }
        } else {
          console.log('not support FileReader')
          uploadQiniu(file, token)
        }
      },
      removeVideo() {
        this.edit.video_url = ''
        this.uploading = false
      },
      playVideo() {
        this.videoVisible = true
        this.opts.sources = [{
          type: 'video/mp4',
          src: this.videoUrl()
        }]
        console.log(this.opts.sources)
      },
      videoUrl() {
        return VIDEO_PREFIX + this.edit.video_url
      },

      resetTemp() {
        this.temp = {
          id: undefined,
          importance: 1,
          remark: '',
          timestamp: new Date(),
          title: '',
          status: 'published',
          type: ''
        }
      },
      handleCreate() {
        this.resetTemp()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },
      createData() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.temp.id = parseInt(Math.random() * 100) + 1024 // mock a id
            this.temp.author = 'vue-element-admin'
            createRemark(this.temp).then(() => {
              this.list.unshift(this.temp)
              this.dialogFormVisible = false
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            })
          }
        })
      },

    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";

  .up-video {
    .video-items {
      float: left;
      margin-right: 16px;
    }
    .video-item {
      float: left;
      position: relative;
      width: 110px;
      height: 110px;
      border-radius: 4px;
      background-color: #F5FBFF;
      cursor: pointer;
      overflow: hidden;
      vertical-align: top;
      &::before {
        content: '';
        position: absolute;
        top: 0px;
        right: 0;
        width: 30px;
        height: 30px;
        background: url('../../../assets/image/svg/uploadSuccess.svg') 50% 50% no-repeat;
        border-top-right-radius: 4px;
      }
      &::after {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url('../../../assets/image/svg/video.svg') center center no-repeat;
        background-size: 38px 38px;
      }
      .close {
        display: none;
        position: absolute;
        width: 30px;
        height: 30px;
        top: 0px;
        right: 0px;
        border-top-right-radius: 4px;
        cursor: pointer;
        background: url('../../../assets/image/svg/video-close.svg') center center no-repeat;
        z-index: 1;
      }
      video {
        display: block;
        width: 110px;
        height: 110px;
      }
      &:hover {
        &::before {
          content: '';
          position: absolute;
          top: 0px;
          right: 0;
          width: 30px;
          height: 30px;
          background-image: none;
          border-top-right-radius: 4px;
        }
        .close {
          display: block;
        }
      }

    }
    form {
      position: relative;
      display: inline-block;
      width: 110px;
      height: 110px;
      border-radius: 4px;
      border: 1px dashed #E5E5E5;
      background: #F5FBFF url('../../../assets/image/svg/video-upload.svg') center center no-repeat;
      .file {
        display: inline-block;
        width: 100%;
        height: 100%;
        padding: 0;
        opacity: 0;
        border: none;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
      }
      &.uploading {
        background: none;
      }
    }
    &:hover {
      form {
        border: 1px dashed #5CAEDC;
      }
    }
  }

  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
      .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
          text-align: right;
          margin-right: 10px;
          .editor-upload-btn {
            display: inline-block;
          }
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }

  .real .error_icon {
    margin-top: 90px;
  }
</style>
