<template>
    <div class="hc-csc-meta-table-data" v-loading="isLoading">
        <el-scrollbar>
            <table class="hc-csc-meta-table" border="1">
                     <template v-for="item in metaDataTableval" :key="item">
                        <tr class="hc-csc-meta-table-tr" v-if="item.isType === 1">
                            <td colspan="2" class="hc-csc-meta-table-td title">{{item.containerName}}</td>
                        </tr>
                        <tr class="hc-csc-meta-table-tr" v-else>
                            <td class="hc-csc-meta-table-td name">{{item.containerName}}</td>
                            <td class="hc-csc-meta-table-td val" v-if="isEdit">{{item.keyValue}}</td>
                            <td  v-else style="padding:0px;border: none;">
                                <input type="input" data-id="project" name="project[]" class="iptclass" v-model="item.keyValue" :disabled="item.captureMode===1">
                            </td>
                        </tr>
                    </template>
           
               
      
            </table>
        </el-scrollbar>
    </div>
</template>

<script setup>
import {ref, watch} from "vue";

//参数
const props = defineProps({
    projectId: {
        type: [String,Number],
        default: ''
    },
    contractId: {
        type: [String,Number],
        default: ''
    },
    loading: {
        type: Boolean,
        default: false
    },
    isEdit:{
       type: Boolean,
        default: true 
    },
    metaDataTable:{
        type: [Array],
        default: []
    }
 
})

//变量
const projectId = ref(props.projectId);
const contractId = ref(props.contractId);
const isLoading = ref(props.loading);
const isEditval=ref(props.isEdit)
const metaDataTableval=ref(props.metaDataTable)
//监听
watch(() => [
    props.loading,
    props.isEdit,
    props.metaDataTable

], ([loading,isEdit,metaDataTable]) => {
    isLoading.value = loading;
    isEditval.value=isEdit;
    metaDataTableval.value=metaDataTable
    
})
//深度监听
watch(() => [
    metaDataTableval.value
], ([val]) => {
   emit('changemeDataTable',val)
}, {
    deep: true
})
//事件
const emit = defineEmits(['changemeDataTable'])

// 元数据
const metaDataTable = ref([
    {type: 1, title: '聚合层次', val: ''},
    {type: 2, title: '来源', val: ''},
    {type: 1, title: '全宗名称', val: ''},
    {type: 1, title: '立档单位名称', val: ''},
    {type: 1, title: '电子文件号', val: ''},
    {type: 2, title: '文件联', val: ''},
    {type: 1, title: '目录文件', val: ''},
    {type: 1, title: '文件件数', val: ''},
    {type: 1, title: '文件页数', val: ''},
    {type: 1, title: '元数据目录文件', val: ''},
    {type: 1, title: '验证码', val: ''},
    {type: 2, title: '内容描述', val: ''},
    {type: 1, title: '题名', val: ''},
    {type: 1, title: '关键词', val: ''},
    {type: 1, title: '摘要', val: ''},
    {type: 1, title: '生成方式', val: ''},
    {type: 1, title: '责任者', val: ''},
    {type: 1, title: '文件创建日期', val: ''},
    {type: 2, title: '组件', val: ''},
    {type: 1, title: 'IP地址', val: ''},
    {type: 1, title: '桩号', val: ''},
    {type: 1, title: '上传时间', val: ''},
    {type: 2, title: '文件标识码', val: ''},
    {type: 1, title: '文号', val: ''},
    {type: 1, title: '表单标识码', val: ''},
    {type: 2, title: '竣工图', val: ''},
    {type: 1, title: '图号', val: ''},
    {type: 1, title: '图幅', val: ''},
    {type: 1, title: '图表来源', val: ''},
    {type: 1, title: '引用变更令编号', val: ''},
    {type: 2, title: '照片文件', val: ''},
    {type: 1, title: '主题', val: ''},
    {type: 1, title: '拍摄时间', val: ''},
    {type: 1, title: '拍摄地点', val: ''},
    {type: 1, title: '摄影者', val: ''},
    {type: 1, title: '背景', val: ''},
    {type: 1, title: '分组号', val: ''},
    {type: 1, title: '组内照片编号', val: ''},
    {type: 1, title: '水平分辨率', val: ''},
    {type: 1, title: '垂直分辨率', val: ''},
    {type: 1, title: '保管期限', val: ''},
    {type: 1, title: '格式信息', val: ''},
    {type: 2, title: '电子属性', val: ''},
    {type: 1, title: '位置', val: ''},
    {type: 1, title: '计算机文件名', val: ''},
    {type: 1, title: '计算机文件大小', val: ''},
    {type: 2, title: '数字化属性', val: ''},
    {type: 1, title: '扫描分辨率', val: ''},
    {type: 1, title: '扫描色彩模式', val: ''},
    {type: 2, title: '电子签名', val: ''},
    {type: 1, title: '签名类型', val: ''},
    {type: 1, title: '签名时间', val: ''},
    {type: 1, title: '签名人', val: ''},
    {type: 1, title: '建设项目', val: ''},
    {type: 2, title: '业务事项', val: ''},
    {type: 1, title: '单位工程', val: ''},
    {type: 1, title: '分部工程', val: ''},
    {type: 1, title: '分项工程', val: ''},
    {type: 1, title: '单位工程编码', val: ''},
    {type: 1, title: '分部工程编码', val: ''},
    {type: 1, title: '分项工程编码', val: ''},
    {type: 2, title: '责任者', val: ''},
    {type: 1, title: '责任者名称', val: ''},
    {type: 1, title: '个人职位', val: ''},
    {type: 1, title: '责任者手机号', val: ''},
    {type: 2, title: '关系实体', val: ''},
    {type: 1, title: '关系标识', val: ''},
    {type: 1, title: '关系类型', val: ''},
    {type: 1, title: '关系', val: ''},
    {type: 1, title: '相关实体标识', val: ''},
])

</script>

<style lang="scss" scoped>
.hc-csc-meta-table-data {
    position: relative;
    height: 100%;
    .hc-csc-meta-table {
        border-spacing: 0;
        border: 1px solid #E9E9E9;
        border-collapse: collapse;
        width: 100%;
        .hc-csc-meta-table-tr {
            position: relative;
            background: #f1f5f8;
            color: #50545e;
            transition: background-color .25s ease;
            &:hover {
                background: var(--el-color-primary-light-9);
            }
            .hc-csc-meta-table-td {
                text-align: left;
                padding: 10px 12px;
                font-size: 14px;
                border: 1px solid #E9E9E9;
                &.name {
                    width: 150px;
                }
                &.title {
                    color: #1a1a1a;
                    text-align: center;
                    background-color: #dae8f3;
                }
            }
        }
    }
    .iptclass{
        width: 100%;
        height: 30px;
        border-radius: 28px;
        border: 1px solid #dae8f3;
        padding-left: 5px;
        outline-color:  #d6eafa;;
    }
}
</style>
