
<template>
    <div style=" width:100%">
        <el-card style="max-width: 100vw;margin: 1.5vw;max-height:100vh;height:80vh ">
            <template #header>
                <strong>子模块1</strong>
            </template>

            <!--            <div  style=" display: flex;flex-direction: column;justify-content: center">-->
            <div class="ModuleData" style="margin-left: 30vw;width: 24vw;height: 55vh;display: flex;flex-direction: column;justify-content: space-around;
">
                <div style="display: flex;flex-direction: row;justify-content: space-between">
                    <strong>01.模块名称 </strong>
                    <span  style="width: 250px">子模块1</span>
                </div>
                <div style="display: flex;flex-direction: row;justify-content: space-between">
                    <strong>02.模块周期</strong>
                    <span  style="width: 250px">13天</span>
                </div>
                <div style="display: flex;flex-direction: row;justify-content: space-between">
                    <strong>03.工作量 </strong>
                    <span  style="width: 250px">子模块1</span>
                </div>
                <div style="display: flex;flex-direction: row;justify-content: space-between">
                    <strong>04.负责人 </strong>
                    <span  style="width: 250px">子模块1</span>
                </div>
                <div style="display: flex;flex-direction: row;justify-content: space-between">
                    <strong>05.状态 </strong>
                    <el-autocomplete
                            v-model="state"
                            :fetch-suggestions="querySearch"
                            popper-class="my-autocomplete"
                            placeholder="Please input"
                            @select="handleSelect"
                            style="width: 250px"
                    >
                        <template #suffix>
                            <el-icon class="el-input__icon" @click="handleIconClick">
                                <edit />
                            </el-icon>
                        </template>
                        <template #default="{ item }">
                            <div class="value">{{ item.value }}</div>
                            <span class="link">{{ item.link }}</span>
                        </template>
                    </el-autocomplete>
                </div>
                <div style="display: flex;flex-direction: row;justify-content: space-between">
                    <strong>06.截止时间 </strong>
                    <span  style="width: 250px">子模块1</span>
                </div>
                <div style="display: flex;flex-direction: row;justify-content: space-between">
                    <strong>07.简介 </strong>
                    <el-input
                            v-model="textarea2"
                            style="width: 250px"
                            :autosize="{ minRows: 4, maxRows: 6 }"
                            type="textarea"
                            placeholder="Please input"
                            :row="4"
                    />
                </div>
            </div>
            <!--            </div>-->
        </el-card>

    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { Edit } from '@element-plus/icons-vue';

interface LinkItem {
    value: string
    link: string
}

const state = ref('');
const links = ref<LinkItem[]>([]);

const querySearch = (queryString: string, cb) => {
    const results = queryString
        ? links.value.filter(createFilter(queryString))
        : links.value;
    // call callback function to return suggestion objects
    cb(results);
};
const createFilter = (queryString) => {
    return (restaurant) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
    };
};
const loadAll = () => {
    return [
        { value: 'vue', link: 'https://github.com/vuejs/vue' },
        { value: 'element', link: 'https://github.com/ElemeFE/element' },
        { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
        { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
        { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
        { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
        { value: 'babel', link: 'https://github.com/babel/babel' }
    ];
};
const handleSelect = (item: LinkItem) => {
    console.log(item);
};

const handleIconClick = (ev: Event) => {
    console.log(ev);
};

onMounted(() => {
    links.value = loadAll();
});
</script>

<style>
.my-autocomplete li {
    line-height: normal;
    padding: 7px;
}
.my-autocomplete li .name {
    text-overflow: ellipsis;
    overflow: hidden;
}
.my-autocomplete li .addr {
    font-size: 12px;
    color: #b4b4b4;
}
.my-autocomplete li .highlighted .addr {
    color: #ddd;
}
</style>