<template>
  <div>
    <!-- 欢迎语 -->
    <div>
      <div class="card_title">
        <p class="main_title">欢迎语</p>
        <p class="sub_title">客户第一时间收到以下消息，充分利用"黄金五分钟"</p>
      </div>
      <main class="welcome_wrap">
        <div class="info_item flex-row">
          <img class="avatar" :src="computedAvatar" alt="" />
          <div class="info_con flex1">
            <div class="flex-row cross-center welcome_con" @click.stop>
              <div class="info_con_wrap flex1 welcome_text">
                <div
                  ref="contentDom"
                  :class="{ empty: !welcome_text }"
                  v-html="welcome_html"
                  contenteditable="true"
                  @input="onInput"
                  @focus="showInsertText = true"
                  @click.stop="onClick"
                  class="text_inp"
                ></div>
              </div>
              <div
                class="info_con_opt flex-column main-center"
                @click.stop="showInsertText = true"
              >
                <img
                  src="https://wlmvp-cos.weiling.cn/worktable-h5/icon/code_wel_edit.png"
                  alt=""
                />
              </div>
            </div>
            <div class="wildcard flex-row cross-center" v-show="showInsertText">
              <div
                v-for="item in tagList"
                @click.stop="onWildCustomerName($event, item)"
                :key="item"
                class="flex-center"
              >
                <van-icon name="plus" color="var(--wl-primary-color)" /><span>{{
                  item
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <ul>
          <AttachmentList
            :attachments="attachments"
            @onDraggableDed="onDraggableDed"
            @onDelAttachment="onDelAttachment"
          />
          <li
            class="info_item material_add_wrap flex-row"
            v-if="attachments.length < 9"
          >
            <img class="avatar" :src="computedAvatar" alt="" />
            <div
              class="add_btn flex-center"
              @click.stop="actionMaterialChoose = true"
            >
              <van-icon name="plus" color="#FFFFFF" />
              <span>添加附件</span>
            </div>
          </li>
        </ul>
      </main>
    </div>
    <MaterialSelect
      v-model="actionMaterialChoose"
      :checkedData="attachments"
      v-bind="$attrs"
      @onHandleChange="onHandleMaterialChange"
    />
  </div>
</template>

<script lang="ts">
export default {
  name: "BCCodeWelcomeMsg",
};
</script>
<script lang="ts" setup>
import useRichText from "./hooks/useRichText";
import { ref, computed, watch, nextTick } from "vue";
import MaterialSelect from "./components/MaterialSelect/index.vue";
import AttachmentList from "./components/AttachmentList/index.vue";

interface TWelcomeText {
  content?: string;
}
interface TWelcomeAttachment {
  msgtype: string;
  link?: object;
  image?: object;
}
interface TWelcomeInfo {
  text?: TWelcomeText;
  attachments?: TWelcomeAttachment[];
}
interface TUserInfo {
  head_img_url: string;
  [prop: string]: any;
}
interface Props {
  data: TWelcomeInfo;
  userInfo: TUserInfo;
}
const props = withDefaults(defineProps<Props>(), {
  data: () => null,
  userInfo: () => {},
});

const emit = defineEmits<{
  (e: "onWelcomeChange", val: Object);
}>();
const { initWelcomeText, onContentInput, onContentKeyUp, onInset } =
  useRichText();
const contentDom = ref(null);
// const userList = ref([]);
const tagList = ref(["客户昵称", "员工名称"]);
const welcome_html = ref("");
const welcome_text = ref("");
const showInsertText = ref(false);
const attachments = ref([]);
const actionMaterialChoose = ref(false);
const emitInfo = computed(() => {
  return {
    text: {
      content: welcome_text.value,
    },
    attachments: attachments.value,
  };
});
const computedAvatar = computed(() => {
  return (
    props.userInfo?.head_img_url ||
    "https://wlmvp-cos.weiling.cn/worktable-h5/icon/default_avatar.png"
  );
});
const onInput = (e: any) => {
  welcome_text.value = onContentInput(e);
  emit("onWelcomeChange", emitInfo.value);
};
const onClick = () => {
  onContentKeyUp(tagList.value);
};
// 通配符点击
const onWildCustomerName = (e: Event, text: string) => {
  e.preventDefault();
  onInset(text, contentDom.value);
  nextTick(() => {
    welcome_text.value = contentDom.value.innerText;
    emit("onWelcomeChange", emitInfo.value);
  });
};

// 删除附件
const onDelAttachment = (i: number) => {
  attachments.value.splice(i, 1);
  emit("onWelcomeChange", emitInfo.value);
};
// 排序
const onDraggableDed = (list) => {
  attachments.value = list;
  emit("onWelcomeChange", emitInfo.value);
};
// 上传图片
// const onUploadChange = (url: string) => {
//   attachments.value.push({
//     image: {
//       pic_url: url,
//     },
//   });
//   emit("onWelcomeChange", emitInfo.value);
// };
// 资料选择
const onHandleMaterialChange = (res) => {
  attachments.value.push(res);
  actionMaterialChoose.value = false;
  emit("onWelcomeChange", emitInfo.value);
};

let lock = false;
watch(
  () => props.data,
  (val) => {
    if (val && !lock) {
      lock = true;
      welcome_html.value = initWelcomeText(val.text?.content, [
        "客户昵称",
        "员工名称",
      ]);
      welcome_text.value = val.text?.content;
      attachments.value = [...(val.attachments || [])];
    }
  },
  {
    immediate: true,
  },
);

// 模拟失焦/blur或者input不行
// const clickDocument = (e) => {
//   showInsertText.value = false;
//   emit("onWelcomeChange", emitInfo.value);
// };
// document.addEventListener("click", clickDocument);
// onBeforeUnmount(() => {
//   document.removeEventListener("click", clickDocument);
// });
</script>
<style lang="scss" scoped>
.card_title {
  margin-bottom: 10px;

  .main_title {
    position: relative;
    font-weight: 500;
    font-size: 16px;
    color: #000000;
  }
}

.sub_title {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--wl-text-color-secondary-2);
}

.welcome_wrap {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 16px 9px 16px 16px;

  .info_item {
    margin-bottom: 14px;

    &:last-child {
      margin-bottom: 0;
    }

    .avatar {
      width: 34px;
      height: 34px;
      border-radius: 4px;
      margin-right: 8px;
    }

    .info_con_wrap {
      background: #ffffff;
      border-radius: 10px;
      padding: 10px;
      margin-right: 10px;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-top: 8px solid transparent;
        border-right: 10px solid #fff;
        border-bottom: 8px solid transparent;
        left: -5px;
        top: 8px;
      }
    }

    .info_con_opt {
      img {
        width: 18px;
        height: 18px;
      }

      img.line {
        margin-top: 20px;
      }
    }
  }
}

