<template>
  <div if="review-table">
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item label="任务单号">
        <el-input clearable v-model="searchParam.inspectNo" size="small" placeholder="请输入任务单号" style="width: 150px"/>
      </el-form-item>
      <el-form-item label="河道名称">
        <el-input clearable v-model="searchParam.driverName" size="small" placeholder="请输入河道名称" style="width: 150px"/>
      </el-form-item>
      <el-form-item label="区划">
        <driverAreaSelect v-model="searchParam.driverArea"></driverAreaSelect>
      </el-form-item>
      <el-form-item label="巡检开始时间">
        <el-date-picker
          style="width: 220px"
          placeholder="巡检开始时间"
          clearable
          size="small"
          value-format="yyyy-MM-dd"
          v-model="searchParam.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button :loading="tableLoading" icon="el-icon-search" @click="search" size="small" type="primary">搜索
        </el-button>
        <el-button icon="el-icon-refresh-right" @click="initSearchParam();search()"
                   type="primary" size="small"
                   style="background-color: #fff; border: 1px solid #ccc ; color: #666">清空
        </el-button>
      </el-form-item>
    </el-form>
    <el-table stripe ref="table"
              :height="tableHeight" v-loading="tableLoading" :data="dataList" border
              row-key="id">
      <el-table-column width="50" show-overflow-tooltip prop="id" label="编号" align="center"/>
      <el-table-column width="130" show-overflow-tooltip prop="inspectNo" label="任务单号" align="center"/>
      <el-table-column width="70" show-overflow-tooltip prop="num" label="行号" align="center"/>
      <el-table-column show-overflow-tooltip prop="driverName" label="河道名称" align="center"/>
      <el-table-column show-overflow-tooltip prop="driverAreaText" label="区划" align="center"/>
      <el-table-column width="80" show-overflow-tooltip prop="totalNum" label="图片数量" align="center"/>
      <el-table-column width="120" show-overflow-tooltip label="未复核/已复核" align="center">
        <template slot-scope="scoped">
          {{scoped.row.unreviewNum}}/{{scoped.row.reviewNum}}
        </template>
      </el-table-column>
      <el-table-column width="120" show-overflow-tooltip label="有效/无效" align="center">
        <template slot-scope="scoped">
          {{scoped.row.effectiveNum}}/{{scoped.row.unEffectiveNum}}
        </template>
      </el-table-column>
      <el-table-column width="160" show-overflow-tooltip prop="formatReviewTime" label="复核时间" align="center"/>
      <el-table-column width="100" show-overflow-tooltip prop="formatReviewUser" label="复核人" align="center"/>
      <el-table-column v-if="activeName==2||isAdmin||btnRule.some(btn=>btn=='reviewPic'||btn=='reviewFinish')"
                       label="操作" align="left"
                       :width="activeName==2?100:200">
        <template slot-scope="{row}">
          <el-button :loading="updateLoading" v-if="activeName==1&&(isAdmin||btnRule.some(btn=>btn=='reviewPic'))"
                     @click="updateItem(row)" type="primary" size="mini" icon="el-icon-setting">复核图片
          </el-button>
          <el-button @click="reviewFinishClick(row.id)" :loading="reviewFinishLoading"
                     v-if="activeName==1&&(isAdmin||btnRule.some(btn=>btn=='reviewFinish'))" type="success" size="mini"
                     icon="el-icon-setting">复核完成
          </el-button>
          <el-button @click="updateItem(row,2)" v-if="activeName==2" size="mini" type="primary"
                     icon="el-icon-document">详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-current">
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        prev-text="上一页"
        next-text="下一页"
        background
        layout="total, prev, pager, next, jumper"
        style="display: inline-block;"
        :total="count"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-drawer
      title="图片复核"
      v-if="visible"
      :visible.sync="visible"
      :direction="direction"
      :size="drawerWidth"
      :before-close="handleClose">
      <el-table :data="dialogDataList" border row-key="id">
        <el-table-column show-overflow-tooltip prop="driverName" label="河道名称" align="center"/>
        <el-table-column show-overflow-tooltip prop="driverAreaText" label="区属" align="center"/>
        <el-table-column width="180" show-overflow-tooltip prop="formatExecutionTime" label="巡检时间" align="center"/>
        <el-table-column show-overflow-tooltip prop="totalNum" label="图片数量" align="center"/>
        <el-table-column show-overflow-tooltip label="未复核/已复核" align="center">
          <template slot-scope="scoped">
            {{scoped.row.unreviewNum}}/{{scoped.row.reviewNum}}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip label="有效/无效" align="center">
          <template slot-scope="scoped">
            {{scoped.row.effectiveNum}}/{{scoped.row.unEffectiveNum}}
          </template>
        </el-table-column>
        <el-table-column v-if="!dialogType" label="操作" align="left" width="90">
          <template slot-scope="{row}">
            <el-button @click="review(row)" :loading="reviewLoading" type="primary" size="mini" icon="el-icon-setting">
              复核
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="imgList&&imgList.length>0"
           style="margin-top: 15px;font-size: 16px;font-weight: bold;text-align: right">
        已选中{{getCheckNum}}张(有效{{getOneNum}}张，无效{{getTwoNum}}张)
      </div>
      <el-card v-if="item.data&&item.data.length>0" :key="index" v-for="(item,index) in imgList" class="box-card">
        <div slot="header" class="clearfix">
          <span>{{item.name}}</span>
        </div>
        <div class="imgList">
          <div :key="index" v-for="(imgChild,index) in item.data" class="box_s">
            <img @click="imgClick(imgChild.id)" v-lazy="imgChild.src">
            <div>
              <el-radio-group :disabled="dialogType?true:false" v-model="imgChild.is_effective">
                <el-radio-button :label="parseInt(1)">有效</el-radio-button>
                <el-radio-button style="margin-left: 20px" :label="parseInt(2)">无效</el-radio-button>
              </el-radio-group>
            </div>
          </div>
        </div>
      </el-card>
    </el-drawer>
    <el-dialog v-if="imgVisible" :close-on-press-escape="false" :close-on-click-modal="false" class="img-dialog"
               top="5vh" center
               :visible.sync="imgVisible" title="图片复核">
      <viewer>
        <div class="center-box">
          <el-button @click="btnClick(1)"><</el-button>
          <div :key="index" v-if="data&&data.data&&data.data.length>0" v-for="(data,index) in imgList">
            <img :key="zIndex" v-for="(child,zIndex) in data.data"
                 :style="{width:(imgWidth+'px'),height:((imgWidth*0.56)+'px')}" v-show="selectImgChild.id==child.id"
                 :data-source="child.original_img" v-lazy="child.src">
            <div style="font-size: 16px;font-weight: bold;margin-top: 15px;text-align: center">
              {{getImgIndex}}/{{dialogImgList.length}}
            </div>
          </div>
          <el-button @click="btnClick(2)">></el-button>
        </div>
        <div class="box-item">
          <div>
            <div>位置：</div>
            <div :title="selectImgChild.location">{{selectImgChild.location}}</div>
          </div>
          <div>
            <div>拍摄时间：</div>
            <div><span v-if="selectImgChild.create_time">{{(selectImgChild.create_time),'yyyy-MM-dd hh:mm:ss' | datetime}}</span>
            </div>
          </div>
        </div>
        <div class="box-item">
          <div>
            <div>问题类型：</div>
            <div :title="selectImgChild.question">{{selectImgChild.question}}</div>
          </div>
          <div>
            <div>详情描述：</div>
            <div :title="selectImgChild.description">{{selectImgChild.description}}</div>
          </div>
        </div>
        <div style="position: relative">
          <el-radio-group :disabled="dialogType?true:false" class="check" v-model="selectImgChild.is_effective">
            <el-radio-button :label="parseInt(1)">有效</el-radio-button>
            <el-radio-button style="margin-left: 20px" :label="parseInt(2)">无效</el-radio-button>
          </el-radio-group>
          <el-button @click="showImg" style="position: absolute;right: 0px;bottom: 0px" size="small" type="primary">查看原图
          </el-button>
        </div>
      </viewer>
    </el-dialog>
  </div>
