<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>
        <a-input 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="blackEmailColumns" :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 { putAction, deleteAction, postAction, getAction } from '/@/api/manage/manage';
  import enquiryDetail from '/@/views/adweb/enquiry/modules/enquiryDetail.vue';
  import { nextTick, reactive, ref } from 'vue';
  import { blackEmailColumns } from '@/views/adweb/enquirySiteRules/siteBlackEmail/siteBlackEmail.data';
  import { useMessage } from '@/hooks/web/useMessage';

  const title = ref('');
  const loading = ref(false);
  const innerVisible = ref(false);
  let dataSource = reactive([]);
  const visible = ref(false);
  const url = reactive({
    list: '/adweb/adwebEnquiry/getWastedEnquiry',
  });
  let queryParam = reactive<any>({});
  const disableMixinCreated = ref(false);
  const { createMessage } = useMessage();
  const enquiryDetailRef = ref();
  let email = ref('');
  let type = ref('');
  let siteId = ref('');

  function init(emailParam, typeParam, siteIdParam) {
    email.value = emailParam;
    type.value = typeParam;
    siteId.value = siteIdParam;

    loadData(emailParam, typeParam, siteIdParam);
    visible.value = true;
  }

  //询盘详情
  function showEnquiryDetail(record) {
    nextTick().then(() => {
      enquiryDetailRef.value.init(record);
    });
  }
  function searchQuery() {
    loadData(email.value, type.value, siteId.value);
  }

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

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

  function loadData(emailParam, typeParam, siteIdParam) {
    loading.value = true;

    queryParam.email = emailParam;
    queryParam.type = typeParam;
    queryParam.siteId = siteIdParam;
    queryParam.wasteEnquiryType = 'email';

    getAction(url.list, queryParam).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>
