<template>
  <!--短信查询-->
  <el-dialog    :close-on-click-modal="false" draggable v-model="machineVisible" :title="title" width="1200px"  :before-close="handleClose">
    <div class="formBox">
      <div class="formLeft">
        <datePicker ref="datePickerRef" />
        <span>发送结果： </span>
        <el-select
          size="small"
          v-model="state"
          placeholder="请选择"
          style="width: 100px"
          clearable
        >
          <el-option label="成功" value="1" />
          <el-option label="失败" value="0" />
        </el-select>
      </div>
      <div>
        <el-button type="primary" :icon="Search" size="small" @click="inquire"
          >查询</el-button
        >
        <el-button
          type="primary"
          :icon="Download"
          @click="exportTable"
          size="small"
          >导出
        </el-button>
        <!-- <el-button type="primary" :icon="Delete" size="small">删除</el-button> -->
      </div>
    </div>
    <div class="tableBox">
      <el-table
      :scrollbar-always-on="true"   :data="tableData"
        height="500px"
        size="small"
        stripe
        v-loading="loading"
        element-loading-background="#343849c7"
        :header-cell-style="{ textAlign: 'center' }"
        border
      >
        <!-- <el-table-column type="selection" align="center" width="45" /> -->
        <el-table-column label="序号" align="center" type="index" width="70" />
        <el-table-column
          prop="sendTime"
          align="center"
          label="时间"
          width="170"
        />
        <el-table-column
          prop="userName"
          align="center"
          label="接收人"
          width="100"
        />
        <el-table-column
          prop="phone"
          align="center"
          label="手机号"
          width="100"
        />
        <el-table-column
          prop="sendResult"
          align="center"
          label="发送结果"
          width="100"
        >
          <template #default="scope">
            <el-tag
              v-if="scope.row.sendResult === 1"
              size="small"
              type="success"
              effect="dark"
              >成功
            </el-tag>
            <el-tag v-else size="small" type="danger" effect="dark"
              >失败
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="msgContent" label="发送内容" />
      </el-table>
    </div>
    <el-pagination
      style="margin-top: 10px"
      :currentPage="form.pageNum"
      :page-size="form.pageSize"
      :page-sizes="[10, 20, 50, 100, 200]"
      background
      size="small"
      :layout="'sizes,total, ->, prev, pager, next, jumper'"
      :total="total"
      @size-change="onTableSizeChange"
      @current-change="onTableCurrentChange"
    ></el-pagination>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick } from "vue";
import { hasSendMsgPage } from "@/api/statistics/index";
import { ElMessage } from "element-plus";
import datePicker from "@/components/datePicker/index.vue";
import { Search, Download } from "@element-plus/icons-vue";
import table2excel from "js-table2excel";
const emit= defineEmits(["close"]);
const machineVisible = ref(false);
const title = ref("已发送短信查询");
const datePickerRef = ref();
const form = reactive({
  pageNum: 1,
  pageSize: 20,
});
const loading = ref(false);
const state = ref("");
const total = ref(0); // 假设总条数为100
const tableData = ref([]);
//form表单校验规则
const inquire = () => {
  loading.value = true;
  hasSendMsgPage({
    ...form,
    searchBeginTime: datePickerRef.value.timeValue[0],
    searchEndTime: datePickerRef.value.timeValue[1],
    sendResult: state.value,
  }).then((res) => {
    total.value = res.data.total;
    tableData.value = res.data.records;
    loading.value = false;
  });
};
const open = (text: string, data?: any) => {
  
  machineVisible.value = true;
  nextTick(() => {
    inquire();
  });
};
const onTableSizeChange = (size: number) => {
  form.pageSize = size;
  // 重新加载数据
  inquire();
};
const onTableCurrentChange = (page: number) => {
  form.pageNum = page;
  // 重新加载数据
  inquire();
};
// 导出
const exportTable = () => {
  let columnExpor: any = [
    {
      title: "时间",
      key: "sendTime",
      type: "text",
    },
    {
      title: "接收人",
      key: "userName",
      type: "text",
    },
    {
      title: "手机号",
      key: "phone",
      type: "text",
    },
    {
      title: "发送结果",
      key: "sendResult",
      type: "text",
    },
    {
      title: "发送内容",
      key: "msgContent",
      type: "text",
    },
  ];

  hasSendMsgPage({
    pageNum: 1,
    pageSize: total.value,
    searchBeginTime: datePickerRef.value.timeValue[0],
    searchEndTime: datePickerRef.value.timeValue[1],
    sendResult: state.value,
  }).then((res) => {
    setTimeout(() => {
      table2excel(
        columnExpor,
        res.data.records.filter(
          (item) => (item.sendResult = item.sendResult == 1 ? "成功" : "失败")
        ), // 导出原始数据
        "已发短信"
      );
    }, 500);
  });
};
const handleClose = () => {
  emit("close", false);
}

defineExpose({ open });
</script>
<style lang="scss" scoped>
@use "@/assets/scss/index.scss";
.tableBox {
  padding: 0px !important;
}
.formBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.formLeft {
  display: flex;
  align-items: center;
  color: #fff;
}
</style>
