<script lang="ts" setup name="EnergyConsumptionDetail">
import { detailEnergyConsumption } from '@/api/api/energy/data'
const dataFormRef = ref()
const dialogFormVisible = ref(false) // 对话框是否显示
const dataForm = ref({
  deptName: '',
  createTime: '',
  electricityUsage: '',
  buildingHeatingCosts: '',
  buildingCarbonEmissions: '',
  vehicleCosts: '',
  gasUsageFee: '',
  coalUsageFee: '',
  remarks: '',
  gasCarbonEmissions: '',
  coalCarbonEmissions: '',
  electricityCarbonEmissions: '',
  vehicleCarbonEmissions: '',
  totalCarbonEmissions: '',
}) // 表单

// 初始化对话框
const loading = ref(false)
const initDialog = (id: string) => {
  dialogFormVisible.value = true
  loading.value = true
  detailEnergyConsumption({ id }).then((res) => {
    dataForm.value = res.data
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
}
defineExpose({
  initDialog,
})

const cancel = () => {
  dialogFormVisible.value = false
  // this.$emit('watchChild')
}
</script>

<template>
  <el-dialog v-model="dialogFormVisible" title="详情" append-to-body>
    <el-form ref="dataFormRef" v-loading="loading" :model="dataForm" label-position="right" label-width="180px" disabled>
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="单位名称">
            <el-input v-model.trim="dataForm.deptName" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间">
            <el-input v-model.trim="dataForm.createTime" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="办公楼用电(千瓦时)">
            <el-input v-model.trim="dataForm.electricityUsage" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="办公楼取暖费(元)">
            <el-input v-model.trim="dataForm.buildingHeatingCosts" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="办公楼用电碳排(KG)">
            <el-input v-model.trim="dataForm.electricityCarbonEmissions" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="办公楼取暖费碳排(KG)">
            <el-input v-model.trim="dataForm.buildingCarbonEmissions" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产车辆用油费(元)">
            <el-input v-model.trim="dataForm.vehicleCosts" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产车辆用油碳排(KG)">
            <el-input v-model.trim="dataForm.vehicleCarbonEmissions" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="燃气使用费(元)">
            <el-input v-model.trim="dataForm.gasUsageFee" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="煤炭使用费(元)">
            <el-input v-model.trim="dataForm.coalUsageFee" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="燃气使用碳排(KG)">
            <el-input v-model.trim="dataForm.gasCarbonEmissions" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="煤炭使用碳排(KG)">
            <el-input v-model.trim="dataForm.coalCarbonEmissions" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="总体碳排(KG)">
            <el-input v-model.trim="dataForm.totalCarbonEmissions" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input v-model.trim="dataForm.remarks" type="text" style="width: 100%;" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="cancel">
          确认
        </el-button>
      </div>
    </template>

    <area-select-tree ref="areaSelect" @selectDone="changeParent" />
  </el-dialog>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>