<script setup>
import { ref, watch, onMounted } from "vue";
import { raiInterface } from "@/api/api.js";
const dynamicItem = ref([]);

const props = defineProps({
  shortcutIsDialog: {
    type: Boolean,
    default: false,
  },
});

const $emit = defineEmits();

watch(
  () => props.shortcutIsDialog,
  () => {
    if (props.shortcutIsDialog) {
      fastSearchKeWord();
    }
  }
);
function fastSearchKeWord() {
  raiInterface.fastSearchKeWordsummaryManage().then((res) => {
    if (res.Ret === 200) {
      dynamicItem.value = res.Data.List ? res.Data.List : [];
    }
  });
}
//弹框取消事件
function confirmPerson() {
  dynamicItem.value = [];
  $emit("update:shortcutIsDialog", false);
}
//弹框确认事件
function confirmSubmit() {
  const arr = [];
  dynamicItem.value.forEach((item) => arr.push(item.KeyWord));
  const keyWord = arr.join(",");
  raiInterface.editFastSearchKeWordsummary({ keyWord }).then((res) => {
    if (res.Ret === 200) {
      dynamicItem.value = [];
      $emit("update:shortcutIsDialog", false);
    }
  });
}
//添加活动标签
function addItem() {
  if (dynamicItem.length == 20) return;
  dynamicItem.value.push({ KeyWord: "" });
}
//删除活动标签
function deleteItem(index) {
  dynamicItem.value.splice(index, 1);
}
</script>

<template>
  <div class="container-shortcut">
    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center top="5vh" v-model="props.shortcutIsDialog" customClass="custom-shortcut" :before-close="confirmPerson">
      <template #header>
        <div style="display: flex; align-items: center">
          <img :src="$icons.add" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
          <span style="font-size: 16px">快捷检索标签</span>
        </div>
      </template>
      <div class="inline" v-for="(item, index) in dynamicItem" :key="index">
        <div class="inline-content">
          <span>{{ index + 1 }}</span>
          <el-input class="inline-input" v-model.trim="item.KeyWord" placeholder="请输入标签名称" clearable></el-input>
          <img @click="deleteItem(index)" src="~@/assets/img/icons/delete-Item.png" :class="index == 0 ? 'defaultyi' : ''" alt="" />
        </div>
      </div>
      <div class="add-box">
        <img @click="addItem" :src="$icons.addblue" />
        <span @click="addItem">添加</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="confirmSubmit">确定</el-button>
          <el-button @click="confirmPerson">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.container-shortcut {
  .custom-shortcut {
    width: 600px;
  }
  .add-box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: #5882ef;
    margin-top: 30px;
    margin-bottom: 17px;
    img {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
  }
  .inline {
    margin-bottom: 20px;
    width: 440px;
    .inline-input {
      width: 370px !important;
    }
    p {
      padding-top: 5px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #ef5858;
      opacity: 1;
    }
    .children-item {
      .children-item {
        margin-top: 20px;
        padding-right: 20px;
        padding-left: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
        }
      }
      .children-box {
        margin-top: 15px;
        padding-left: 25px;
        display: flex;
        align-items: center;
        color: #5882ef;
        img {
          margin-right: 10px;
        }
      }
    }
  }
  .inline-content {
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 14px;
      height: 14px;
    }
  }
  .el-input {
    width: 360px !important;
  }
  .el-switch__label {
    color: #606266;
    font-size: 14px;
    font-weight: 400;
  }
  .is-active {
    color: #409eff !important;
  }
  .el-radio__label {
    font-weight: 400;
  }
}
</style>
