<template>
  <div>
    <div>
      <el-card class="mb-4" shadow="never">
        <div>
          <el-row>
            <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="mx-2"
              >
                <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-cascader
                v-model="state.query.serviceIds"
                :options="options"
                :props="{ multiple: true }"
                collapse-tags
                collapse-tags-tooltip
                clearable
                placeholder="所有服务项目"
              />
              <el-select
                v-model="state.query.type"
                placeholder="所有消费类型"
                filterable
                class="ml-2"
              >
                <el-option label="所有消费类型" :value="0" />
                <el-option label="消费" :value="1" />
                <el-option label="退费" :value="2" />
              </el-select>
              <el-button class="ml-2" type="primary" @click="onSearch"
                >筛选</el-button
              >
              <el-button type="primary" plain @click="onReset">重置</el-button>
            </el-col>
            <el-col :span="6">
              <div class="flex justify-end text-right">
                <el-select
                  v-model="state.query.key"
                  placeholder="请选择"
                  style="width: 150px"
                >
                  <el-option label="用户" value="user" />
                  <el-option label="关联的业务单号" value="orderNo" />
                </el-select>
                <el-input
                  v-model="state.query.value"
                  placeholder="请输入关联业务单号"
                  v-if="state.query.key == 'orderNo'"
                  style="width: 195px"
                />
                <SearchArchivesSelect
                  v-model="state.query.value"
                  v-if="state.query.key == 'user'"
                  placeholder="输入姓名或者档案号"
                />
                <el-button :icon="Search" @click="onSearch">查询</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <el-table :data="state.list" style="width: 100%" border>
        <el-table-column prop="createdAt" label="业务发生时间" />
        <el-table-column prop="archiveId" label="用户信息">
          <template #default="{ row }">
            <div>
              <div>{{ row.archiveName }}</div>
              <div>{{ row.archiveId }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="cardName" label="会员卡名称" />
        <el-table-column prop="serviceName" label="服务项目名称" />
        <el-table-column prop="type" label="消费类型">
          <template #default="{ row }">
            <div>
              <div>{{ row?.type == 1 ? "消费" : "退费" }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="quantity" label="业务数量" />
        <el-table-column
          prop="cardBalance"
          label="业务发生后卡内余额"
          :formatter="v => (v.cardBalance === -1 ? '无限次' : v.cardBalance)"
        />
        <el-table-column prop="orderNo" label="关联的业务单号" />
        <el-table-column prop="remark" label="备注信息" />
      </el-table>
      <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, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import SearchArchivesSelect from "@/components/Archives/SearchArchivesSelect.vue";

const state = reactive({
  visible: false,
  visibleSystemInterest: false,
  rowData: {},
  query: {
    page: 1,
    pageSize: 10, //
    cardIds: [],
    type: 0,
    serviceIds: [],
    name: "", // 搜索项目：user: 用户；outTradeNo：第三方订单号
    key: "user",
    value: ""
  },
  times: [],
  list: [],
  total: 0
});

const memberCardList = ref([]);
const options = [
  {
    value: "sys",
    label: "系统服务项目",
    children: [
      {
        value: "sys1",
        label: "报告"
      },
      {
        value: "sys2",
        label: "添加家人"
      }
    ]
  }
];
const getList = () => {
  let start = undefined;
  let end = undefined;
  if (state.times?.length > 0) {
    start = state.times[0];
    end = state.times[1];
  }
  const serviceIds =
    state.query.serviceIds.length &&
    state.query.serviceIds.map(v => {
      return v[1];
    });
  request
    .get("walletService/mechanism/membershipCard/used/paginate", {
      params: {
        ...state.query,
        cardIds: state.query.cardIds?.join(","),
        serviceIds: serviceIds ? serviceIds?.join(",") : undefined,
        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 onSearch = () => {
  state.query.page = 1;
  getList();
};
const onReset = () => {
  state.times = [];
  state.query.cardIds = [];
  state.query.times = [];
  state.query.serviceIds = [];
  state.query.type = 0;
  state.query.value = "";
  state.query.key = "";
  onSearch();
};
const changePage = page => {
  state.query.page = page;
  getList();
};
const initData = () => {
  getMemberCardList();
  getList();
};
initData();
</script>
<style lang="scss">
.el-select-dropdown__item {
  overflow: auto;
  height: auto;
}
</style>
