#set($a="$")
#set($b="#")
<template>
  <div class="${entity.toSimpleLowerName()}-root">
    <div class="search-form">
      <el-input v-model="search.key" placeholder="模糊搜索关键字" clearable style="width: 20em;" />
      <div style="width: 20em;"><el-date-picker v-model="daterange" value-format="YYYY-MM-DD" type="daterange"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" /></div>
      <el-button type="default" @click="handleSearch">搜索</el-button>

      <div style="flex-grow: 2;"></div>
      <el-button v-hasPermi="['${moduleName}:${entity.toSimpleLowerName()}:add']" type="primary" @click="proxy.${a}refs.addRef.open();">新增</el-button>
    </div>

    <el-table :data="list" border stripe height="100%" v-loading="loading">

#foreach($item in $entity.all)
      <el-table-column #if(!$item.show)v-if="false" #end label="${item.name}" align="center" prop="${item.toLowerName()}" />
#end
      <el-table-column label="操作" fixed="right" width="100" align="center">
        <template ${b}default="{ row }">
          <el-button-group>
            <el-button v-hasPermi="['${moduleName}:${entity.toSimpleLowerName()}:update']" type="primary" link
              @click="proxy.${a}refs.editRef.open(row);">修改</el-button>
            <el-button v-hasPermi="['${moduleName}:${entity.toSimpleLowerName()}:delete']" type="danger" link @click="handleDelete(row)">删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>

    </el-table>

    <pagination v-show="total > 0" :page-sizes="[10, 20, 50]" :total="total" v-model:page="query.current"
      v-model:limit="query.size" @pagination="loadPage" />

    <WAdd ref="addRef" @success="loadPage()" />
    <WEdit ref="editRef" @success="loadPage()" />
  </div>
</template>
<script setup>
import { ref, getCurrentInstance, watch, onMounted, computed, onUnmounted } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import * as api from '../api/${entity.toSimpleLowerName()}'
import WAdd from './components/WAdd.vue'
import WEdit from './components/WEdit.vue'


const daterange = computed({
  get() {
    return search.value.beginDate ? [search.value.beginDate, search.value.endDate] : []
  },
  set(value) {
    if (value && value[0]) {
      search.value.beginDate = value[0]
      search.value.endDate = value[1]
    } else {
      search.value.beginDate = ""
      search.value.endDate = ""
    }
  }

})

const { proxy } = getCurrentInstance()

// 搜索表单
const search = ref({})
// 查询参数
const query = ref({
  current: 1,
  size: 10,
  orderBy: '${entity.id.toLowerName()} desc'
});

// 列表数据
const list = ref([]);
// 总数据量
const total = ref(0);

// 加载状态
const loading = ref(true);

// 加载分页数据
const loadPage = async () => {
  loading.value = true
  let r = await api.doPage(query.value)
  list.value = r.data?.records || []
  total.value = Number(r.data?.total || 0)
  loading.value = false
}

// 执行搜索
const handleSearch = () => {
  query.value = { ...query.value, ...search.value }
  query.value.current = 1
  loadPage()
}

handleSearch()



const handleDelete = async (row) => {
  await ElMessageBox.confirm(`确定要删除这条记录吗?`)
  await api.doDelete(row.${entity.id.toLowerName()})
  ElMessage.success("删除成功")
  loadPage()
}




</script>
<style lang="scss" scoped>
.${entity.toSimpleLowerName()}-root {
  padding: 1rem;

  .search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0 0 .3rem 0;
    position: relative;

    &>*:not(.el-select) {
      margin: 0 .5rem .5rem 0;
      display: flex;
      align-items: center;
    }
  }

}
</style>