<script setup>
import { ref, computed, watch } from "vue";
import { raiInterface } from "@/api/api.js";
import { ElMessage } from "element-plus";

const props = defineProps({
  showRegularDlg: {
    type: Boolean,
    default: false,
  },
  dataRegular: {
    type: Object,
    default: {},
  },
});

const emit = defineEmits(["showRegularDlg", "dataRegular"]);

const querySearchList = ref([]);
const addDataList = ref([]);

const visibleTitle = computed(() => {
  return props.dataRegular.TagName || "";
});

const visibleText = computed(() => {
  let str =
    props.dataRegular.TagType == 2
      ? "所有【海外】的活动，和报告类型为【海外研究】的报告"
      : props.dataRegular.TagType == 3
      ? "所有路演回放音视频"
      : props.dataRegular.TagType == 4
      ? "所有问答系列音频"
      : "";
  return str;
});
watch(
  () => props.showRegularDlg,
  (newVal) => {
    if (newVal) {
      newVal && this.getInitList();
    }
  }
);

function handleClose() {
  querySearchList.value = [];
  addDataList.value = [];
  emit("update:showRegularDlg", false);
  emit("update:dataRegular", {});
}
async function addBannerHandler() {
  let isOk = addDataList.value.every((item) => item.name !== "");
  if (isOk) {
    let arr = [];
    addDataList.value.forEach((_) => {
      arr.push(_.id);
    });
    const res = await raiInterface.tagHot_activityListUpdate({
      ActivityIds: arr,
    });
    if (res.Ret === 200) {
      ElMessage.success("保存成功");
      handleClose();
    }
  } else {
    ElMessage.error("活动名称不能为空");
  }
}
// 删除
function deleteChildren(index) {
  addDataList.value.splice(index, 1);
}
async function querySearchAsync(query, cb) {
  cb([]);
  if (query) {
    const res = await raiInterface.tagHot_activityList({ KeyWord: query });
    if (res.Ret === 200) {
      console.log(res);
      querySearchList.value = res.Data.List.map((_) => {
        return {
          ..._,
          value: _.ActivityName + "，" + _.ActivityTime,
        };
      });
      cb(querySearchList.value);
    }
  }
}
function addActivityNameHandler() {
  addDataList.value.push({
    name: "",
    id: "",
  });
}
function tableSelectHandel(item) {
  querySearchList.value.forEach((_) => {
    if (_.value === item.name) {
      item.id = _.ActivityId;
    }
  });
}
async function getInitList() {
  const res = await raiInterface.tagHot_activityList();
  if (res.Ret === 200 && res.Data.List.length > 0) {
    res.Data.List.forEach((item) => {
      addDataList.value.push({
        name: item.ActivityName + "，" + item.ActivityTime,
        id: item.ActivityId,
      });
    });
  }
}
</script>

<template>
  <div class="container lable-add-content">
    <el-dialog :title="visibleTitle" v-model="props.showRegularDlg" width="600px" draggable :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleClose">
      <div v-if="props.dataRegular.TagType == 1">
        <div v-for="(item, index) in addDataList" :key="index" class="add-name-item">
          <el-autocomplete style="width: 90%" v-model="item.name" clearable :fetch-suggestions="querySearchAsync" @select="tableSelectHandel(item)" placeholder="请输入内容"></el-autocomplete>
          <img style="width: 20px; height: 20px" @click="deleteChildren(index)" src="~@/assets/img/icons/delete-Item.png" />
        </div>
        <div style="display: flex; align-items: center; cursor: pointer; width: 100px" @click="addActivityNameHandler">
          <img style="width: 20px; height: 20px; margin-right: 10px" src="~@/assets/img/document_m/add-label.png" />
          添加活动
        </div>
      </div>
      <div class="text-content" v-else>{{ visibleText }}</div>
      <template #footer>
        <span class="dialog-footer">
          <template v-if="props.dataRegular.TagType == 1">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="addBannerHandler">确 定</el-button>
          </template>
          <el-button v-else type="primary" @click="handleClose">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.lable-add-content {
  .add-name-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .el-input {
      width: 100% !important;
    }
    img {
      margin-left: 20px;
    }
  }
}
</style>
<style scoped lang="scss">
.lable-add-content {
  .text-content {
    width: 487px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    padding-left: 12px;
    color: #c0c4cc;
    margin: 0 auto 50px;
  }
}
</style>
