<template>
  <div>
    <el-card body-style="height: calc(100vh - 150px)" style="width: 100%;">
      <el-container style="height: 100%;vertical-align: center">
        <el-header>
          <div style="float: left;margin-top: 15px;">任务名称: {{ taskName }}</div>
          <el-button type="primary" style="float: right;" @click="cancel(true)">返回</el-button>
        </el-header>
        <el-container>
          <el-aside width="300px"
                    style="border: 1px solid #ccc;border-right: none;height: 100%;background:#FFFFFF;padding: 8px 0;">
            <div style="height: 50px;">
              <el-select v-model="type" style="width: 80%;margin-left: 10px;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>
            </div>
            <div>
              <ul class="infinite-list" v-infinite-scroll="changePage" style="height: 610px;overflow: auto">
                <li v-if="resourceType === 0" v-for="detail in showDetails" @click="viewDetail(detail)"
                    :class="currentDataId === detail.dataId?'current-item':''" class="infinite-list-item">
                  <div class="text">{{ detail.content }}</div>
                </li>
                <li v-if="resourceType === 1" v-for="detail in showDetails" @click="viewDetail(detail)"
                    :class="currentDataId === detail.dataId?'current-item':''" class="infinite-list-item">
                  <el-image
                    @click="viewDetail(detail)"
                    style="width: 80%; height: 100px;padding: 10px 20px;"
                    :src="detail.picUrl"
                    lazy>
                  </el-image>
                </li>
                <li v-if="resourceType === 2" v-for="detail in showDetails" @click="viewDetail(detail)"
                    :class="currentDataId === detail.dataId?'current-item':''" class="infinite-list-item">
                  {{ detail.movUrl }}
                </li>
              </ul>
            </div>
          </el-aside>
          <el-container style="height: 700px">
            <el-main style="border: 1px solid #ccc;">
              <div v-if="resourceType===0" style="font-size: 14px;">
                <p style="font-size: 16px;"> {{ activeContent }}</p>
              </div>
              <el-image v-if="resourceType===1" :src="activeContent" fit="contain" :preview-src-list="picList"
                        style="margin-top: 20px;width: 90%;margin-left: 5%;height: 90%"></el-image>
              <video-player v-if="resourceType===2" class="video-player vjs-custom-skin"
                            ref="videoPlayer"
                            :playsinline="true"
                            :options="playerOptions">
              </video-player>
            </el-main>
            <el-footer style="border: 1px solid #ccc;border-top: none;height: 200px;">
              <p style="color: #1e6abc;">注释或参考：</p>
              <div style="margin: 20px;color: #5a5e66;font-style: italic;">
                {{ activeHint }}
              </div>
            </el-footer>
          </el-container>
          <el-aside width="300px"
                    style="border: 1px solid #ccc;border-left: none;height: 100%;background:#FFFFFF;padding: 8px 10px;">
            <div style="font-size: 14px;border-bottom: 1px solid #ccc;">
              <p style="color: #1e6abc;">注意事项：</p>
              <p>1. 如不确定请先按自己认知标记后，勾选存疑，任务负责人会进行复核</p>
              <p>2. 如您觉得与标注内容无关或不适用该场景，请选择忽略</p>
            </div>
            <div style="margin-top: 20px;">
              <el-radio-group v-model="markForm.type" disabled>
                <el-radio label="1">忽略</el-radio>
                <br/>
                <el-radio label="0">打标</el-radio>
              </el-radio-group>
              <el-checkbox label="存疑" style="margin-top: 50px;margin-left: -80px;position: absolute;"
                           v-model="markForm.hasProblem"
                           :disabled="true"/>
            </div>
            <!--            <div v-if="this.activeCategory" style="margin-top: 20px">-->
            <!--              已选分类: {{ activeCategory }}-->
            <!--            </div>-->
            <div style="margin-top: 70px">
              <el-cascader
                :disabled="true"
                v-model="markForm.categoryIds"
                :options="categoryTree"
              ></el-cascader>
            </div>
            <div style="margin-left: 10%;margin-top: 20px;width: 80%">
              <el-radio-group size="medium" v-model="markForm.sampleType">
                <el-radio label="1">验证成功</el-radio>
                <el-radio label="2">验证失败</el-radio>
              </el-radio-group>
              <el-input type="textarea" :rows="5" v-model="markForm.sampleDesc" style="margin-top: 20px"></el-input>
            </div>
            <div class="block" style="height: 70px;bottom: 10px;position: absolute;width: 100%;margin-left: 60px;">
              <el-button type="primary" @click="upIndex" :loading="btnLoading">上一个</el-button>
              <el-button type="primary" @click="downIndex" :loading="btnLoading">下一个</el-button>
            </div>
          </el-aside>
        </el-container>
      </el-container>
    </el-card>
  </div>
</template>

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

