<template>
    <HcCard>
        <template #header>
            <div class="w-64">
                <el-input v-model="searchForm.queryValue" clearable placeholder="请输入名称进行查询" size="large"/>
            </div>
            <div class="ml-4">
                <el-button type="primary" @click="searchClick" size="large">
                    <HcIcon name="search-2"/>
                    <span>搜索</span>
                </el-button>
            </div>
        </template>
        <template #extra>
            <el-button size="large" type="primary" hc-btn @click="addRowClick">
                <HcIcon name="add"/>
                <span>新增</span>
            </el-button>
            <el-button size="large" type="danger" hc-btn>
                <HcIcon name="delete-bin"/>
                <span>删除</span>
            </el-button>
        </template>
        <div class="base-region-box">
            <div class="base-region-table" id="region-01">
                <HcTable :column="tableColumn" :datas="tableData" :loading="tableLoading" isCheck @selection-change="tableSelectionChange">
                    <template #action="{row,index}">
                        <el-button size="small" type="primary" @click="editRowClick(row)">编辑</el-button>
                        <el-button size="small" type="danger">删除</el-button>
                    </template>
                </HcTable>
            </div>
            <div class="base-region-info" id="region-02">
                <el-scrollbar>
                    <div class="base-region-card">
                        <div class="title">已关联用户信息</div>
                        <div class="content">
                            <el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag>
                            <el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag>
                            <el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag>
                            <el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag>
                            <el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag><el-tag>标签一</el-tag>
                        </div>
                    </div>
                    <div class="base-region-card">
                        <div class="title">已分配区域权限</div>
                        <div class="content" style="padding-top: 12px">
                            <HcTreeData :isMenu="false"/>
                        </div>
                    </div>
                </el-scrollbar>
            </div>
        </div>
        <template #action>
            <HcPages :pages="searchForm" @change="pageChange"/>
        </template>

        <!--新增/编辑-->
        <HcDialog isToBody bgColor="white" :show="rowModal" isTable widths="62rem" :title="formModel.id?'编辑':'新增'" @save="rowModalSave" @close="rowModalClose">
            <div class="base-region-dialog">
                <div class="dialog-form">
                    <el-scrollbar>
                        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" size="large">
                            <el-form-item label="编号：" prop="key1">
                                <el-input v-model="formModel.key1"/>
                            </el-form-item>
                            <el-form-item label="名称：" prop="key2">
                                <el-input v-model="formModel.key2"/>
                            </el-form-item>
                            <el-form-item label="备注：" prop="key3">
                                <el-input v-model="formModel.key3"/>
                            </el-form-item>
                            <el-form-item label="关联用户" prop="key4">
                                <HcTasksUser :contractId="0" :projectId="0" ui="w-full" @change="tasksUserChange"/>
                            </el-form-item>
                        </el-form>
                    </el-scrollbar>
                </div>
                <div class="dialog-action">
                    <div class="title">区域权限授权</div>
                    <div class="data-tree-box">
                        <el-scrollbar>
                            <HcTreeData :isMenu="false" showCheckbox/>
                        </el-scrollbar>
                    </div>
                </div>
            </div>
        </HcDialog>
    </HcCard>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import split from "split.js";

//渲染完成
onMounted(()=> {
    setSplitDom()
})

// 初始化设置拖动分割线
const splitvar = ref(null);
const setSplitDom = () => {
    try {
        //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
        splitvar.value = split([
            '#region-01',
            '#region-02'
        ], {
            sizes: [50, 50],
        });
    } catch (e) {
        setTimeout(() => {
            setSplitDom()
        }, 500)
    }
}

//销毁
onUnmounted(() => {
    if (splitvar.value) {
        splitvar.value.destroy()
    }
})

//搜索表单
const searchForm = ref({
    projectType: null, queryValue: null, startTime: null, endTime: null,
    current: 1, size: 20, total: 0
})

//搜索
const searchClick = () => {
    searchForm.value.current = 1;
    getTableData()
}

//分页被点击
const pageChange = ({current, size}) => {
    searchForm.value.current = current
    searchForm.value.size = size
    getTableData()
}

//获取数据
const tableLoading = ref(false)
const tableColumn = [
    {key: 'key1', name: '编号'},
    {key: 'key2', name: '角色名称'},
    {key: 'key3', name: '备注'},
    {key: 'action', name: '操作', width: '130', align: 'center'},
]
const tableData = ref([
    {id: 1, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
    {id: 2, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
    {id: 3, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
    {id: 4, key1: 'xxxx', key2: 'xxxx', key3: '65632'},
])
const getTableData = () => {

}

//多选事件
const tableSelectionChange = (rows) => {
    console.log(rows)
}

//弹窗
const rowModal = ref(false)
const formRef = ref(null)
const formModel = ref({})
const formRules = {
    key1: [{required: true, message: '请输入名称', trigger: 'blur'}],
}

const tasksUserChange = (user) => {
    console.log(user)
}

//新增
const addRowClick = () => {
    formModel.value = {}
    rowModal.value = true
}

//编辑
const editRowClick = (row) => {
    formModel.value = row
    rowModal.value = true
}

//保存
const rowModalSave = () => {

}

//关闭弹窗
const rowModalClose = () => {
    rowModal.value = false
    formModel.value = {}
}
</script>

<style lang="scss" scoped>
@import "~src/styles/base/region.scss";
</style>

<style lang="scss">

</style>
