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

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

  <c-echarts :option="option" :height="'90vh'" />
    <!-- 单据弹框 -->
    <ProductTypeDialog :show="showDialog.showFilter" @handleDialog="(v:boolean) => {handleDialog('showFilter', v)}"/>
</template>
<script setup lang="ts">

import CEcharts from "../../components/Echarts/echarts.vue";
import ProductTypeDialog from './components/ProductTypeDialog.vue'
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 params = reactive({
  startTime: "2024-01-01",
  endTime: "2024-01-01",
});
const showDialog = <
  {
    [key: string]: boolean;
  }
>reactive({
  showTime: false,
  showFilter: false,
});
const handleDialog = (key: string, v: boolean) => {
  showDialog[key] = v;
};
</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: 27rpx;
    color: #000000;
    ::v-deep .u-input {
      padding: 0rpx 16.03rpx !important;
      input {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 21rpx !important;
        color: #000000;
      }
    }
    text {
      margin: 0px 5rpx;
    }
    .status {
      margin-left: 40rpx;
    }
    .btn {
      color: $u-primary;
      margin-left: 40rpx;
      margin-right: 0rpx;
    }
  }
}
</style>
