<template>
    <HcCard actionUi="text-center">
        <HcTable :column="tableColumn" :datas="tableData">
            <template #key1="{row,index}">
                <span v-if="isDisabled">{{row.key1}}</span>
                <el-input v-model="row.key1" v-else/>
            </template>
            <template #key2="{row,index}">
                <span v-if="isDisabled">{{row.key2}}</span>
                <el-date-picker class="block" v-model="row.key2" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" v-else/>
            </template>
            <template #key3="{row,index}">
                <span v-if="isDisabled">{{row.key3}}</span>
                <el-input v-model="row.key3" v-else/>
            </template>
            <template #key6="{row,index}">
                <span v-if="isDisabled">{{row.key6}}</span>
                <el-select v-model="row.key6" v-else>
                    <el-option label="选项1" value="选项1"/>
                    <el-option label="选项2" value="选项2"/>
                </el-select>
            </template>
            <template #action="{row,index}">
                <el-button size="small" type="primary" :disabled="isDisabled">
                    <HcIcon name="add"/>
                    <span>新增</span>
                </el-button>
                <el-button size="small" type="danger" :disabled="isDisabled">
                    <HcIcon name="delete-bin"/>
                    <span>删除</span>
                </el-button>
            </template>
        </HcTable>
        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span v-if="isDisabled">返回上一级</span>
                <span v-else>取消并返回</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn @click="saveClick" v-if="!isDisabled">
                <HcIcon name="check-double"/>
                <span>提交保存</span>
            </el-button>
        </template>
    </HcCard>
</template>

<script setup>
import {ref, watch} from "vue";
import {useRouter} from 'vue-router'

const router = useRouter()

//参数
const props = defineProps({
    datas: {
        type: Object,
        default: () => ({})
    },
    disabled: {
        type: Boolean,
        default: false
    },
})

const infoData = ref(props.datas)
const isDisabled = ref(props.disabled)

//深度监听
watch(() => [
    props.datas,
], ([datas]) => {
    infoData.value = datas
}, {deep: true})

//监听
watch(() => [
    props.disabled,
], ([disabled]) => {
    isDisabled.value = disabled
})

//成本测算表格
const tableColumn = [
    {key: 'key1', name: '回款条件',  align: 'center'},
    {key: 'key2', name: '应收款时间',  align: 'center'},
    {key: 'key3', name: '应收回款金额', align: 'center'},
    {key: 'key4', name: '实际回款时间',  align: 'center'},
    {key: 'key5', name: '实际回款金额', align: 'center'},
    {key: 'key6', name: '催款执行人', align: 'center'},
    {key: 'action', name: '操作', width: '160', align: 'center'},
]
const tableData = ref([
    {id: 1}, {id: 2}, {id: 3}, {id: 4},
])


//返回
const goBackClick = () => {
    router.back()
}

//提交保存
const saveClick = () => {

}
</script>

<style scoped lang="scss">
@import "~src/styles/project/contract/form.scoped.scss";
</style>
