<template>
  <div style="margin: 0px 15px">
    <div class="patolDivTwo">
      <el-input
        class="inspePlanInput"
        v-model="inspePlanInput"
        placeholder="按名称或编号搜索"
        @input="listSelect()"
      />
      <span class="inspePlanSpan">状态：</span>
      <div @change="listSelect()">
        <el-radio v-model="radio" :label="3">所有</el-radio>
        <el-radio v-model="radio" :label="0">注销</el-radio>
        <el-radio v-model="radio" :label="1">进行中</el-radio>
        <el-radio v-model="radio" :label="2">已完成</el-radio>
      </div>
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        stripe
        :header-cell-style="headClass"
        :height="Height"
      >
        <el-table-column
          prop="inspectionSchemeName"
          label="巡检计划名称"
          width=""
        ></el-table-column>
        <el-table-column
          prop="schemeStartDate"
          label="计划开始日期"
          width=""
        ></el-table-column>
        <el-table-column
          prop="schemeEndDate"
          label="计划结束日期"
          width=""
        ></el-table-column>
        <el-table-column
          prop="inspectionCycleNumber"
          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="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, onMounted, ref } from 'vue'
import * as api from '@/api/dataManage/patrolPlan'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'patolPlan',
  components: {},
  props: {},
  setup(props, context) {
    const radio = ref(3)
    const total = ref(0)
    const pageSize = ref(15)
    const currentPage = ref(1)
    const tableData = ref([])
    const inspePlanInput = ref('')

    props
    const Update = (row) => {
      console.log('', row)
    }
    const Select = (row) => {
      context.emit('selectBool', false)
      console.log('', row)
    }
    const stop = (row) => {
      console.log('', row)
    }

    function listSelect() {
      api
        .patrolInspectionSchemeList({
          status: radio.value,
          inspectionSchemeName: inspePlanInput.value,
          size: pageSize.value,
          current: currentPage.value,
        })
        .then((requset) => {
          if (requset.status === 'SUCCESS') {
            total.value = requset.data.total
            tableData.value = requset.data.records
          } else {
            ElMessage.error(requset.msg)
          }
        })
      console.log()
    }

    onMounted(() => {
      listSelect()
    })

    const handleSizeChange = (val) => {
      console.log(`${val} items per page`)
    }
    const handleCurrentChange = (val) => {
      console.log(`current page: ${val}`)
    }

    const Height = ref(0)
    Height.value = window.innerHeight - 300 + 'px'
    window.addEventListener('resize', () => {
      Height.value = window.innerHeight - 300 + 'px'
    })
    // 表头样式设置
    const headClass = () => {
      return 'background:#FAFAFA !important;color: black;'
    }
    return {
      listSelect,
      handleSizeChange,
      handleCurrentChange,
      headClass,
      Update, //修改事件
      Select, //查询事件
      stop, //暂停事件

      inspePlanInput,
      input: ref(''),
      radio,
      total,
      currentPage,
      pageSize,
      Height,
      tableData,
    }
  },
})
</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>