<template>
    <div class="hc-layout-box create-tips">
        <hc-card title="有标题的卡片" :scrollbar="true">
            <template #header>
                <div class="project-title">工作重点填写</div>
            </template>
            <el-form :inline="true" :model="baseForm" label-width="auto" :rules="baseFormRules" label-position="left">
                <div class="hc-form-item">
                    <el-form-item label="选择项目项目阶段:" prop="key1">
                        <el-select
                            v-model="baseForm.key1"
                            placeholder="请选择"
                        >
                            <el-option
                                v-for="item in stateOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </div>
                <div class="hc-form-item">
                    <el-form-item label="目标任务:" prop="key2">
                        <el-input v-model="baseForm.key2" placeholder="请输入" clearable type="textarea" />
                    </el-form-item>
                </div>
                <div v-for="(item, index) in yearDetails" :key="index" class="year-detail">
                    <hc-card>
                        <el-form :inline="true" :model="item" label-width="auto" :rules="yearFormRules" class="mt-3" label-position="left">
                            <div class="hc-form-item">
                                <el-form-item label="选择年份:" prop="key1">
                                    <el-date-picker
                                        v-model="item.key1"
                                        type="year"
                                        range
                                        placeholder="开始年份"
                                    />
                                    <span>-</span>
                                    <el-date-picker
                                        v-model="item.key2"
                                        type="year"
                                        range
                                        placeholder="结束年份"
                                    />
                                </el-form-item>
                            </div>
                            <div class="hc-form-item">
                                <el-form-item label="工作任务:" prop="key3">
                                    <el-input v-model="item.key3" placeholder="请输入" clearable type="textarea" />
                                </el-form-item>
                            </div>
                            <div class="hc-form-item">
                                <el-form-item label="责任单位:" prop="key4">
                                    <el-input v-model="item.key4" placeholder="请输入" clearable />
                                </el-form-item>
                            </div>
                        </el-form>
                    </hc-card>
                    <div>
                        <div>
                            <el-button @click="addYearDeatil(item, index)">
                                +
                            </el-button>
                        </div>
                        <div>
                            <el-button @click="deleteYearDeatil(item, index)">
                                -
                            </el-button>
                        </div>
                    </div>
                </div>
            </el-form>
            <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>
        </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: '请选择项目阶段',
    },
    key2: {
        required: true,
        trigger: 'blur',
        message: '请输入目标任务',
    },
    key4: {
        required: true,
        trigger: 'blur',
        message: '请选择项目类型',
    },
    role: {
        required: true,
        trigger: 'blur',
        message: '请选择角色',
    },
}
//项目阶段
const stateOptions = ref([
{
    value: '1',
    label: '紧盯重大项目，推动交通投资稳进',
  },
  {
    value: '2',
    label: '深化战略研究，优化交通规划体系',
  },
  {
    value: '3',
    label: '锚定战略目标，强化交通支撑引领作用',
  },
])


const yearFormRules = {
    key1: {
        required: true,
        trigger: 'blur',
        message: '请选择年份',
    },

}
//增加年份数据
const yearDetails = ref([
    {
        key1:'',
        key2: '',
        key3:'',
        key4:'',
    
    },
])
const addYearDeatil = (item, index)=>{
    yearDetails.value.splice(index, 0, {
        key1:'',
        key2: '',
        key3:'',
        key4:'',
    })
   
}
const deleteYearDeatil = (item, index)=>{
    console.log(yearDetails.value)
    yearDetails.value.splice( index, 1)
}
</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: 280px;
    display: flex;

}
.action-box{
 
 text-align: center;
 width: 100%;
}
</style>

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

