<template>
  <div style="padding: 20px">
    <el-header>
      <el-form :inline="true" :model="searchForm" ref="queryForm" class="demo-form-inline" size="small">
        <el-form-item label="账号" prop="phone">
          <el-input v-model="searchForm.phone" placeholder="请输入账号" v-no-whitespace></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="searchForm.userName" placeholder="请输入姓名" v-no-whitespace></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="intoStatus">
          <el-select v-model="searchForm.intoStatus" 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" v-loading="loading" 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-column label="操作" align="center" width="150">
          <template slot-scope="scope">
            <el-button type="text" v-if="scope.row.intoStatus === '待审批'" size="mini" @click="changeStatus(scope.row,1)">通过</el-button>
            <el-button type="text" v-if="scope.row.intoStatus === '待审批'" size="mini" @click="changeStatus(scope.row,2)">不通过</el-button>
          </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>

      <!-- 违章弹框 -->
      <transferViolationDialog ref="transferViolationDialog" @getList="getList" />
    </el-container>
  </div>
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import { indexContinuous, lookFaceFile } from '@/utils/bonus'
import { getMySnapshotList, updateAuditStatus } from '@/api/snapshot/snapshot'
import TransferViolationDialog from '@/views/snapshot/components/transferViolationDialog.vue'

export default {
  components: { TransferViolationDialog, Treeselect },
  data() {
    return {
      searchForm: {
        pageSize: 10,
        pageNum: 1,
        phone: '',
        userName: '',
        intoStatus: '',
      },
      total: 0,
      photoOpen: false,
      loading:true,
      initialIndex: 0,
      photoList: [],
      deptOptions: [],
      postOptions: [],
      statusOptions: [
        { label: '待审批', value: '1' },
        { label: '已通过', value: '2' },
        { label: '不通过', value: '3' }
      ],
      tableList: [],
      tableColumns: [
        { label: '账号', prop: 'phone' },
        { label: '姓名', prop: 'createUserName' },
        { label: '记录时间', prop: 'createTime' },
        { label: '部门', prop: 'deptName' },
        { label: '岗位', prop: 'postName' },
        { label: '工程名称', prop: 'proName' },
        { label: '问题描述', prop: 'description' },
        { label: '拍摄图片', prop: 'photoNum' },
        { label: '当前状态', prop: 'intoStatus' },
      ],
      lookFaceFile: ''
    }
  },
  created() {
    this.lookFaceFile = lookFaceFile()
    this.getList()
  },
  methods: {
    lookFaceFile,
    indexContinuous,
    // 查询
    getList() {
      this.loading = true
      this.searchForm.type = '2'
      getMySnapshotList(this.searchForm).then(response => {
        this.loading = false
        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
    },
     changeStatus(row,type){
      if (type === 1) {
        console.log('通过', row)
        this.$confirm('是否确认通过', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //TODO 跳转填写违章信息页面
          this.$refs.transferViolationDialog.openDialog({
            dialogTitle: '转违章',
            data: row
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
      } else {
        console.log('不通过', row)
        this.reject(row)
      }
    },
    reject: function(row) {
      this.$confirm('是否确认不通过', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateAuditStatus({ snapshotId: row.snapshotId, status: 3 }).then(res => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
  }
}
</script>
<style scoped lang="scss">
.photo_container{
  height: 75vh;
  width: 100%;

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