<template>
  <a-modal
    :width="1200"
    :title="title"
    v-model:open="visible"
    :destroyOnClose="true"
    @cancel="handleCancel"
    cancelText="关闭"
    :okButtonProps="{ style: { display: 'none' } }"
  >
    <a-form layout="inline" @keyup.enter.native="searchQuery" style="margin-bottom: 15px">
      <a-form-item name="searchText">
        <a-input allow-clear placeholder="邮箱/姓名" v-model:value="queryParam.searchText" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" @click="searchQuery">查询</a-button>
        <a-button @click="searchReset" style="margin-left: 8px">重置</a-button>
      </a-form-item>
    </a-form>

    <a-table ref="table" size="middle" :columns="columns" :loading="loading" :dataSource="dataSource">
      <!-- 显示头像 -->
      <template #bodyCell="{ column, record, index, text }">
        <template v-if="column.dataIndex === 'contact'">
          <div>
            <a-popover>
              <template #content>
                {{ text }}
              </template>
              <div style="width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ text }}</div>
            </a-popover>
          </div>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <span>
            <a @click="showEnquiryDetail(record)"> 详情</a>
          </span>
        </template>
      </template>
    </a-table>
    <!--询盘详情-->
    <enquiry-detail ref="enquiryDetailRef" />
  </a-modal>
</template>

<script lang="ts" setup name="XpRecycleBinModal">
  import { getAction } from '/@/api/manage/manage';
  import enquiryDetail from '/@/views/adweb/enquiry/modules/enquiryDetail.vue';
  import { nextTick, reactive, ref } from 'vue';
  import { useMessage } from '@/hooks/web/useMessage';

  const title = ref('');
  const enquiryDetailRef = ref();
  const columns = reactive([
    { title: '站点名称', align: 'left', dataIndex: 'siteName' },
    { title: '姓名', align: 'left', dataIndex: 'contact' },
    { title: '邮箱', align: 'left', dataIndex: 'fromEmail' },
    { title: '电话', align: 'left', dataIndex: 'phone' },
    { title: '询盘时间', align: 'left', dataIndex: 'recordCtime' },
    { title: '操作', align: 'center', dataIndex: 'action' },
  ]);
  const url = reactive({
    list: '/adweb/adwebEnquiry/getWastedEnquiry',
  });
  const { createMessage } = useMessage();
  let loading = ref(false);
  let visible = ref(false);
  let ip = ref('');
  let siteId = ref('');
  let dataSource = reactive([]);
  let queryParam = reactive<any>({});

  function init(ipParam, siteIdParam) {
    ip.value = ipParam;
    siteId.value = siteIdParam;
    visible.value = true;

    loadData(ip.value, siteId.value);
  }

  //询盘详情
  async function showEnquiryDetail(record) {
    await nextTick().then(() => {
      enquiryDetailRef.value.init(record);
    });
  }

  function searchQuery() {
    loadData(ip.value, siteId.value);
  }

  function searchReset() {
    queryParam = {};
    loadData(ip.value, siteId.value);
  }

  function handleCancel() {
    queryParam = {};
    visible.value = false;
  }

  function loadData(ip, siteId) {
    let params = queryParam; //查询条件
    loading.value = true;
    params.ip = ip;
    params.siteId = siteId;
    params.wasteEnquiryType = 'ip';
    getAction(url.list, params).then((res) => {
      if (res.code === 200) {
        dataSource = res.result;
      }
      if (res.code === 510) {
        createMessage.warning(res.message);
      }
      loading.value = false;
    });
  }

  defineExpose({
    init,
  });
</script>

<style lang="less" scoped></style>
