<script setup>
import { reactive, ref, watch } from "vue";
import { useRoute } from "vue-router";
import { ElMessage, ElMessageBox, ElImageViewer } from "element-plus";
import { Search } from '@element-plus/icons-vue'
import { customInterence } from "@/api/api.js";
import clickNumberDetail from "./components/clickNumberDetailDia.vue";
import ContactSaveEnDia from "./components/ContactSaveEnDia.vue";
import mPage from "@/components/mPage.vue";
import { useClickNumDia } from "../custom/hooks/customlistHook";

const route = useRoute();

const type = ref("");
const contactsList = ref([]);
const total = ref(0);
const searchParams = reactive({
  Keywords: "",
  SortType: "",
  SortParam: "",
  CurrentIndex: 1,
  PageSize: 10,
  ListParam: 3,
});
function getList() {
  customInterence.getContactsListEn(searchParams).then((res) => {
    if (res.Ret == 200) {
      contactsList.value = res.Data.List || [];
      total.value = res.Data.Paging.Totals;
    }
  });
}
type.value = route.path == "/trialContactListEn" ? "trial" : "freeze";
searchParams.ListParam = route.path == "/trialContactListEn" ? 2 : 3;
getList();

function search() {
  searchParams.CurrentIndex = 1;
  getList();
}

function pageChange(page_no) {
  searchParams.CurrentIndex = page_no;
  getList();
}

// 排序
function sortChange({ order, prop }) {
  if (!order) {
    searchParams.SortType = "";
    searchParams.SortParam = "";
  } else {
    searchParams.SortType = order == "ascending" ? "2" : "1";
    searchParams.SortParam = prop == "RegisterTime" ? "2" : "1";
  }
  getList();
}

//启用禁用联系人
function changeStatus(row) {
  customInterence
    .editEnabledEn({
      EmailId: row.Id,
      Enabled: row.Enabled === 1 ? 0 : 1,
    })
    .then((res) => {
      if (res.Ret !== 200) return;
      ElMessage.success("操作成功");
      getList();
    });
}

// 编辑联系人
const showAddDia = ref(false);
const contactsSubmitForm = ref({});
function editContacts(row) {
  contactsSubmitForm.value = row;
  showAddDia.value = true;
}

// 删除客户
function delContacts(row) {
  ElMessageBox(
    `是否确认删除联系人<span style="color:#409EFF">${row.Name}</span>？`,
    "操作提示",
    {
      type: "warning",
      dangerouslyUseHTMLString: true,
      confirmButtonText: "确定",
      cancelButtonText: "取消",
    }
  )
    .then((res) => {
      customInterence.delContactsEn({ EmailId: row.Id }).then((res) => {
        if (res.Ret == 200) {
          ElMessage.success("删除联系人成功");
          getList();
        }
      });
    })
    .catch(() => {});
}

const showViewer = ref(false);
const imgUrl = ref("");
function reviewCard(url) {
  imgUrl.value = url;
  showViewer.value = true;
}

watch(
  () => route.path,
  (oldVal, newval) => {
    if (oldVal == "/freezeContactListEn" || oldVal == "/trialContactListEn") {
      // 同一页面 重置参数，请求列表
      reset();
    }
  }
);
function reset() {
  type.value = route.path == "/trialContactListEn" ? "trial" : "freeze";
  (searchParams.Keywords = ""),
    (searchParams.SortType = ""),
    (searchParams.SortParam = ""),
    (searchParams.CurrentIndex = 1),
    (searchParams.PageSize = 10),
    (searchParams.ListParam = route.path == "/trialContactListEn" ? 2 : 3);

  total.value = 0;
  contactsList.value = [];
  getList();
}

