<script setup>
import { ref, watch, nextTick } from "vue";

import { ElMessage } from "element-plus";

import { raiInterface, raiSpecial } from "@/api/api.js";

const props = defineProps({
  dialogVisiblepartica: {
    type: Boolean,
    default: false,
  },
  particlaDlg: {
    type: Object,
  },
  submitDialog: {
    type: Boolean,
    default: false,
  },
  offlineId: {
    type: Number,
    default: 0,
  },
  type: {
    type: String,
    default: "",
  },
});

const tableData = ref([]);
const tableDataSub = ref([]);
const dynamicItem = ref([]);
const companyList = ref([]);
const user = ref([]);
const listSignin = ref([]);
const isShow = ref("");
const userId = ref("");
const isShowparticulars = ref("到会详情");
const timeout = ref(null);
const warningIsShow = ref(false);

watch(
  () => props.particlaDlg.title,
  (newValue) => {
    newValue && (isShowparticulars.value = props.particlaDlg.title);
  }
);

watch(
  () => props.dialogVisiblepartica,
  (newValue) => {
    if (newValue) {
      if (isShowparticulars.value == "报名详情") {
        offlineListDetail();
      } else {
        arriveOfflineListDetail();
      }
    }
  }
);
watch(
  () => props.submitDialog,
  (newValue) => {
    if (newValue) {
      arriveOfflineListDetail();
    }
  }
);

// //报名人数
async function offlineListDetail() {
  const res = await raiInterface.offlineListDetail({
    ActivityId: props.offlineId,
  });
  if (res.Ret == 200) {
    tableDataSub.value = res.Data.List;
  }
}

const $emit = defineEmits(["getsDataList", "particulars"]);

//到会详情
async function arriveOfflineListDetail() {
  const res = props.particlaDlg.isSpecial
    ? await raiSpecial.getSpecialtripmeetDetial({
        ActivityId: props.offlineId,
      })
    : await raiInterface.activityMeetoffline({
        ActivityId: props.offlineId,
      });
  if (res.Ret == 200) {
    tableDataSub.value = res.Data.List;
    listSignin.value = res.Data.ListSignin || [];
  }
}
function confirmPerson() {
  tableDataSub.value = [];
  user.value = [];
  userId.value = "";
  dynamicItem.value = [];
  $emit("update:dialogVisiblepartica", false);
}
async function confirmSubmit() {
  const is = dynamicItem.value.some((item) => item.isShow == true);
  if (is) return ElMessage.error("姓名有误");
  if (tableDataSub.value) {
    tableDataSub.value.forEach((item) => {
      if (item.Operation) {
        user.value.push(item.UserId);
      }
    });
  }
  dynamicItem.value.forEach((item) => user.value.push(item.id));
  userId.value = user.value.join(",");
  const res = props.particlaDlg.isSpecial
    ? await raiSpecial.postSpecialtripMeetingDo({
        ActivityId: props.offlineId,
        UserIds: userId.value,
      })
    : await raiInterface.activityMeetmeetingDo({
        ActivityId: props.offlineId,
        Ids: userId.value,
      });
  if (res.Ret === 200) {
    user.value = [];
    userId.value = "";
    dynamicItem.value = [];
    $emit("update:submitDialog", false);
    $emit("getsDataList");
    nextTick(() => {
      $emit("particulars", props.offlineId, "到会详情");
    });
  }
}
function addItem() {
  dynamicItem.value.push({
    name: "",
    isShow: false,
  });
}
function deleteItem(item, index) {
  dynamicItem.value.splice(index, 1);
}
/* 获取客户名称 */
function 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);
            });
          companyList.value = arr;
        }
      });
  } else {
    companyList.value = [];
  }
}
function callbackHandle(data, cb) {
  let results = data
    ? companyList.value.filter((item) => {
        return item.value.includes(data);
      })
    : companyList.value;
  clearTimeout(timeout.value);
  timeout.value = setTimeout(() => {
    cb(results);
  }, 300);
  if (results.length == 0) {
    warningIsShow.value = true;
  } else {
    warningIsShow.value = false;
  }
}
function handleClose() {
  dynamicItem.value = [];
  $emit("update:submitDialog", false);
}
function focusCompany(name) {
  if ((name.length && companyList.value.length == 0) || warningIsShow.value) {
    dynamicItem.value.forEach((item) => {
      if (item.name == name) {
        item.isShow = true;
      }
    });
  } else {
    dynamicItem.value.forEach((item) => {
      if (item.name == name) {
        item.isShow = false;
      }
    });
  }
}
function selectCompany(val, index) {
  companyList.value.forEach((item) => {
    if (item.value == val.name) {
      dynamicItem.value.splice(index, 1, { id: item.UserId, ...val });
    }
  });
}
</script>

