<template>
  <el-dialog v-model="modelValue" :before-close="close" width="300px" center class="analysisDialog"
    :append-to-body="true">

    <template #title>
      <div class="dialogTitle"> 语义分析类别选择</div>
    </template>
    <div>
      <div v-for="(item, index) in butList" :key="index" class="dialogItem">
        <div class="flex align-center" style="width: 80%;" @click="selectiveType(item)">
          <img :src="item.icon" alt="">
          <span>{{ item.text }}</span>
        </div>
        <el-icon>
          <Right />
        </el-icon>
      </div>
    </div>
    <!-- <template #footer>
      <div class="dialog-footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </div>
    </template> -->
  </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import emitter from "@/utils/eventBus.js";
const emit = defineEmits(['update:modelValue'])
const butList = reactive([
  { icon: require('@/assets/images/icon/4.png'), text: '警情' },
  { icon: require('@/assets/images/icon/3.png'), text: '案件' },
  { icon: require('@/assets/images/icon/2.png'), text: '情报线索' },
  { icon: require('@/assets/images/icon/1.png'), text: '附件上传' },
])
onMounted(() => {

})
const selectiveType = (val) => {
  emit('update:modelValue', false)
  emitter.emit('showDetailsTitle', val.text)
  emitter.emit('getData', val)
}
const close = () => {
  emit('update:modelValue', false)
}
</script>

<style lang="scss" scoped>
.dialogTitle {
  color: #007bd9;
  width: 100%;
  text-align: left;
  font-family: 'verdana';
  font-size: 18px;
  font-weight: bold;
}

.dialogItem {
  text-align: left;
  font-family: 'verdana';
  font-size: 16px;
  padding: 10px 20px;
  color: #000;
  box-shadow: 0 0 8px rgba(154, 154, 154, 0.3);
  margin-bottom: 10px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  img {
    margin-right: 10px;
  }
}
</style>
