<template>
    <div class="centent">
        <div class="header">
            <el-button type="primary" @click="dialogVisible = true">添加</el-button>
        </div>
        <div class="center">
            <el-table
                :data="tableData"
                :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }"
                style="width: 100%"
                header-row-class-name="tabth"
            >
                <el-table-column prop="data" label="日期" />
                <el-table-column prop="layerName" label="图层名:" />
                <el-table-column prop="type" label="种类" />
                <el-table-column prop="suiffx" label="格式" />
                <el-table-column prop="remark" label="备注" />
                <el-table-column prop="操作" label="操作">
                    <template #default="scope">
                        <el-button
                            size="small"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="dialogVisible" title="添加" width="30%" :before-close="handleClose">
            <el-form label-width="100px" :model="formLabelAlign" style="max-width: 460px">
                <el-form-item label="日期:">
                    <el-input v-model="formLabelAlign.data" placeholder="例如：2023-06-15" />
                </el-form-item>
                <el-form-item label="图层名:">
                    <el-input
                        v-model="formLabelAlign.layerName"
                        placeholder="例如：2023-06-15-xiaomai"
                    />
                </el-form-item>
                <el-form-item label="种类:">
                    <el-select
                        popper-class="select_type"
                        v-model="formLabelAlign.type"
                        width="100"
                        placeholder="请选择"
                    >
                        <el-option label="湿润" value="湿润" />
                        <el-option label="适宜" value="适宜" />
                        <el-option label="轻度干旱" value="轻度干旱" />
                        <el-option label="中度干旱" value="中度干旱" />
                        <el-option label="重度干旱" value="重度干旱" />
                        <el-option label="无冻害" value="无冻害" />
                        <el-option label="轻度冻害" value="轻度冻害" />
                        <el-option label="中度冻害" value="中度冻害" />
                        <el-option label="重度冻害" value="重度冻害" />
                        <el-option label="洪涝" value="洪涝" />
                        <el-option label="好" value="好" />
                        <el-option label="较好" value="较好" />
                        <el-option label="适中" value="适中" />
                        <el-option label="较差" value="较差" />
                        <el-option label="差" value="差" />
                        <el-option label="茶叶" value="茶叶" />
                        <el-option label="大豆" value="大豆" />
                        <el-option label="花生" value="花生" />
                        <el-option label="蓝莓" value="蓝莓" />
                        <el-option label="地瓜" value="地瓜" />
                        <el-option label="小麦" value="小麦" />
                        <el-option label="玉米" value="玉米" />
                        <el-option label="马铃薯" value="马铃薯" />
                        <el-option label="白菜和萝卜" value="白菜和萝卜" />
                    </el-select>
                </el-form-item>
                <el-form-item label="格式:">
                    <el-select popper-class="select_type" v-model="formLabelAlign.suffix" width="100" placeholder="请选择">
                        <el-option label="tif" value="features" />
                        <el-option label="shp" value="gridValue" />
                    </el-select>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="formLabelAlign.remark" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="addlist">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted, inject, reactive, watch } from 'vue';
import { ElMessageBox } from 'element-plus';
import { getsaveMap } from '@/api/manage/manaje.js';
const dialogVisible = ref(false);

const formLabelAlign = reactive({
    data: '',
    type: '',
    suffix: '',
    remark: '',
    layerName: '',
});

const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
];

/*-----------接口---------------*/

const getsaveMaps = data => {
    console.log(data);
    getsaveMap({ mapServices: data }).then(res => {
        console.log(res.data);
    });
};

/*------------事件----------------*/
const addlist = () => {
    dialogVisible.value = false;
    getsaveMaps(formLabelAlign);
};
</script>

<style lang="scss" scoped>
.centent {
    width: 98%;
    margin: 10px;
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.08);
    .header {
        padding: 10px;
    }
    .center {
        padding: 0 20px;
        :deep(
                .el-table .el-table__header-wrapper th,
                .el-table .el-table__fixed-header-wrapper th
            ) {
            color: rgba(0, 0, 0, 1);
        }
        height: 93%;
        :deep(.el-table__inner-wrapper) {
            height: 96% !important;
        }
        .example-pagination-block {
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        :deep(.tabth) {
            background-color: rgba(247, 247, 247, 1);
            .el-table-fixed-column--left {
                background: rgba(247, 247, 247, 1) !important;
            }
        }
    }
}
</style>
<style lang="scss">
.select_type {
    background: #fff;
    .el-select-dropdown__item.hover {
        background: rgba(217, 231, 255, 0.2);
    }
    .el-select-dropdown__item {
        color: black;
    }
}
</style>
