<template>
  <div class='container'>
    <div class='handle-box'>
      <el-form :inline='true'>
        <el-form-item>
          <el-input
              v-model='searchForm.inspectionPersonnel'
              placeholder='请输入巡检人员'
              clearable>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-input
              v-model='searchForm.meetingTitle'
              placeholder='请输入会议标题'
              clearable>
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click='loadData'>搜索</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
        ref='inspectionResultTable'
        :data='tableData'
        tooltip-effect='dark'
        style='width: 100%'
        border
        stripe>
      <el-table-column
          type='index'
          label='序号'
          width='50'>
      </el-table-column>

      <el-table-column
          prop='meetingTitle'
          label='会议标题'
          :show-overflow-tooltip='true'>
        <template slot-scope='scope'>
          {{scope.row.meetingTitle ? scope.row.meetingTitle : '无'}}
        </template>
      </el-table-column>

      <el-table-column
          prop='inspectionType'
          align='center'
          label='巡检类型'>
        <template slot-scope='scope'>
          <el-tag size='small' v-if='scope.row.inspectionType == 10' type='info'>日常巡检</el-tag>
          <el-tag size='small' v-else-if='scope.row.inspectionType == 20' type='success'>会议巡检</el-tag>
        </template>
      </el-table-column>

      <el-table-column
          prop='inspectionPersonnel'
          label='巡检人员'>
      </el-table-column>

      <el-table-column
          prop='createTime'
          label='创建时间'>
      </el-table-column>

      <el-table-column
          prop='icon'
          fixed='right'
          width='180px'
          label='操作'>
        <template slot-scope='scope'>
          <el-button type='text' @click='showDetails(scope.row)'>查看详情</el-button>
          <el-divider direction='vertical'></el-divider>
          <template>
            <el-popconfirm title='确定删除这条数据吗？' @confirm='delHandle(scope.row.id)'>
              <el-button type='text' slot='reference'>删除</el-button>
            </el-popconfirm>
          </template>
        </template>
      </el-table-column>

    </el-table>

    <el-pagination
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        layout='total, sizes, prev, pager, next, jumper'
        :page-sizes='[10, 20, 50, 100]'
        :current-page='current'
        :page-size='size'
        :total='total'>
    </el-pagination>
    <InspectionDetails ref="inspectionDetails"></InspectionDetails>
  </div>
</template>

<script>
import InspectionDetails from "./components/inspectionDetails"

export default {
  name: 'inspectionResult',
  components: {InspectionDetails},
  data() {
    return {
      searchForm: {
        inspectionPersonnel: '',
        meetingTitle: ''
      },
      delBtlStatu: true,
      total: 0,
      size: 10,
      current: 1,
      tableData: [],
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$axios.get('/api/inspection/record/list', {
        params: {
          inspectionPersonnel: this.searchForm.inspectionPersonnel,
          meetingTitle: this.searchForm.meetingTitle,
          current: this.current,
          size: this.size
        }
      }).then(res => {
        this.tableData = res.data.data.records;
        this.size = res.data.data.size;
        this.current = res.data.data.current;
        this.total = res.data.data.total;
      });
    },
    delHandle(id) {
      this.$axios.post('/api/inspection/record/deleteById?id=' + id).then(res => {
        this.loadData();
        this.$notify({
          showClose: true,
          message: '恭喜你，操作成功',
          type: 'success'
        });
      });
    },
    handleSizeChange(val) {
      this.size = val;
      this.loadData();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.loadData();
    },
    showDetails(row) {
      this.$refs['inspectionDetails'].show(row)
    }
  }
};
</script>

<style scoped>

</style>
