
<template>
    <div class="home-container layout-pd">

        <el-row :gutter="15" class="home-card-one mb15">
            <el-col :xl="24">
                <el-card shadow="hover">
                    <el-radio-group v-model="state.select" @change="seletgetTableData">
                        <el-radio v-for="(item, index) in state.county" :key="index" :label="item.value">{{ item.label
                        }}</el-radio>
                    </el-radio-group>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="15" class="home-card-one mb15">
            <el-col :xl="24">
                <el-card shadow="hover">
                    <div class="row system-user-search mb15">
                        <!-- <el-select size="default" v-model="state.select" style="max-width: 120px" placeholder="选择区县">
                            <el-option label="潍坊市" value=""></el-option>
                            <el-option v-for="(item, index) in state.county" :key="index" :label="item.label"
                                :value="item.value" />
                        </el-select> -->
                        <el-input size="default" style="width: 200px;" v-model="state.search"
                            placeholder="请输入企业名称"></el-input>
                        <el-input size="default" style="width: 200px;margin: 0 10px;" v-model="state.credit"
                            placeholder="请输入统一社会信用代码"></el-input>
                        <el-button size="default" type="primary" class="ml10" @click="seletgetTableData()">
                            <el-icon><ele-Search /></el-icon>查询
                        </el-button>
                        <el-button size="default" type="primary" class="ml10" @click="noneclick">
                            <el-icon><ele-RefreshRight /></el-icon>重置
                        </el-button>
                    </div>
                    <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
                        <el-table-column show-overflow-tooltip prop="name" label="企业名称" />
                        <el-table-column prop="legalName" label="法定代表人" width="120" />
                        <el-table-column prop="idCard" label="统一社会信用代码" />
                        <el-table-column show-overflow-tooltip prop="registerAddress" label="注册地址" width="300" />
                        <el-table-column prop="registerAsset" label="注册资本(万元)">
                            <template #default="scope">
                                {{ scope.row.registerAsset ? scope.row.registerAsset : '0' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="establishDate" label="成立日期">
                            <template #default="scope">
                                {{ scope.row.establishDate ? scope.row.establishDate : '-' }}
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="100">
                            <template #default="scope">
                                <el-button size="small" text type="primary" @click="onOpenEditDic(scope.row)">查看</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                        v-model:current-page="state.tableData.param.pageNum" background
                        v-model:page-size="state.tableData.param.pageSize" layout="total, prev, sizes,pager, next, jumper"
                        :total="state.tableData.total">
                    </el-pagination>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts" name="enterIndexss">
import { reactive, onMounted, ref, watch, nextTick, onActivated, markRaw } from "vue";
import { entApi } from "/@/api/ent/index";
import { useRouter } from "vue-router";
//柱状图
// 定义变量内容
let router = useRouter();
const state = reactive({
    search: "",
    select: "",
    credit: "",
    county: [] as any,
    tableData: {
        data: [],
        total: 1000,
        loading: false,
        param: {
            pageNum: 1,
            pageSize: 10,
        },
    } as any,
});

function noneclick() {
    state.search = ""
    state.select = ""
    state.credit = ""
    ApiIndex()
}

const ApiCity = async () => {
    let itemQx = await entApi().typeApi(); //区县数据
    state.county = itemQx.data;
    state.select = state.county[0].value
}
// 接口
const ApiIndex = async () => {
    //企业列表接口
    state.tableData.loading = true;
    let item = await entApi().searchApi({
        name: state.search,
        areaCode: state.select,
        idCard: state.credit,
        page: state.tableData.param.pageNum,
        limit: state.tableData.param.pageSize,
    });
    if (!item) return
    state.tableData.data = item.data
    state.tableData.total = item.count;
    setTimeout(() => {
        state.tableData.loading = false;
    }, 500);
}
//查询企业
const seletgetTableData = () => {
    state.tableData.param.pageNum = 1
    ApiIndex()
}
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.tableData.param.pageNum = val;
    ApiIndex();
};
const onHandleSizeChange = (val: number) => {
    state.tableData.param.pageSize = val;
    ApiIndex();
};
//跳转页面
const onOpenEditDic = (val: any) => {
    const set = val.id
    router.push({
        path: '/enterprise/details',
        query: {
            type: set
        }
    });
}

onMounted(async () => {
    await ApiCity();
    await ApiIndex()
});
</script>

<style scoped lang="scss">
.title {
    font-weight: bold;
    font-size: 14px;
    padding-left: 10px;
    border-left: 3px solid #409EFE;
    margin-right: 20px;
}

.home-container {
    overflow: hidden;

    .home-card-one {
        .home-card-item {
            width: 100%;
            height: 130px;
            border-radius: 4px;
            transition: all ease 0.3s;
            padding: 20px;
            overflow: hidden;
            background: var(--el-color-white);
            color: var(--el-text-color-primary);
            border: 1px solid var(--next-border-color-light);

            &:hover {
                box-shadow: 0 2px 12px var(--next-color-dark-hover);
                transition: all ease 0.3s;
            }

            &-icon {
                width: 70px;
                height: 70px;
                border-radius: 100%;
                flex-shrink: 1;

                i {
                    color: var(--el-text-color-placeholder);
                }
            }

            &-title {
                font-size: 15px;
                font-weight: bold;
                height: 30px;
            }
        }
    }

    .home-card-one {
        @for $i from 0 through 3 {
            .home-one-animation#{$i} {
                opacity: 0;
                animation-name: error-num;
                animation-duration: 0.5s;
                animation-fill-mode: forwards;
                animation-delay: calc($i/4) + s;
            }
        }
    }
}
</style>
