<template>
  <div>
    <div class="gva-search-box">
      <div class="gva-btn-list">
        <el-form ref="searchForm" :inline="true" :model="searchInfo">
          <el-form-item label="平台">
            <el-input v-model="searchInfo.platform" placeholder="平台" />
          </el-form-item>
          <el-form-item label="日期" prop="new_date">
            <el-date-picker
              v-model="searchInfo.new_date"
              popper-class="picker-popovers"
              class="timefilter"
              type="date"
              :disabled-date="disabledDate"
              :shortcuts="shortcuts"
              placeholder="选择日期时间"
              value-format="YYYY-MM-DD"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="search"
              @click="onSubmit"
              >查询</el-button
            >
            <el-button size="small" icon="refresh" @click="onReset"
              >重置</el-button
            >
            <el-button
              class="excel-btn"
              size="small"
              type="primary"
              icon="download"
              @click="handleExcelExport"
              >导出表格</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="gva-table-box">
      <!-- <el-scrollbar height="550px"> -->
      <el-table
        height="500px"
        :data="tableData"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
        border
        show-summary
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          align="left"
          label="日期"
          min-width="50"
          prop="new_date"
        />
        <el-table-column
          align="left"
          label="任务ID"
          min-width="50"
          prop="task_id"
        />
        <el-table-column
          align="left"
          label="任务名称"
          min-width="100"
          prop="task_name"
        />
        <el-table-column
          align="left"
          label="平台"
          min-width="100"
          prop="platform"
        />
        <el-table-column label="单价" align="center" min-width="200">
          <el-table-column
            align="left"
            label="新增单价"
            min-width="100"
            prop="unit_price_new"
          />
          <el-table-column
            align="left"
            label="留存单价"
            min-width="100"
            prop="unit_price_retained"
          />
        </el-table-column>
        <el-table-column
          align="left"
          label="消耗"
          min-width="100"
          prop="ledger"
        />
        <el-table-column
          align="left"
          label="新增消耗"
          min-width="100"
          prop="ledger_new"
        />
        <el-table-column
          align="left"
          label="留存消耗"
          min-width="100"
          prop="ledger_retained"
        />
      </el-table>
      <!-- </el-scrollbar> -->
      <div class="gva-pagination">
        <el-pagination
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="[10, 20, 30, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "wechat_scanner_ledger",
};
</script>

<script setup>
import {
  getWeChatScannerLedgerList,
  exportLedgerListExcel,
} from "@/api/data_abnormal_rate";
import { toSQLLine } from "@/utils/stringFun";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { formatDate } from "@/utils/format";

const page = ref(1);
const total = ref(0);
const pageSize = ref(50);
const tableData = ref([]);
let spanArr = [];
const searchInfo = ref({});
const shortcuts = [
  {
    text: "今日",
    value: new Date(),
  },
  {
    text: "昨日",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    },
  },
];

const disabledDate = (time) => {
  return time.getTime() > Date.now();
};

// 分页
const handleSizeChange = (val) => {
  pageSize.value = val;
  getTableData();
};
const onReset = () => {
  searchInfo.value = {};
};
const handleCurrentChange = (val) => {
  page.value = val;
  getTableData();
};

// 排序
const sortChange = ({ prop, order }) => {
  if (prop) {
    if (prop === "id") {
      prop = "id";
    }
    searchInfo.value.orderKey = toSQLLine(prop);
    searchInfo.value.desc = order === "descending";
  }
  getTableData();
};

const handleExcelExport = async () => {
  var fileName = "";
  if (searchInfo.value.new_date == null) {
    let dt = new Date();
    var y = dt.getFullYear();
    var mt = (dt.getMonth() + 1).toString().padStart(2, "0");
    var day = dt.getDate().toString().padStart(2, "0");
    var timeStr = y + "-" + mt + "-" + day;
    fileName = timeStr + "-扫码消耗明细.xlsx";
  } else {
    fileName = searchInfo.value.new_date + "-扫码消耗明细.xlsx";
  }
  exportLedgerListExcel(
    { page: page.value, pageSize: pageSize.value, ...searchInfo.value },
    fileName
  );
};

// 搜索
const onSubmit = () => {
  page.value = 1;
  pageSize.value = 50;

  getTableData();
};

// 查询
const getTableData = async () => {
  const table = await getWeChatScannerLedgerList({
    page: page.value,
    pageSize: pageSize.value,
    ...searchInfo.value,
  });
  if (table.code === 0) {
    tableData.value = table.data.list;
    total.value = table.data.total;
    page.value = table.data.page;
    pageSize.value = table.data.pageSize;
  }
};
getTableData();
</script>

<style scoped lang="scss">
.button-box {
  padding: 10px 20px;
  .el-button {
    float: right;
  }
}
.warning {
  color: #dc143c;
}
</style>
