<template>
  <div
    :style="{ top: props.topDistance }"
    :class="['box',isButtom ? 'isButtom' : '',title == '圈层设置' ? 'bigbox1' : '']"
    v-if="show"
  >
    <div class="title_box">
      <span>{{ title }}{{ props.topDistance }}</span>
      <el-icon size="16px" style="cursor: pointer" @click="handleGroup">
        <Close />
      </el-icon>
    </div>
    <!-- 自定义内容 -->
    <slot />
    <div class="address_box" v-if="showAddress">
      <el-icon size="18px" color="#779DCD">
        <LocationFilled />
      </el-icon>
      <span>四川省眉山市仁寿县红星路29号</span>
    </div>
    <div class="but_box" v-if="showbut">
      <span
        :class="['but', butList.length == 1 ? 'oneBut' : '']"
        v-for="(item, index) in butList"
        :key="item"
        @click="onClickBut(index)"
        >{{ item }}</span
      >
    </div>
  </div>
</template>

<script setup>
import { reactive, getCurrentInstance, defineEmits } from "vue";
const emit = defineEmits(["handleIdentity"]);
const { proxy } = getCurrentInstance();
//参数
const props = defineProps({
  //是否显示
  show: Boolean,
  //是否显示详情
  //是否显示地址
  showAddress: Boolean,
  //是否显示按钮
  showbut: Boolean,
  //按钮数据
  butList: Array,
  //是否显示在底部
  isButtom: Boolean,
  //标题
  title: String,
  topDistance: String
});
//关闭弹窗
function handleGroup() {
  emit("handleIdentity", false);
}

function onClickBut(index) {
  proxy.mittBus.emit("dialogClickBut", {
    index,
    count: props.butList.length
  });
}
</script>

<style lang="scss" scoped>
.box {
  position: absolute;
  width: 364px;
  background: rgba(5, 35, 66, 0.98);
  padding: 10px;
  border-radius: 5px;
  z-index: 11;
  left: 388px;
  top: 100px;

  .but_box {
    display: flex;
    justify-content: center;

    > span {
      margin: 0 4px;
    }
  }

  .address_box {
    color: #779dcd;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;

    > span {
      margin-left: 5px;
    }
  }

  .title_box {
    display: flex;
    justify-content: space-between;
  }
}

// 按钮样式
.but {
  padding: 3px 7px;
  background: rgba(37, 202, 255, 0);
  border: 1px solid #3180ea;
  box-shadow: 0px 0px 17px 1px rgba(43, 140, 230, 0.26);
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}

.oneBut {
  padding: 3px 25px;
}

.isButtom {
  top: unset;
  bottom: 0px !important;
}
::v-deep .el-form-item__label {
  color: #fff;
}
</style>