<template>
    <div class="main">
        <div class="main-from common-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="70px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="可用状态">
                            <el-select v-model="formInline.isEnable" placeholder="请选择" clearable>
                                <el-option label="启用" value="0" />
                                <el-option label="禁用" value="1" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="名称">
                            <el-input v-model="formInline.name" placeholder="请输入名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="编码">
                            <el-input v-model="formInline.codeNum" placeholder="请输入编码" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click="onSubmit">重置</el-button>
                    <el-button @click="onSubmit">保存</el-button>
                    <el-button type="primary" @click="onSubmit">新增</el-button>
                    <el-button @click="onSubmit" type="warning">删除</el-button>
                    <el-button @click="onSubmit">启用</el-button>
                    <el-button @click="onSubmit">禁用</el-button>
                    <el-dropdown style="margin-left: 10px;">
                        <el-button type="primary">
                            更多操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                        </el-button>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>导入</el-dropdown-item>
                                <el-dropdown-item>导出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </el-form-item>
            </el-form>
        </div>

        <div class="main-table common-box">
            <div class="tab-hed">
                <el-select v-model="formInline.checked" placeholder="分类" clearable style="width: 200px;">
                    <el-option label="所有" value="0" />
                    <el-option :label="item.name" :value="item.id" v-for="item,index in getCustonClassDate" :key="index"/>
                </el-select>
                <div>
                    <el-button type="success" link
                        style="border-right: 1px #515a6e solid; border-radius: 0px; margin-right: 3px; padding:  0 3px;">新增</el-button>
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            更多
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>查看</el-dropdown-item>
                                <el-dropdown-item>修改</el-dropdown-item>
                                <el-dropdown-item>删除</el-dropdown-item>
                                <el-dropdown-item>刷新</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
            <div class="tab">
                <vxe-table show-overflow height="100%" :data="customDate" :border=true :tree-config="{ transform: true }"
                    :scroll-y="{ gt: 20 }">
                    <vxe-column type="checkbox" width="60" fixed="left"></vxe-column>
                    <vxe-column field="codeNum" sortable title="编码" width="120"></vxe-column>
                    <vxe-column field="name" sortable title="名称" width="120"></vxe-column>
                    <vxe-column field="classify" sortable title="分类" width="120"></vxe-column>

                    <vxe-column field="age" sortable title="年龄" width="120"></vxe-column>
                    <vxe-column field="expandField" sortable title="客户扩展字段整形2" width="180"></vxe-column>
                    <vxe-column field="contactse" sortable title="联系人" width="120"></vxe-column>
                    <vxe-column field="brand" sortable title="品牌" width="120"></vxe-column>
                    <vxe-column field="externalNumberf" sortable title="外部编号" width="150"></vxe-column>
                    <vxe-column field="isEnable" sortable title="可用状态" width="120"></vxe-column>
                    <vxe-column field="f" sortable title="手机" width="120"></vxe-column>
                    <vxe-column field="f" sortable title="微信" width="120"></vxe-column>
                    <vxe-column field="f" sortable title="所在地区" width="120"></vxe-column>
                    <vxe-column field="f" sortable title="备注" width="120"></vxe-column>
                    <vxe-column field="createUserName" sortable title="创建人" width="120"></vxe-column>
                    <vxe-column field="createTime" sortable title="创建时间" width="120"></vxe-column>
                    <vxe-column field="updateTime" sortable title="同步时间" width="120"></vxe-column>
                    <vxe-column title="操作" width="200" fixed="right" show-overflow>
                        <template #default="{ row }">
                            <vxe-button type="text">查看</vxe-button>
                            <!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
                        </template>
                    </vxe-column>
                </vxe-table>

            </div>
            <div>
                <vxe-pager v-model:current-page="pageVO1.currentPage" v-model:page-size="pageVO1.pageSize"
                    :total="pageVO1.total" />
            </div>

        </div>

    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive,ref } from 'vue'
import { getAPI } from '/@/utils/axios-utils';
import { CustomApi, CustonClassifyApi } from '/@/api-services/api';
import { CustomOutput, CustonClassifyOutput } from '/@/api-services/models';

//获取客户分类数据
let getCustonClassDate = ref([] as CustonClassifyOutput[]);
const getCustonClass = async() => {
    let res = await getAPI(CustonClassifyApi).apiCustonClassifyListGet();
    getCustonClassDate.value = res.data.result!;

}


//获取客户数据
let customDate = ref([] as CustomOutput[]);
const getCustom = async() => {
    let res = await getAPI(CustomApi).apiCustomPagePost();
    customDate.value = res.data.result?.items!;
    pageVO1.total = res.data.result?.total!;
}


onMounted(() => {
    getCustonClass()
    getCustom()
})

const formInline = reactive({
    name:'',//名称
    isEnable:"",//可用状态
    codeNum:'',//编码
    checked:''
})

const onSubmit = () => {
    console.log('submit!')
}


const tableData = ref([

])

const pageVO1 = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 0
})
</script>

<style lang="scss" scoped>
.main {
    padding: 10px;
    display: flex;
    flex-direction: column;

    .main-from {
        // height: 300px;
        width: 100%;
        padding: 20px 10px;

        .el-row {
            width: 100%;
        }
    }

    .main-table {
        margin-top: 20px;
        box-sizing: border-box;
        padding: 10px;
        flex-grow: 1;
        height: 0;

        display: flex;
        flex-direction: column;

        .tab {
            flex: 1;
            overflow: scroll;
        }
        .tab-hed{
            display: flex;
            justify-content: space-between;
            margin:  5px;
            align-items: center;
        }
    }
}
</style>