<template>
  <LayoutHeader :title="title" :style="{ marginBottom: '0' }" :cardStyle="{ padding: '10px 14px 0px 14px' }">
    <template #content>
      <div class="select-form">
        <el-form :inline="true" :model="form" label-width="0">
          <el-form-item label="">
            <el-date-picker v-if="type === 'date'" :type="type" style="width: 147px; min-width: 147px;" v-model="form.date" placeholder="开始日期" :disabled-date="disabledDate" />
            <el-date-picker v-if="type === 'daterange'" :type="type" style="width: 242px;" v-model="form.dateArray" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :disabled-date="disabledDate" />
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="form.channel" placeholder="请选择渠道">
              <el-option label="全部渠道" value="all" />
              <el-option label="渠道1" value="1" />
              <el-option label="渠道2" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="form.version" placeholder="请选择版本">
              <el-option label="全部版本" value="all" />
              <el-option label="版本1" value="1" />
              <el-option label="版本2" value="2" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </LayoutHeader>
</template>
<script setup lang="ts">
import LayoutHeader from '/@/views/count/components/LayoutHeader.vue';

const props = defineProps({
  type: {
    type: String,
    default: 'date'
  },
  form: {
    type: Object,
    default: () => ({})
  },
  title: {
    type: String,
    default: ''
  }
})

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now(); 
}

</script>
<style scoped lang="scss">
@import '/@/views/count/styles/common.scss';

.select-form-card {
  .card-title {
    color: rgba(18, 18, 18, 1);
  }
}
.select-form {
    margin-top: 20px;

    form {
      // height: 30px;
    }

    .el-form-item__content {
      .el-select {
        width: 147px !important;
        min-width: 147px !important;
      }
    }
  }
</style>