<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="18">
                <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="6" style="text-align: right;">
                <el-button type="primary" icon="Search" @click="pager.page=1;loadDataTable()"> 查询 </el-button>
              </el-col>
            </el-row>
            <div style="margin-top:15px;">
              <el-button type="primary" icon="Plus" @click="addConfig"  v-perm="['sys:config:add']">新建</el-button>
              <el-button type="warning" icon="Edit" @click="handleEdit" v-perm="['sys:config:edit']">编辑</el-button>
              <el-button type="danger"  icon="Delete"  @click="handleDelete()"  v-perm="['sys:config:delete']">删除</el-button>
            </div>
          </template>
          <div :style="{ height: fwbHeight + 'px' }" class="dict-list-box">
            <div v-for="(item, index) in configDataList" :key="index" @click="onCheckedRow(item)" class="dict-item"
              :class="item.id == configId ? '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">
          <configItem :configId="configId" v-if="configItemShow"></configItem>
        </el-card>
      </el-col>
    </el-row>
    <editDialog v-if="editVisible" :configId="configId" v-model:visible="editVisible" @success="loadDataTable()">
    </editDialog>
  </PageWrapper>
</template>

<script lang="ts" setup>
import { ref,nextTick, defineAsyncComponent,onMounted } from 'vue';
import { SearchOutlined } from '@vicons/antd';
import { getConfigList, configDelete } from '@/api/data/config';
import configItem from './configItem.vue';
import { message, confirm } from "@/utils/auth";
const editDialog = defineAsyncComponent(() =>
  import('./edit.vue')
)
const configId = ref(0)
const configItemShow = ref(false)
const tableRef = ref();
const editVisible = ref(false)
const params = ref({
  name: '',
});
const configDataList = ref([])
const pager = ref({
  page: 1,
  size: 10,
  count: configDataList.value.length
});
const fwbHeight = document.body.clientHeight - 395


const addConfig = async () => {
  configId.value=0
  await nextTick();
  editVisible.value=true
};

const handleEdit = () => {
  editVisible.value=true
};

function onCheckedRow(row) {
  configId.value = row.id
}


const loadDataTable = async () => {
  const result = await getConfigList({ ...params.value, pageNo:pager.value.page,pageSize:pager.value.size });
  configId.value = result?.records[0]?.id
  configItemShow.value = true
  configDataList.value = result.records
  pager.value.count = result.total
};

async function handleDelete() {

  await confirm('确定要删除？');
 await configDelete(configId.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>
