<template>
  <div class="app-container">
    <transition name="fade">
      <div :gutter="20" v-if="!showDetail">
        <el-row :gutter="10">
          <el-form
          :model="queryParams"
          ref="queryRef"
          :inline="true"
          v-show="showSearch"
          label-width="68px"
        >
          <el-form-item label="设备名称" prop="userName">
            <el-input
              v-model="queryParams.equipmentName"
              placeholder="请输入设备名称"
              clearable
              style="width: 240px"
              @keyup.enter="handleQuery"
            />
          </el-form-item>



          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
          ></right-toolbar>
        </el-row>

        <el-table
          v-loading="loading"
          style="margin-top: 20px"
          border
          :data="dataList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column   label="序号" type="index" width="55" align="center" />

          <el-table-column
            label="设备名称"
            align="center"
            prop="processingCapacity"
          >
         <template #default="scope">
          {{scope.row.equipment.equipmentName}}
         </template>
        </el-table-column>
        <el-table-column label="处理量" align="center" prop="capacityTonnage" />
          <el-table-column label="水泵参数" align="center" prop="pumpParam" />
          <el-table-column
            label="水泵数量"
            align="center"
            prop="pumpQuantity"
          />
          <el-table-column label="气泵参数" align="center" prop="fanParam" />
          <el-table-column label="风机数量" align="center" prop="fanQuantity" />

          <el-table-column label="主要动力设备" align="center" prop="11">
            <div class="borderBt">水泵</div>
            <div>风机</div>
          </el-table-column>
          <el-table-column label="运行时间" align="center" prop="11">
            <template #default="scope">
              <div class="borderBt">{{ scope.row.pumpRuntime }}</div>
              <div>{{ scope.row.fanRuntime }}</div>
            </template>
          </el-table-column>

          <el-table-column label="装机功率" align="center" prop="11">
            <template #default="scope">
              <div class="borderBt">{{ scope.row.pumpInstalledPower }}</div>
              <div>{{ scope.row.fanInstalledPower }}</div>
            </template>
          </el-table-column>
          <el-table-column label="日均电耗" align="center" prop="11">
            <template #default="scope">
              <div class="borderBt">{{ scope.row.pumpDailyConsumption }}</div>
              <div>{{ scope.row.fanDailyConsumption }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="日总电耗"
            align="center"
            prop="totalDailyConsumption"
          />
          <el-table-column
            label="日吨水总电耗"
            align="center"
            prop="waterElectricityCost"
          />
          <el-table-column
            label="吨水电费"
            align="center"
            prop="waterElectricityCost"
          />
          <el-table-column
            label="操作"
            align="center"
            width="150px"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-button
                link
                type="primary"
                icon="Edit"
                @click="handleOpen(scope.row)"
                >运行时间</el-button
              >
              <!-- <el-button
                link
                type="danger"
                icon="Delete"
                @click="handleDelete(scope.row)"

                >删除</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />

        <!-- 添加或修改公告对话框 -->
        <el-dialog :title="title" v-model="open" width="30%" append-to-body>
          <el-form
            :model="form"
            :rules="rules"
            ref="deviceRef"
            label-width="100px"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="水泵运行时间" prop="nickName">
                  <el-input
                    v-model="form.pumpRuntime"
                    placeholder="请输入"
                    maxlength="30"
                  />
                </el-form-item>
                <el-form-item label="风机运行时间" prop="nickName">
                  <el-input
                  v-model="form.fanRuntime"
                  placeholder="请输入"
                  maxlength="30"
                />
                </el-form-item>

              </el-col>
            </el-row>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button type="primary" @click="submitForm">确 定</el-button>
              <el-button @click="cancel">取 消</el-button>
            </div>
          </template>
        </el-dialog>
      </div>
    </transition>
  </div>
</template>

<script setup name="porfiles" >
import { list, postData, putData ,deleteData,updateComponentRunTime} from "@/api/renovation/scheme/equipmentEnergyConsumption";
const { proxy } = getCurrentInstance();

const showDetail = ref(false);
const backCall = () => {
  if (!document.startViewTransition) {
    showDetail.value = false;
    return;
  }
  document.startViewTransition(() => (showDetail.value = false));
  getList();
  // showDetail.value = false
};
const data = reactive({
  // 按钮loading
  buttonLoading: false,
  // 遮罩层
  loading: false,
  // 选中数组
  ids: [],
  // 非单个禁用
  single: true,
  // 非多个禁用
  multiple: true,
  // 显示搜索条件
  showSearch: true,

  // 总条数
  total: 0,
  // 图层管理表格数据
  dataList: [],

  title: "",
  // 是否显示弹出层
  open: false,
  // 查询参数
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    createBy: undefined,
    layersId: undefined,
  },
  // 表单参数
  form: {},
  // 表单校验
});
const input = ref("");
const {
  open,

  showSearch,
  schemetype,
  queryParams,
  form,
  ids,
  title,

  dataList,

  total,
  multiple,
  single,
  loading,

  buttonLoading,
} = toRefs(data);

/** 提交按钮 */
function submitForm() {
  proxy.$refs["deviceRef"].validate((valid) => {
    if (valid) {

        updateComponentRunTime(form.value).then((response) => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });

    }
  });
}
/** 表单重置 */
function reset() {
  form.value = {
    paramId: undefined,
  };
  proxy.resetForm("applyRef");
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加";
}
/** 删除按钮操作 */
function handleDelete(row) {
  const level = row.processingCapacity ;
  proxy.$modal
    .confirm('是否确认删除处理量为"' + level + '"的数据项？')
    .then(function () {
      return deleteData(row.paramId);
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("删除成功");
    })
    .catch(() => {});
}
//详情
const arrSite = ref([]);
const planData = ref({});
async function handleOpen(row) {
  title.value = "编辑";
  form.value = {
    consumptionId:row.consumptionId,
    "pumpRuntime": row.pumpRuntime,
    "fanRuntime": row.fanRuntime
  }
  debugger
  open.value = true;

}
function handleQuery(){
  getList()
}
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length !== 1;
  multiple.value = !selection.length;
}
/** 查询理列表 */
function getList() {
  //  loading.value = false;
  loading.value = true;
  list(queryParams.value).then((response) => {
    dataList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

getList();























</script>
<style lang="scss" scoped>
.fade-enter-active {
  transition: all 0.3s ease-out;
}
.fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-enter-from,
.fade-leave-to {
  transform: translateX(-120px);
  opacity: 0;
}

.detail-enter-active,
.detail-leave-active {
  transition: opacity 0.5s ease;
}
.detail-enter-from,
.detail-leave-to {
  opacity: 0;
}
.borderBt {
  border-bottom: 1px solid #ebeef5;
  padding: 0 0 4px;
  margin: 5px;
}
</style>
