<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-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="unitPage">查询</el-button>
                    <el-button type="primary" @click="onSubmit">新增</el-button>
                    <el-button @click="onSubmit">启用</el-button>
                    <el-button @click="onSubmit">禁用</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div class="main-table common-box">

            <div class="tab-left">
                <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
                    <div>
                        单位组
                    </div>
                    <div>

                        <el-button type="success" link
                        @click.prevent="addUnitGroup"
                            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 style="height: 100%;">
                    <vxe-table show-overflow height="100%" :data="data.unitGroup" :border=true
                        :tree-config="{ transform: true }" :scroll-y="{ gt: 20 }" @radio-change="radioChangeEvent">
                        <vxe-column type="radio" title="单选" width="80" fixed="left">
                        </vxe-column>

                        <vxe-column field="name" sortable title="名称" width=""></vxe-column>

                        <vxe-column title="状态" width="80" fixed="right" show-overflow>
                            <template #default="{ row }">
                                {{ row.isEnable ? '启用' : '关闭' }}
                                <!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>
            </div>
            <div class="tab">
                <div>
                    <vxe-table show-overflow height="100%" :data="data.unit" :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=""></vxe-column>
                        <vxe-column field="name" sortable title="名称" width=""></vxe-column>
                        <vxe-column field="code" sortable title="代码" width=""></vxe-column>

                        <vxe-column sortable title="可用状态" width="">
                            <template #default="{ row }">
                                {{ row.isEnable ? '启用' : '关闭' }}
                                <!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
                            </template>
                        </vxe-column>
                        <vxe-column field="rate" sortable title="换算率" width=""></vxe-column>
                        <vxe-column field="isBaseUnit" sortable title="作为基本单位" width="">
                            <template #default="{ row }">
                                {{ row.isBaseUnit ? '是' : '否' }}
                                <!-- <vxe-button type="text" icon="vxe-icon-delete"></vxe-button> -->
                            </template>
                        </vxe-column>
                        <vxe-column title="操作" width="200" fixed="right" show-overflow>
                            <template #default="{ row }">
                                <vxe-button type="text">查看</vxe-button>
                                <vxe-button type="text">修改</vxe-button>
                                <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>
        <el-dialog v-model="dialogTableVisible" :title="mTitle" width="850">
            <el-form :inline="true" :model="unitFrom" class="demo-form-inline" label-width="70px">
                <el-row>

                    <el-col :span="8">
                        <el-form-item label="名称">
                            <el-input v-model="unitFrom.name" placeholder="请输入名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="编码">
                            <el-input v-model="unitFrom.codeNum" placeholder="请输入编码" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="单位组">
                            <el-select v-model="unitFrom.groupUnitId" placeholder="请选择" clearable>
                                <el-option :label="item.name" :value="item.id" v-for="item, index in data.unitGroup"
                                    :key="index" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="8">
                        <el-form-item label="精度">
                            <el-input v-model="unitFrom.accuracy" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="外部编码">
                            <el-input v-model="unitFrom.externalNumber" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="备注">
                            <el-input v-model="unitFrom.remarks" placeholder="请输入" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-col :span="8">
                    <el-form-item label="是否启用">
                        <el-switch v-model="unitFrom.isEnable" inline-prompt active-text="启用" inactive-text="禁用" />
                    </el-form-item>
                </el-col>
            </el-form>
            <el-row style="display: flex; justify-content: space-around;">
                <el-button style="width: 100px;" type="primary" @click="unitSubmit">提交</el-button>
                <el-button style="width: 100px;" @click="dialogTableVisible = false">取消</el-button>
            </el-row>
        </el-dialog>

        

    </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { getAPI } from '/@/utils/axios-utils';
import { SysUnitApi, SysUnitGroupApi } from '/@/api-services/api';
import { AddSysUnitInput, SqlSugarPagedListSysUnitOutput, SysUnitGroupOutput, SysUnitInput } from '/@/api-services/models';

let data = reactive({
    unit: [] as SqlSugarPagedListSysUnitOutput[],//单位数据
    unitGroup: [] as SysUnitGroupOutput[],//单位组数据

});

//获取单位组数据
const unitGroup = async () => {
    let res = await getAPI(SysUnitGroupApi).apiSysUnitGroupListGet();
    data.unitGroup = res.data.result || [];
}

//单选

const radioChangeEvent = ({ row }) => {
    unitPage({groupUnitId:row.id})
}
const formInline = reactive({} as SysUnitInput)

//获取单位数据
const unitPage = async (parameter = formInline) => {
    
    let res = await getAPI(SysUnitApi).apiSysUnitPagePost({ page: 1, pageSize: 10, ...parameter,...formInline });
    data.unit = res.data.result?.items as any;
    pageVO1.total = res.data.result?.total!;
}

let mTitle = ref('新增');
let dialogTableVisible = ref(false);

let unitFrom = reactive({} as AddSysUnitInput)

//提交
let unitSubmit = async () => {
    
}
const onSubmit = () => {
    console.log('submit!')
}


const tableData = ref([
    
])

const addUnitGroup=()=>{
    console.log('tableData!')
}

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

onMounted(() => {
    unitGroup()
    unitPage()
})
</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-left {
            width: 25%;
            display: flex;
            flex-direction: column;
            margin-right: 20px;
            // div:nth-child(1) {
            //     width: 50%;
            // }

            // div:nth-child(2) {
            //     width: 50%;
            // }
        }

        .tab {
            width: 80%;
            flex: 1;
            overflow: scroll;
            display: flex;
            flex-direction: column;

            div:nth-child(1) {
                flex: 1;
                overflow: scroll;
            }
        }
    }
}
</style>