<template>
  <div class="dialog-nav-bar">
    <div v-if="workshopList !== undefined" class="workshop-select">
      <el-select
        v-model="selectedWorkshop"
        multiple
        clearable
        collapse-tags
        placeholder="请添加车间"
        :max-collapse-tags="1"
        style="width: 240px"
      >
        <el-checkbox v-model="checkAll" :indeterminate="false" @change="handleCheckAll">
          全选
        </el-checkbox>
        <el-option v-for="shop in workshopList" :key="shop.id" :label="shop.name" :value="shop.id">
          <!-- <el-checkbox :label="shop.label"> </el-checkbox> -->
        </el-option>
      </el-select>
    </div>
    <el-date-picker
      class="date-picker"
      v-model="dateRange"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :shortcuts="shortcuts"
      :default-time="[new Date().setHours(0, 0, 0, 0), new Date().setHours(23, 59, 59, 999)]"
      style="max-width: 299px"
    ></el-date-picker>
    <el-button @click="onSearch" type="primary" style="width: 65px; height: 32px; margin-left: 16px"
      >搜 索
    </el-button>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref, watch } from 'vue';
  import { ChartQuery } from '@/api/datamanagement/dataplatform';
  import { formatDate } from '@/utils/platformUtils';

  const checkAll = ref();
  const selectedWorkshop = ref<number[]>();
  const dateRange = ref<Date[]>();

  const props = withDefaults(
    defineProps<{
      chartType?: string;
      workshopList?: any[] | undefined;
    }>(),
    {
      chartType: 'bar',
    },
  );

  // 参数改变事件
  const emits = defineEmits<{
    (e: 'chartParamsChanged', parmas: ChartQuery);
  }>();

  const serchParams = ref<ChartQuery>({});

  const onSearch = () => {
    if (
      !dateRange.value ||
      dateRange.value[0].toString() === 'Invalid Date' ||
      dateRange.value[1].toString() === 'Invalid Date'
    ) {
      delete serchParams.value.startTime;
      delete serchParams.value.endTime;
    } else {
      serchParams.value.startTime = formatDate(dateRange.value[0]);
      serchParams.value.endTime = formatDate(dateRange.value[1]);
    }
    serchParams.value.workshopList = selectedWorkshop.value;
    // if (props.workshopList !== undefined) {
    //   if (!selectedWorkshop.value || !selectedWorkshop.value.length) {
    //     ElMessage.error('请至少选择一个车间');
    //     return;
    //   }
    //   serchParams.value.workshopList = selectedWorkshop.value;
    // }
    emits('chartParamsChanged', serchParams.value);
  };

  // select全选事件
  const handleCheckAll = (val: boolean) => {
    if (val) {
      selectedWorkshop.value = props.workshopList!.map((item) => item.id);
    } else {
      selectedWorkshop.value = [];
    }
  };
  watch(
    () => selectedWorkshop.value,
    (val) => {
      if (val !== undefined) {
        if (val.length === props.workshopList!.length) {
          checkAll.value = true;
        } else {
          checkAll.value = false;
        }
      }
    },
    { immediate: true },
  );

  // 初始化全选
  onMounted(() => {
    if (props.workshopList !== undefined) {
      selectedWorkshop.value = props.workshopList!.map((item) => item.id);
    }
    onSearch();
  });

  const shortcuts = [
    {
      text: props.chartType === 'bar' ? '今天' : '本周',
      value: () => {
        return props.chartType === 'bar'
          ? [new Date().setHours(0, 0, 0, 0), new Date()]
          : [
              new Date(new Date().getTime() - 3600 * 1000 * 24 * new Date().getDay()).setHours(
                0,
                0,
                0,
                0,
              ),
              new Date(),
            ];
      },
    },
    {
      text: '本月',
      value: () => {
        const start = new Date(
          new Date().getTime() - 3600 * 1000 * 24 * (new Date().getDate() - 1),
        ).setHours(0, 0, 0, 0);
        return [start, new Date()];
      },
    },
    {
      text: '累计',
      value: () => {
        return [null, null];
      },
    },
  ];
</script>

<style lang="scss" scoped>
  .workshop-select {
    width: 250px;
  }
  .dialog-nav-bar {
    padding-right: 25px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after {
    left: 5px;
  }
  .el-select-dropdown__item.is-selected {
    font-weight: inherit;
  }
  :deep(.el-checkbox__label) {
    padding-left: 2px;
  }
  :deep(.el-checkbox__input) {
    margin-left: 4px;
  }
</style>
