<script setup>
import { ref, watch, onMounted, computed, reactive, toRefs } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import { raiInterface } from "@/api/api.js";

import { SearchResultTable, DetailedTable } from "./applyTableColums";

const props = defineProps({
  searchCustomer: {
    default: false,
  },
});

const pageState = reactive({
  clientName: "", //无相关流失客户
  clientList: "", //
  //结果
  resultCustomer: false,
  resultDateList: [],
  resultDate: {},
  //明细
  detailedVisibleDlg: false,
  detailedDateList: [],
  detailedDate: {},
});

const searchResultTable = computed(() => {
  return SearchResultTable;
});
const detailedTable = computed(() => {
  return DetailedTable;
});

//搜索的确定
async function searchConfirmHandle() {
  if (!pageState.clientName) return ElMessage.error("请输入客户名称");
  if (!pageState.clientList.length) return ElMessage.error("无相关流失客户");
  const res = await raiInterface.getActivityLossUser({ CompanyName: pageState.clientName });
  if (res.Ret === 200) {
    pageState.resultDate = res.Data;
    pageState.resultDateList = res.Data.List || [];
    pageState.resultCustomer = true;
  }
}
//搜索的联想
async function querySearch(queryString, cb) {
  cb([]);
  if (queryString) {
    const res = await raiInterface.getActivityLossCompany({ KeyWord: queryString });
    if (res.Ret === 200) {
      pageState.clientList = res.Data.List || [];
      if (res.Data && res.Data.List.length > 0) {
        let arr = res.Data.List.map((item) => {
          return { value: item.CompanyName, ...item };
        });
        cb(arr);
      } else {
        cb([{}]);
      }
    }
  }
}

function handleRowContent(row, key) {
  return row[key];
}
async function handleRowClick(row, key) {
  if (key == "TotalMeeting") {
    const res = await raiInterface.getActivityLossMeet({
      Mobile: row.Mobile,
    });
    if (res.Ret === 200) {
      pageState.detailedDate = res.Data;
      pageState.detailedDateList = res.Data.List || [];
      pageState.detailedVisibleDlg = true;
    }
  }
}

const $emit = defineEmits();

//搜索的取消
function searchCancelHandle() {
  $emit("update:searchCustomer", false);
  pageState.clientName = "";
}
//搜索结果的取消
function resultCancelHandle() {
  pageState.resultCustomer = false;
  pageState.resultDateList = [];
}
//参会明细的取消
function detaileCancelHandle() {
  //明细
  pageState.detailedVisibleDlg = false;
  pageState.detailedDateList = [];
}

const { clientName, clientList, resultCustomer, resultDateList, resultDate, detailedVisibleDlg, detailedDateList, detailedDate } = toRefs(pageState);
</script>

<template>
  <div class="container search-customer-dlg">
    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="搜索流失客户" v-model="props.searchCustomer" :before-close="searchCancelHandle" width="529px">
      <div>
        <p style="margin: 10px 0 10px">搜索有线上参会记录的流失客户</p>
        <el-autocomplete class="inline-input" style="width: 100%" v-model="clientName" clearable :fetch-suggestions="querySearch" placeholder="请输入客户名称" :trigger-on-focus="false">
          <template #default="scope">
            <div v-if="scope.item.CompanyName">
              {{ scope.item.CompanyName }}
            </div>
            <div v-else style="text-align: center">暂无数据</div>
          </template>
        </el-autocomplete>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button style="width: 224px; margin-right: 20px" type="primary" @click="searchConfirmHandle">确 定</el-button>
          <el-button style="width: 224px" @click="searchCancelHandle">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="搜索结果" v-model="resultCustomer" :before-close="resultCancelHandle" width="529px">
      <div class="result-table">
        <div class="result-text">
          <p>客户名称：{{ resultDate.CompanyName }}</p>
          <p>所属销售：{{ resultDate.SellerName }}</p>
        </div>
        <el-table :data="resultDateList" content border height="300">
          <el-table-column v-for="item in searchResultTable" :key="item.key" :label="item.label" :width="item.widthsty" align="center">
            <template #default="{ row }">
              <span @click="handleRowClick(row, item.key)" :class="item.key == 'TotalMeeting' ? 'editsty' : ''">
                {{ handleRowContent(row, item.key) }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <el-dialog draggable :close-on-click-modal="false" :modal-append-to-body="false" center title="参会明细" v-model="detailedVisibleDlg" :before-close="detaileCancelHandle" width="1242px">
      <div style="margin-bottom: 30px">
        <div style="margin-bottom: 20px">
          <span style="margin-right: 30px">姓名：{{ detailedDate.RealName }}</span>
          <span>手机号：{{ detailedDate.Mobile }}</span>
        </div>
        <el-table :data="detailedDateList" content border height="350">
          <el-table-column v-for="item in detailedTable" :key="item.key" :label="item.label" :width="item.widthsty" :min-width="item.minwidthsty" align="center">
            <template #default="{ row }">
              <span> {{ row[item.key] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<style scoed lang="scss">
.search-customer-dlg {
  .el-dialog .el-input {
    width: 100% !important;
  }
  .dialog-footer {
    margin: 20px 0 0;
  }

  .result-table {
    margin-bottom: 30px;
    .result-text {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }
  }
}
</style>
