<template>
  <div class="bod">
    <div class="inp">
      <div class="til">替代前项目信息</div>
      <el-form :model="addForm" ref="ruleForm1" :rules="rules" label-width="88px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="设备类型:" prop="devType" label-width="140px">
              <el-select v-model="addForm.devType">
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备细类:" prop="devSubType" label-width="190px">
              <el-select v-model="addForm.devSubType">
                <el-option v-for="item in options1"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="技术类型:" prop="devTechType" label-width="190px">
              <el-select v-model="addForm.devTechType">
                <el-option v-for="item in options2"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="设备功率（kW）:" prop="devPower" label-width="290px">
              <el-input v-model="addForm.devPower" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="设备单价（万元）:" prop="devPrice" label-width="142px">
              <el-input v-model="addForm.devPrice"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电替代设备年人工费用（万元）:" prop="devSubstituteLaborCost" label-width="250px">
              <el-input v-model="addForm.devSubstituteLaborCost"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="原设备的人工费用（万元）:" prop="laborCost" label-width="220px">
              <el-input v-model="addForm.laborCost"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="单台电设备参考的可供暖面积（万平方米）:" prop="devReferenceArea" label-width="300px">
              <el-input v-model="addForm.devReferenceArea"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="设备使用年限（年）:" prop="devServiceLife" label-width="160px">
              <el-input v-model="addForm.devServiceLife"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="设备年运行时长（小时）:"  label-width="190px">
              <el-input v-model="addForm.devAnnualOperationTime"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="热效率:" prop="heatEfficiency" label-width="190px">
              <el-input v-model="addForm.heatEfficiency"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="备注:"  label-width="290px">
              <el-input v-model="addForm.remarkInfo"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="til">配电信息</div>
      <el-form :model="addForm" ref="ruleForm2" :rules="rules" label-width="88px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="电源形式:" prop="sceneName" label-width="140px">
              <el-select v-model="test1">
                <el-option v-for="item in options3"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="变压器合同总容量(kVA):" prop="sceneName" label-width="190px">
              <el-input v-model="test2"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="变压器运行总容量(kVA):" prop="runCapacity" label-width="190px">
              <el-input v-model="addForm.runCapacity"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="上年最大需量(kW):" prop="lastYearNeed" label-width="290px">
              <el-input v-model="addForm.lastYearNeed"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="til">产品库</div>
      <el-form :model="addForm" ref="ruleForm3" :rules="rules" label-width="88px">
        <el-row>
          <el-col :span="5">
            <el-form-item label="建筑类型:" prop="sceneName" label-width="140px">
              <el-select v-model="test3">
                <el-option v-for="item in options4"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="建筑面积(平方米):" prop="heatingArea" label-width="190px">
              <el-input v-model="addForm.heatingArea" >

              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="年采暖时间(天):" prop="days" label-width="190px">
              <el-input v-model="addForm.days">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="供暖末端形式:" prop="sceneName" label-width="290px">
              <el-select v-model="test4">
                <el-option v-for="item in options5"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="蒸汽/生活热水需求:" prop="sceneName" label-width="142px">
              <el-select v-model="test5">
                <el-option v-for="item in options6"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="每小时最大需求量（吨）:" prop="sceneName" label-width="220px">
              <el-input v-model="test6"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="是否有供冷需求:" prop="sceneName" label-width="220px">
              <el-select v-model="test7">
                <el-option v-for="item in options6"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="年供冷时间（天）:" prop="sceneName" label-width="290px">
              <el-input v-model="test8"/>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="供冷末端形式:" prop="sceneName" label-width="143px">
              <el-select v-model="test9">
                <el-option v-for="item in options5"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="原设备类型:" prop="sceneName" label-width="190px">
              <el-select v-model="test10">
                <el-option v-for="item in options"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="台数:" prop="sceneName" label-width="190px">
              <el-input v-model="test11"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="功能:" prop="sceneName" label-width="290px">
              <el-select v-model="test12">
                <el-option v-for="item in options7"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="能源类型:" prop="sceneName" label-width="140px">
              <el-select v-model="test13">
                <el-option v-for="item in options8"
                           :key="item.value"
                           :label="item.label"
                           :value="item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="上年运行费用(万元):" prop="lastYearFee" label-width="190px">
              <el-input v-model="addForm.lastYearFee"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="模型编码:" prop="hotMedium" label-width="190px">
              <el-input v-model="addForm.hotMedium"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="场景编码:" prop="type" label-width="290px">
              <el-input v-model="addForm.type"/>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="密钥:" prop="key" label-width="140px">
              <el-input v-model="addForm.key"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="bot">
        <el-button type="primary" @click="submitForm">计 算</el-button>
        <el-button @click="cancel">重 置</el-button>
      </div>
    </div>
    <div class="result" v-if="show1">
      <div class="til">方案评分</div>
      <div class="point">
        <el-form  ref="userRef" label-width="300px">
          <el-row>
            <el-col :span="8" v-for="(item,index) in result.matchedDeviceList" :key="index" >
              <el-form-item :label="item.planName">
                <el-rate
                    v-model="item.rat"
                    disabled
                    show-score
                    :score-template="item.rating"
                    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="result"  label-width="140px">
            <el-row>
              <el-col :span="4" style="margin-left: 70px">
                <el-form-item label="初次投资费用(万元):" prop="sceneName">
                  <el-input v-model="result.startCost" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="年运行费用(万元):" prop="sceneName">
                  <el-input v-model="result.yearRunCost" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="年总费用(万元):" prop="sceneName">
                  <el-input v-model="result.yearCost" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="年减碳量(吨):" prop="sceneName">
                  <el-input v-model="result.calculate" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="替代电量(千瓦时):" prop="sceneName">
                  <el-input v-model="result.electric" placeholder=""/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="card">
          二、需配置设备情况
        </div>
        <div class="card">
          <el-form :model="result"  label-width="140px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="方案详情:" prop="sceneName">
                  <el-input v-model="result.planInfos" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备类型:" prop="sceneName">
                  <el-input v-model="result.devSubType" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="设备规格:" prop="sceneName">
                  <el-input v-model="result.devTechType" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="数量(台/套):" prop="sceneName">
                  <el-input v-model="result.devCount" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单位(元/台、元/套):" prop="sceneName">
                  <el-input v-model="result.devPrice" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="总价(万元):" prop="sceneName">
                  <el-input v-model="result.devCost" placeholder=""/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="card">
          三、方案优势
        </div>
        <div class="card">
          <el-form :model="result"  label-width="140px">
            <el-row>
              <el-col :span="6">
                <el-form-item label="环保性:" prop="sceneName">
                  <el-input v-model="result.environment" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="经济性:" prop="sceneName">
                  <el-input v-model="result.economy" placeholder=""/>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="智能性:" prop="sceneName">
                  <el-input v-model="result.intelligence" 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";