.welcome_text {
  .text_inp {
    position: relative;
    word-break: break-all;
    white-space: pre-wrap;
    box-sizing: border-box;
    background: #ffffff;
    color: #000000;
    outline: none;
    min-height: 20px;
    line-height: 20px;

    &.empty::before {
      position: absolute;
      content: "请输入欢迎语";
      left: 2px;
      top: 50%;
      font-size: 14px;
      transform: translateY(-50%);
      color: var(--wl-text-color-placeholder);
    }
  }
}

.wildcard {
  margin-top: 12px;

  div {
    width: 98px;
    height: 30px;
    color: var(--wl-primary-color);
    background: #ffffff;
    border-radius: 6px;
    margin-right: 12px;

    span {
      margin-left: 4px;
    }
  }
}

.material_add_wrap {
  margin-top: 14px;

  .avatar {
    opacity: 0;
  }

  .add_btn {
    width: 98px;
    height: 30px;
    background: var(--wl-primary-color);
    border-radius: 33px;

    span {
      margin-left: 4px;
      color: #fff;
    }
  }
}

.flex-row,
.flex-column {
  display: flex;
}

.flex-row {
  flex-direction: row;
}

.flex1 {
  flex: 1;
}

.flex-row > .flex1 {
  width: 0;
  min-width: 0;
}

.flex-column > .flex1 {
  height: 0;
  min-height: 0;
}

.cross-center {
  align-items: center;
}

.flex-column {
  flex-direction: column;
}

.main-center {
  justify-content: center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
