<template>
  <div class="container">
    <div class="header">
      <el-form :model="form" ref="queryForm" inline size="small">
        <el-form-item label="工程名称" prop="proName">
          <el-input v-model="form.proName" placeholder="请输入工程名称" clearable v-no-whitespace></el-input>
        </el-form-item>
        <el-form-item label="时间" prop="timeRange">
          <el-date-picker
            v-model="form.timeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            clearable
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择状态" clearable>
            <el-option
              v-for="dict in statusOptions"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="li_content">
      <el-table :data="list" v-loading="loading"  fit highlight-current-row style="width: 100%">
        <el-table-column
          type="index"
          width="85"
          label="序号"
          align="center"
          :index="indexContinuous(form.pageNum, form.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-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="mini" v-if="scope.row.status === '已保存'" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="mini" v-if="scope.row.status === '已保存'" @click="handleChangeRegulations(scope.row)">转违章</el-button>
            <el-button type="text" size="mini" v-if="scope.row.status === '已保存'" @click="handleRecirculation(scope.row)">转隐患</el-button>
            <el-button type="text" size="mini" v-if="scope.row.status === '已保存'" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="form.pageNum"
        :limit.sync="form.pageSize"
        @pagination="getList"
      />
    </div>
    <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-dialog title="我的随手拍" :visible.sync="dialogVisible" width="50%" style="height: 90vh" center :destroy-on-close="true">
     <el-form label-width="100px" :model="dialogForm" ref="detailForm" v-if="dialogVisible">
        <el-form-item label="工程名称" prop="proName">
          <el-input v-model="dialogForm.proName" disabled></el-input>
        </el-form-item>
       <el-form-item label="拍摄时间" prop="createTime">
         <el-input v-model="dialogForm.createTime" disabled></el-input>
       </el-form-item>
        <el-form-item label="问题描述" prop="description">
          <el-input type="textarea" v-model="dialogForm.description" maxlength="200"
                    show-word-limit :style="{width: '96%'}" v-no-whitespace></el-input>
        </el-form-item>
        <el-form-item label="拍摄照片" prop="photoList">
          <el-upload
            action="#"
            accept="image/*"
            :auto-upload="false"
            list-type="picture-card"
            :file-list="dialogForm.photoList"
            :on-change="handleUpFile"
            :on-exceed="handleExceedFile"
            :on-remove="handleDelete"
            :limit="9"
            :class="{ disabled: dialogForm.photoList.length >= 9 }"
            :multiple="true"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item style="position: absolute;top: 90%;left: 70%;display: flex;flex-direction: row">
          <el-button type="primary" @click="handleSave" v-preventReClick="5000">保存</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import { indexContinuous, lookFaceFile, parseTime } from '@/utils/bonus'
import {
  delSnapshot,
  getMySnapshotList,
  updateSnapshot,
  updateSnapshotStatus
} from '@/api/snapshot/snapshot'

export default {
  name: 'takePhoto',
  data() {
    return {
      loading:true,
      currentPage: 1,
      pageSize: 8,
      total: 0,
      statusOptions: [
        { label: '已保存', value: '1' },
        { label: '已转违章', value: '2' },
        { label: '已转隐患', value: '3' }
      ],
      form: {
        pageNum: 1,
        pageSize: 10,
        noticeTitle: '',
        timeRange: [],
        status: ''
      },
      list: [],
      tableColumns: [
        { label: '拍摄工程', prop: 'proName' },
        { label: '问题描述', prop: 'description' },
        { label: '照片', prop: 'photoNum' },
        { label: '拍摄时间', prop: 'createTime' },
        { label: '当前状态', prop: 'status' },
        { label: '审批状态', prop: 'intoStatus' },
      ],
      dialogVisible: false,
      photoOpen: false,
      initialIndex: 0,
      lookFaceFile:'',
      photoList: [],
      row: {},
      dialogForm: {
        proName: '',
        createTime: '',
        description: '',
        photoList: []
      },
      delIds: []
    }
  },
  created() {
    this.lookFaceFile = lookFaceFile()
    this.getList()
  },
  methods: {
    indexContinuous,
    openPreview(row) {
      console.log(row)
      this.photoList = row.photoList
      this.photoOpen = true
    },
    getList() {
      const param = {
        ...this.form,
        startTime: parseTime(this.form.timeRange[0], '{y}-{m}-{d}'),
        endTime: parseTime(this.form.timeRange[1], '{y}-{m}-{d}'),
        userId: this.$store.state.user.userId
      }
      getMySnapshotList(param).then(res => {
        console.log(res)
        this.loading = false
        this.list = res.rows
        this.total = res.total
      })
    },
    handleEdit(item) {
      this.dialogForm.proName = ''
      this.dialogForm.createTime = ''
      this.dialogForm.description = ''
      this.dialogForm.photoList = []
      this.dialogForm = Object.assign({}, this.dialogForm, item)
      this.dialogVisible = true
    },
    handleChangeRegulations(item) {
      this.$confirm('确定转违章吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateSnapshotStatus({snapshotId: item.snapshotId, status: 2}).then(() => {
          this.$message({
            type: 'success',
            message: '转违章成功!'
          });
          this.getList();
        });
      }).catch(() => {
      });
    },
    handleRecirculation(item) {
      this.$confirm('确定转隐患吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() =>{
        updateSnapshotStatus({snapshotId: item.snapshotId, status: 3}).then(() => {
          this.$message({
            type: 'success',
            message: '转隐患成功!'
          });
          this.getList()
        });
      }).catch(() => {
      })
    },
    handleDel(item) {
      this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() =>{
        delSnapshot({snapshotId: item.snapshotId})
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getList()
      }).catch(() => {
      })
    },
    handleSearch() {
      this.loading = true
      this.getList()
    },
    handleReset() {
      this.loading = true
      this.$refs.queryForm.resetFields()
      this.getList()
    },
    handleUpFile(file, fileList) {
      if (file.size > 10 * 1024 * 1024) {
        setTimeout(() => {
          this.$message.error('上传图片大小不能超过10M')
        }, fileList.length + 100)
        // 删除超过10M的图片
        fileList.pop()
        return
      }
      // 超过9个文件 提示
      if (fileList.length > 9) {
        this.$message({
          type: 'danger',
          message: '保存成功!'
        })
        return
      }
      this.dialogForm.photoList = fileList
    },
    handleExceedFile() {
      this.$message.warning('最多上传9张图片')
    },
    handleDelete(file, fileList) {
      if (file.fileId){
        this.delIds.push(file.fileId)
      }
      this.dialogForm.photoList = fileList
    },
    handleSave() {
      let formData = new FormData()
      this.dialogForm.photoList.forEach((file) => {
        if (file.raw) {
          formData.append('files[]', file.raw)
        }else{
          formData.append('files[]', new Blob())
        }
      })
      this.dialogForm.delIds = this.delIds.join(',')
      formData.append('params', JSON.stringify(this.dialogForm))
      updateSnapshot(formData).then(() => {
        this.$message({
          type: 'success',
          message: '保存成功!'
        })
        this.getList()
        this.dialogVisible = false
      }).catch(() => {
      })
     .catch(() => {
      })
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  padding: 20px;
}

.li_content {
  padding: 20px;
}

.li_item {
  height: 5vh;
}

.li_item_title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.line {
  width: 100%;
  height: 1px;
  background-color: #e8e8e8;
}
.photo_container{
  height: 75vh;
  width: 100%;

  ::v-deep.el-carousel__container {
    position: relative;
    height: 75vh!important;
  }
}
::v-deep.disabled {
  .el-upload--picture-card {
    display: none;
  }
}
</style>
