<template>
  <div>
    <div>
      <el-card class="mb-4" shadow="never">
        <div>
          <el-row>
            <el-col :span="18">
              <el-space wrap>
                <el-select
                  v-model="state.query.type"
                  placeholder="全部订单类型"
                  clearable
                  collapse-tags
                  multiple
                  filterable
                  class="w-[180px]"
                >
                  <el-option label="会员卡订单" :value="1" />
                </el-select>
                <el-select
                  v-model="state.query.agencyIds"
                  placeholder="全部渠道"
                  multiple
                  collapse-tags
                  class="w-[180px]"
                  filterable
                >
                  <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                </el-select>

                <el-select
                  v-model="state.query.status"
                  placeholder="全部订单状态"
                  clearable
                  collapse-tags
                  multiple
                  filterable
                  class="w-[180px]"
                >
                  <el-option label="微信支付" :value="1" />
                </el-select>
                <el-select
                  v-model="state.query.payType"
                  placeholder="全部支付方式"
                  clearable
                  collapse-tags
                  multiple
                  filterable
                  class="w-[180px]"
                >
                  <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select
                  v-model="state.query.paymentType"
                  placeholder="全部支付款流向"
                  clearable
                  collapse-tags
                  multiple
                  filterable
                  class="w-[180px]"
                >
                  <el-option label="平台" :value="1" />
                  <el-option label="第三方" :value="2" />
                </el-select>
                <el-date-picker
                  v-model="state.times"
                  type="daterange"
                  clearable
                  range-separator="至"
                  value-format="YYYY-MM-DD"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
                <el-button class="ml-2" type="primary" @click="onSearch">筛选</el-button>
                <el-button type="primary" plain @click="onReset">重置</el-button>
              </el-space>
            </el-col>
            <el-col :span="6">
              <div class="flex justify-end text-right">
                <el-select v-model="state.key" placeholder="请选择" style="width: 150px">
                  <el-option label="订单号" value="key" />
                  <el-option label="用户ID" value="user" />
                  <el-option label="推广商品" value="shop" />
                </el-select>
                <el-input
                  v-model="state.query.value"
                  placeholder="请输入关联业务单号"
                  v-if="state.key == 'key'"
                  class="w-[180px]"
                  clearable
                />
                <SearchArchivesSelect
                  v-model="state.query.archivesId"
                  v-else-if="state.key == 'user'"
                  placeholder="输入姓名或者档案号"
                  class="w-[180px]"
                />

                <el-select
                  v-else-if="state.key == 'shop'"
                  placeholder="请选择推广商品"
                  v-model="state.query.promotionGoodsId"
                  class="w-[180px]"
                  clearable
                >
                  <el-option
                    v-for="item in promotionGoodsList"
                    :key="item.memberCard"
                    :label="item.memberCardName"
                    :value="item.id"
                  />
                </el-select>
                <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="sn" label="订单信息">
          <template #default="{ row }">
            <div>
              <span>{{ row.sn }}</span>
              <el-tag>【会员卡订单】</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="promotionSite" label="订单来源信息">
          <template #default="{ row }">
            <div>
              <div>{{ row.agency?.nickname }}</div>
              <div style="color: #a8abb2">[ {{ row.promotionSite?.name }} ]</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="promotionGoods" :formatter="v => v.promotionGoods.memberCardName" label="订单商品名称" />
        <el-table-column prop="balance" label="实付金额">
          <template #default="{ row }">
            <div>
              {{ row.balance / 100 }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态">
          <template #default="{ row }">
            <div :class="statusList[row.status - 1].color">
              {{ statusList[row.status - 1]?.label }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="支付时间" />
        <el-table-column prop="payType" label="支付方式" :formatter="() => '微信支付'" />
        <el-table-column prop="paymentType" label="支付款流向">
          <template #default="{ row }">
            <div>
              {{ row.paymentType === 1 ? "平台" : row?.agency?.nickname }}
            </div>
            <div style="color: #a8abb2">
              [ 商户号:{{ row.mchId }}
              ]
              <br />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="archives" label="用户信息">
          <template #default="{ row }">
            <div>
              {{ row.archives?.name }}
            </div>
            <div>
              <div v-for="(item, index) in row.archives?.accounts" :key="index" class="space-x-4">
                <!-- <span class="inline-block whitespace-nowrap w-[4em]">{{ accountTypes[item.type] }}</span> -->
                <span>【{{ item.account }}】</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button
              type="primary"
              link
              @click="
                visibleViewDetail = true;
                state.rowData = row;
              "
              >详情</el-button
            >
          </template>
        </el-table-column>
      </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>
    <el-drawer v-model="visibleViewDetail" direction="rtl" title="订单详情" @open="handleOpenViewDetail">
      <PerviewDetail :orderSn="state.rowData.sn" ref="perviewDetailRef" @success="getList()" />
    </el-drawer>
  </div>
</template>
<script setup>
// import { request } from "@/utils";
import { ref, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import PerviewDetail from "./components/PerviewDetail.vue";
import SearchArchivesSelect from "./components/SearchArchivesSelect.vue";
import { statusList, accountTypes } from "./constant.ts";
import { promotionSitePaginate } from "@/api/modules/promotion";
import http from "@/api";

const perviewDetailRef = ref();
const visibleViewDetail = ref(false);
const state = reactive({
  visible: false,
  visibleSystemInterest: false,
  rowData: {},
  key: "user",
  query: {
    page: 1,
    pageSize: 10, //
    type: 0,
    status: [],
    payType: [],
    paymentType: [],
    agencyIds: [],
    name: "", // 搜索项目：user: 用户；outTradeNo：第三方订单号
    key: "",
    archivesId: "",
    promotionGoodsId: []
  },
  times: [],
  list: [],
  total: 0
});

const memberCardList = ref([]);
const channelList = ref([]);
const getList = () => {
  let start = undefined;
  let end = undefined;
  if (state.times?.length > 0) {
    start = state.times[0];
    end = state.times[1];
  }
  const agencyIds =
    state.query.agencyIds.length &&
    state.query.agencyIds.map(v => {
      return v[1];
    });
  http
    .get("archivesService/agency/order/paginate", {
      ...state.query,
      agencyIds: agencyIds ? agencyIds?.join(",") : undefined,
      status: state.query.status?.join(","),
      payType: state.query.payType?.join(","),
      paymentType: state.query.paymentType?.join(","),
      start,
      end
    })
    .then(resp => {
      state.list = resp.data.list;
      state.total = resp.data.total;
    });
};

const getMemberCardList = () => {
  http
    .get("archivesService/agency/promotionGoods/list", {
      status: 1
    })
    .then(resp => {
      memberCardList.value = resp.data;
    });
};
const promotionGoodsList = ref([]);
const getPromotionGoodsList = () => {
  http.get("archivesService/agency/promotionGoods/list").then(resp => {
    promotionGoodsList.value = resp.data?.list;
  });
};
const handleOpenViewDetail = () => {
  perviewDetailRef.value.initData();
};
const onSearch = () => {
  state.query.page = 1;
  getList();
};
const onReset = () => {
  state.times = [];
  state.query.cardIds = [];
  state.query.times = [];
  state.query.agencyIds = [];
  state.query.type = 0;
  state.query.value = "";
  state.query.key = "";
  onSearch();
};
const changePage = page => {
  state.query.page = page;
  getList();
};
const getChannleList = () => {
  promotionSitePaginate({
    page: 1,
    pageSize: 1000
  }).then(res => {
    channelList.value = res.data?.list;
  });
};
const initData = () => {
  getPromotionGoodsList();
  getMemberCardList();
  getList();
  getChannleList();
};
initData();
</script>
<style lang="scss">
.el-select-dropdown__item {
  height: auto;
  overflow: auto;
}
</style>
