<script lang="ts" setup name="EnergyConsumptionDetail">
import { ElMessage } from 'element-plus'
import { detailSetUpList, updateSetUpList } from '@/api/api/energy/setup'
const $emits = defineEmits(['refresh'])
const dataFormRef = ref()
const dialogFormVisible = ref(false) // 对话框是否显示
const dataForm = ref({
  factorName: '',
  factorType: '',
  valueType: '',
  settingValue: '',
  defaultValue: '',
  price: '',
}) // 表单

// 初始化对话框
const loading = ref(false)
const dialogFormStatus = ref('')
const initDialog = (id: string, status: string) => {
  dialogFormVisible.value = true
  loading.value = true
  detailSetUpList({ id }).then((res) => {
    dataForm.value = res.data
    loading.value = false
  }).catch(() => {
    loading.value = false
  })
  dialogFormStatus.value = status
}
defineExpose({
  initDialog,
})
const confirm = () => {
  updateSetUpList(dataForm.value).then((res) => {
    if (res.code === 200) {
      ElMessage.success('修改成功')
      dialogFormVisible.value = false
      $emits('refresh')
    }
  }).catch(() => {
    ElMessage.warning('修改失败')
  })
}
const cancel = () => {
  dialogFormVisible.value = false
  // this.$emit('watchChild')
}
const unitDict = {
  用油因子设置: '吨',
  用电因子设置: '千瓦时',
  取暖因子设置: '平米',
  燃气因子设置: '万立方',
  煤炭因子设置: '吨',
} as { [key: string]: string }
</script>

<template>
  <el-dialog v-model="dialogFormVisible" :title="`${dialogFormStatus === 'edit' ? '编辑' : '详情'}`" append-to-body>
    <el-form
      ref="dataFormRef" v-loading="loading" :model="dataForm" label-position="right" label-width="180px"
      :disabled="dialogFormStatus === 'edit' ? false : true"
    >
      <el-row :gutter="24">
        <el-col :span="12">
          <el-form-item label="因子名称">
            <el-input v-model.trim="dataForm.factorName" type="text" style="width: 100%;" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="因子类型">
            <el-input v-model.trim="dataForm.factorType" type="text" style="width: 100%;" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="值类型">
            <el-select v-model.trim="dataForm.valueType" style="width: 100%;">
              <el-option label="默认" :value="0" />
              <el-option label="设定" :value="1" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item v-if="String(dataForm.valueType) === '1'" label="设定值">
            <el-input v-model.trim="dataForm.settingValue" type="number" :min="0" style="width: 100%;" />
          </el-form-item>
          <el-form-item v-if="String(dataForm.valueType) === '0'" label="缺省值">
            <el-input v-model.trim="dataForm.defaultValue" type="number" :min="0" style="width: 100%;" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="单位价格设定">
            <el-input v-model.trim="dataForm.price" type="number" :min="0" style="width: 80%;" />
            <!-- 单位 -->
            {{ unitDict[dataForm.factorName] }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <template v-if="dialogFormStatus === 'edit'">
          <el-button type="primary" @click="confirm">
            确认
          </el-button>
          <el-button @click="cancel">
            取消
          </el-button>
        </template>
        <template v-if="dialogFormStatus === 'detail'">
          <el-button type="primary" @click="cancel">
            确认
          </el-button>
        </template>
      </div>
    </template>
  </el-dialog>
</template>

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

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