<template>
    <a-space style="width: 100%;" class="flex justify-end">
        <span style="color: red;">违规开工建设照片(建筑单体照片)2张</span>
        <a-button class="editable-add-btn" type="primary" @click="handleAdd" style="margin-bottom: 8px">添加</a-button>
        <!-- <a-button class="editable-add-btn" type="primary" @click="save" style="margin-bottom: 8px">保存</a-button> -->
    </a-space>
    <a-table :columns="columns" :data-source="dataSource" bordered>
        <template #headerCell="{ column }">
            <!-- 添加必填字段 -->
            <template v-for="col in ['name', 'zw', 'phone']" :key="col">
                <template v-if="column.dataIndex === col">
                    <span>
                        {{ column.title }}
                    </span>
                    <span style="color:red;"> * </span>
                </template>
            </template>
        </template>
        <template #bodyCell="{ column, text, record, index }">
            <template v-for="col in ['wgkgjsqy']" :key="col">
                <template v-if="column.dataIndex === col">
                    <div>
                        <a-input style="margin: -5px 0" v-model:value="record[col]" />
                    </div>
                </template>
            </template>
            <template v-for="col in ['jd', 'wd']" :key="col">
                <template v-if="column.dataIndex === col">
                    <div>
                        <a-input style="margin: -5px 0" placeholder="十进制，保留五位小数" v-model:value="record[col]" />
                    </div>
                </template>
            </template>
            <template v-if="column.dataIndex === 'wgkgjszp'">
                <div style="position: relative;">
                    <JUpload :file-type="'image'" :returnUrl="false" :maxCount="2" @update:value="updataVal($event,index)" />
                </div>
            </template>
            <template v-if="column.dataIndex === 'operation'">
                <div>
                    <a-button type="primary" @click="handleDel(index)" size="small" v-if="index !== 0">删除</a-button>
                    <a-button type="primary" size="small" v-else>/</a-button>
                </div>
            </template>
        </template>
    </a-table>
</template>
<script lang="ts" setup>
import { ref, watch, nextTick } from 'vue';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
function requerInput(e) {
    e.target._value = e.target._value.replace(/^-?(180(\.(\d{5}))|((1[0-7]|[1-9])?\d(\.\d{5})))$/g,'')
}
const columns = [
    {
        title: '污染区域',
        dataIndex: 'wgkgjsqy',

    },
    {
        title: '纬度',
        dataIndex: 'jd',
    },
    {
        title: '经度',
        dataIndex: 'wd',
    },
    {
        title: '污染区域照片',
        dataIndex: 'wgkgjszp',
    },
    {
        title: '操作',
        dataIndex: 'operation',
    },

];
interface DataItem {
    wgkgjsqy: string;
    jd: string;
    wd: string;
    wgkgjszp: string;
    wrwgType: number;
}

const data: DataItem[] = [{
    wgkgjsqy: '',
    jd: '',
    wd: '',
    wgkgjszp: '',
    wrwgType: 2,
}];
const dataSource = ref(data);

// watch(
//     () => props.data,
//     async (val: any) => {
//         val && nextTick(async () => {
//             dataSource.value = val
//             console.log(val, 'val')
//             console.log(dataSource.value)
//         });
//     }, { deep: true }
// );
// 获取图片上传路劲
function updataVal($event,index) {
    let arr = []
    $event.forEach(element => {
        arr.push(element.filePath)
    });
    dataSource.value[index].wgkgjszp = arr.join(',')
    // console.log($event,index);
    // dataSource.value[index].wgkgjszp = $event
}
const handleAdd = () => {
    // key需要获取数据最后一条id +1
    const newData = {
        wgkgjsqy: '',
        jd: '',
        wd: '',
        wgkgjszp: '',
        wrwgType: 2,
    };
    dataSource.value.push(newData);
}
const handleDel = (key: any) => {
    dataSource.value = dataSource.value.filter((item: any, index: any) => index != key);
}
defineExpose({
    dataSource,
})

</script>