import {modelTest,} from '../../../api/emonitor/api'
const open = ref(true)
const arr = ref([1])
const point = ref(3.7)
const point1 = ref('78')
const show1 = ref(false)
const test1 = ref(null)
const test2= ref(null)
const test3 = ref(null)
const test4 = ref(null)
const test5 = ref(null)
const test6 = ref(null)
const test7 = ref(null)
const test8 = ref(null)
const test9 = ref(null)
const test10 = ref(null)
const test11 = ref(null)
const test12 = ref(null)
const test13 = ref(null)
const role1 = ref(false)
const role2 = ref(false)
const role3 = ref(false)
const options = ref([{
  label: '电锅炉', value: 1
}, {label: '热泵', value: 2}])
const options3 = ref([{
  label: '转变', value: 1
}, {label: '公变', value: 2}])
const options4 = ref([{
  label: '机关', value: 1},
  {label: '医院', value: 2},
  {label: '学校', value: 3},
  {label: '商业办公楼', value: 4},
  {label: '酒店', value: 5},
  {label: '其他', value: 6},
])
const options5 = ref([{
  label: '风机盘管', value: 1},
  {label: '地暖', value: 2},
  {label: '暖气片', value: 3},
  {label: '无末端', value: 4},
])
const options6 = ref([{
  label: '是', value: 1
}, {label: '否', value: 2}])
const options7 = ref([{
  label: '供暖', value: 1
}, {label: '供冷', value: 2},{label: '热水s', value: 3}])
const options8 = ref([{
  label: '煤', value: 1},
  {label: '油', value: 2},
  {label: '气', value: 3},
  {label: '汽', value: 4},
])
const options1 = ref([{
  label: '供冷电锅炉', value: 1
},
  {label: '供暖电锅炉', value: 2},
  {label: '工业供热电锅炉', value: 3},
  {label: '供暖', value: 4},
  {label: '供冷', value: 5},
])
const options2 = ref([
  {label: '直热式电锅炉（电阻类）', value: 1},
  {label: '直热式电锅炉（电极类）', value: 2},
  {label: '直热式电锅炉（电磁涡流类）', value: 3},
  {label: '蓄热式电锅炉（固体蓄热）', value: 4},
  {label: '蓄热式电锅炉（相变蓄热）', value: 5},
  {label: '蓄热式电锅炉（水蓄）', value: 6},
  {label: '水源热泵', value: 7},
  {label: '土壤源热泵', value: 8},
  {label: '空气源热泵', value: 9},
  {label: '低品位余热源（如电厂低温循环水）热泵', value: 10},
  {label: '高温蒸汽热泵', value: 11},
])
const ruleForm1 = ref({
  devType: '',
  devSubType: '',
  devTechType: '',
  devPower: '',
  devPrice: '',
  devSubstituteLaborCost: '',
  laborCost: '',
  devReferenceArea: '',
  devServiceLife: '',
  devAnnualOperationTime: '',
  heatEfficiency: '',
  remarkInfo: '',
})
const ruleForm2 = ref({
  runCapacity: '',
  lastYearNeed: '',
})
const ruleForm3 = ref({
  heatingArea: '',
  days: '',
  lastYearFee: '',
  hotMedium: '',
  type: '',
  key: '',
})
const rules = reactive({
  devType: [
    { required: true, message: '请选择设备类型', trigger: 'change' },
  ],
  devSubType: [
    { required: true, message: '请选择设备细类', trigger: 'change' },
  ],
  devTechType: [
    { required: true, message: '请选择技术类型', trigger: 'change' },
  ],
  devPower: [
    { required: true, message: '请输入设备功率', trigger: 'blur' },
  ],
  devPrice: [
    { required: true, message: '请输入设备单价', trigger: 'blur' },
  ],
  devSubstituteLaborCost: [
    { required: true, message: '请输入电替代设备年人工费用', trigger: 'blur' },
  ],
  laborCost: [
    { required: true, message: '请输入原设备的人工费用', trigger: 'blur' },
  ],
  devReferenceArea: [
    { required: true, message: '请输入单台电设备参考的可供暖面积', trigger: 'blur' },
  ],
  devServiceLife: [
    { required: true, message: '请输入设备使用年限', trigger: 'blur' },
  ],
  devAnnualOperationTime: [
    { required: true, message: '请输入设备年运行时长', trigger: 'blur' },
  ],
  heatEfficiency: [
    { required: true, message: '请输入热效率', trigger: 'blur' },
  ],
  remarkInfo: [
    { required: true, message: '请输入备注', trigger: 'blur' },
  ],
  runCapacity: [
    { required: true, message: '请输入变压器运行总容量', trigger: 'blur' },
  ],
  lastYearNeed: [
    { required: true, message: '请输入上年最大需量', trigger: 'blur' },
  ],
  heatingArea: [
    { required: true, message: '请输入建筑面积', trigger: 'blur' },
  ],
  days: [
    { required: true, message: '请输入年采暖时间', trigger: 'blur' },
  ],
  lastYearFee: [
    { required: true, message: '请输入上年运行费用', trigger: 'blur' },
  ],
  hotMedium: [
    { required: true, message: '请输入模型编码', trigger: 'blur' },
  ],
  type: [
    { required: true, message: '请输入场景编码', trigger: 'blur' },
  ],
  key: [
    { required: true, message: '请输入密钥', trigger: 'blur' },
  ],
})
const addForm = reactive({
  id: null,
  key:null,
  devType: null,//电锅炉or热泵
  devSubType: null,
  devTechType: null,
  heatEfficiency: null,
  devPower: null,
  devPrice: null,
  devSubstituteLaborCost: null,
  laborCost: null,
  devReferenceArea: null,
  devServiceLife: null,
  devAnnualOperationTime: null,
  remarkInfo: null,
  lastYearFee: null,
  heatingArea: null,
  days: null,
  hotMedium: null,
  type: null,
  lastYearNeed: null,
  runCapacity: null,
})
const result = ref({
  calculate:'',
  devCost:'',
  devCount:'',
  devPrice:'',
  devSubType:'',
  devTechType:'',
  economy:'',
  electric:'',
  environment:'',
  intelligence:'',
  matchedDeviceList:[],
  planInfos:'',
  startCost:'',
  yearCost:'',
  yearRunCost:'',
})
watch(() => addForm.devType, (newVale, oldValue) => {
  if (addForm.devType === 1) {
    options1.value = [
      {label: '供冷电锅炉', value: 1},
      {label: '供暖电锅炉', value: 2},
      {label: '工业供热电锅炉', value: 3},
    ]
    options2.value = [
      {label: '直热式电锅炉（电阻类）', value: 1},
      {label: '直热式电锅炉（电极类）', value: 2},
      {label: '直热式电锅炉（电磁涡流类）', value: 3},
      {label: '蓄热式电锅炉（固体蓄热）', value: 4},
      {label: '蓄热式电锅炉（相变蓄热）', value: 5},
      {label: '蓄热式电锅炉（水蓄）', value: 6},
    ]
  } else if (addForm.devType === 2) {
    options1.value = [
      {label: '供暖', value: 4},
      {label: '供冷', value: 5},
    ]
    options2.value = [
      {label: '水源热泵', value: 7},
      {label: '土壤源热泵', value: 8},
      {label: '空气源热泵', value: 9},
      {label: '低品位余热源（如电厂低温循环水）热泵', value: 10},
      {label: '高温蒸汽热泵', value: 11},
    ]
  }

})
const submitForm = () => {
  ruleForm1.value.validate((valid) => {
    if (valid) {
      // 表单验证通过，执行计算逻辑
      role1.value=true
      // 你可以在这里调用计算函数或者进行其他操作
    } else {
      // 表单验证失败
      role1.value=false
      return false;
    }
  });
  ruleForm2.value.validate((valid) => {
    if (valid) {
      // 表单验证通过，执行计算逻辑
      role2.value=true
      // 你可以在这里调用计算函数或者进行其他操作
    } else {
      // 表单验证失败
      role2.value=false
      return false;
    }
  });
  ruleForm3.value.validate((valid) => {
    if (valid) {
      // 表单验证通过，执行计算逻辑
      role3.value=true
      // 你可以在这里调用计算函数或者进行其他操作
    } else {
      // 表单验证失败
      role3.value=false
      return false;
    }
  });
  setTimeout(()=>{
    if (role1.value&&role2.value&&role3.value){
      console.log('表单验证通过')
      modelTest(
              {
            "devSpecList": [
              {
                "devType": addForm.devType,
                "heatEfficiency":addForm.heatEfficiency,
                "devTechType": addForm.devTechType,
                "devSubstituteLaborCost":addForm.devSubstituteLaborCost,
                "devReferenceArea":addForm.devReferenceArea,
                "devPower":addForm.devPower ,
                "devSubType": addForm.devSubType,
                "devPrice":addForm.devPrice ,
                "devServiceLife":addForm.devServiceLife,
                "laborCost":addForm.laborCost ,
                "id": "1"
              }
            ],
            "param": {
              "electricityPrice": "20.26",
              "hotDevicePower": "20.26",
              "buildInfo": {
                "lastYearFee":addForm.lastYearFee,
                "heatingArea":addForm.heatingArea,
                "days":addForm.days
              },
              "hotMedium": "1",
              "type":"0101",
              "yearEnergy": "20.26",
              "distInfo": {
                "lastYearNeed": addForm.lastYearNeed,
                "runCapacity": addForm.runCapacity
              },
              "exportTemperature": 28
            },
            "key": addForm.key
          }
      ).then((res)=>{
        console.log(res)
        for(let i in res.report.matchedDeviceList)
        {
          res.report.matchedDeviceList[i].rat = res.report.matchedDeviceList[i].rating/20
        }
        result.value=res.report
        show1.value = true
      })
    }else{
      console.log('表表单验证失败')
    }
      },1000)
};

