<template>
  <BasePage>
    <div class="merchanttrade">
      <div class="top">
        <div class="date" @click="showDate = true">
          <div>
            <span>
              {{ date[0] }}-
            </span>
            <span>
              {{ (parseInt(date[1]) < 10) ? `0${parseInt(date[1])}` : parseInt(date[1]) }} </span>
          </div>
          <img src="/img/down.png">
        </div>

        <div class="filter" @click="showRight = true">
          <span>筛选</span>
          <img src="/img/down.png" alt="">
        </div>
      </div>

      <BaseList ref="listRef" url="/v1/client/DShopsClient/order" class="list" :params="searchParams"
        :parse-data="parseData" @load="onLoad">
        <template #default="{ item }">
          <div class="item" v-if="item.orders && item.orders.length">
            <div class="top_line">
              <span class="date">
                {{ item.day }}
              </span>
              <div class="right_box">
                <div>
                  <p>{{ item.orderCount }}</p>
                  <p>订单数</p>
                </div>
                <div>
                  <p>¥{{ item.ordermoney }}</p>
                  <p>营业额</p>
                </div>
                <div>
                  <p>¥{{ item.income }}</p>
                  <p>应收</p>
                </div>
              </div>
            </div>

            <div class="item_detail" v-for="order in item.orders" :key="order.ordernum">
              <div class="line">
                <span class="ordernum">
                  订单号：{{ order.ordernum }}
                </span>
                <button @click="$navigate(`MerchantTradeDetail?id=${order.ordernum}`)">
                  {{ order.statename }} <van-icon name="arrow"></van-icon>
                </button>
              </div>

              <div class="userinfo">
                <img :src="$file(order.userimg)" class="icon" alt="">
                <div class="info">
                  <span>{{ order.usercellphone }}</span>
                  <p>{{ $formatGMT(order.addtime, 'yyyy-MM-dd HH:mm:ss') }}</p>
                </div>
              </div>

              <div class="count">
                <div>
                  <b>￥{{ order.ordermoney }}</b>
                  <span>商品总额</span>
                </div>
                <div>
                  <b>￥{{ order.discount }}</b>
                  <span>让利金额</span>
                </div>
                <div class="red">
                  <b>￥{{ order.income }}</b>
                  <span>应收金额</span>
                </div>
              </div>
            </div>
          </div>
        </template>
      </BaseList>

      <van-popup v-model:show="showDate" position="bottom">
        <van-date-picker v-model="currentDate" title="选择年月" :columns-type="['year', 'month']" @confirm="onconfirm"
          @cancel="showDate = false" />
      </van-popup>

      <van-popup v-model:show="showRight" position="right" :style="{ width: '80%', height: '100%' }">
        <div class="filter-popup">
          <div class="filter-header">
            <span @click="showRight = false">取消</span>
            <span>筛选</span>
            <span @click="resetFilter">重置</span>
          </div>

          <div class="filter-content">
            <div class="filter-section">
              <div class="section-title">用户手机号</div>
              <van-field v-model="filterForm.cellphone" placeholder="输入手机号筛选" clearable />
            </div>

            <div class="filter-section">
              <div class="section-title">订单号</div>
              <van-field v-model="filterForm.ordernum" placeholder="输入订单号筛选" clearable />
            </div>

            <div class="filter-section">
              <div class="section-title">买单时间</div>
              <div class="date-range" @click="showDateRange = true">
                <span v-if="filterForm.starttime">{{ filterForm.starttime }}</span>
                <span v-else class="placeholder">开始日期</span>
                <span class="to">至</span>
                <span v-if="filterForm.endtime">{{ filterForm.endtime }}</span>
                <span v-else class="placeholder">结束日期</span>
              </div>
            </div>

            <!-- <div class="filter-section">
              <div class="section-title">订单状态</div>
              <van-radio-group v-model="filterForm.status" direction="horizontal">
                <van-radio name="-1">全部</van-radio>
                <van-radio name="0">待付款</van-radio>
                <van-radio name="1">待处理</van-radio>
                <van-radio name="3">已完成</van-radio>
              </van-radio-group>
            </div> -->
          </div>

          <van-action-bar>
            <van-action-bar-button type="warning" text="重置" @click="resetFilter" />
            <van-action-bar-button type="danger" text="确认" @click="confirmFilter" />
          </van-action-bar>
        </div>
      </van-popup>

      <!-- <van-popup v-model:show="showDateRange" position="bottom" :style="{ height: '75%' }"> -->
      <van-calendar v-model:show="showDateRange" type="range" :min-date="new Date(2026, 0, 1)" @confirm="onDateRangeConfirm" />

      <!-- <van-calendar type="range" v-model="selectedDateRange" :min-date="new Date(new Date().getFullYear() - 1, 0, 1)"
          title="选择日期区间" show-title show-subtitle @confirm="onDateRangeConfirm" /> -->
      <!-- </van-popup> -->
    </div>
  </BasePage>
</template>

<script>
export default {
  name: 'MerchantTrade',
  data() {
    return {
      date: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
      currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
      showDate: false,
      showRight: false,
      showDateRange: false,
      filterForm: {
        cellphone: '',
        ordernum: '',
        starttime: '',
        endtime: '',
        status: '-1'
      },
      GiftName: { 0: '待付款', 1: '待处理', 2: '待处理', 3: '已完成', 4: '已完成' },
      searchParams: {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        cellphone: '',
        ordernum: '',
        starttime: '',
        endtime: ''
      },
      data: {
        img: ''
      },
      searchKey: '',
      selectedDateRange: [new Date(), new Date()]
    }
  },
  methods: {
    parseData(res) {
      return res.data || []
    },
    onLoad(list) {
      console.log('list loaded:', list);
    },
    onconfirm(value) {
      this.date = this.currentDate;
      this.searchParams.year = parseInt(this.currentDate[0])
      this.searchParams.month = parseInt(this.currentDate[1])
      this.showDate = false;
      this.$refs.listRef?.refresh();
    },
    onDateRangeConfirm(date) {
      if (Array.isArray(date) && date.length >= 2) {
        this.filterForm.starttime = this.formatDate(date[0]);
        this.filterForm.endtime = this.formatDate(date[date.length - 1]);
      }
      this.showDateRange = false;
    },
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, '0');
      const day = String(d.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    resetFilter() {
      this.filterForm = {
        cellphone: '',
        ordernum: '',
        starttime: '',
        endtime: '',
        status: '-1'
      };
    },
    confirmFilter() {
      this.searchParams.cellphone = this.filterForm.cellphone;
      this.searchParams.ordernum = this.filterForm.ordernum;
      this.searchParams.starttime = this.filterForm.starttime;
      this.searchParams.endtime = this.filterForm.endtime;
      this.showRight = false;
      this.$refs.listRef?.refresh();
    },
    getStateClass(state) {
      switch (state) {
        case 4:
        case 3:
          return 'green';
        case 2:
        case 1:
          return 'yellow';
        case 0:
          return 'red';
        default:
          return '';
      }
    }
  },
}
</script>