</template>

<script>
  import inspectfileApi from '@/api/file/inspectfile'
  import driverAreaSelect from '@/components/driverAreaSelect'
  import {mapGetters} from "vuex";


  export default {
    name: "review-table",
    data() {
      return {
        drawerWidth: (document.body.clientWidth - 190) + 'px',
        direction: 'rtl',
        selectImgChild: {},
        dialogImgList: [],
        imgVisible: false,
        reviewLoading: false,
        dialogDataList: [],
        visible: false,
        reviewFinishLoading: false,
        dataList: [],
        imgWidth: '',
        currentPage: 1,
        count: 0,
        imgList: [],
        pageSize: parseInt((document.body.clientHeight - 320 - 43) / 44.5),
        tableHeight: document.body.clientHeight - 320,
        tableLoading: false,
        dialogType: 0,
        searchParam: {
          inspectNo: '',
          driverName: '',
          driverArea: '',
          time: '',
        },
        updateLoading: false,
      }
    },
    created() {
      this.imgWidth = (document.body.clientWidth / 2) - 105
    },
    components: {driverAreaSelect},
    computed: {
      ...mapGetters(["btnRule", "isAdmin"]),
      getImgIndex() {
        let index = 0
        for (let i = 0; i < this.dialogImgList.length; i++) {
          if (this.dialogImgList[i].id == this.selectImgChild.id) {
            index = i
            break
          }
        }
        return index + 1
      },
      getCheckNum() {
        return this.getOneNum + this.getTwoNum
      },
      getOneNum() {
        let i = 0
        if (this.imgList && this.imgList.length > 0) {
          this.imgList.map(item => {
            if (item.data && item.data.length > 0) {
              i += item.data.filter(child => child.is_effective == 1).length
            }
          })
        }
        return i
      },
      getTwoNum() {
        let y = 0
        if (this.imgList && this.imgList.length > 0) {
          this.imgList.map(item => {
            if (item.data && item.data.length > 0) {
              y += item.data.filter(child => child.is_effective == 2).length
            }
          })
        }
        return y
      }
    },
    mounted() {
      this.tableLoading = true
      this.getAllList()
    },
    props: {
      activeName: {
        type: String,
        default() {
          return 'index';
        }
      }
    },
    methods: {
      handleClose(hide) {
        if (hide) {
          hide()
        }
        this.visible = false
      },
      showImg() {
        window.open(this.selectImgChild.original_img)
      },
      btnClick(type) {
        let index = 0
        for (let i = 0; i < this.dialogImgList.length; i++) {
          if (this.dialogImgList[i].id == this.selectImgChild.id) {
            index = i
            break
          }
        }
        if (type == 1) {
          if (index != 0) {
            this.imgClick(this.dialogImgList[index - 1].id)
          }
        } else {
          let length = this.dialogImgList.length
          if (index != length - 1) {
            this.imgClick(this.dialogImgList[index + 1].id)
          }
        }
      },
      imgClick(id) {
        this.selectImgChild = this.dialogImgList.find(item => item.id == id)
        this.imgVisible = true
      },
      review() {
        let param = []
        this.imgList.map(item => {
          let list = item.data ? item.data : []
          list.map(img => {
            param.push({
              id: img.id,
              effective: img.is_effective
            })
          })
        })
        this.reviewLoading = true
        inspectfileApi.reviewPic(param).then(res => {
          this.reviewLoading = false
          this.visible = false
          this.tableLoading = true
          this.getAllList()
        }).catch(e => {
          this.reviewLoading = false
        })
      },
      updateItem(row, type) {
        this.dialogDataList = []
        this.imgList = []
        this.dialogType = type
        this.updateLoading = true
        inspectfileApi.getReviewPic({id: row.id}).then(res => {
          this.updateLoading = false
          this.visible = true
          this.imgList = res.data ? res.data : []
          let dialogImgList = []
          res.data.map(item => {
            let data = item.data
            if (data && data.length > 0) {
              data.map(child => {
                dialogImgList.push(child)
              })
            }
          })
          this.dialogImgList = Object.assign([], dialogImgList)
          this.$nextTick(function () {
            this.dialogDataList.push(row)
          })
        }).catch(e => {
          this.updateLoading = false
        })
      },
      reviewFinishClick(id) {
        this.$confirm('确定复核完成', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.reviewFinishLoading = true
          inspectfileApi.reviewFinish({id: id}).then(res => {
            this.$message({
              type: 'success',
              message: '复核完成！'
            })
            this.reviewFinishLoading = false
            this.tableLoading = true
            this.getAllList()
          }).catch(e => {
            this.reviewFinishLoading = false
          })
        }).catch(() => {
        })
      },
      initSearchParam() {
        this.searchParam = {
          inspectNo: '',
          driverName: '',
          driverArea: '',
          time: ''
        }
      },
      search() {
        this.currentPage = 1
        this.tableLoading = true
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.getAllList()
      },
      handleCurrentChange(val) {
        this.tableLoading = true
        this.currentPage = val
        this.$refs.table.bodyWrapper.scrollTop = 0;
        this.getAllList()
      },
      getAllList() {
        let searchParam = JSON.parse(JSON.stringify(this.searchParam))
        if (searchParam.time && searchParam.time.length > 0) {
          searchParam.inspectTime = searchParam.time[0] + '~' + searchParam.time[1]
        }
        delete searchParam.time
        searchParam.page = this.currentPage
        searchParam.pageSize = this.pageSize
        searchParam.type = this.activeName
        inspectfileApi.getReview(searchParam).then(res => {
          this.dataList = res.data.records ? res.data.records : []
          this.count = res.data.total
          this.tableLoading = false
        }).catch(e => {
          this.dataList = []
          this.tableLoading = false
        })
      },
    }
  }
