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

<script setup>
import { ref } from 'vue'
import { useGlobal } from '@/store/global.js'
const global = useGlobal()
const emit = defineEmits(['success'])

const dialogVisible = ref(false)

const remark = ref('')

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

function confirmHandle() {
    emit('success', remark.value)
    dialogVisible.value = false
}

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

defineExpose({
    show
})
</script>

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

.content {
    padding: 20px 0;
}

.footer_wrap {
    display: flex;

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