function cancel() {
  ruleForm1.value.resetFields();
  ruleForm2.value.resetFields();
  ruleForm3.value.resetFields();
  show1.value = false
  addForm.devType = null
  addForm.heatEfficiency = null
  addForm.devTechType = null
  addForm.devSubstituteLaborCost = null
  addForm.devReferenceArea = null
  addForm.devPower = null
  addForm.devSubType = null
  addForm.devPrice = null
  addForm.devServiceLife = null
  addForm.laborCost = null
  addForm.lastYearFee = null
  addForm.heatingArea = null
  addForm.days = null
  addForm.hotMedium = null
  addForm.type = null
  addForm.lastYearNeed = null
  addForm.runCapacity = null
  addForm.key = null
};
</script>

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

.bod {
  padding: 20px;
  height: 91vh;
  overflow-y: auto;
  .inp {
    border: 1px solid white;
    padding: 20px;
    .til {
      font-size: 16px;
      color: #ff9900;
      margin-bottom: 20px;
    }
    .bot{
      text-align: right;
    }
  }

  .result {
    margin-top: 20px;
    border: 1px solid white;
    padding: 20px;

    .point {

    }

    .til {
      font-size: 16px;
      color: #ff9900;
      margin-bottom: 20px;
    }

    .info {
      height: 400px;

      .card {
        margin-top: 20px;
      }
    }
  }
}
</style>