<template>
  <div class="container lable-add-content">
    <el-dialog :title="visibleTitle" :visible.sync="showRegularDlg" width="700px" v-dialogDrag :close-on-click-modal="false" :modal-append-to-body="false" center @close="handleClose">
      <div v-if="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>
      <span slot="footer" class="dialog-footer">
        <template v-if="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>
    </el-dialog>
  </div>
</template>

<script>
import { raiInterface } from "@/api/api.js";

export default {
  name: "",
  components: {},
  props: {
    showRegularDlg: {
      type: Boolean,
      default: false,
    },
    dataRegular: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      querySearchList: [],
      addDataList: [],
    };
  },
  computed: {
    visibleTitle() {
      return this.dataRegular.TagName || "";
    },
    visibleText() {
      let str =
        this.dataRegular.TagType == 2
          ? "所有【海外】的活动，和报告类型为【海外研究】的报告"
          : this.dataRegular.TagType == 3
          ? "所有路演回放音视频"
          : this.dataRegular.TagType == 4
          ? "所有问答系列音频"
          : this.dataRegular.TagType == 5
          ? "医药-趋势观察 ，科技-产业跟踪 ，智造-产业跟踪 ，消费-月度调研，策略-每日复盘，固收-债市复盘"
          : "";
      return str;
    },
  },
  watch: {
    showRegularDlg: {
      handler(newVal) {
        if (newVal) {
          newVal && this.getInitList();
        }
      },
    },
  },
  created() {},
  async mounted() {},
  methods: {
    handleClose() {
      this.querySearchList = [];
      this.addDataList = [];
      this.$emit("update:showRegularDlg", false);
      this.$emit("update:dataRegular", {});
    },
    async addBannerHandler() {
      let isOk = this.addDataList.every((item) => item.name !== "");
      if (isOk) {
        let arr = [];
        this.addDataList.forEach((_) => {
          arr.push(_.id);
        });
        const res = await raiInterface.tagHot_activityListUpdate({
          ActivityIds: arr,
        });
        if (res.Ret === 200) {
          this.$message.success("保存成功");
          this.handleClose();
        }
      } else {
        this.$message.error("活动名称不能为空");
      }
    },
    // 删除
    deleteChildren(index) {
      this.addDataList.splice(index, 1);
    },
    async querySearchAsync(query, cb) {
      cb([]);
      if (query) {
        const res = await raiInterface.tagHot_activityList({ KeyWord: query });
        if (res.Ret === 200) {
          console.log(res);
          this.querySearchList = res.Data.List.map((_) => {
            return {
              ..._,
              value: _.ActivityName + "，" + _.ActivityTime,
            };
          });
          cb(this.querySearchList);
        }
      }
    },
    addActivityNameHandler() {
      this.addDataList.push({
        name: "",
        id: "",
      });
    },
    tableSelectHandel(item) {
      this.querySearchList.forEach((_) => {
        if (_.value === item.name) {
          item.id = _.ActivityId;
        }
      });
    },
    async getInitList() {
      const res = await raiInterface.tagHot_activityList();
      if (res.Ret === 200 && res.Data.List.length > 0) {
        res.Data.List.forEach((item) => {
          this.addDataList.push({
            name: item.ActivityName + "，" + item.ActivityTime,
            id: item.ActivityId,
          });
        });
      }
    },
  },
};
</script>
<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: 620px;
    height: 40px;
    line-height: 40px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    padding-left: 12px;
    color: #c0c4cc;
    margin: 0 auto 50px;
  }
}
</style>
