<template>
    <HcCard actionUi="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,index}">
                <span v-if="isDisabled">{{row.returnedCondition}}</span>
                <el-input v-model="row.returnedCondition" v-else />
            </template>
            <template #shouldReturnedTime="{row,index}">
                <span v-if="isDisabled">{{row.shouldReturnedTime}}</span>
                <el-date-picker class="block" v-model="row.shouldReturnedTime" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" v-else/>
            </template>
            <template #shouldReturnedMoney="{row,index}">
                <span v-if="isDisabled">{{row.shouldReturnedMoney}}</span>
                <el-input v-model="row.shouldReturnedMoney" v-else/>
            </template>
            <template #practicalReturnedTime="{row,index}">
                <span v-if="isDisabled">{{row.practicalReturnedTime}}</span>
                <el-date-picker class="block" v-model="row.practicalReturnedTime" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD" v-else disabled/>
            </template>
            <template #practicalReturnedMoney="{row,index}">
                <span v-if="isDisabled">{{row.practicalReturnedMoney}}</span>
                <el-input v-model="row.practicalReturnedMoney" v-else disabled/>
            </template>
            <template #reminderUser="{row,index}">
                <span v-if="isDisabled">{{row.reminderUserName}}</span>
                <el-select v-model="row.reminderUser" block  placeholder="请选择" v-else>
                                        <el-option v-for="item in reminderUserList" :label="item.name" :value="item.id"/>
                 </el-select>
            </template>
            <template #action="{row,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 size="large" type="primary" hc-btn @click="saveClick" v-if="!isDisabled" :loading="saveLoaingVal">
                <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 emit= defineEmits(['saveClick',"update:datas"])

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

})

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 tableData = ref([
    {id: 1}, {id: 2}, {id: 3}, {id: 4},
])


//返回
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>
