<template> 
  <div class="links-root">

    <div class="search-form" style="justify-content: center;">
      <el-select v-model="search.typeId" placeholder="链接类型" style="width: 20em;" clearable>
        <el-option v-for="item in sys_links_types" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-button type="default" @click="handleSearch">搜索</el-button>
      <el-button v-hasPermi="['sys:links:add']" type="primary" style="position: absolute; right: 0;" @click="proxy.$refs.addRef.open(search.typeId);">添加</el-button>
    </div>

    <el-table :data="list" border stripe v-loading="loading">
      <el-table-column label="链接标题" align="center" prop="title" />
      <el-table-column label="链接地址" align="center" prop="url" />
      <el-table-column label="链接图片" align="center" prop="img" >
        <template #default="{row}">
          <el-button v-if="row.img" type="primary" link
              @click="proxy.$refs.imageViewRef.open(row.img);">预览</el-button>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="链接类型" align="center" prop="typeId" >
        <template #default="{row}">
          <dict-tag :options="sys_links_types" :value="row.typeId" />
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template #default="{row}">
          <dict-tag :options="sys_normal_disable" :value="row.status" />
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="排序" width="80" align="center" prop="sortNum" />
      <el-table-column label="操作" fixed="right" width="100" align="center">
        <template #default="{ row }">
          <el-button-group>
            <el-button v-hasPermi="['sys:links:update']" type="primary" link
              @click="proxy.$refs.editRef.open(row);">修改</el-button>
            <el-button v-hasPermi="['sys:links: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" />


      <w-add ref="addRef" @success="loadPage"/>
      <w-edit ref="editRef" @success="loadPage"/>
      <w-image-view  ref="imageViewRef"/>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue';
import { doPage, doDelete } from '@/api/system/links';
import WAdd from './components/WAdd.vue';
import WEdit from './components/WEdit.vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const { proxy } = getCurrentInstance();

// 获取字典数据
const { sys_normal_disable,sys_links_types } = proxy.useDict('sys_normal_disable','sys_links_types');

// 搜索表单
const search = ref({});
// 查询参数
const query = ref({
  current: 1,
  size: 10
});

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

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

// 加载分页数据
const loadPage = async () => {
  loading.value = true;
  let r = await 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 doDelete(row.id);
  ElMessage.success("删除成功");
  loadPage();
}

</script>

<style lang="scss" scoped>
.links-root {
  padding: 1rem;

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

    &>* {
      margin: 0 .5rem .5rem 0;
      align-items: center;
    }
  }
}
</style>