<template>
    <el-dialog title="备注" width="800" v-model="dialogVisible">
        <div class="tag_wrap">
            <div class="item" v-for="item in tagList" :key="item.remark" @click="remark = item.remark">
                {{ item.remark }}
            </div>
        </div>
        <div class="content">
            <el-input type="textarea" :rows="6" v-model="remark" placeholder="请输入备注"></el-input>
        </div>
        <div class="footer_wrap">
            <div class="btn">
                <el-button type="primary" style="width: 100%;">确认</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)

const remark = ref('')

const tagList = ref([
    {
        remark: '味道淡一点'
    },
    {
        remark: '味道大一点'
    }
])

// 显示组件
const show = () => {
    dialogVisible.value = true
}

defineExpose({
    show
})
</script>

<style scoped lang="scss">
.tag_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    .item {
        padding: 10px 20px;
        border: 1px solid var(--primary-color);
        border-radius: 4px;
        color: var(--primary-color);
        font-size: var(--el-font-size-base);

        &:hover {
            cursor: pointer;
            background-color: var(--primary-color);
            color: #fff;
        }
    }
}

.content {
    padding: 20px 0;
}

.footer_wrap {
    display: flex;

    .btn {
        flex: 1;
    }
}
</style>