<template>
  <div>
    <el-card>
      <div>
        <div style="display: inline;float: left">
          <h3>任务名称:{{ taskName }}</h3>
        </div>
        <div style="float: right">
          <el-button type="primary" @click="cancel(true)">返回</el-button>
        </div>
      </div>
      <div id="container">
        <div id="left_side">
          <!--          <div v-if="resourceType==0">-->
          <el-select v-model="type" style="width: 80%;margin-left: 5px;margin-top: 10px" size="small"
                     class="user-search-input" placeholder="请选择" @change="changeType">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button type="primary" @click="changePage">下一页</el-button>
          <el-scrollbar v-if="resourceType==0" style="height: 50%;margin-top: 10px">
            <div
              style="margin-top: 5px;margin-left: 5px;cursor: pointer;color: deepskyblue;text-decoration: underline"
              v-for="detail in showDetails" @click="viewDetail(detail)">
              <span v-show="detail.content.length<15">{{detail.content}}</span>
              <el-popover v-show="detail.content.length>=15" :content="detail.content" placement="top-start"
                          width="250"
                          trigger="hover">
                <span slot="reference" style="cursor: pointer;">{{detail.content.substring(0,15)}}......</span>
              </el-popover>
            </div>
          </el-scrollbar>

          <el-scrollbar v-if="resourceType==1" style="height: 50%;margin-top: 10px">
            <div style="margin-top: 5px;margin-left: 10%;cursor: pointer;">
              <el-image
                v-for="(pic,index) in showDetails"
                :key="index"
                @click="viewDetail(pic)"
                style="width: 80%; height: 100px"
                :src="pic.picUrl"
                lazy>
              </el-image>
            </div>
          </el-scrollbar>

          <el-scrollbar v-if="resourceType==2" style="height: 50%;margin-top: 10px">
            <div
              style="margin-top: 5px;margin-left: 5px;cursor: pointer;color: deepskyblue;text-decoration: underline"
              v-for="detail in showDetails" @click="viewDetail(detail)">
              <span v-show="detail.movUrl.length<20">{{detail.movUrl}}</span>
              <el-popover v-show="detail.movUrl.length>=20" :content="detail.movUrl" placement="top-start"
                          width="250"
                          trigger="hover">
                <span slot="reference" style="cursor: pointer;">{{detail.movUrl.substring(0,20)}}......</span>
              </el-popover>
            </div>

            <!--            <div v-for="detail in showDetails" style="margin-top: 5px;margin-left: 10%;cursor: pointer;width: 80%; height: 100px">-->
            <!--              <video-player class="video-player vjs-custom-skin"-->
            <!--                            ref="videoPlayer"-->
            <!--                            :playsinline="true"-->
            <!--                            :options="detail.playOption">-->
            <!--              </video-player>-->
            <!--            </div>-->

          </el-scrollbar>
        </div>
        <div id="content">
          <div v-if="resourceType==0">
            <div style="height: 500px;width:100%;">
              <el-input type="textarea" :rows="20" :readonly="true" v-model="activeContent"
                        style="margin-top: 20px;width: 90%;margin-left: 5%"></el-input>
            </div>
            <div>
              <HR/>
              <span style="margin-left: 10px">注释/参考</span><br/>
              <el-input type="textarea" :rows="5" :readonly="true" v-model="activeHint"
                        style="margin-top: 10px;width: 90%;margin-left: 5%"></el-input>
            </div>
          </div>
          <div v-if="resourceType==1">
            <div style="height: 500px;width:100%;">
              <el-image :src="activeContent" fit="contain" :preview-src-list="picList"
                        style="margin-top: 20px;width: 90%;margin-left: 5%;height: 90%"></el-image>
            </div>
            <div>
              <HR/>
              <span style="margin-left: 10px">注释/参考</span><br/>
              <el-input type="textarea" :rows="5" :readonly="true" v-model="activeHint"
                        style="margin-top: 10px;width: 90%;margin-left: 5%"></el-input>
            </div>
          </div>
          <div v-if="resourceType==2">
            <div style="height: 500px;width:100%;">
              <div class='video-class' style="margin-top: 20px;width: 80%;margin-left: 10%;height: 90%">
                <video-player class="video-player vjs-custom-skin"
                              ref="videoPlayer"
                              :playsinline="true"
                              :options="playerOptions">
                </video-player>
              </div>
            </div>
            <div>
              <HR/>
              <span style="margin-left: 10px">注释/参考</span><br/>
              <el-input type="textarea" :rows="5" :readonly="true" v-model="activeHint"
                        style="margin-top: 10px;width: 90%;margin-left: 5%"></el-input>
            </div>
          </div>
        </div>
        <div id="right_side">
          <div>
            <div style="width: 80%;margin-left: 10%">
              <div>说明:</div>
              <div>1. 如不确定请先按自己认知标记后，勾选存疑，任务负责人会进行复核</div>
              <div>2. 如您觉得与标注内容无关或不适用该场景，请选择忽略</div>
            </div>
            <div style="margin-left: 10%;margin-top: 20px">
              <div>
                <el-radio-group size="medium" v-model="markForm.type">
                  <el-radio label="2">忽略</el-radio>
                  <br/>
                  <el-radio label="0">打标</el-radio>
                  <br/>
                  <el-radio label="1">存疑</el-radio>
                </el-radio-group>
              </div>
              <div v-if="this.activeCategory" style="margin-top: 20px">
                已选分类: {{ activeCategory }}
              </div>
              <div style="margin-top: 20px">
                <SelectTree
                  width="80"
                  placeholder="请选择分类"
                  v-model="markForm.categoryId"
                  :options="categoryTree"
                  :props="categoryProps"
                ></SelectTree>
              </div>
            </div>
            <div class="block" style="height: 80px;text-align: center;bottom: 10px;position: absolute;width: 100%">
              <el-button type="primary" @click="upIndex" :loading="btnLoading">上一个</el-button>
              <el-button type="primary" @click="downIndex" :loading="btnLoading">下一个</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getTaskDetails, markDetail, getTaskById, getDetailPage} from "@/api/project";
