<template>
  <view class="layout-box">
    <view class="filter">
      <u-input
        v-model="state.startTime"
        disabled
        disabledColor="#ffffff"
        placeholder="请选择开始时间"
      ></u-input>
      <text>-</text>
      <u-input
        v-model="state.endTime"
        disabled
        disabledColor="#ffffff"
        placeholder="请选择结束时间"
      ></u-input>
      <u-icon
        name="arrow-down"
        @click="handleDialog('showTime', true)"
      ></u-icon>

      <text class="btn" @click="handleDialog('showFilter', true)"
        >收货产品</text
      >
    </view>
  </view>

  <!-- <view>
    <c-echarts :option="option" :height="'90vh'" />
  </view> -->

  <!-- 时间弹框 -->
  <TimeDialog
    ref="timeDialog"
    :show="showDialog.showTime"
    @handleDialog="(v:boolean) => {handleDialog('showTime', v)}"
    @changeTime="changeTime"
  />
  <!-- 单据弹框 -->
  <view>
    <ProductTypeDialog
      :show="showDialog.showFilter"
      @handleDialog="(v:boolean) => {handleDialog('showFilter', v)}"
      :isShipment="false"
      @changeProduct="changeProduct"
    />
  </view>
</template>
<script setup lang="ts">
import TimeDialog from "./components/TimeDialog.vue";
import CEcharts from "@/components/Echarts/echarts.vue";
import ProductTypeDialog from "./components/ProductTypeDialog.vue";
import { ReceiveApi } from "@/services";
import { formatDate, getCurrentMonthStartAndEnd } from "@/utils";
const option = ref({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
    },
  },
  grid: {
    left: "10px",
    right: "20px",
    top: "10px",
    bottom: "30px",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    boundaryGap: [0, 0.01],
  },
  yAxis: {
    type: "category",
    data: [1, 2, 3, 4, 5],
    axisLabel: {
      // inside: true,
      // color: '#fff'
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "#83bff6",
      },
    },
  },
  series: [
    {
      data: [100, 110, 113, 126, 143, 158, 165, 167, 152, 102, ,],
      type: "bar",
      areaStyle: {
        show: true,
      },
      barWidth: 24,
    },
  ],
  color: ["#00D2E3"],
});
const changeProduct = (obj: any) => {
  state.productId = obj.productId;
  getList();
};
const showDialog = <
  {
    [key: string]: boolean;
  }
>reactive({
  showTime: false,
  showFilter: false,
});
const handleDialog = (key: string, v: boolean) => {
  showDialog[key] = v;
};
const state = reactive<{
  startTime: string;
  endTime: string;
  scaleStatus: number;
  userId: number;
  productId: number;
}>({
  startTime: formatDate(getCurrentMonthStartAndEnd().start, "{y}-{m}-{d}"),
  endTime: formatDate(getCurrentMonthStartAndEnd().end, "{y}-{m}-{d}"),
  scaleStatus: -1,
  userId: -1,
  productId: -1,
});

const changeTime = (obj: any) => {
  state.startTime = obj.startTime;
  state.endTime = obj.endTime;
  getList();
};

const getList = () => {
  let params: any = {
    startTime: state.startTime + " 00:00:00",
    endTime: state.endTime + " 23:59:59",
  };
  if (state.scaleStatus > -1) {
    params.scaleStatus = state.scaleStatus;
  }
  if (state.userId > -1) {
    params.userId = state.userId;
  }
  if (state.productId > -1) {
    params.productId = state.productId;
  }
  ReceiveApi.OrderInRanking(params).then((res) => {
    if (res.code === 200) {
    }
  });
};
onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.layout-box {
  margin: 35.9rpx 25.64rpx;
  .filter {
    display: flex;
    align-items: center;
    justify-items: center;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: 28rpx;
    color: #000000;
    ::v-deep .u-input {
      padding: 0rpx 16.03rpx !important;
      input {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 24rpx !important;
        color: #000000;
      }
    }
    text {
      margin: 0px 5rpx;
    }
    .status {
      margin-left: 40rpx;
    }
    .btn {
      color: $u-primary;
      margin-left: 40rpx;
      margin-right: 0rpx;
    }
  }
}
</style>
