<template>
    <HcTable ui="no-border" border :column="tableColumn" :datas="tableData" :loading="tableLoading" :isIndex="false">
        <template #key2="{row}">
            <div class="table-score-input-box" v-if="row.isEdit">
                <el-input v-model="row.key2" placeholder="请输入完整性"/>
            </div>
            <span v-else>{{row.key2 || '-'}}</span>
        </template>
        <template #key3="{row}">
            <div class="table-score-input-box" v-if="row.isEdit">
                <el-input v-model="row.key3" placeholder="请输入扣分"/>
            </div>
            <span v-else>{{row.key3 || '-'}}</span>
        </template>
        <template #key4="{row}">
            <div class="table-score-input-box" v-if="row.isEdit">
                <el-input v-model="row.key4" placeholder="请输入规范性"/>
            </div>
            <span v-else>{{row.key4 || '-'}}</span>
        </template>
        <template #key5="{row}">
            <div class="table-score-input-box" v-if="row.isEdit">
                <el-input v-model="row.key5" placeholder="请输入扣分"/>
            </div>
            <span v-else>{{row.key5 || '-'}}</span>
        </template>
        <template #action="{row}">
            <el-button type="success" size="small" v-if="row.isEdit" @click="saveClick(row)">保存</el-button>
            <el-button type="primary" size="small" v-else @click="editClick(row)">编辑</el-button>
        </template>
    </HcTable>
</template>

<script setup>
import {ref, onMounted, watch} from "vue";
import {getArrValue} from "js-fast-way"
import {delMessage} from "~uti/tools";

//参数
const props = defineProps({
    projectId: {
        type: [String,Number],
        default: ''
    },
    contractId: {
        type: [String,Number],
        default: ''
    },
    type: {
        type: [String,Number],
        default: ''
    }
})

//变量
const projectId = ref(props.projectId);
const contractId = ref(props.contractId);
const typeId = ref(props.type);

//监听
watch(() => [
    props.type
], ([type]) => {
    typeId.value = type;
})

//渲染完成
onMounted(() => {

})

//表格数据
const tableColumn = ref([
    {key:'key1', name: '项目'},
    {key:'key2', name: '完整性', width: 160, align: 'center'},
    {key:'key3', name: '扣分', width: 160, align: 'center'},
    {key:'key4', name: '规范性', width: 160, align: 'center'},
    {key:'key5', name: '扣分', width: 160, align: 'center'},
    {key:'action', name: '操作', width: 80, align: 'center'},
])
const tableData = ref([
    {
        id: 1,
        key1: '设计变更及竣工图',
        key2: '',
        key3: '',
        key4: '',
        key5: ''
    },
    {
        id: 2,
        key1: '施工准备文件',
        key2: '',
        key3: '',
        key4: '',
        key5: ''
    },
    {
        id: 3,
        key1: '试验资料（含工地试验室资质证书、仪器标定证书等）',
        key2: '',
        key3: '',
        key4: '',
        key5: ''
    },
    {
        id: 4,
        key1: '安全生产、文明施工资料',
        key2: '',
        key3: '',
        key4: '',
        key5: ''
    }
])

const tableLoading = ref(false)

//编辑
const editClick = (row) => {
    row.isEdit = true
}
//保存
const saveClick = (row) => {
    row.isEdit = false
}
</script>

<style lang="scss" scoped>
.table-score-input-box {
    position: relative;
    text-align: left;
}
</style>
