<template>
    <HcTable ui="no-border" border :column="tableColumn" :datas="tableData" :loading="tableLoading">
        <template #key3="{row}">
            <el-input v-model="row.key3" placeholder="请输入抽检意见" v-if="row.isEdit"/>
            <span v-else>{{row.key3}}</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>
            <el-button type="danger" size="small" @click="delClick(row)">删除</el-button>
        </template>
    </HcTable>
</template>

<script setup>
import {ref, onMounted} 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: ''
    }
})

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

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

})

//表格数据
const tableColumn = ref([
    {key:'key1', name: '专家', width: 180},
    {key:'key2', name: '抽检所属'},
    {key:'key3', name: '抽检意见'},
    {key:'action', name: '操作', width: 140, align: 'center'},
])
const tableData = ref([
    {
        id: 1,
        key1: '张三',
        key2: '一工区',
        key3: '滚动面板是一种承载长页面的容器，当你需要滚动显示内容时使用，xxx'
    },
    {
        id: 2,
        key1: '张三',
        key2: '业主',
        key3: '滚动面板是一种承载长页面的容器，当你需要滚动显示内容时使用，xxx'
    },
    {
        id: 3,
        key1: '李四',
        key2: '业主',
        key3: '滚动面板是一种承载长页面的容器，当你需要滚动显示内容时使用，xxx'
    }
])

const tableLoading = ref(false)

//编辑
const editClick = (row) => {
    row.isEdit = true
}
//保存
const saveClick = (row) => {
    row.isEdit = false
}
//删除
const delClick = (row) => {
    delMessage(() => {

    })
}
</script>

<style lang="scss" scoped>

</style>
