<template>
    <hc-new-dialog is-table widths="90%" :show="isShow" title="变更方案" @save="addModalSave" @close="addModalClose">
        <div class="relative h-full flex">
            <div id="hc_add_dialog_tree_card">
                <hc-card-item title="工程部位" scrollbar>
                    <template #extra>
                        <el-link type="primary">添加</el-link>
                    </template>
                    <hc-lazy-tree :h-props="treeProps" show-checkbox @load="treeLoadNode" />
                </hc-card-item>
            </div>
            <div id="hc_add_dialog_table_card">
                <el-scrollbar>
                    <!-- 基础表单 -->
                    <hc-card-item title="基础表单">
                        <el-form ref="baseFormRef" :model="baseForm" :rules="baseFormRules" label-position="left" label-width="auto">
                            <el-row :gutter="20">
                                <el-col :span="8">
                                    <el-form-item label="变更方案编号：">
                                        <el-input v-model="baseForm.key1" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="变更方案名称：">
                                        <el-input v-model="baseForm.key2" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="变更发起单位：">
                                        <el-input v-model="baseForm.key6" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="业务日期：">
                                        <el-date-picker v-model="baseForm.key7" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="变更类型：">
                                        <el-select v-model="baseForm.key4" filterable block>
                                            <el-option label="一般变更A" value="1" />
                                            <el-option label="一般变更B" value="2" />
                                            <el-option label="一般变更C" value="3" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="延长工期：">
                                        <el-input v-model="baseForm.key5" />
                                    </el-form-item>
                                </el-col>

                                <el-col :span="8">
                                    <el-form-item label="变更申请金额：">
                                        <el-input v-model="baseForm.key3" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="现场确认时间：">
                                        <el-date-picker v-model="baseForm.key7" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="实际变更桩号：">
                                        <el-input v-model="baseForm.key8" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item class="input-link-item" label="引用预变更：">
                                        <el-input v-model="baseForm.key6" disabled />
                                        <el-link type="primary" @click="quoteClick">引用</el-link>
                                        <el-link type="danger">删除引用</el-link>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="24">
                                    <el-form-item label="变更原因：">
                                        <el-input v-model="baseForm.key9" :autosize="{ minRows: 4, maxRows: 8 }" type="textarea" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </hc-card-item>
                    <!-- 变更申请部位 -->
                    <hc-card-item title="变更申请部位" class="mt-3">
                        <hc-table :column="tableColumn" :datas="tableData" is-new :index-style="{ width: 60 }">
                            <template #key3="{ row }">
                                <hc-table-input v-model="row.key3" />
                            </template>
                            <template #action="{ row }">
                                <el-link type="danger">删除</el-link>
                            </template>
                        </hc-table>
                    </hc-card-item>
                    <!-- 变更申请清单 -->
                    <hc-card-item title="变更申请清单" class="mt-3">
                        <template #extra>
                            <el-link type="primary" @click="changeShowClick">添加</el-link>
                        </template>
                        <div class="hc-table-ref-box no-border">
                            <el-table class="w-full" :data="tableData" row-key="id" height="100%" highlight-current-row border>
                                <el-table-column type="index" label="序号" />
                                <el-table-column prop="key1" label="清单编号" />
                                <el-table-column prop="key2" label="清单名称" />
                                <el-table-column prop="key3" label="单价" />
                                <el-table-column label="数量" align="center">
                                    <el-table-column prop="key5" label="变更前" />
                                    <el-table-column prop="key6" label="变更增减" />
                                    <el-table-column prop="key7" label="变更后" />
                                </el-table-column>
                                <el-table-column label="金额" align="center">
                                    <el-table-column prop="key8" label="变更前" />
                                    <el-table-column prop="key9" label="变更增减" />
                                    <el-table-column prop="key10" label="变更后" />
                                </el-table-column>
                            </el-table>
                        </div>
                    </hc-card-item>
                    <hc-card-item class="mt-3" title="附件列表">
                        <hc-table :column="tableColumn2" :datas="tableData2" is-new :index-style="{ width: 60 }">
                            <template #action="{ row }">
                                <el-link type="primary">选择文件</el-link>
                                <el-link type="danger">清除</el-link>
                            </template>
                        </hc-table>
                    </hc-card-item>
                </el-scrollbar>
            </div>
        </div>

        <!-- 引用预变更 -->
        <ChangePre v-model="isChangeQuoteShow" />

        <!-- 变更申请清单 -->
        <ChangeRequest v-model="isChangeShow" />
    </hc-new-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import ChangeRequest from './changeRequest.vue'
import ChangePre from './changePre.vue'

const props = defineProps({
    ids: {
        type: [String, Number],
        default: '',
    },
})

//事件
const emit = defineEmits(['finish', 'close'])

//双向绑定
// eslint-disable-next-line no-undef
const isShow = defineModel('modelValue', {
    default: false,
})

//监听
watch(() => [
    props.ids,
], ([ids]) => {
    console.log('ids', ids)
}, { immediate: true })

//监听
watch(isShow, (val) => {
    if (val) {
        setSplitRef()
    }
})

//初始化设置拖动分割线
const setSplitRef = () => {
    //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0
    nextTick(() => {
        window.$split(['#hc_add_dialog_tree_card', '#hc_add_dialog_table_card'], {
            sizes: [20, 80],
            snapOffset: 0,
            minSize: [100, 400],
        })
    })
}

//数据格式
const treeProps = {
    label: 'name',
    children: 'children',
    isLeaf: 'leaf',
}

//懒加载的数据
const treeLoadNode = ({ level }, resolve) => {
    if (level === 0) {
        return resolve([{ name: 'region' }])
    }
    if (level > 3) {
        return resolve([])
    }
    setTimeout(() => {
        resolve([
            { name: 'leaf', leaf: true },
            { name: 'zone' },
        ])
    }, 500)
}

//基础表单
const baseFormRef = ref(null)
const baseForm = ref({})
const baseFormRules = {}

//变更申请部位列表
const tableColumn = ref([
    { key: 'key1', name: '工程名称' },
    { key: 'key2', name: '节点路径' },
    { key: 'key3', name: '合同图号' },
    { key: 'key4', name: '变更后金额(元)' },
    { key: 'key5', name: '是否增补' },
    { key: 'action', name: '操作', width: 80, align: 'center' },
])
const tableData = ref([
    { key1: '101-1-a' },
])

const addModalSave = () => {
    emit('finish')
    addModalClose()
}

//关闭弹窗
const addModalClose = () => {
    isShow.value = false
    emit('close')
}

//变更清单的添加弹窗
const isChangeShow = ref(false)
const changeShowClick = () => {
    isChangeShow.value = true
}

//引用预变更的弹窗
const isChangeQuoteShow = ref(false)
const quoteClick = () => {
    isChangeQuoteShow.value = true
}

//附件列表
const tableColumn2 = ref([
    { key: 'key1', name: '文件名称', width: 200 },
    { key: 'key2', name: '必须上传', width: 100 },
    { key: 'key3', name: '附件列表' },
    { key: 'action', name: '操作', width: 120 },
])
const tableData2 = ref([
    { key1: '工程设计变更申请单', key2: '是', key3: '文件名称' },
])
</script>