const {
  showClickTimesDia,
  clickTimesDetailItem,
  clickTimesDetail,
  closeNumDia,
} = useClickNumDia();
</script>
<template>
  <div class="contact-list-container">
    <div class="contact-search-zone">
      <el-input
        v-model="searchParams.Keywords"
        style="width: 360px"
        placeholder="请输入联系人姓名/邮箱/手机号"
        @input="search"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
    </div>
    <el-table
      :data="contactsList"
      border
      @sort-change="sortChange"
      max-height="630px"
    >
      <el-table-column label="联系人姓名" align="center" prop="Name">
        <template #default="{ row }">
          <img
            :src="$icons.card"
            alt=""
            style="width: 17px; cursor: pointer; margin-right: 5px"
            v-if="row.BusinessCardUrl"
            @click="reviewCard(row.BusinessCardUrl)"
          />
          <span>{{ row.Name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="注册公司"
        align="center"
        prop="RegisterCompanyName"
      >
        <template #default="{ row }">
          {{ row.RegisterCompanyName || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center" prop="Mobile">
        <template #default="{ row }">
          {{ row.CountryCode }}-{{ row.Mobile }}
        </template>
      </el-table-column>
      <el-table-column
        label="注册时间"
        align="center"
        prop="RegisterTime"
        sortable="custom"
      >
        <template #default="{ row }">
          {{ row.RegisterTime || "-" }}
        </template>
      </el-table-column>
      <el-table-column label="邮箱地址" align="center" prop="Email">
        <template #default="{ row }">
          {{ row.Email }}
        </template>
      </el-table-column>
      <el-table-column
        label="累计点击量"
        align="center"
        sortable="custom"
        width="120"
        prop="ViewTotal"
      >
        <template #default="{ row }">
          <span
            class="table-options"
            @click="clickTimesDetail(row)"
            v-if="row.ViewTotal != 0"
            >{{ row.ViewTotal }}</span
          >
          <span v-else>{{ row.ViewTotal }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        align="center"
        prop="Enabled"
        v-if="type == 'trial'"
      >
        <template #default="{ row }">
          <span :class="{ hint: row.Enabled === 0 }">{{
            row.Enabled ? "启用" : "禁用"
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="150"
        v-if="type == 'trial'"
      >
        <template #default="{ row }">
          <span
            class="table-options"
            style="margin-right: 12px"
            @click="editContacts(row)"
            >编辑</span
          >
          <span
            class="table-options"
            style="margin-right: 12px"
            @click="changeStatus(row)"
            >{{ row.Enabled ? "禁用" : "启用" }}</span
          >
          <span
            class="table-options"
            @click="delContacts(row)"
            style="color: #d1433a"
            >删除</span
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 页数选择器 -->
    <m-page
      v-show="total != 0"
      style="float: none; text-align: right; margin-top: 20px"
      :page_no="searchParams.CurrentIndex"
      :pageSize="searchParams.PageSize"
      :total="total"
      @handleCurrentChange="pageChange"
    />

    <!-- 累计点击量详情弹窗 -->
    <click-number-detail
      :visible="showClickTimesDia"
      :name="clickTimesDetailItem.contactsName"
      type="contacts"
      :id="clickTimesDetailItem.contactsId"
      @close="closeNumDia"
    ></click-number-detail>

    <!-- 添加/编辑联系人 -->
    <contact-save-en-dia
      :contactsSubmitForm="contactsSubmitForm"
      title="编辑联系人"
      :showAddDia="showAddDia"
      :companyId="0"
      @updateList="getList"
      @close="showAddDia=false"
    ></contact-save-en-dia>

    <el-image-viewer
      v-if="showViewer"
      @close="showViewer = false"
      :urlList="[imgUrl]"
    />
  </div>
</template>
<style scoped lang="scss">
.contact-list-container {
  min-height: calc(100vh - 110px);
  background-color: white;
  box-sizing: border-box;
  padding: 28px 28px 50px;
  .contact-search-zone {
    text-align: right;
    margin-bottom: 26px;
  }
  .table-options {
    cursor: pointer;
    font-size: 14px;
    color: #409eff;
  }
  .hint {
    color: red;
  }
}
</style>
