<template>
  <div style="margin: 0px 15px">
    <div class="patolDivTwo">
      <span class="inspePlanSpan">巡检计划：</span>
      <el-select
        v-model="selectValue"
        clearable
        placeholder=""
        class="inspePlanSelect"
      >
        <el-option
          v-for="item in selectOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </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="">
          <template #default="scope">
            <div class="demo-progress">
              <el-progress :percentage="scope.row.state" />
            </div>
          </template>
        </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="100">
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              style="color: #409eff"
              @click.prevent="select(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>
    <select-Dialog :flag="dialog" @dialog="showDialog"></select-Dialog>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import selectDialog from '../dialog/select.vue'

export default defineComponent({
  name: 'patolPlan',
  components: { selectDialog },
  props: {},
  setup() {
    const dialog = ref(false)
    const select = (row) => {
      console.log('', row)
      dialog.value = true
    }
    const showDialog = (value) => {
      dialog.value = value
    }

    // 表头样式设置
    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 {
      dialog,
      showDialog,
      currentPage: ref(1),
      handleSizeChange,
      handleCurrentChange,
      headClass,
      select, //查看事件
      tableData: [
        {
          reportName: '05-01',
          reportDate: 'Tom',
          proposal: '',
          mailbox: '',
          state: 50,
        },
      ],
      selectValue: ref(1),
      selectOptions: ref([
        {
          value: 1,
          label: '所有',
        },
      ]),
    }
  },
})
</script>

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