<template>
<div class="bod">
  <div class="inp">
    <el-form :model="timingForm"  ref="userRef" label-width="88px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="授权单位:" prop="sceneName" >
            <el-input v-model="addForm.strategyName" placeholder="请输入授权单位"  />
          </el-form-item>
        </el-col>

        <el-col :span="4">
          <el-form-item  >
            <el-button type="primary" @click="submitForm">计 算</el-button>
            <el-button @click="cancel">重 置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <div class="result" v-if="show1">
     <div class="point">
       <el-form :model="timingForm"  ref="userRef" label-width="88px">
         <el-row>
           <el-col :span="4">
             <el-form-item label="方案1:"  >
               <el-rate
                   v-model="point"
                   disabled
                   show-score
                   :score-template="point1"
                   text-color="#ffffff"
                   class="rate"
               />
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item label="方案2:"  >
               <el-rate
                   v-model="point"
                   disabled
                   show-score
                   :score-template="point1"
                   text-color="#ffffff"
                   class="rate"
               />
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item label="方案3:"  >
               <el-rate
                   v-model="point"
                   disabled
                   show-score
                   :score-template="point1"
                   text-color="#ffffff"
                   class="rate"
               />
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item label="方案4:"  >
               <el-rate
                   v-model="point"
                   disabled
                   show-score
                   :score-template="point1"
                   text-color="#ffffff"
                   class="rate"
               />
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item label="方案5:"  >
               <el-rate
                   v-model="point"
                   disabled
                   show-score
                   :score-template="point1"
                   text-color="#ffffff"
                   class="rate"
               />
             </el-form-item>
           </el-col>
           <el-col :span="4">
             <el-form-item label="方案6:"  >
               <el-rate
                   v-model="point"
                   disabled
                   show-score
                   :score-template="point1"
                   text-color="#ffffff"
                   class="rate"
               />
             </el-form-item>
           </el-col>
         </el-row>
       </el-form>
     </div>
  </div>
  <div class="result" v-if="show1">
    <div class="til">
      最佳方案：方案一
    </div>
    <div class="info">
      <div class="card">
        一、整体情况
      </div>
      <div class="card">
        <el-form :model="timingForm"  ref="userRef" label-width="140px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="初次投资费用(万元):" prop="sceneName" >
              <el-input v-model="addForm.strategyName" placeholder=""  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年运行费用(万元):" prop="sceneName" >
              <el-input v-model="addForm.strategyName" placeholder=""  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年总费用(万元):" prop="sceneName" >
              <el-input v-model="addForm.strategyName" placeholder=""  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="年减碳量(吨):" prop="sceneName" >
              <el-input v-model="addForm.strategyName" placeholder=""  />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="替代电量(千瓦时):" prop="sceneName" >
              <el-input v-model="addForm.strategyName" placeholder=""  />
            </el-form-item>
          </el-col>
        </el-row>
        </el-form>
      </div>
      <div class="card">
        二、需配置设备情况
      </div>
      <div class="card">
        <el-form :model="timingForm"  ref="userRef" label-width="140px">
          <el-row>
            <el-col :span="4">
              <el-form-item label="方案详情:" prop="sceneName" >
                <el-input v-model="addForm.strategyName" placeholder=""  />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="设备类型:" prop="sceneName" >
                <el-input v-model="addForm.strategyName" placeholder=""  />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="设备规格:" prop="sceneName" >
                <el-input v-model="addForm.strategyName" placeholder=""  />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="数量(台/套):" prop="sceneName" >
                <el-input v-model="addForm.strategyName" placeholder=""  />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="单位(元/台、元/套):" prop="sceneName" >
                <el-input v-model="addForm.strategyName" placeholder=""  />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="总价(万元):" prop="sceneName" >
                <el-input v-model="addForm.strategyName" placeholder=""  />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="card">
        三、方案优势
      </div>
      <div class="card">
        <el-form :model="timingForm"  ref="userRef" label-width="140px">
          <el-row>
            <el-col :span="4">
              <el-form-item label="安全性:" prop="sceneName" >
                <el-input v-model="addForm.strategyName" placeholder=""  />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="经济性:" prop="sceneName" >
                <el-input v-model="addForm.strategyName" placeholder=""  />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="智能性:" prop="sceneName" >
                <el-input v-model="addForm.strategyName" placeholder=""  />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</div>
</template>

<script setup>
import {ElMessage,ElMessageBox} from 'element-plus'
import {ref,reactive,watch,onMounted} from "vue";
const open = ref(true)
const point = ref(3.7)
const point1 = ref('78')
const show1 = ref(false)
const timingForm = reactive({
  sceneName:'',
})
const addForm = reactive({
  strategyName:'',
})
function submitForm() {
  show1.value=true
};
function cancel() {
  show1.value=false
  addForm.strategyName=''
};
</script>

<style scoped lang="scss">
.rate{
   --el-rate-text-color: #ff9900;
}

.bod{
   padding: 20px;
   .inp{
     border: 1px solid white;
     padding: 20px;
   }
   .result{
     margin-top: 20px;
     border: 1px solid white;
     padding: 20px;
     .point{

     }
     .til{
       font-size: 16px;
       color:#ff9900 ;
     }
     .info{
        height: 400px;
       .card{
         margin-top: 20px;
       }
     }
   }
 }
</style>