<template>
  <div class="container-applydialog">
    <!-- 详情的弹框 -->
    <div v-if="props.dialogVisiblepartica">
      <el-dialog
        draggable
        :close-on-click-modal="false"
        :modal-append-to-body="false"
        center
        top="10vh"
        v-model="props.dialogVisiblepartica"
        customClass="custom-applydialog"
        :before-close="confirmPerson"
      >
        <template #header>
          <div style="display: flex; align-items: center">
            <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
            <span style="font-size: 16px">{{ props.particlaDlg.title }}</span>
          </div>
        </template>
        <div v-if="props.particlaDlg">
          <el-table :data="tableDataSub" border height="500px" style="width: 100%">
            <el-table-column align="center" prop="RealName" label="姓名"> </el-table-column>
            <el-table-column align="center" prop="CompanyName" label="公司名称"> </el-table-column>
            <el-table-column align="center" v-if="isShowparticulars == '报名详情'" prop="CreateTime" label="报名时间"> </el-table-column>
            <el-table-column align="center" v-if="isShowparticulars == '到会详情'" prop="" label="是否到会">
              <template #default="scope">
                {{ scope.row.IsMeeting == 1 ? (scope.row.IsAirborne == 1 ? "已到会(空降)" : "已到会") : scope.row.IsMeeting == 2 ? "空降" : "未到会" }}
              </template>
            </el-table-column>
            <el-table-column v-if="props.type === '线下到会'" align="center" prop="SigninTime" label="签到时间"> </el-table-column>
          </el-table>
        </div>
        <div v-if="props.particlaDlg.title == '到会详情' && props.type == '线下到会' && listSignin.length > 0" class="meeting-box">
          <div>潜在客户:</div>
          <div>
            <div class="signin-content" v-for="item in listSignin" :key="item.Id">
              <el-image v-if="item.BusinessCard" style="width: 180px; height: 100px; margin-right: 5px" :src="item.BusinessCard" :preview-src-list="[item.BusinessCard]"> </el-image>
              <span v-else>{{ item.RealName }} {{ item.Mobile }}</span>
              <span>{{ item.CreateTime }}</span>
            </div>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="confirmPerson">知道了</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
    <div>
      <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center top="10vh" v-model="props.submitDialog" customClass="custom-applydialog" :before-close="handleClose">
        <template #header>
          <div style="display: flex; align-items: center">
            <img :src="$icons.warntop" style="color: #fff; width: 16px; height: 16px; margin-right: 5px" />
            <span style="font-size: 16px">提交到会情况</span>
          </div>
        </template>
        <div>
          <el-table height="500px" :data="tableDataSub" border style="width: 100%">
            <el-table-column align="center" prop="RealName" label="姓名"> </el-table-column>
            <el-table-column align="center" prop="CompanyName" label="公司名称"> </el-table-column>
            <el-table-column align="center" prop="" label="操作">
              <template #default="scope">
                <el-switch v-model="scope.row.Operation" active-text="已到会" inactive-text="未到会"> </el-switch>
              </template>
            </el-table-column>
            <el-table-column v-if="props.type === '线下到会'" align="center" prop="SigninTime" label="签到时间"> </el-table-column>
          </el-table>
          <div class="add-box">
            <img @click="addItem" :src="$icons.addblue" alt="" />
            <span @click="addItem">添加空降人员</span>
          </div>
          <div class="inline" v-for="(item, index) in dynamicItem" :key="index">
            <div class="inline-content">
              <el-autocomplete
                class="inline-input"
                v-model="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(item, index)" src="~@/assets/img/icons/delete-Item.png" :class="index == 0 ? 'defaultyi' : ''" alt="" />
            </div>
            <p v-if="item.isShow">系统中无此人，请先将其添加到对应公司的联系人列表下</p>
          </div>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="confirmSubmit">提交</el-button>
            <el-button @click="handleClose">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss">
.container-applydialog {
  .custom-applydialog {
    width: 800px;
  }
  .add-box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    color: #5882ef;
    margin-top: 30px;
    margin-bottom: 17px;
    cursor: pointer;
    img {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }
  }
  .inline {
    margin-bottom: 20px;
    width: 440px;
    .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;
    }
  }
  .el-input {
    width: 392px !important;
  }
  .el-switch__label {
    color: #606266;
    font-size: 14px;
    font-weight: 400;
  }
  .is-active {
    color: #409eff !important;
  }
  .el-radio__label {
    font-weight: 400;
  }
  .meeting-box {
    margin-top: 20px;
    display: flex;
    div:first-child {
      flex-shrink: 0;
      margin-right: 10px;
      line-height: 19px;
    }
  }
  .signin-content {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      margin-right: 5px;
      line-height: 19px;
      width: 180px;
    }
    .el-image-viewer__canvas {
      img {
        max-width: 60% !important;
        max-height: 60% !important;
      }
    }
  }
}
</style>
