<template>
  <el-dialog title="提交参会名单" :visible.sync="isAddParticipateShow" width="500px" append-to-body @close="closeDlg">
    <div class="partic-dialog-container">
      <div v-if="isType !== '查看'">
        <el-input style="width: 392px; margin-bottom: 20px" v-model="roadShowTheme" placeholder="请输入路演主题名称"></el-input>
      </div>
      <template v-if="isType !== '查看'">
        <div v-if="isShowPermission" style="margin-bottom: 20px">
          <el-tag type="info" size="small"> {{ this.chartPermissionName }}</el-tag>
        </div>
        <el-select
          v-else
          v-model="hashtagValue"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请输入路演主题标签(可多选)"
          :remote-method="remoteMethodHandler"
          style="width: 392px; margin-bottom: 20px"
          @change="tagSelectHandler"
        >
          <el-option v-for="item in hashtagOptions" :key="item.Md5Key" :label="item.TagName" :value="item.Md5Key"> </el-option>
        </el-select>
      </template>
      <div class="inline" v-for="(item, index) in dynamicItem" :key="index">
        <div class="inline-content">
          <el-autocomplete
            class="inline-input"
            v-model.trim="item.name"
            :fetch-suggestions="callbackHandle"
            placeholder="请输入姓名"
            @input="getCompany(item.name)"
            @select="selectCompany(item, index)"
            @blur="focusCompany(item.name)"
            :trigger-on-focus="false"
            clearable
          ></el-autocomplete>
          <img @click="deleteItem(index)" src="~@/assets/img/icons/delete-Item.png" :class="index == 0 ? 'defaultyi' : ''" alt="" />
        </div>
        <p v-if="item.isShow">系统中无此人，请先将其添加到对应公司的联系人列表下</p>
      </div>
      <div @click="addItem" class="add-box">
        <img :src="$icons.addblue" alt="" />
        <span>添加</span>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" @click="confirmPerson">确定</el-button>
      <el-button @click="closeDlg">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { raiInterface, roadshowInterence } from "@/api/api.js";
export default {
  props: {
    isAddParticipateShow: {
      type: Boolean,
      default: false,
    },
    RsCalendarId: {
      type: Number,
      default: 0,
    },
    ResearcherId: {
      type: Number,
      default: 0,
    },
    isType: {
      type: String,
      default: "",
    },
    addRoadShowTheme: {
      type: String,
      default: "",
    },
  },
  watch: {
    isAddParticipateShow(newval) {
      if (newval) {
        this.dynamicItem = [{ name: "", isShow: false }];
        this.getIsPermissionName();
      }
    },
  },
  data() {
    return {
      dynamicItem: [{ name: "", isShow: false }],
      companyList: [],
      timeout: 0,
      warningIsShow: false,
      hashtagValue: "", // 主题标签
      hashtagOptions: [], // 主题数据
      tagList: [], // /标签类型
      tagName: "",
      chartPermissionName: "",
      isShowPermission: false,
      roadShowTheme: "",
    };
  },
  methods: {
    getCompany(query) {
      if (query.includes(",")) return;
      if (query) {
        raiInterface
          .activitySignupUserList({
            KeyWord: query,
          })
          .then((res) => {
            if (res.Ret === 200) {
              let arr = [];
              res.Data.List &&
                res.Data.List.forEach((item) => {
                  let obj = {
                    ...item,
                    value: item.RealName + " , " + item.Mobile + " , " + item.CompanyName,
                  };
                  arr.push(obj);
                });
              this.companyList = arr;
            }
          });
      } else {
        this.companyList = [];
      }
    },
    callbackHandle(data, cb) {
      let results = data
        ? this.companyList.filter((item) => {
            return item.value.includes(data);
          })
        : this.companyList;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 300);
      if (results.length == 0) {
        this.warningIsShow = true;
      } else {
        this.warningIsShow = false;
      }
    },
    selectCompany(val, index) {
      this.companyList.forEach((item) => {
        if (item.value == val.name) {
          this.dynamicItem.splice(index, 1, { name: val.name, isShow: false, id: item.UserId });
        }
      });
    },
    focusCompany(name) {
      if ((name.length && this.companyList.length == 0) || this.warningIsShow) {
        this.dynamicItem.forEach((item) => {
          if (item.name == name) {
            item.isShow = true;
          }
        });
      } else {
        this.dynamicItem.forEach((item) => {
          if (item.name == name) {
            item.isShow = false;
          }
        });
      }
    },
    deleteItem(index) {
      this.dynamicItem.splice(index, 1);
    },
    addItem() {
      this.dynamicItem.push({ name: "", isShow: false });
    },
    confirmPerson() {
      //校验
      const useId = this.dynamicItem.map((i) => i.id).filter((i) => i);
      if (!this.roadShowTheme && this.isType !== "查看") return this.$message.error("请输入路演主题名称");
      if (!useId.length) return this.$message.error("请输入姓名");
      roadshowInterence
        .addMeetingUser({
          RsCalendarId: this.RsCalendarId,
          UserId: useId,
          TagList: this.tagList,
          RoadShowTheme: this.roadShowTheme || this.addRoadShowTheme,
        })
        .then((res) => {
          if (res.Ret !== 200) return;
          this.$message.success("提交成功");
          this.$emit("confirm");
        });
    },
    // 获取标签
    async remoteMethodHandler(query) {
      if (query !== "") {
        let KeyWord = this.tagName ? this.tagName + "," + query : query;
        const res = await roadshowInterence.rai_serve_search_tag({
          KeyWord,
          ResearcherId: this.ResearcherId,
        });
        if (res.Ret === 200) {
          this.hashtagOptions = res.Data.List || [];
        }
      } else if (!this.hashtagValue.length && !query) {
        this.hashtagOptions = [];
      }
    },
    // 选择标签
    tagSelectHandler() {
      let tagListArr = [];
      let nameArr = [];
      this.hashtagOptions.forEach((item) => {
        if (this.hashtagValue.length && this.hashtagValue.includes(item.Md5Key)) {
          tagListArr.push({
            TagType: item.TagType,
            TagId: item.TagId,
          });
          nameArr.push(item.TagName);
        }
      });
      this.tagList = tagListArr;
      this.tagName = nameArr.join(",");
    },
    // 进入看看是否是策略
    async getIsPermissionName() {
      const res = await roadshowInterence.rai_serve_search_chcck_PermissionName({ ResearcherId: this.ResearcherId });
      if (res.Ret === 200) {
        this.chartPermissionName = res.Data.ChartPermissionName;
        this.isShowPermission = res.Data.Belong;
        this.tagList = res.Data.List;
      }
    },
    // 关闭弹框
    closeDlg() {
      this.hashtagValue = ""; // 主题标签
      this.hashtagOptions = []; // 主题数据
      this.tagList = []; // /标签类型
      this.tagName = "";
      this.chartPermissionName = "";
      this.isShowPermission = false;
      this.roadShowTheme = "";
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss">
.partic-dialog-container {
  .inline {
    margin-bottom: 20px;
    width: 100%;
    .inline-input {
      width: 392px !important;
    }
    p {
      padding-top: 5px;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 20px;
      color: #ef5858;
      opacity: 1;
    }
    .inline-content {
      padding-right: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      img {
        width: 14px;
        height: 14px;
        cursor: pointer;
      }
    }
    .defaultyi {
      display: none !important;
    }
    .el-input {
      width: 392px !important;
    }
  }
  .add-box {
    display: flex;
    align-items: center;
    color: #5882ef;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
  }
}
</style>
