<template>
    <HcCard actionUi="text-center">
        <template #header>
            <div class="w-48">
                <el-select block clearable placeholder="请选择合同名称" size="large" v-model="contractId" @change="contarctIdChange">
                    <el-option v-for="item in contractList" :label="item.name" :value="item.id"/>
                </el-select>
            </div>
        </template>
        <div class="hc-table-ref-box no-border hc-project-contract-update-data">
            <el-table :data="tableData" border
                      :header-cell-style="tableHeaderCellStyle"
                      :row-style="tableRowStyle"
                      style="width: 100%; height: 100%"
            >
                <el-table-column prop="returnedCondition" label="回款条件" align="center"/>
                <el-table-column prop="shouldReturnedTime" label="应收款时间" align="center"/>
                <el-table-column prop="shouldReturnedMoney" label="应收回款金额" align="center"/>
                <el-table-column prop="practicalReturnedTime" label="实际回款时间" align="center">
                    <template #default="{ row }">
                        <!-- <span v-if="row.practicalReturnedTime">{{row.practicalReturnedTime}}</span> -->
                        <el-date-picker class="block" v-model="row.practicalReturnedTime" format="YYYY-MM-DD" type="date" value-format="YYYY-MM-DD"/>
                    </template>
                </el-table-column>
                <el-table-column prop="practicalReturnedMoney" label="实际回款金额" align="center">
                    <template #default="{ row }">
                        <!-- <span v-if="row.practicalReturnedMoney">{{row.practicalReturnedMoney}}</span> -->
                        <el-input v-model="row.practicalReturnedMoney" />
                    </template>
                </el-table-column>
                <el-table-column prop="reminderUser" label="催款执行人" align="center"/>
            </el-table>
        </div>
        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span>取消并返回</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn @click="saveClick" :loading="saveLoaing">
                <HcIcon name="check-double"/>
                <span>提交保存</span>
            </el-button>
        </template>
    </HcCard>
</template>

<script setup>
import {onActivated, ref} from "vue";
import {useRouter, useRoute} from 'vue-router'
import contractApi from '~api/project/project-contract.js';
import {getArrValue} from "js-fast-way"

//初始变量
const router = useRouter()
const useRoutes = useRoute()
const dataId = ref(useRoutes?.query?.id ?? '')

//缓存页面被激活时
onActivated(() => {
    dataId.value = useRoutes?.query?.id ?? ''
    console.log(useRoutes.query)
    getContractList()
    contractId.value=''
})

//项目名称
const contractList = ref([
    {name: '陈油路', key: '陈油路'},
    {name: '奉建路', key: '奉建路'}
])
const contractId=ref('')
const projectId=ref('')
const getContractList = async() => {
    const {error, code, data} = await contractApi.getReturnList()
    if (!error && code === 200) {
        contractList.value = getArrValue(data)
        
    } else {
        contractList.value = []
     
    }
}
const contarctIdChange=(val)=>{
    getTableData(val)
    contractList.value.forEach((ele)=>{
        if(ele.id===contractId.value){
            projectId.value=ele.projectId
        }
    })
}
//表格数据
const tableData = ref([])
const tableLoading=ref(false)

const getTableData = async(id) => {
    tableLoading.value = true
    const {error, code, data} = await contractApi.getListByContractId({contractId:id})
    tableLoading.value = false
    if (!error && code === 200) {
        tableData.value = getArrValue(data)
        
    } else {
        tableData.value = []
     
    }
}
//自定义表头样式
const tableHeaderCellStyle = () => {
    return {backgroundColor: '#93D2F3', color: '#101010'}
}

//自定义行的样式
const tableRowStyle = ({ row }) => {
    if (row.isTimeOut === '2' ) {
        return {backgroundColor: '#BD3124', color: '#fff'}
    }
}

//返回
const goBackClick = () => {
    router.back()
}
const saveLoaing=ref(false)
//新增
const saveOrUpdateBatchReturned=async(obj)=>{
    saveLoaing.value=true;
    const {error, code, data,msg} = await contractApi.saveOrUpdateBatchReturned( obj)
    saveLoaing.value=false;
    if (!error && code === 200) {
        window.$message.success(msg)
    } 

}

//提交保存
const saveClick = () => {
    console.log(tableData.value,'tableData');
    saveOrUpdateBatchReturned({
        list:tableData.value,
        contractId:contractId.value,
        projectId:projectId.value
    })
}
</script>

<style lang="scss">
.hc-project-contract-update-data .el-table {
    --el-table-border-color: #b7b7b7;
    --el-table-row-hover-bg-color: inherit;
}
</style>
