<script lang="ts" setup name="ListPlan">
import { reactive, ref } from 'vue'
const listQuery = {
  supplierNo: '',
  supplierName: '',
  businessContent: '',
  offset: 1,
  limit: 10,
}
const list = ref([])
const total = ref(0)
// 表头
const columns = ref([
  {
    text: '计划编号',
    value: 'supplierNo',
    width: '160',
  },
  {
    text: '培训名称',
    value: 'supplierName',
    width: '120',
  },
  {
    text: '培训对象',
    value: 'businessContent',
  },
  {
    text: '培训人数',
    value: 'briefName',
  },
  {
    text: '培训学时',
    value: 'director',
  },
  {
    text: '培训时间',
    value: 'mobile',
  },
  {
    text: '主管部门',
    value: 'companyCity',
  },
  {
    text: '实施单位',
    value: 'createTime',
    width: '200',
  },
  {
    text: '培训内容',
    value: 'remark',
  },
  {
    text: '创建时间',
    value: 'remark',
  },
  {
    text: '备注',
    value: 'remark',
  },
])
const searchList = () => {}
const clearList = () => {}
const buttons = ref(['新建', '导出', '打印'])
const handleEdit = (index: string, row: object, type: string) => {}
const handleDelete = (index: string, row: object) => {}
const handelClick = (text: string) => {}
const handleSelectionChange = () => {}
const handleSizeChange = (val: number) => {}
const handleCurrentChange = (val: number) => {}
</script>

<template>
  <app-container>
    <search-area
      type="seperate"
      need-clear
      :icon="false"
      @search="searchList"
      @clear="clearList"
    >
      <search-item>
        <el-input
          v-model.trim="listQuery.supplierNo"
          placeholder="溯源供方编号"
          clearable
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.supplierName"
          placeholder="溯源供方名称"
          clearable
        />
      </search-item>
      <search-item>
        <el-input
          v-model.trim="listQuery.businessContent"
          placeholder="业务内容"
          clearable
        />
      </search-item>
    </search-area>
  </app-container>
  <table-container>
    <div class="table-top">
      <h3 />
      <div>
        <el-button
          v-for="(item, index) in buttons"
          :key="index"
          type="primary"
          @click="handelClick(item)"
        >
          {{ item }}
        </el-button>
        <!-- <input v-show="false" ref="fileRef" type="file" accept="pdf/*" @change="onFileChange" /> -->
      </div>
    </div>
    <el-table
      :data="list"
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="(column, index) in columns"
        :key="index"
        :label="column.text"
        :prop="column.value"
        :width="column.width"
        align="center"
      />
      <el-table-column align="center" label="操作" width="200">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            link
            @click="handleEdit(scope.$index, scope.row, '编辑')"
          >
            编辑
          </el-button>
          <el-button
            size="small"
            link
            type="primary"
            @click="handleEdit(scope.$index, scope.row, '详情')"
          >
            详情
          </el-button>
          <el-button
            size="small"
            link
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            删除
          </el-button>
          <el-button
            size="small"
            link
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            二维码
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </table-container>
  <div class="pagination">
    <el-pagination
      v-model:current-page="listQuery.offset"
      v-model:page-size="listQuery.limit"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style lang="scss" scoped>
.table-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  position: fixed;
  bottom: 0;
}
</style>