<template>
    <div class="relative h-full flex">
        <div :id="`hc_table_card_${uuid}`">
            <hc-new-card>
                <template #header>
                    <div class="mr-3 w-40">
                        <el-select v-model="searchForm.key1" filterable block placeholder="选择工区">
                            <el-option label="工区1" value="1" />
                            <el-option label="工区2" value="2" />
                            <el-option label="工区3" value="3" />
                        </el-select>
                    </div>
                    <el-button hc-btn type="primary" @click="systemPaymentClick">引用系统支付项</el-button>
                </template>
                <hc-table :column="tableColumn" :datas="tableData" :loading="tableLoading" is-new :index-style="{ width: 60 }" is-current-row>
                    <template #action="{ row }">
                        <el-link type="success" @click="editRowClick(row)">修改</el-link>
                        <el-link type="danger">删除</el-link>
                    </template>
                </hc-table>
                <template #action>
                    <hc-pages :pages="searchForm" @change="pageChange" />
                </template>
            </hc-new-card>
        </div>
        <div :id="`hc_info_card_${uuid}`" class="flex-1">
            <hc-new-card scrollbar>
                <infoTable />
                <hc-title title="汇总项">
                    <template #extra>
                        <el-link type="primary">添加汇总项</el-link>
                    </template>
                </hc-title>
                <hc-table :column="tableColumn1" :datas="tableData1" is-new :index-style="{ width: 60 }">
                    <template #action="{ row }">
                        <el-link type="danger">删除</el-link>
                    </template>
                </hc-table>
            </hc-new-card>
        </div>

        <!-- 引用系统支付项 -->
        <systemPay v-model="systemPayShow" />

        <!-- 修改项目支付项 -->
        <rowDataInfo v-model="isEditRowShow" />
    </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import { getRandom } from 'js-fast-way'
import infoTable from './components/pay/info-table.vue'
import systemPay from './components/pay/system-pay.vue'
import rowDataInfo from './components/pay/row-data.vue'

defineOptions({
    name: 'ProjectPeriodsBasePay',
})

const uuid = getRandom(4)

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

//初始化设置拖动分割线
const setSplitRef = () => {
    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
    nextTick(() => {
        window.$split(['#hc_table_card_' + uuid, '#hc_info_card_' + uuid], {
            sizes: [70, 30],
            snapOffset: 0,
            minSize: [50, 300],
        })
    })
}

//搜索表单
const searchForm = ref({ current: 1, size: 10, total: 0 })

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

//表格数据
const tableLoading = ref(false)
const tableColumn = ref([
    { key: 'key1', name: '支付项编号', width: 140 },
    { key: 'key2', name: '支付项名称' },
    { key: 'key3', name: '支付项类型', width: 160 },
    { key: 'key4', name: '是否为扣款项', width: 100 },
    { key: 'key5', name: '是否合计项', width: 100 },
    { key: 'key5', name: '适用类型', width: 100 },
    { key: 'action', name: '操作', width: 100 },
])
const tableData = ref([
    { key1: '1111' },
])

//引用系统支付项
const systemPayShow = ref(false)
const systemPaymentClick = () => {
    systemPayShow.value = true
}

//汇总项
const tableColumn1 = ref([
    { key: 'key1', name: '支付项编号' },
    { key: 'key2', name: '支付项名称' },
    { key: 'key3', name: '支付项类型' },
    { key: 'key4', name: '合同计算公式' },
    { key: 'key5', name: '变更计算公式' },
    { key: 'key6', name: '本期计算公式' },
    { key: 'key7', name: '是否为扣款项' },
    { key: 'action', name: '操作', width: 50 },
])
const tableData1 = ref([
    { key1: '1111' },
])

//修改
const isEditRowShow = ref(false)
const editRowClick = () => {
    isEditRowShow.value = true
}
</script>
