<template>
  <div style="padding: 20px">
    <el-header>
      <el-form :inline="true" :model="searchForm" ref="queryForm" size="small">
        <el-form-item label="工程名称" prop="proName">
          <el-input v-model="searchForm.proName" placeholder="请输入工程名称" v-no-whitespace></el-input>
        </el-form-item>
        <el-form-item label="日期范围" prop="timeRange">
          <el-date-picker
            v-model="searchForm.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            clearable
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList">查询</el-button>
          <el-button @click="resetForm('queryForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-container style="display: flex;flex-direction: column">
      <el-table :data="tableList" fit highlight-current-row style="width: 100%">
        <!-- 多选 -->
        <el-table-column
          type="index"
          width="55"
          label="序号"
          align="center"
          :index="indexContinuous(searchForm.pageNum, searchForm.pageSize)"
        />
        <el-table-column
          v-for="(column, index) in tableColumns"
          show-overflow-tooltip
          :key="column.prop"
          :label="column.label"
          :prop="column.prop"
          align="center"
        >
          <!-- 插槽 -->
          <template v-slot="scope" v-if="column.prop == 'photoNum'">
            <span v-if="column.prop == 'photoNum'" @click="openPreview(scope.row)" style="color: #00afff;cursor: pointer">
              {{ scope.row.photoNum }} 张
            </span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchForm.pageNum"
        :limit.sync="searchForm.pageSize"
        @pagination="getList"
      />
      <el-dialog title="随手拍照片查看" :visible.sync="photoOpen" width="60%" style="height: 80vh;overflow:hidden;" :destroy-on-close="true">
        <div class="photo_container">
          <el-carousel :interval="5000" arrow="always" ref="carousel" :initial-index="initialIndex">
            <el-carousel-item v-for="(item, index) in photoList" :key="index">
              <img :src="`${item.filePath ? lookFaceFile+item.filePath : ''}`" style="height: 60vh;width: 100%">
            </el-carousel-item>
          </el-carousel>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import { indexContinuous, lookFaceFile } from '@/utils/bonus'
import { getMySnapshotList } from '@/api/snapshot/snapshot'

export default {
  components: { Treeselect },
  name:'snapshotDetails',
  data() {
    return {
      searchForm: {
        pageSize: 10,
        pageNum: 1,
        proName: '',
        timeRange: '',
        status: '',
      },
      total: 0,
      photoOpen: false,
      initialIndex: 0,
      photoList: [],
      deptOptions: [],
      postOptions: [],
      statusOptions: [
        { label: '已保存', value: '1' },
        { label: '已转违章', value: '2' },
        { label: '已转隐患', value: '3' }
      ],
      tableList: [],
      tableColumns: [
        { label: '工程名称', prop: 'proName' },
        { label: '问题描述', prop: 'description' },
        { label: '拍摄图片', prop: 'photoNum' },
        { label: '当前状态', prop: 'status' },
        { label: '拍摄时间', prop: 'createTime' },
      ],
      lookFaceFile: '',
      userId:''
    }
  },
  created() {
    this.lookFaceFile = lookFaceFile()
    this.userId = this.$route.query.snapshotId || ''
    this.getList()
  },
  methods: {
    lookFaceFile,
    indexContinuous,
    // 查询
    getList() {
      this.searchForm.userId = this.userId
      getMySnapshotList(this.searchForm).then(response => {
        this.tableList = response.rows
        this.total = response.total
      })
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.getList()
    },
    openPreview(item) {
      this.photoList = item.photoList
     this.photoOpen = true
    },
  }
}
</script>
<style scoped lang="scss">
.photo_container{
  height: 75vh;
  width: 100%;

  ::v-deep.el-carousel__container {
    position: relative;
    height: 75vh!important;
  }
}
</style>
