<template>
    <div class="hc-layout-box create-project">
        <hc-card title="有标题的卡片" :scrollbar="true">
            <template #header>
                <div class="project-title">项目信息填写</div>
            </template>
            <el-form :inline="true" :model="baseForm" label-width="auto" :rules="baseFormRules">
                <div class="hc-form-item">
                    <el-form-item label="项目名称:" prop="key1">
                        <el-input v-model="baseForm.key1" placeholder="请输入" clearable />
                    </el-form-item>
                    <el-form-item label="建设规模:" prop="key2">
                        <el-input v-model="baseForm.key2" placeholder="请输入" clearable>
                            <template #append>
                                <el-select v-model="unitSelect" placeholder="单位" style="width: 80px">
                                    <el-option label="公里" value="1" />
                                    <el-option label="无" value="2" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="项目阶段:" prop="key3">
                        <el-select
                            v-model="baseForm.key3"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in stateOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="项目类型:" prop="key4">
                        <el-select
                            v-model="baseForm.key4"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in typeOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开工年:" prop="key5">
                        <el-date-picker
                            v-model="baseForm.key5"
                            type="year"
                            placeholder="请选择"
                        />
                    </el-form-item>
                    <el-form-item label="完工年:" prop="key6">
                        <el-date-picker
                            v-model="baseForm.key6"
                            type="year"
                            placeholder="请选择"
                        />
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="牵头单位:" prop="key7">
                        <el-input v-model="baseForm.key7" placeholder="请输入" clearable type="textarea" />
                    </el-form-item>
                    <el-form-item label="配合单位:" prop="key8">
                        <el-input v-model="baseForm.key7" placeholder="请输入" clearable type="textarea" />
                    </el-form-item>
                    <el-form-item label="责任单位:" prop="key9">
                        <el-input v-model="baseForm.key7" placeholder="请输入" clearable type="textarea" />
                    </el-form-item>
                </div>
                <div class="year-detail">
                    <hc-card>
                        <div class="text-center">
                            <el-select
                                v-model="selectYear"
                                placeholder="选择年份"
                                style="width: 250px;"
                            >
                                <el-option
                                    v-for="item in yearOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </div>
                        <el-form :inline="true" :model="yearForm" label-width="auto" :rules="yearFormRules" class="mt-3" label-position="left">
                            <div class="hc-form-item w-100">
                                <el-form-item label="全年计划投资:" prop="key1">
                                    <el-input v-model="yearForm.key1" placeholder="请输入" clearable>
                                        <template #append>亿元</template>
                                    </el-input>
                                </el-form-item>
                            </div>
                            <div class="hc-form-item">
                                <el-form-item label="预计完成投资额:" prop="key1">
                                    <div class="quarter-box">
                                        <div class="flex">
                                            <span class="form-text">一季度</span>
                                            <el-input v-model="yearForm.key2" placeholder="请输入" clearable>
                                                <template #append>亿元</template>
                                            </el-input>
                                        </div>
                                        <div class="ml-4 flex">
                                            <span class="form-text">二季度</span>
                                            <el-input v-model="yearForm.key3" placeholder="请输入" clearable>
                                                <template #append>亿元</template>
                                            </el-input>
                                        </div>
                                        <div class="ml-4 flex">
                                            <span class="form-text">三季度</span>
                                            <el-input v-model="yearForm.key4" placeholder="请输入" clearable>
                                                <template #append>亿元</template>
                                            </el-input>
                                        </div>
                                        <div class="ml-4 flex">
                                            <span class="form-text">四季度</span>
                                            <el-input v-model="yearForm.key5" placeholder="请输入" clearable>
                                                <template #append>亿元</template>
                                            </el-input>
                                        </div>
                                    </div>
                                </el-form-item>
                            </div>
                            <div class="hc-form-item">
                                <el-form-item label="全年目标:" prop="key6">
                                    <el-input v-model="yearForm.key6" placeholder="请输入" clearable type="textarea" />
                                </el-form-item>
                            </div>
                            <div class="hc-form-item">
                                <el-form-item label="各季度工作计划:" />
                            </div>
                            <div class="flex">
                                <span class="form-text">一季度：</span> <el-input v-model="yearForm.key7" placeholder="请输入" clearable type="textarea" />
                            </div>
                            <div class="mt-2 flex">
                                <span class="form-text">二季度：</span> <el-input v-model="yearForm.key8" placeholder="请输入" clearable type="textarea" />
                            </div>
                            <div class="mt-2 flex">
                                <span class="form-text">三季度：</span> <el-input v-model="yearForm.key9" placeholder="请输入" clearable type="textarea" />
                            </div>
                            <div class="mt-2 flex">
                                <span class="form-text">四季度：</span> <el-input v-model="yearForm.key10" placeholder="请输入" clearable type="textarea" />
                            </div>
                        </el-form>
                    </hc-card>
                </div>
                <div class="action-box">
                    <el-button type="info">
                        <span class="text-white">取消</span>
                    </el-button>
                    <el-button color="#20C98B" type="primary">
                        <span class="text-white">创建</span>
                    </el-button>
                    <el-button type="warning">
                        <span class="text-white">保存</span>
                    </el-button>
                </div>
            </el-form>
        </hc-card>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const baseForm = ref({
     key1:'',
     key2: '',
     key3:'',
     key4:'',
     key5:'',
     key6:'',
     key7:'',
     key8:'',
     key9:'',
  
     
   })
const baseFormRules = {
    key1: {
        required: true,
        trigger: 'blur',
        message: '请输入项目名称',
    },
    key3: {
        required: true,
        trigger: 'blur',
        message: '请选择项目阶段',
    },
    key4: {
        required: true,
        trigger: 'blur',
        message: '请选择项目类型',
    },
    role: {
        required: true,
        trigger: 'blur',
        message: '请选择角色',
    },
}
const unitSelect = ref('')
//项目阶段
const stateOptions = ref([
{
    value: '1',
    label: '新开工项目',
  },
  {
    value: '2',
    label: '建成项目',
  },
  {
    value: '3',
    label: '在建项目',
  },

])
//项目类型

const typeOptions = ref([
{
    value: '1',
    label: '铁路',
  },
  {
    value: '2',
    label: '高速公路',
  },
  {
    value: '3',
    label: '在建项目',
  },

])
//选择年份
const yearOptions = ref([
{
    value: '2021',
    label: '2021',
  },
  {
    value: '2022',
    label: '2022',
  },
  {
    value: '2023',
    label: '2023',
  },
])
const selectYear = ref('')

const yearForm = ref({
     key1:'',
     key2: '',
     key3:'',
     key4:'',
     key5:'',
     key6:'',
     key7:'',
     key8:'',
     key9:'',
})
const yearFormRules = {

}
</script>

<style scoped lang="scss">
.hc-layout-box{
    position: relative;
    height: 100%;
    width: 100%;
}
.project-title{
    font-size: 24px;
    font-weight: bold;
    text-align: center;
}
.year-detail{
    padding: 40px;
    height: 600px;
}
.quarter-box{
    display: flex;
    justify-content: space-around;
    width: 80%;

}
.form-text{
    white-space: nowrap;
    color:var(--el-text-color-regular) ;
    font-size: var(--el-form-label-font-size);
}
.action-box{
 
    text-align: center;
    width: 100%;
}
</style>

<style>
.create-project .el-card.hc-card-box.hc-new-card-box .hc-card-header-box{
    justify-content: center;
}
.create-project .el-card.hc-card-box.hc-new-card-box .hc-card-header-box .hc-card-header{
    flex:none
}
</style>

