<template>
    <HcCard action-ui="text-center">
        <template #extra>
            <div v-if="infoData.length === 0">
                <el-button size="small" type="primary" :disabled="isDisabled" @click="addRow">
                    <HcIcon name="add" />
                    <span>新增</span>
                </el-button>
            </div>
        </template>
        <HcTable :column="tableColumn" :datas="infoData">
            <template #returnedCondition="{ row }">
                <span v-if="isDisabled">{{ row.returnedCondition }}</span>
                <el-input v-else v-model="row.returnedCondition" />
            </template>
            <template #shouldReturnedTime="{ row }">
                <span v-if="isDisabled">{{ row.shouldReturnedTime }}</span>
                <el-date-picker v-else v-model="row.shouldReturnedTime" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" />
            </template>
            <template #shouldReturnedMoney="{ row }">
                <span v-if="isDisabled">{{ row.shouldReturnedMoney }}</span>
                <el-input v-else v-model="row.shouldReturnedMoney" />
            </template>
            <template #practicalReturnedTime="{ row }">
                <span v-if="isDisabled">{{ row.practicalReturnedTime }}</span>
                <el-date-picker v-else v-model="row.practicalReturnedTime" class="block" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" disabled />
            </template>
            <template #practicalReturnedMoney="{ row }">
                <span v-if="isDisabled">{{ row.practicalReturnedMoney }}</span>
                <el-input v-else v-model="row.practicalReturnedMoney" disabled />
            </template>
            <template #reminderUser="{ row }">
                <span v-if="isDisabled">{{ row.reminderUserName }}</span>
                <el-select v-else v-model="row.reminderUser" block placeholder="请选择">
                    <el-option v-for="item in reminderUserList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </template>
            <template #action="{ index }">
                <el-button size="small" type="primary" :disabled="isDisabled" @click="addRow">
                    <HcIcon name="add" />
                    <span>新增</span>
                </el-button>
                <el-button size="small" type="danger" :disabled="isDisabled" @click="delRow(index)">
                    <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 v-if="!isDisabled" size="large" type="primary" hc-btn :loading="saveLoaingVal" @click="saveClick">
                <HcIcon name="check-double" />
                <span>提交保存</span>
            </el-button>
        </template>
    </HcCard>
</template>

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


//参数
const props = defineProps({
    datas: {
        type: Array,
        default: () => ([]),
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    saveLoaing:{
        type: Boolean,
        default: false,
    },
    reminderUserList:{
        type:Array,
        default:()=>([]),
    },

})
const emit = defineEmits(['saveClick', 'update:datas'])
const router = useRouter()
const infoData = ref(props.datas)
const isDisabled = ref(props.disabled)
const saveLoaingVal = ref(props.saveLoaing)


//深度监听
watch(() => [
    props.datas,
    infoData,

], ([datas, infoData]) => {
   console.log(datas, 'datas')
    infoData.value = datas
    emit('update:datas', infoData)


}, { deep: true })

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

//成本测算表格
const tableColumn = [
    { key: 'returnedCondition', name: '回款条件', align: 'center' },
    { key: 'shouldReturnedTime', name: '应收款时间', align: 'center' },
    { key: 'shouldReturnedMoney', name: '应收回款金额', align: 'center' },
    { key: 'practicalReturnedTime', name: '实际回款时间', align: 'center' },
    { key: 'practicalReturnedMoney', name: '实际回款金额', align: 'center' },
    { key: 'reminderUser', name: '催款执行人', align: 'center' },
    { key: 'action', name: '操作', width: '180', align: 'center' },
]



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

const addRow = ()=>{
    infoData.value.push({})
}
const delRow = (index)=>{
    infoData.value.splice(index, 1)
 
}

//提交保存
const saveClick = () => {
    console.log(infoData.value, 'infoData')
 
        emit('saveClick')
 
    
 

}
</script>

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