<template>
  <div style="margin: 0px 15px">
    <div class="patolDivTwo">
      <el-input
        class="inspePlanInput"
        v-model="inspePlanInput"
        placeholder="按名称或编号搜索"
      />
      <span class="inspePlanSpan">状态：</span>
      <div>
        <el-radio v-model="radio" label="1">所有</el-radio>
        <el-radio v-model="radio" label="2">进行中</el-radio>
        <el-radio v-model="radio" label="3">已完成</el-radio>
      </div>
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        stripe
        :header-cell-style="headClass"
        style="max-height: 42.5rem"
      >
        <el-table-column
          prop="reportName"
          label="计划编号"
          width=""
        ></el-table-column>
        <el-table-column
          prop="reportDate"
          label="计划名称"
          width=""
        ></el-table-column>
        <el-table-column
          prop="proposal"
          label="周期"
          width=""
        ></el-table-column>
        <el-table-column
          prop="mailbox"
          label="巡检周期"
          width=""
        ></el-table-column>
        <el-table-column
          prop="state"
          label="巡检班组"
          width=""
        ></el-table-column>
        <el-table-column
          prop="state"
          label="已执行次数"
          width=""
        ></el-table-column>
        <el-table-column prop="state" label="状态" width=""></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              style="color: #409eff"
              @click.prevent="Select(scope.row)"
            >
              查看
            </el-button>
            <span style="color: #b9b9b9">|</span>
            <el-button
              type="text"
              size="small"
              style="color: #409eff"
              @click.prevent="Update(scope.row)"
            >
              编辑
            </el-button>
            <span style="color: #b9b9b9">|</span>
            <el-button
              type="text"
              size="small"
              style="color: #409eff"
              @click.prevent="stop(scope.row)"
            >
              暂停
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="listPagination">
        <el-pagination
          v-model:currentPage="currentPage"
          :page-sizes="[15, 20, 25, 30]"
          :page-size="15"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'patolPlan',
  components: {},
  props: {},
  setup(props,context) {
    props
    const Update = (row) => {
      console.log('', row)
      
    }
    const Select = (row) => {
      context.emit('selectBool',false)
      console.log('', row)
    }
    const stop = (row) => {
      console.log('', row)
    }

    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA !important;color: black;'
    }

    const handleSizeChange = (val) => {
      console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val) => {
      console.log(`current page: ${val}`)
    }
    return {
      inspePlanInput: ref(''),
      currentPage: ref(1),
      handleSizeChange,
      handleCurrentChange,
      headClass,
      Update, //修改事件
      Select, //查询事件
      stop, //暂停事件
      input: ref(''),
      radio: ref('1'),
      tableData: [
        {
          reportName: '05-01',
          reportDate: 'Tom',
          proposal: '',
          mailbox: '',
          state: '',
        },
      ],
    }
  },
})
</script>

<style lang="scss" scoped>
.patolDivTwo {
  display: flex;
  margin-bottom: 15px;
  .inspePlanInput {
    width: 250px;
  }
  .inspePlanSpan {
    margin-left: 12px;
    line-height: 32px;
  }
  .listPagination {
    float: right;
    margin-top: 10px;
  }
}
</style>