<template>
  <div class="content-box">
    <img @click="refreshData" :src="titleIcon" />
    <span>{{ title }}</span>
    <div v-if="isSelect" class="dro cl-dropdown">
      <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          {{ titleText }}
          <DownOutlined />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item @click="changeTab(item)" v-for="(item, index) in selectList" :key="index">
              <a href="javascript:;">{{ item.name }}</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, toRef } from 'vue';
import titleIcon from '../../assets/images/weatheHome/title-icon.png';
import { DownOutlined } from '@ant-design/icons-vue';
import eventBus from '/@/utils/eventBus';
const props = defineProps({
  title: { type: String },
  isSelect: { type: Boolean, default: false },
  isCirculate: { type: Boolean, default: false },
  selectList: {
    type: Array,
    default: () => {
      return [];
    },
  },
  fnName: { type: String, default: '' },
  refreshName: { type: String, default: '' },
  keywords: { type: String, default: '今日' },
});
const titleText = toRef(props, 'keywords');
// 通知雨情 改变数据
function changeTab(item) {
  titleText.value = item.name;
  eventBus.emit(props.fnName, item);
}
// 通知刷新当前模块数据
function refreshData() {
  eventBus.emit(props.refreshName);
}
// eventBus.on('toDzlxid', (value) => {
//   dzlxid.value = value;
// });
const devicesImg = {
  titleIcon: titleIcon,
};
</script>
<style lang="less" scoped>
.content-box {
  position: relative;
}
.content-box span {
  font-family: Source Han Sans CN;
  font-size: 18px;
  font-weight: 500;
  line-height: 50px;
  align-items: center;
  letter-spacing: 0.1em;

  background: linear-gradient(180deg, #ffffff 0%, #d3f0ff 58%, #6fcfff 100%), #ffffff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-shadow: 0px -3px 6px 0px rgba(0, 102, 255, 0.6);
}
.content-box img {
  display: inline-block;
  position: relative;
  top: -5px;
}
.dro {
  position: absolute;
  right: 10px;
  top: 0;
}
</style>
<style lang="less">
.ant-dropdown-content {
  height: 350px !important;
  overflow: auto !important;
}
</style>
