<template>
    <div>
   <!--    <Header />-->
        <el-container class="container">
            <el-main class="main">
                


  <div class="block text-center">

    <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small justify-center" text="2xl">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>


                <div class="main-container">
        
                    <div class="main-left">
                        <div class="main-title">找会场</div>
                        <div class="main-content">
                           1对1专属会议顾问帮找场地
                    </div>

                    
                        <div>
<el-form  ref="firstFormRef" :model="firstForm"
    :rules="firstFormRules" 
    :inline=true
    label-position="top"
    status-icon
    label-width="120px"
    size="small"
    :hide-required-asterisk=true
    class="first-ruleForm">
<el-form-item label="活动城市" required>
<!-- <el-select v-model="selectedCity" placeholder="请选择活动城市" @change="handleChange">
<el-option
v-for="city in provinceAndCityData"
:key="city.value"
:label="city.label"
:value="city.value"
></el-option>
</el-select> -->

<el-cascader v-model:model-value="firstForm.city" 
 :options="provinceAndCityData" placeholder="请选择活动城市"
 
>
</el-cascader>
</el-form-item>



    <el-form-item label="活动时间" required >
        <el-date-picker 
        v-model="firstForm.act_date"
        type="date"
        unlink-panels editable
        range-separator="-"
        placeholder="活动举办时间？"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        change="handleChange"
      />
    </el-form-item>
    <el-form-item label="参加人数" required>
        <el-input-number
            v-model="firstForm.participant"
            :min="1"
            :max="10000"
            label="参加人数"
            placeholder="请输入参加人数"
        ></el-input-number>
    </el-form-item>
    

    <el-form-item label="大致预算" required>
        <el-input-number
            v-model="firstForm.budget"
            :min="1"
            :max="100000000"
            label="大致预算"
            placeholder="请输入大致预算"
        ></el-input-number>
    </el-form-item>
    
    <el-form-item label="活动类型" required>
        <el-select v-model="firstForm.type" placeholder="请选择活动类型">
            <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            ></el-option>
        </el-select>
    </el-form-item>

    <el-form-item label="联系电话" required>
        <el-input
            v-model="firstForm.phone"
            placeholder="请输入联系电话"
        ></el-input>
    </el-form-item>
    <el-form-item label="其他需求" required>
        <el-input
            v-model="firstForm.other"
            placeholder="请输入其他需求"
        ></el-input>
    </el-form-item>
   


    <el-form-item>
        <el-button round type="success" @click="submitForm()">
            免费帮我找场地
        </el-button>
    </el-form-item>
</el-form>
</div>



                    </div>

                </div>
                <div>
<el-steps :active="0" finish-status="success" simple 
>
    <el-step title="提交会议需求" />
    <el-step title="会议顾问致电" />
    <el-step title="接收会议方案" />
  </el-steps>
                </div>
            </el-main>
            <el-footer>
                <el-row :gutter="20" style="text-align:center">
                    
    <el-col :span="6" ><div  class="grid-content ep-bg-purple" /><el-icon><HomeFilled /></el-icon><br/>首页</el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /><el-icon><HomeFilled /></el-icon><br/>会务资源</el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /><el-icon><HomeFilled /></el-icon><br/>订单</el-col>
    <el-col :span="6"><div class="grid-content ep-bg-purple" /><el-icon><HomeFilled /></el-icon><br/>我的</el-col>
  </el-row>
            </el-footer>
        </el-container>
       <!-- <Footer />-->
    </div>
</template>

<script setup lang="ts">
import { useSiteConfig } from '/@/stores/siteConfig'
import { useMemberCenter } from '/@/stores/memberCenter'
import { togglePageDark } from '/@/utils/useDark'
import { provinceAndCityData } from 'element-china-area-data'
import { apiUploadUrl, saveFirstForm } from '/@/api/common';

const siteConfig = useSiteConfig()
const memberCenter = useMemberCenter()

togglePageDark(false)


var typeOptions = [
    {
        value: '1',
        label: '会议',
    },
    {
        value: '2',
        label: '培训',
    },
    {
        value: '3',
        label: '展览',
    },
    {
        value: '4',
        label: '演出',
    },
    {
        value: '5',
        label: '宴会',
    },
    {
        value: '6',
        label: '其他',
    },
]
var firstForm = {
    city: '',
    act_date: '',
    participant: 100,
    budget: 10000,
    type: '',
    phone: '',
    other: '',
}

var firstFormRules = {
    city: [
        {
            required: true,
            message: '请选择活动城市',
            trigger: 'change',
        },
    ],
    date: [
        {
            required: true,
            message: '请选择活动举办时间',
            trigger: 'change',
        },
    ],
    number: [
        {
            required: true,
            message: '请输入参加人数',
            trigger: 'change',
        },
    ],
    budget: [
        {
            required: true,
            message: '请输入大致预算',
            trigger: 'change',
        },
    ],
    type: [
        {
            required: true,
            message: '请选择活动类型',
            trigger: 'change',
        },
    ],
    phone: [
        {
            required: true,
            message: '请输入联系电话',
            trigger: 'change',
        },
    ],
    other: [
        {
            required: true,
            message: '请输入其他需求',
            trigger: 'change',
        },
    ],
}

function submitForm(){
    console.log('submitForm', firstForm)
    //post to backend
    saveFirstForm(firstForm.city, firstForm.act_date, firstForm.participant, firstForm.budget, firstForm)


}
function handleChange() {
//throw new Error('Function not implemented.')
console.log('selectedCity', firstForm)
}
</script>

<style scoped lang="scss">
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 10px;
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}



.container-button {
    margin: 0 15px 15px 0;
}
.container {
    width: 100vw;
    height: 100vh;
    //background: url(/@/assets/bg.jpg) repeat;
    //color: var(--el-color-white);
    .main {
        //height: calc(100vh - 120px);
        padding: 0;
        .main-container {
            display: flex;
            //height: 100%;
            width: 66%;
            margin: 0 auto;
            align-items: center;
            justify-content: space-between;
            .main-left {
                padding-right: 50px;
                .main-title {
                    font-size: 45px;
                }
                .main-content {
                    padding-top: 20px;
                    padding-bottom: 40px;
                    font-size: var(--el-font-size-large);
                }
            }
            .main-right {
                img {
                    width: 380px;
                }
            }
        }
    }
}
.header {
    background-color: transparent !important;
    box-shadow: none !important;
    position: fixed;
    width: 100%;
    :deep(.header-logo) {
        span {
            padding-left: 4px;
            color: var(--el-color-white);
        }
    }
    :deep(.frontend-header-menu) {
        background: transparent;
        .el-menu-item,
        .el-sub-menu .el-sub-menu__title {
            color: var(--el-color-white);
            &.is-active {
                color: var(--el-color-white) !important;
            }
            &:hover {
                background-color: transparent;
                color: var(--el-menu-hover-text-color);
            }
        }
    }
    :deep(.theme-switch) {
        display: none;
    }
}
.footer {
    color: var(--el-text-color-secondary);
    background-color: transparent !important;
    position: fixed;
    bottom: 0;
}

@media screen and (max-width: 1024px) {
    .container {
        .main {
            height: unset;
        }
    }
    .main-container {
        width: 90% !important;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center !important;
        .main-right {
            padding-top: 50px;
        }
    }
}
@media screen and (max-width: 375px) {
    .main-right img {
        width: 300px !important;
    }
}
</style>
