<template>
  <el-dialog
    v-dialogDrag
    :modal-append-to-body="false"
    :center="true"
    close-on-press-escape
    :close-on-click-modal="false"
    :visible.sync="isShow"
    @close="addDialogClose"
    title="新增线下报名"
    width="500px"
    class="add-signup-dialog"
  >
    <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="请输入姓名"
          @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>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirmPerson">确定</el-button>
      <el-button @click="addDialogClose">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { ficcManageInterface } from "@/api/api.js";
export default {
  props: {
    // 活动Id
    ActivityId: {
      type: [Number, String],
      required: true,
    },
    // 弹窗是否显示
    isShow: {
      type: Boolean,
      required: true,
    },
  },
  data() {
    return {
      dynamicItem: [{ name: "", isShow: false }], // 新增列表
      companyList: [], // 联想用户列表
    };
  },
  methods: {
    // 新增报名窗口关闭
    addDialogClose() {
      this.dynamicItem = [{ name: "", isShow: false }];
      this.companyList=[];
      this.$emit("update:isShow", false);
      this.$parent.CurrentActivityId=-1
    },
    // 获取客户名称
    async getCompany(Keyword) {
      if (Keyword.includes(",")) return;
      if (!Keyword) return (this.companyList = []);
      try {
        const res = await ficcManageInterface.activitySignupUserList({ Keyword });
        if (res.Ret === 200) {
          this.companyList = res.Data
            ? res.Data.map((item) => {
                return {
                  ...item,
                  value: `${item.RealName},${item.Mobile},${item.CompanyName}`,
                };
              })
            : [];
        }
      } catch (err) {
        console.dir(err);
      }
    },
    async callbackHandle(data, cb) {
      if(!data) return
      await this.getCompany(data);
      cb(this.companyList);
    },
    //联想选择后
    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.dynamicItem.find((item) => item.name == name).isShow = true;
      } else {
        this.dynamicItem.find((item) => item.name == name).isShow = false;
      }
    },
    // 添加用户
    addItem() {
      this.dynamicItem.push({
        name: "",
        isShow: false,
      });
    },
    // 删除用户
    deleteItem(index) {
      this.dynamicItem.splice(index, 1);
    },
    // 确定提交报名
    async confirmPerson() {
      if (this.dynamicItem.some((item) => item.isShow))
        return this.$message.error("姓名有误");
      // 对数组进行处理(去空去重,取出id)
      const UserIdList = this.dynamicItem
        .map((item) => item.id)
        .filter((item,index,arr) => {
          return item && arr.indexOf(item, 0) === index;
        })
        // 数组为空提示
      if (!UserIdList.length) return this.$message.error("请至少选择一个");
      try {
        const res = await ficcManageInterface.activitySignupAddUser({
          ActivityId: this.ActivityId,
          UserIdList,
        });
        if (res.Ret === 200) {
          this.$message.success("添加成功");
          this.$parent.getSignUpList()
          this.addDialogClose();
        }
      } catch (err) {
        console.dir(err);
      }
    },
  },
};
</script>

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