<template>
  <div v-loading="loading" class="sign-list">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>目录</el-breadcrumb-item>
      <el-breadcrumb-item>{{signImageDetail.driverName}}</el-breadcrumb-item>
      <el-breadcrumb-item v-if="signImageDetail.formatExecutionStartTime">{{signImageDetail.formatExecutionStartTime}}
      </el-breadcrumb-item>
      <el-breadcrumb-item v-if="signImageDetail.selectTypeName">{{signImageDetail.selectTypeName}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div :style="{height:boxHeight+'px'}" class="image-box">
      <div class="box-border">
        <div>待标记</div>
        <div :style="{height: borderHeight+'px'}">
          <div @click="imgClick(item)" :style="{borderColor:item.id==selectId?'#409EFF':void(0)}" :key="index"
               v-for="(item,index) in leftImgList">
            <img v-lazy="item.thumb_img">
          </div>
        </div>
      </div>
      <div>
        <div class="center-box" style="width: 730px">
          <el-button @click="btnClick(1)"><</el-button>
          <imageSign ref="imageSign" v-if="originalImg" :imgUrl="originalImg"></imageSign>
          <div v-else style="width: 650px;height: 365px"></div>
          <el-button @click="btnClick(2)">></el-button>
        </div>
        <div style="text-align: center;margin-top: 10px" v-if="originalImg">
          {{originalImg.split('/')[originalImg.split('/').length-1]}}
        </div>
        <el-form style="margin-top:30px;width: 80%;text-align: center" ref="ruleForm" :model="ruleForm" size="small"
                 label-width="180px">
          <el-form-item label="问题类型" prop="questionId" :rules="{
                    required: true, message: '问题类型不能为空', trigger: 'change'
                  }">
            <el-select filterable clearable v-model="ruleForm.questionId" size="small"
                       placeholder="请选择问题类型">
              <el-option v-for="item in questionList" :key="item.id" :label="item.content" :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item label="详细描述" prop="description">
            <el-input maxlength="200" type="textarea" rows="3" clearable v-model="ruleForm.description" size="small"
                      placeholder="请输入详细描述"/>
          </el-form-item>
        </el-form>
        <div style="text-align: center">
          <el-button v-if="isAdmin||btnRule.some(btn=>btn=='download')" :loading="uploadLoading" @click="uploadImg"
                     type="primary" size="medium" icon="el-icon-download">
            下载
          </el-button>
          <el-button v-if="isAdmin||btnRule.some(btn=>btn=='dropPic')" :loading="delLoading" @click="del" type="danger"
                     size="medium" class="el-icon-delete">删除
          </el-button>
          <el-button :loading="cancelMarkLoading" v-if="status==1" @click="cancelMark" type="danger" size="medium"
                     class="el-icon-remove">取消标记
          </el-button>
          <el-button v-if="isAdmin||btnRule.some(btn=>btn=='savePic')" :loading="saveLoading"
                     @click="saveSign('ruleForm')" type="primary" size="medium"
                     class="el-icon-document-add">保存
          </el-button>
          <el-button @click="eliminate" type="primary" size="medium" class="el-icon-edit">清除标记
          </el-button>
          <el-button @click="cancelBak" size="medium" icon="el-icon-back">返回</el-button>
        </div>
      </div>
      <div class="box-border">
        <div>已标记</div>
        <div :style="{height: borderHeight+'px'}">
          <div @click="imgClick(item)" :style="{borderColor:item.id==selectId?'#409EFF':void(0)}" :key="index"
               v-for="(item,index) in rightImgList">
            <img v-lazy="item.thumb_img">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import imageSign from '@/components/imageSign'
  import inspectfileApi from '@/api/file/inspectfile'

  export default {
    name: "signList",
    data() {
      return {
        delLoading: false,
        cityList: [],
        cancelMarkLoading: false,
        addIndex: 1,
        ruleForm: {
          questionId: '',
          description: ''
        },
        loading: false,
        boxHeight: '',
        selectId: '',
        saveLoading: false,
        uploadLoading: false,
        status: '',
        originalImg: '',
        leftImgList: [],
        rightImgList: []
      }
    },
    props: {
      documentList: {
        type: Object,
        default() {
          return {};
        }
      },
      signImageDetail: {
        type: Object,
        default() {
          return {};
        }
      },
      questionList: {
        type: Array,
        default() {
          return [];
        }
      },
      btnRule: {
        type: Array,
        default() {
          return [];
        }
      },
      isAdmin: {
        type: Boolean,
        default() {
          return false;
        }
      }
    },
    components: {imageSign},
    created() {
      this.boxHeight = document.body.clientHeight - 130
      this.borderHeight = document.body.clientHeight - 210
      this.leftImgList = this.signImageDetail.imgList.filter(child => child.status == 2)
      this.rightImgList = this.signImageDetail.imgList.filter(child => child.status == 1)
      if (this.leftImgList.length > 0) {
        let child = this.leftImgList[0]
        this.selectId = child.id
        this.originalImg = child.src
        this.status = child.status
        this.ruleForm = {
          questionId: child.question_id,
          description: child.description
        }
        if (this.$refs['ruleForm']) {
          this.$refs['ruleForm'].resetFields()
        }
      } else {
        this.originalImg = ''
        this.status = ''
        this.selectId = ''
        this.ruleForm = {
          questionId: '',
          description: ''
        }
      }
    },
    mounted() {
    },
    methods: {
      del() {
        if (this.selectId) {
          this.$confirm('确定要删除吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.delLoading = true
            inspectfileApi.dropPic({id: this.selectId}).then(res => {
              this.delLoading = false
              this.$message({
                type: 'success',
                message: '删除成功！'
              })
              let filterList = this.leftImgList
              if(this.status==1){
                filterList=this.rightImgList
              }
              if(filterList.length==1){
                this.selectId=''
              }else{
                let addIndex = ''
                for(let i = 0;i<filterList.length;i++){
                  if(filterList[i].id==this.selectId){
                    addIndex = i
                  }
                }
                if(addIndex==filterList.length-1){
                  addIndex = addIndex-1
                }else{
                  addIndex = addIndex+1
                }
                this.selectId=filterList[addIndex].id
              }
              this.getDetail()
              if (this.$refs['ruleForm']) {
                this.$refs['ruleForm'].resetFields()
              }
              this.getDetail()
            }).catch(e => {
              this.delLoading = false
            })
          })
        }
      },
      cancelMark() {
        if (this.selectId) {
          this.$confirm('确定要取消标记吗', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.cancelMarkLoading = true
            inspectfileApi.cancelMark({id: this.selectId}).then(res => {
              this.cancelMarkLoading = false
              this.$message({
                type: 'success',
                message: '取消标记成功！'
              })
              if(this.rightImgList.length==1){
                this.selectId=''
              }else{
                let addIndex = ''
                for(let i = 0;i<this.rightImgList.length;i++){
                  if(this.rightImgList[i].id==this.selectId){
                    addIndex = i
                  }
                }
                if(addIndex==this.rightImgList.length-1){
                  addIndex = addIndex-1
                }else{
                  addIndex = addIndex+1
                }
                this.selectId=this.rightImgList[addIndex].id
              }
              this.getDetail()
            }).catch(e => {
              this.cancelMarkLoading = false
            })
          })
        }
      },
      cancelBak() {
        this.$emit('cancelBak')
      },
      eliminate() {
        this.$refs.imageSign.init()
      },
      uploadImg() {
        if (this.selectId) {
          this.uploadLoading = true
          this.$emit('uploadImg', this.selectId, this.originalImg)
        }
      },
      getDetail() {
        this.loading = true
        this.originalImg = ''
        this.ruleForm = {
          questionId: '',
          description: ''
        }
        inspectfileApi.setMark({id: this.signImageDetail.taskId}).then(res => {
          this.signImageDetail.imgList = res.data.filter(item => item.file_document == this.signImageDetail.selectType)
          let child = this.signImageDetail.imgList.find(item => item.id == this.selectId)
          if (child) {
            this.originalImg = child.src
            this.status = child.status
            this.ruleForm = {
              questionId: child.question_id,
              description: child.description
            }
            if (this.$refs['ruleForm']) {
              this.$refs['ruleForm'].resetFields()
            }
          } else {
            this.originalImg = ''
            this.status = ''
          }
          this.leftImgList = this.signImageDetail.imgList.filter(child => child.status == 2)
          this.rightImgList = this.signImageDetail.imgList.filter(child => child.status == 1)
          this.loading = false
          if (this.$refs['ruleForm']) {
            this.$refs['ruleForm'].resetFields()
          }
        }).catch(e => {
          this.loading = false
        })
      },
      saveSign(formName) {
        if (this.selectId) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let isSign = window.sessionStorage.getItem('isSign')
              if (isSign === 'true'||this.status==1) {
                let canvas = document.getElementById('imageSign');
                let base64Img = canvas.toDataURL('image/jpeg');
                let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
                ruleForm.img = base64Img
                ruleForm.id = this.selectId
                this.saveLoading = true
                inspectfileApi.savePic(ruleForm).then(res => {
                  this.$message({
                    type: 'success',
                    message: '保存成功！'
                  })
                  if(this.status!=1){
                    if(this.leftImgList.length==1){
                      this.selectId=''
                    }else{
                      let addIndex = ''
                      let leftImgList=JSON.parse(JSON.stringify(this.leftImgList))
                      for(let i = 0;i<leftImgList.length;i++){
                        if(leftImgList[i].id==this.selectId){
                          addIndex = i
                        }
                      }
                      if(addIndex==leftImgList.length-1){
                        addIndex = addIndex-1
                      }else{
                        addIndex = addIndex+1
                      }
                      this.selectId=leftImgList[addIndex].id
                    }
                  }
                  let me=this
                  this.$nextTick(function () {
                    me.getDetail()
                  })
                  this.saveLoading = false
                }).catch(e => {
                  this.saveLoading = false
                })
              } else {
                this.$message.error({
                  message: '请先标记图片再保存'
                })
              }
            }
          })

        }
      },
      btnClick(type) {
        let index = 0
        let list = this.leftImgList
        if (this.status == 1) {
          list = this.rightImgList
        }
        for (let i = 0; i < list.length; i++) {
          if (list[i].id == this.selectId) {
            index = i
            break
          }
        }
        if (type == 1) {
          if (index != 0) {
            this.imgClick(list[index - 1])
          }
        } else {
          let length = list.length
          if (index != length - 1) {
            this.imgClick(list[index + 1])
          }
        }
      },
      imgClick(data) {
        this.originalImg = ''
        let me = this
        this.$nextTick(function () {
          me.selectId = data.id
          me.originalImg = data.src
          me.status = data.status
          this.ruleForm = {
            questionId: data.question_id,
            description: data.description
          }
          if (this.$refs['ruleForm']) {
            this.$refs['ruleForm'].resetFields()
          }
        })
      }
    }
  }
</script>

<style lang="less">
  .sign-list {
    .image-box {
      overflow-x: hidden;
      overflow-y: auto;
      margin-top: 20px;
      width: 100%;
      background-color: #fff;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
      display: flex;
      justify-content: space-between;

      .center-box {
        display: flex;
        align-items: center;

        .el-button {
          padding: 40px 15px !important;
          font-size: 17px !important;
        }
      }

      .box-border {
        margin-right: 20px;
        margin-left: 20px;
        flex: 1;

        > div:first-child {
          text-align: center;
          margin-top: 20px;
        }

        > div:last-child {
          margin-top: 20px;
          border: 1px solid #eaeaea;
          overflow-y: auto;
          padding-right: 15px;
          cursor: pointer;

          > div {
            width: 70px;
            height: 70px;
            float: left;
            margin-top: 15px;
            margin-left: 15px;
            border: 2px solid #eaeaea;

            > img {
              width: 70px;
              height: 70px;
            }
          }
        }
      }
    }
  }
</style>