</script>

<style lang="less">
  .img-dialog {
    .el-dialog {
      width: 50% !important;

      .el-dialog__body {
        padding: 10px !important;

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

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

        .check {
          margin-top: 20px;
          display: flex;
          justify-content: center;

          .el-radio-button__inner {
            border-left: 1px solid #DCDFE6;
          }

          .el-radio-button__inner {
            padding: 12px 50px !important;
          }
        }

        .box-item {
          display: flex;
          margin-top: 15px;
          justify-content: center;

          > div {
            display: flex;
            width: 40%;
            justify-content: center;

            > div:last-child {
              flex: 1;
              margin-left: 15px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }

          > div:last-child {
            margin-left: 5%;
          }

        }
      }
    }
  }

  .el-drawer {
    .el-card {
      margin-top: 20px !important;

      .el-card__header {
        background-color: #1aa4ec !important;
        color: #fff !important;
        font-size: 16px;
      }

      .imgList {
        display: flex;
        flex-wrap: wrap;

        .box_s {
          margin: 15px;
          background-color: #eee;
          padding: 13px;
          height: 213px;

          > img {
            height: 171px;
            width: 281px;
          }
        }

        .el-radio-group {
          padding-top: 4px;

          .el-radio-button__inner {
            padding: 12px 50px !important;
          }
        }
      }
    }
  }
</style>
