<template>
    <div class="base-container">
        <el-form inline class="form">
            <el-form-item label="名称" size="large">
                <el-input class="input" v-model="name" placeholder="请输入名称" clearable />
            </el-form-item>
            <el-form-item size="large">
                <el-button @click="onSubmit">重置</el-button>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button type="primary" @click="onSubmit">
                    <el-icon size="16"><CirclePlus /></el-icon>
                    <span>新增容器体系</span>
                </el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column prop="date" label="容器体系名称" />
            <el-table-column prop="name" label="作物类型" />
            <el-table-column prop="address" label="容器模型" />
            <el-table-column prop="address" label="时空容器">
                <template #default="scope">
                    <span @click="handlePage('space')">{{ scope.row.address }}</span>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="310" align="center">
                <template #default>
                    <el-button type="primary" size="large">复制</el-button>
                    <el-button type="primary" size="large" @click="handlePage('period')">物候期管理</el-button>
                    <el-button type="danger" size="large">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const name = ref("");

const onSubmit = () => {
    console.log("submit!");
};

const handlePage = (path) =>{
    router.push('/layout/' + path)
}

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",
    },
];
</script>

<style lang="scss" scoped>
.base-container {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 5px;
    padding: 22px;
    box-sizing: border-box;
    .form {
        .input {
            width: 220px;
        }
    }
}
</style>
