<template>
  <basic-container class="AssessmentArea">
    <div>
      <el-select
        v-model="userId"
        placeholder="请选择"
        clearable
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
      <el-date-picker
        class="marleft20 marright20"
        v-model="time"
        type="datetimerange"
        align="right"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format='yyyy-MM-dd HH:mm:ss'
        :default-time="['00:00:00', '23:59:59']"
      >
        >
      </el-date-picker>
      <el-button
        type="primary"
        @click="search()"
      >搜索</el-button>
    </div>
    <el-table
      class="martop20"
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        prop="createTime"
        label="考核时间"
      >
      </el-table-column>
      <el-table-column
        prop="assessmentMoney"
        label="考核金额（元）"
      >
      </el-table-column>
      <el-table-column
        prop="assessmentContent"
        label="考核原因"
      >
      </el-table-column>
      <el-table-column
        prop="projectName"
        label="项目"
      >
      </el-table-column>
      <el-table-column
        prop="contractName"
        label="合同段"
      >
      </el-table-column>
      <el-table-column
        prop="userOpinionId"
        label="消息ID"
      >
      </el-table-column>
      <el-table-column
        prop="opinionContent"
        label="问题描述"
      >
      </el-table-column>
      <el-table-column
        prop="fileUrlList"
        label="图片"
      >
        <template slot-scope="scope">
          <el-button v-if="scope.row.fileUrlList.length > 0" @click="openPreview(scope.row.fileUrlList, scope.$index)">图片</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="CancelAppraisal(scope.row)"
            v-if="scope.row.operation"
          >取消考核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="martop20 flexEnd"
      layout="prev, pager, next"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-size="pagesize"
    >
    </el-pagination>
  </basic-container>
</template>

<script>
import { queryUserAssessmentPage, cancelAssessment, findMaintenanceUser, queryAllUserAssessmentContent } from "@/api/AssessmentArea/AssessmentArea.js";
export default {
  data () {
    return {
      userId: '',
      options: [],
      time: [],
      tableData: [],
      total: 0,
      pageIndex: 1,
      pagesize: 10,
    }
  },
  methods: {
    //#region 分页
    handleSizeChange (val) {//
      this.pagesize = val
      this.queryUserAssessmentPage()
    },
    handleCurrentChange (val) {//
      this.pageIndex = val
      this.queryUserAssessmentPage()
    },
    //#endregion

    //#region table表
    search () {//搜索
      this.pageIndex = 1
      this.queryUserAssessmentPage()
    },
    CancelAppraisal (row) {//取消考核
      console.log(row);
      // let _that = this
      this.$confirm('是否确认取消考核', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.cancelAssessment(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //#endregion

    openPreview (imageUrl, index) {
      let imageUrls = []
      imageUrl.forEach(val => {
        imageUrls.push({ url: val })
      });
      this.$ImagePreview(imageUrls, index, {
        closeOnClickModal: true,
        // beforeClose:()=>{
        //   this.$message.success('关闭回调')
        // }
      });
    },

    //#region 接口
    async queryUserAssessmentPage () {//分页获取
      let times = []
      if (this.time) {
        times = this.time
      }
      const { data: res } = await queryUserAssessmentPage({
        startTime: times[0],
        endTime: times[1],
        userId: this.userId,
        size: this.pagesize,
        current: this.pageIndex
      })
      console.log(res);
      if (res.code == 200) {
        this.tableData = res.data.records
        this.total = res.data.total
      }
    },
    async cancelAssessment (row) {//取消考核
      const { data: res } = await cancelAssessment({
        id: row.assessmentId,
      })
      console.log(res);
      if (res.code == 200) {
        this.$message({
          type: 'success',
          message: '取消考核成功!'
        });
        this.queryUserAssessmentPage()
      }
    },
    async findMaintenanceUser () {//获取所有维护人员
      const { data: res } = await findMaintenanceUser()
      console.log(res);
      if (res.code == 200) {
        this.options = res.data
      }
    },
    async queryAllUserAssessmentContent () {//条形图数据
      const { data: res } = await queryAllUserAssessmentContent()
      console.log(res);
    },
    //#endregion
  },
  created () {
    this.findMaintenanceUser()
    this.queryUserAssessmentPage()

    // this.queryAllUserAssessmentContent()
  }
}
</script>
<style lang="scss" scoped>
</style>
