<template>
  <a-modal
    v-model:visible="show"
    width="1100px"
    style="top: 50%; transform: translateY(-50%)"
    title="添加联系人"
    @ok="handleOk"
    @cancel="handleCancel">
    <div style="width: 100%; height: 480px; display: flex">
      <div style="width: 300px; height: 100%; overflow-y: auto; padding: 0px, 12px">
        <div style="width: 100%; display: flex; position: relative">
          <div
            style="
              border-width: 0px;
              position: absolute;
              left: 0px;
              top: 5px;
              width: 5px;
              height: 15px;
              background: inherit;
              background-color: rgba(251, 156, 67, 1);
              border: none;
              border-radius: 5px;
              -moz-box-shadow: none;
              -webkit-box-shadow: none;
              box-shadow: none;
            "></div>
          <span style="margin-left: 24px; color: #333333">联系人名单</span>
        </div>
        <img
          style="width: 100%; margin-top: -10px"
          src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
        <a-input-search
          v-model:value="searchValue"
          style="margin-bottom: 8px"
          placeholder="请输入关键字" />
        <img
          style="width: 100%; margin-top: -10px"
          src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
        <a-tree
          :expanded-keys="expandedKeys"
          :auto-expand-parent="autoExpandParent"
          :tree-data="gData"
          @expand="onExpand">
          <template #title="{ title }">
            <span v-if="title.indexOf(searchValue) > -1">
              {{ title.substr(0, title.indexOf(searchValue)) }}
              <span style="color: #f50">{{ searchValue }}</span>
              {{ title.substr(title.indexOf(searchValue) + searchValue.length) }}
            </span>
            <span v-else>{{ title }}</span>
          </template>
        </a-tree>
      </div>
      <div style="width: calc(100% - 200px); height: 100%; padding: 12px"> 2</div>
    </div>
  </a-modal>
</template>

<script lang="ts">
  import { ref } from 'vue';
  import { defineComponent } from 'vue';

  export default defineComponent({
    setup(props, { emit }) {
      const handleOk = () => {
        // 处理确定按钮的逻辑
        console.log('点击了确定按钮');
      };
      const searchValue = ref<string>('');
      const getData = () => {
        show.value = true;
      };
      const show = ref(false);
      const handleCancel = () => {
        // 处理取消按钮的逻辑
        console.log('点击了取消按钮');
        emit('handleCancel', null);
        show.value = false;
      };
      return {
        handleOk,
        show,
        getData,
        searchValue,
        handleCancel,
      };
    },
  });
</script>