export default {
  name: "SampleMarkPage",
  components: {
    SelectTree
  },
  data() {
    return {
      btnLoading: false,
      taskId: null,
      taskName: '',
      resourceType: null,
      taskDetails: [],
      showDetails: [],
      picList: [],
      type: 100, //表示所有
      dataId: '',
      currentDataId: 0,
      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,
        hasProblem: false,
        type: '0',
        sampleType: '',
        sampleDesc: '',
        categoryId: '',
        categoryIds: []
      },

      //视频配置
      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.sampleNum = this.$route.params.sampleNum;
    this.fetchTaskDetails(this.taskId, this.sampleNum)
    this.getCategoryTree(this.taskId)
    this.fetchTaskBaseInfo(this.taskId)
  },
  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)
          this.fetchTaskDetail(detail.detailId)
          // console.log(this.showDetails)
        }
      }, err => {

      })
    },
    changePage() {
      // setTimeout(() => {
      //   this.fetchDetailPage(this.taskId, this.dataId, this.type)
      // }, 50)
    },
    fetchTaskBaseInfo(taskId) {
      getTaskById(taskId).then(res => {
        this.taskName = res.result.taskName
        this.resourceType = res.result.resourceType
      })
    },
    //查询分类树
    getCategoryTree(taskId) {
      this.treeLoading = true
      treeSnapshot(taskId).then(res => {
        this.categoryTree = res.result
        this.treeLoading = false
      }, () => {
        this.treeLoading = false
      })
    },
    fetchTaskDetails(taskId, sampleNum) {
      let sampleForm = {
        taskId: taskId,
        sampleNum: sampleNum
      }
      addTaskSample(sampleForm).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)
        this.fetchTaskDetail(detail.detailId)
      }, err => {

      })
    },

    changeType(type) {
      this.showDetails = []
      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)
        this.fetchTaskDetail(detail.detailId)
      }
    },
    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
      // console.log(this.index)
      this.setActiveData(detail)
      this.fetchTaskDetail(detail.detailId)
    },
    upIndex() {
      if (this.showDetails == null || this.showDetails.length == 0) {
        this.$message.error('当前无数据,无法打标')
        return false
      }
      if (this.index > 0) {
        let curDetail = this.showDetails[this.index]
        this.markForm.taskDetailId = curDetail.detailId
        if (this.markForm.sampleType == null || this.markForm.sampleType == '' || this.markForm.sampleType == 0) {
          this.$message.error('验证结果不能为空')
          this.btnLoading = false
          return false
        }
        sampleMark(this.markForm).then(res => {
          this.$message.success('已验证')
          this.index--
          let detail = this.showDetails[this.index]
          this.setActiveData(detail)
          this.fetchTaskDetail(detail.detailId)
          this.btnLoading = false
        }, err => {
          this.btnLoading = false
        })
      } else {
        let curDetail = this.showDetails[this.index]
        this.markForm.taskDetailId = curDetail.detailId
        if (this.markForm.sampleType == null || this.markForm.sampleType == '' || this.markForm.sampleType == 0) {
          this.$message.error('验证结果不能为空')
          this.btnLoading = false
          return false
        }
        this.$message.error('已经是最后一个了')
        sampleMark(this.markForm).then(res => {
          this.$message.success('已验证')
          this.btnLoading = false
        }, err => {
          this.btnLoading = false
        })
        return false
      }
    },
    downIndex() {
      if (this.showDetails == null || this.showDetails.length == 0) {
        this.$message.error('当前无数据,无法打标')
        return false
      }
      this.btnLoading = true
      if (this.index >= 0 && this.index < this.showDetails.length - 1) {
        let curDetail = this.showDetails[this.index]
        this.markForm.taskDetailId = curDetail.detailId
        if (this.markForm.sampleType == null || this.markForm.sampleType == '' || this.markForm.sampleType == 0) {
          this.$message.error('验证结果不能为空')
          this.btnLoading = false
          return false
        }
        sampleMark(this.markForm).then(res => {
          this.$message.success('已验证')
          this.index++
          let detail = this.showDetails[this.index]
          this.setActiveData(detail)
          this.fetchTaskDetail(detail.detailId)
          this.btnLoading = false
        }, err => {
          this.btnLoading = false
        })

      } else {
        let curDetail = this.showDetails[this.index]
        this.markForm.taskDetailId = curDetail.detailId
        if (this.markForm.sampleType == null || this.markForm.sampleType == '' || this.markForm.sampleType == 0) {
          this.$message.error('验证结果不能为空')
          this.btnLoading = false
          return false
        }
        this.$message.error('已经是最后一个了')
        sampleMark(this.markForm).then(res => {
          this.$message.success('已验证')
          this.btnLoading = false
        }, err => {
          this.btnLoading = false
        })

      }

    },
    setActiveData(detail) {
      this.currentDataId = detail.dataId
      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.picList = []
      this.picList.push(detail.picUrl)
    },
    fetchTaskDetail(detailId) {
      this.$nextTick(() => {
        getTaskDetail(detailId).then(res => {
          this.markForm = {
            taskDetailId: detailId,
            hasProblem: res.result.hasProblem,
            sampleType: String(res.result.sampleType),
            sampleDesc: res.result.sampleDesc,
            type: String(res.result.type),
            categoryId: res.result.categoryId,
            categoryIds: res.result.categoryIds
          }
          // console.log(this.markForm)
        })
      })

    }
  }
}
</script>

<style lang="scss" 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;
}

.infinite-list {

  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;

  .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: break-word;
    display: -webkit-box; //谷歌
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; //显示几行
    overflow: hidden;
    padding: 0 5px 0 5px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;

    &:hover {
      background: #e8f3fe;
    }

    .text {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      height: 50px;
      line-height: 50px;
    }
  }

  .infinite-list-item.current-item {
    color: #7dbcfc;
    background: #e8f3fe;
  }
}
</style>
