<template>
  <my-drawer
    :visible="visible"
    header="回执查询"
    size="80%"
    attach="body"
    :closeOnOverlayClick="false"
    :close-btn="true"
    class="notice-dialog"
    @close="emit('update:visible', false)"
  >
    <div class="page-action">
      <t-button variant="outline" @click="onExport">
        <template #icon><svg-icon name="export" color="#262626" /></template>
        导出回执明细
      </t-button>
      <span style="margin-left: 16px"
        >已阅/全部：{{ messageCount.reviewed }}/{{ messageCount.total }}</span
      >
    </div>
    <SearchForm :fields="fields" :params="params" :search="mixinSearch">
      <template #area>
        <select-area
          :level="2"
          v-model="areaInfo"
          value-type="full"
          @change="areaChange"
        ></select-area>
      </template>
      <template #supplier="{ item, params }">
        <select-supplier v-model="params[item.prop]"> </select-supplier>
      </template>
    </SearchForm>

    <div class="flex-1 page-wrap">
      <t-table
        size="small"
        row-key="id"
        :columns="columns"
        :data="tableData"
        bordered
        :pagination="{
          defaultCurrent: 1,
          defaultPageSize: 10,
          onChange,
          showJumper: true,
          showPageSize: false,
          total: pagination.total,
          current: pagination.pageNumber,
        }"
        v-loading="tableLoading"
      >
        <template #type="{ col, row }">
          {{ customerTypeFilter(row[col.colKey]) }}
        </template>
        <template #receive-time="{ col, row }">
          {{ timestampFilter(row[col.colKey]) }}
        </template>
        <template #status="{ col, row }">
          <t-tag
            :theme="row[col.colKey] ? 'success' : 'danger'"
            variant="light"
            >{{ row[col.colKey] ? '已阅' : '未阅' }}</t-tag
          >
        </template>
      </t-table>
    </div>

    <template #foot>
      <t-button
        theme="default"
        variant="outline"
        @click="emit('update:visible', false)"
        >返回</t-button
      ></template
    >
  </my-drawer>
</template>
<script setup name="NoticeMessageDialog">
import { ref, reactive, watch } from 'vue';
import { MessagePlugin, DialogPlugin } from 'tdesign-vue-next';
import {
  noticeMessageQueryApi,
  noticeMessageCountApi,
  noticeMessageExportApi,
} from '@/api/system';
import useFetchTable from '@/hooks/useFetchTable';
import { customerTypeFilter, timestampFilter } from '@/utils/filter';
let areaInfo = ref(['', '']);
const emit = defineEmits(['update:visible', 'success']);
let messageCount = reactive({ reviewed: 0, total: 0 });

const props = defineProps({
  visible: Boolean,
  curRow: Object,
});

const fields = ref([
  // {
  //   prop: 'city',
  //   label: '区域',
  //   type: 'select',
  //   labelWidth: 50,
  //   colSpan: 5,
  //   options: [],
  // },
  {
    prop: 'city',
    label: '区域',
    labelWidth: 50,
    colSpan: 5,
    cell: 'area',
  },
  {
    prop: 'supplierId',
    label: '供应商',
    type: 'select',
    labelWidth: 70,
    colSpan: 5,
    cell: 'supplier',
  },
  {
    prop: 'status',
    label: '回执状态',
    type: 'select',
    labelWidth: 90,
    colSpan: 4,
    options: [
      {
        label: '已阅',
        value: 'true',
      },
      {
        label: '未阅',
        value: 'false',
      },
    ],
    attrs: {
      clearable: true,
    },
  },
  {
    type: 'buttons',
    colSpan: 2,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          search();
          getCount();
        },
      },
    ],
  },
]);
const mixinSearch = () => {
  search();
  getCount();
};
const params = reactive({
  status: '',
  city: '',
  supplierId: '',
  noticeId: '',
});
const areaChange = (data) => {
  params.city = data[1];
};
const columns = [
  { colKey: 'code', title: '档案流水号', width: 120 },
  { colKey: 'name', title: '姓名' },
  { colKey: 'supplier', title: '供应商' },
  { colKey: 'province', title: '常居省份', width: 100 },
  { colKey: 'city', title: '常居城市', width: 100 },
  { colKey: 'service', title: '服务单元' },
  { colKey: 'custom', title: '客户名称', width: 120 },
  { colKey: 'type', title: '客户类型', width: 100 },
  {
    colKey: 'receiveTime',
    title: '消息查阅时间',
    cell: 'receive-time',
    width: 180,
  },
  { colKey: 'mobileNumber', title: '联系电话', width: 120 },
  {
    colKey: 'status',
    title: '回执状态',
    fixed: 'right',
    width: 100,
  },
];
const {
  loading: tableLoading,
  pagination,
  tableData,
  search,
  onChange,
} = useFetchTable(noticeMessageQueryApi, { params }, false);

async function getCount() {
  const res = await noticeMessageCountApi(props.curRow.id);
  messageCount = res || { reviewed: 0, total: 0 };
}

function onOpened() {
  params.noticeId = props.curRow.id;
  search();
  getCount();
}

async function onExport() {
  const confirmDia = DialogPlugin({
    header: '操作提示',
    body: `确定要导出所有记录吗？`,
    confirmBtn: '确定',
    cancelBtn: '取消',
    onConfirm: async () => {
      confirmDia.hide();
      const res = await noticeMessageExportApi(params).catch(() => {});
      if (!res) return;
      MessagePlugin.success('导出任务提交成功，请前往任务管理中下载');
    },
  });
}

watch(
  () => props.visible,
  (val) => {
    if (val) onOpened();
  }
);
</script>

<style lang="less">
.notice-dialog {
  .t-drawer__header {
    border-bottom: none;
  }
  .t-drawer__body {
    padding: 0;
  }
  .page-action {
    padding-top: 0;
  }
}
</style>