import {getCateTree} from "@/api/category";
import SelectTree from "@/components/SelectTree";

export default {
  name: "MarkPage",
  components: {
    SelectTree
  },
  data() {
    return {
      btnLoading: false,
      taskId: null,
      taskName: '',
      resourceType: null,
      taskDetails: [],
      showDetails: [],
      picList: [],
      type: 100, //表示所有
      dataId: '',
      typeList: [
        {value: 100, label: '所有'},
        {value: 99, label: '已完成'},
        {value: 98, label: '未完成'},
        {value: 1, label: '存疑'},
        {value: 2, label: '忽略'}
      ],
      activeContent: '',
      activeHint: '',
      activeCategory: '',
      index: 0,
      markType: '0',
      categoryProps: {
        value: "categoryId",
        label: "categoryName",
        children: "children",
      },
      categoryTree: [],
      markForm: {
        taskDetailId: null,
        type: '0',
        categoryId: ''
      },

      //视频配置
      playerOptions: {
        //播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        //如果true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 导致视频一结束就重新开始。
        loop: false,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: 'auto',
        language: 'zh-CN',
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        aspectRatio: '16:9',
        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fluid: true,
        sources: [{
          //类型
          type: "video/mp4",
          //url地址
          src: ''
        }],
        //你的封面地址
        poster: '',
        //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: '此视频暂无法播放，请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          //全屏按钮
          fullscreenToggle: true
        }
      },
      count: 0,
      countTime: 0,
      dataIndex: 0
    }
  },
  mounted() {
    this.taskId = this.$route.params.taskId;
    // this.fetchTaskDetails(this.taskId)
    this.getCategoryTree()
    this.fetchTaskBaseInfo(this.taskId)
    this.fetchDetailPage(this.taskId, this.dataId, this.type)
  },
  methods: {
    load() {
      this.count += 5
    },
    fetchDetailPage(taskId, dataId, type) {
      getDetailPage(taskId, dataId, type).then(res => {
        if (res.result.length > 0) {
          res.result.forEach(item => {
            item.index = this.dataIndex
            this.dataIndex++
            this.taskDetails.push(item)
            this.showDetails.push(item)
          })
          this.dataId = this.taskDetails[this.taskDetails.length - 1].dataId
          let detail = this.showDetails[this.index]
          this.setActiveData(detail)
        }
      }, err => {

      })
    },
    changePage() {
      this.fetchDetailPage(this.taskId, this.dataId, this.type)
    },
    fetchTaskBaseInfo(taskId) {
      getTaskById(taskId).then(res => {
        this.taskName = res.result.taskName
        this.resourceType = res.result.resourceType
      })
    },
    //查询分类树
    getCategoryTree() {
      this.treeLoading = true
      getCateTree().then(res => {
        this.categoryTree = res.result
        this.treeLoading = false
      }, () => {
        this.treeLoading = false
      })
    },
    fetchTaskDetails(taskId) {
      getTaskDetails(taskId).then(res => {
        this.taskDetails = res.result
        this.showDetails = []
        if (this.taskDetails.length > 0) {
          let idx = 0
          this.taskDetails.forEach(task => {
            if (this.type == 100) {
              task.index = idx
              idx++
              this.showDetails.push(task)
            } else if (this.type == 99) {
              if (task.isMark == 1) {
                task.index = idx
                idx++
                this.showDetails.push(task)
              }
            } else if (this.type == 98) {
              if (task.isMark == 0) {
                task.index = idx
                idx++
                this.showDetails.push(task)
              }
            } else if (this.type == 1) {
              if (task.type == 1) {
                task.index = idx
                idx++
                this.showDetails.push(task)
              }
            } else if (this.type == 2) {
              if (task.type == 2) {
                task.index = idx
                idx++
                this.showDetails.push(task)
              }
            }
          })
        }
        let detail = this.showDetails[0]
        this.setActiveData(detail)
      }, err => {

      })
    },
    changeType(type) {
      this.showDetails = []
      this.taskDetails = []
      this.dataIndex = 0
      this.index = 0
      this.fetchDetailPage(this.taskId, '', type)
      // if (this.taskDetails.length > 0) {
      //   let idx = 0
      //   this.taskDetails.forEach(task => {
      //     if (type == 100) {
      //       task.index = idx
      //       idx++
      //       this.showDetails.push(task)
      //     } else if (type == 99) {
      //       if (task.isMark == 1) {
      //         task.index = idx
      //         idx++
      //         this.showDetails.push(task)
      //       }
      //     } else if (type == 98) {
      //       if (task.isMark == 0) {
      //         task.index = idx
      //         idx++
      //         this.showDetails.push(task)
      //       }
      //     } else if (type == 1) {
      //       if (task.type == 1) {
      //         task.index = idx
      //         idx++
      //         this.showDetails.push(task)
      //       }
      //     } else if (type == 2) {
      //       if (task.type == 2) {
      //         task.index = idx
      //         idx++
      //         this.showDetails.push(task)
      //       }
      //     }
      //   })
      //   let detail = this.showDetails[0]
      //   this.setActiveData(detail)
      //
      // }
    },
    cancel(val) {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        // this.$router.push({name: 'ProjectTaskPage', params: {flush: val}})
        this.$router.go(-1)
      })
    },
    viewDetail(detail) {
      let idx = this.showDetails.findIndex(item => {
        return item.detailId === detail.detailId
      })
      this.index = idx
      this.setActiveData(detail)
    },
    upIndex() {
      console.log(this.index)
      if (this.index > 0) {
        this.index--
        let detail = this.showDetails[this.index]
        this.setActiveData(detail)
      } else {
        alert('已经是第一个了')
      }
    },
    downIndex() {
      console.log(this.index)
      this.btnLoading = true
      if (this.index >= 0 && this.index < this.showDetails.length - 1) {
        let curDetail = this.showDetails[this.index]
        this.markForm.taskDetailId = curDetail.detailId
        // this.index++
        // let detail = this.showDetails[this.index]
        // this.setActiveData(detail)
        if (this.markForm.type == '0') {
          if (this.markForm.categoryId == null || this.markForm.categoryId === '') {
            this.$message.error('如果打标,请选择分类')
            this.btnLoading = false
            return false
          }
        }
        markDetail(this.markForm).then(res => {
          this.$message.success('打标成功')
          this.index++
          let detail = this.showDetails[this.index]
          this.setActiveData(detail)
          this.btnLoading = false
        }, err => {
          this.btnLoading = false
        })

      } else {
        let curDetail = this.showDetails[this.index]
        this.markForm.taskDetailId = curDetail.detailId
        if (this.markForm.type == '0') {
          if (this.markForm.categoryId == null || this.markForm.categoryId === '') {
            this.$message.error('如果打标,请选择分类')
            this.btnLoading = false
            return false
          }
        }
        markDetail(this.markForm).then(res => {
          this.$message.success('打标成功')
          this.btnLoading = false
        }, err => {
          this.btnLoading = false
        })
        alert('已经是最后一个了')
      }

    },
    setActiveData(detail) {
      if (detail.resourceType == 0) {
        this.activeContent = detail.content
      } else if (detail.resourceType == 1) {
        this.activeContent = detail.picUrl
      } else if (detail.resourceType == 2) {
        let movSource = {
          //类型
          type: "video/mp4",
          //url地址
          src: detail.movUrl
        }
        this.playerOptions.sources = []
        this.playerOptions.sources.push(movSource)
      }
      this.activeHint = detail.hint
      this.activeCategory = detail.categoryName
      this.markForm.type = String(detail.type)
      console.log(detail.categoryId)
      let cateId = detail.categoryId;
      console.log(cateId)
      this.markForm.categoryId = cateId
      this.picList = []
      this.picList.push(detail.picUrl)
      console.log(this.markForm)
    },
    setOption(url) {

    }
  }
}
</script>

<style scoped>
#wrap {
  width: 700px;
  margin: 0 auto;
}

#header {
  margin: 20px;
  height: 80px;
  border: solid 1px #0000FF;
}

#container {
  margin-top: 80px;
  position: relative;
  /*margin:20px;*/
  height: 700px;
}

#left_side {
  position: absolute;
  top: 0px;
  left: 0px;
  border: solid 1px #47474d;
  width: 15%;
  height: 100%;
}

#content {
  margin: 0px 15% 0px;
  border: solid 1px #47474d;
  width: 60%;
  height: 100%;
}

#right_side {
  position: absolute;
  top: 0px;
  right: 0px;
  border: solid 1px #47474d;
  width: 25%;
  height: 100%;
}

#footer {
  margin: 20px;
  height: 80px;
  border: solid 1px #0000FF;
}

.video-class {
  display: inline-block;
  width: 600px;
  height: 338px;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  margin-right: 4px;
}

.video-class:hover {
  display: block;
}
</style>
