<template>
  <div>
    <div>
      <el-card class="mb-4" shadow="never">
        <div>
          <el-row :gutter="10">
            <el-col :span="18">
              <el-date-picker
                v-model="state.times"
                type="daterange"
                clearable
                range-separator="至"
                value-format="YYYY-MM-DD"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              />
              <el-select
                v-model="state.query.cardIds"
                placeholder="全部会员卡"
                filterable
                clearable
                multiple
                class="ml-4 mr-4"
              >
                <el-option
                  v-for="item in memberCardList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                  <template #default>
                    <div>
                      <span style="font-weight: bold">{{ item.name }} </span>
                      <div class="text-sm text-gray-400" v-if="item.remark">
                        {{ item.remark }}
                      </div>
                    </div>
                  </template>
                </el-option>
              </el-select>

              <el-select
                v-model="state.query.channelNames"
                placeholder="全部绑定的渠道"
                filterable
                clearable
                multiple
                class="mr-4"
              >
                <el-option
                  v-for="(item, index) in channleNameList"
                  :key="(item, index)"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <el-button type="primary" @click="onSearch">筛选</el-button>
              <el-button type="primary" plain @click="onReset">重置</el-button>
            </el-col>
            <el-col :span="6" class="flex justify-end">
              <el-input
                v-model="state.query.value"
                placeholder="请输入"
                class="input-with-select"
              >
                <template #prepend>
                  <el-select
                    v-model="state.query.key"
                    placeholder="请选择"
                    style="width: 115px"
                  >
                    <el-option label="用户" value="user" />
                    <el-option label="第三方订单" value="outTradeNo" />
                  </el-select>
                </template>
                <template #append>
                  <el-button :icon="Search" @click="onSearch">查询</el-button>
                </template>
              </el-input>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <BindRecordTable :list="state.list" />
      <el-pagination
        class="mt-4 justify-end"
        background
        layout="prev, pager, next"
        :total="state.total"
        :page-size="state.pageSize"
        @current-change="changePage"
      />
    </div>
  </div>
</template>
<script setup>
import { request } from "@/utils";
import { ref, computed, defineProps, defineEmits, watch, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import BindRecordTable from "./components/BindRecordTable.vue";
const state = reactive({
  visible: false,
  visibleSystemInterest: false,
  rowData: {},
  query: {
    page: 1,
    pageSize: 10, //
    cardIds: [],
    channelNames: [],
    name: "", // 搜索项目：user: 用户；outTradeNo：第三方订单号
    key: "user",
    value: ""
  },
  times: [],
  list: [],
  total: 0
});
const memberCardList = ref([]);
const channleNameList = ref([]);

const getBindRecords = () => {
  let start = undefined;
  let end = undefined;
  if (state.times?.length > 0) {
    start = state.times[0];
    end = state.times[1];
  }
  request
    .get("walletService/mechanism/membershipCard/bindLog/paginate", {
      params: {
        ...state.query,
        cardIds: state.query.cardIds.join(","),
        channelNames: state.query.channelNames.join(","),
        start,
        end
      }
    })
    .then(resp => {
      state.list = resp.data.list;
      state.total = resp.data.total;
    });
};

const getMemberCardList = () => {
  request
    .get("walletService/mechanism/membershipCard/list", {
      params: { status: 1 }
    })
    .then(resp => {
      memberCardList.value = resp.data;
    });
};
const getChannleName = () => {
  request
    .get("walletService/mechanism/membershipCard/bindLog/channelNames", {})
    .then(resp => {
      channleNameList.value = resp.data;
    });
};
const onSearch = () => {
  state.query.page = 1;
  getBindRecords();
};
const onReset = () => {
  state.times = [];
  state.query.channelNames = [];
  state.query.cardIds = [];
  state.query.times = [];
  state.query.value = "";
  state.query.key = "";
  onSearch();
};
const changePage = page => {
  state.query.page = page;
  getBindRecords();
};
const initData = () => {
  getMemberCardList();
  getChannleName();
  getBindRecords();
};
initData();
</script>
<style lang="scss">
.el-select-dropdown__item {
  overflow: auto;
  height: auto;
}
</style>
