<template>
  <div class="select-form-card">
    <LayoutHeader :title="title" :style="{ marginBottom: '23px' }" :cardStyle="{ padding: '10px 14px 0px' }">
      <template #content>
        <div class="select-form">
          <el-form :inline="true" :model="form" label-width="0">
            <el-form-item label="">
              <div class="card-tabs">
                <div class="card-tab" v-for="item in tabList" :key="item.value" 
                  :class="{ active: form.tab === item.value }" @click="handleTabChange(item.value)"
                >
                  {{ item.label }}
                </div>
              </div>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="form.version" placeholder="">
                <el-option label="全部版本" value="all" />
                <el-option label="1.0.0" value="1" />
                <el-option label="1.0.1" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-select v-model="form.channel" placeholder="">
                <el-option label="全部渠道" value="all" />
                <el-option label="应用宝" value="1" />
                <el-option label="华为应用市场" value="2" />
              </el-select>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker :type="'daterange'" :clearable="false" style="width: 242px;" v-model="form.dateArray"
                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :disabled-date="disabledDate" />
            </el-form-item>
          </el-form>
        </div>
      </template>
    </LayoutHeader>
  </div>
</template>
<script lang="ts" name="selectForm" setup>
import { ref, PropType } from 'vue'
import LayoutHeader from '/@/views/count/components/LayoutHeader.vue';

const props = defineProps({
  tabList: {
    type: Array as PropType<{ label: string, value: number }[]>,
    default: () => []
  },
  title: {
    type: String,
    default: ''
  },
  form: {
    type: Object as PropType<{
      tab: number,
      version: string,
      channel: string,
      dateArray: Date[]
    }>,
    default: () => ({})
  }
})

const handleTabChange = (tab: number) => {
  props.form!.tab = tab;
}

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

</script>

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

.select-form-card {
  .card-tabs {
    margin-bottom: 0;
  }
}
</style>