<template>
  <PageWrapper>
    <el-row :gutter="10" class="mt-3">
      <el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" class="mb-4">
        <el-card shadow="hover" class="border-0">
          <template #header>
            <el-row>
              <el-col :span="10">
                <el-input type="text" v-model="params.name" clearable placeholder="请输入字典名称">
                  <template #prefix>
                    <el-icon class="el-input__icon">
                      <SearchOutlined />
                    </el-icon>
                  </template>
                </el-input>
              </el-col>
              <el-col :span="14" style="text-align: right;">
                <el-button type="primary" icon="Search" @click="pager.page=1;loadDataTable()">查询</el-button>
                <el-button type="primary" icon="RefreshRight" @click="dictRefresh" style="margin-left:8px;"
                v-perm="['sys:dict:cache']">刷新缓存</el-button>
              </el-col>
            </el-row>
            <div style="margin-top:15px;">
              <el-button type="primary" icon="Plus" @click="addDict" v-perm="['sys:dict:add']">新建</el-button>
              <el-button type="warning" icon="Edit" @click="handleEdit" v-perm="['sys:dict:edit']">编辑</el-button>
              <el-button type="danger" icon="Delete" v-perm="['sys:dict:delete']"
                @click="handleDelete()">删除</el-button>
            </div>
          </template>
          <div :style="{ height: fwbHeight + 'px' }" class="dict-list-box">
            <div v-for="(item, index) in dictDataList" :key="index" @click="onCheckedRow(item)" class="dict-item"
              :class="item.id == dictId ? 'active' : ''">
              <span class="t1">{{ item.name }}<span class="t2">({{ item.code }})</span></span>
            </div>
          </div>
          <pagination style="justify-content: flex-end" class="mt-10 flex" @change="loadDataTable" v-model="pager" layout="total, prev, pager, next">
          </pagination>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="mb-4">
        <el-card shadow="hover" class="mb-4 border-0 proCard">
          <dictItem :dictId="dictId" v-if="dictItemShow"></dictItem>
        </el-card>
      </el-col>
    </el-row>
    <editDialog v-if="editVisible" :dictId="dictId" v-model:visible="editVisible" @success="loadDataTable()">
    </editDialog>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick, defineAsyncComponent } from 'vue';
import { SearchOutlined } from '@vicons/antd';
import { getDictList, refreshCache, dictDelete } from '@/api/data/dictionary';
import dictItem from './dictItem.vue';
import { message, confirm } from "@/utils/auth";
const editDialog = defineAsyncComponent(() =>
  import('./edit.vue')
)
const dictId = ref(0)
const dictItemShow = ref(false)
const dictDataList = ref([])
const editVisible = ref(false)
const params = ref({
  name: '',
});
const pager = ref({
  page: 1,
  size: 20,
  count: dictDataList.value.length
});
const fwbHeight = document.body.clientHeight - 395

//新建字典
const addDict = async () => {
  dictId.value = 0
  await nextTick();
  editVisible.value = true
};
//编辑字典
const handleEdit =  () => {
  editVisible.value = true
};
//选择字典项
function onCheckedRow(row) {
  dictId.value = row.id
}

//加载字典项值列表;
const loadDataTable = async () => {
  const result = await getDictList({ ...params.value, pageNo:pager.value.page,pageSize:pager.value.size });
  dictId.value = result?.records[0]?.id
  dictItemShow.value = true
  dictDataList.value = result.records
  pager.value.count = result.total
};

//刷新缓存
async function dictRefresh() {
  await refreshCache();
  message("刷新成功");
}
//删除字典项
async function handleDelete() {

  await confirm('确定要删除？');
  await dictDelete(dictId.value);
  message("删除成功");
  pager.value.page = 1
  loadDataTable()
}
onMounted(() => {
  loadDataTable()
})
</script>
<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dict-list-box {
  overflow:auto;
  .dict-item {
    height: 40px;
    line-height: 40px;
    padding: 0 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;

    .t1 {
      font-size: 14px;
      display: block;
      font-weight: 700;
      .t2 {
        font-size: 12px;
        font-weight: normal;
      }
    }

    &.active {
      background-color: #e8f1ff;
      border-radius: 3px;

      .t1 {
        color: #1677ff;
      }
      .t2 {
        color:rgb(22, 119, 255,.8)
      }
    }

    .el-badge__content.is-fixed {
      top: 20px;
      right: calc(-10px + var(--el-badge-size)/ 2);
    }
  }
}
</style>
