<template>
  <div>
    <el-alert title="微信授权游戏专用" type="warning" :closable="false" />
    <div class="gva-search-box">
      <div class="gva-btn-list">
        <el-form ref="searchForm" :inline="true" :model="searchInfo">
          <el-form-item label="任务Id">
            <el-input v-model="searchInfo.task_id" placeholder="任务ID" />
          </el-form-item>
          <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 label="新留">
            <el-select v-model="searchInfo.new_retained" size="small">
              <el-option label="新增" value="1" />
              <el-option label="留存" value="2" />
              <!-- <el-option label="3留" value="3" />
              <el-option label="4留" value="4" />
              <el-option label="5留" value="5" />
              <el-option label="6留" value="6" />
              <el-option label="7留" value="7" />
              <el-option label="8留" value="8" /> -->
            </el-select>
          </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-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
      >
        <el-table-column type="selection" width="55" />
        <el-table-column
          align="left"
          label="授权时间"
          min-width="150"
          prop="authorization_time"
        />
        <el-table-column
          align="left"
          label="订单号"
          min-width="150"
          prop="order_id"
        />
        <el-table-column
          align="left"
          label="平台"
          min-width="150"
          prop="platform"
        />
        <el-table-column
          align="left"
          label="任务ID"
          min-width="100"
          prop="task_id"
        />
        <el-table-column
          align="left"
          label="任务名称"
          min-width="100"
          prop="task_name"
        />
        <el-table-column
          align="left"
          label="留存天数(1:新增2:次留3:三留...)"
          min-width="150"
          prop="new_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_detailed",
};
</script>

<script setup>
import { getWeChatScannerDetailedList } 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(20);
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 onSubmit = () => {
  page.value = 1;
  pageSize.value = 10;

  if (typeof searchInfo.value.new_retained != "undefined") {
    searchInfo.value.new_retained = Number(searchInfo.value.new_retained);
  }
  if (typeof searchInfo.value.task_id != "undefined") {
    searchInfo.value.task_id = Number(searchInfo.value.task_id);
  }

  getTableData();
};

// 查询
const getTableData = async () => {
  const table = await getWeChatScannerDetailedList({
    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>
