<template>
  <div>
    <div class="title">
      并网点管理
      <div class="title_time">{{ currentDate }}</div>
    </div>
    <div class="card">
      <div class="screen">
        <div>
          选择电站&ensp;&ensp;<el-select v-model="Singlevalue" placeholder="选择电站" size="large" style="width: 240px">
            <el-option v-for="item in cities" :key="item.id" :label="item.stationName" :value="item.id" />
          </el-select>
        </div>
        &ensp;&ensp; &ensp;&ensp;
        <div>
          并网点名称&ensp;&ensp;<el-input
            v-model="emsdevicename"
            style="width: 300px"
            size="large"
            placeholder="输入并网点名称"
          />
        </div>
        <!-- <div>
            &ensp;&ensp;&ensp;&ensp;
            岗位名称&ensp;&ensp;<el-input
              v-model="postName"
              style="width: 300px"
              size="large"
              placeholder="输入岗位名称"
            />
          </div> -->
        &ensp;&ensp; &ensp;&ensp;
        <div>
          <el-button type="primary" size="large" color="#0052d9" @click="query(0)">查询</el-button>
          <el-button size="large" @click="query(1)">重置</el-button>&ensp;&ensp;
        </div>
      </div>
      <div class="screen1"></div>
    </div>
    <div class="card cardbottom">
      <!-- <el-button type="primary" size="large" color="#0052d9" @click="newaddition">新增</el-button> -->
      <div>&ensp;</div>
      <el-table :data="tableData.records" :show-overflow-tooltip="true" style="width: 100%" border>
        <el-table-column prop="conscolidationId" label="并网点编号" />
        <el-table-column prop="name" label="并网点名称" />
        <el-table-column prop="powername" label="归属电站" />

        <el-table-column prop="operationDate" label="创建时间" />
        <el-table-column prop="acPower" label="交流功率" />
        <el-table-column prop="insertalled" label="额定功率" />
        <el-table-column prop="installedCap" label="装机容量" />
        <el-table-column prop="soc" label="soc" />
        <el-table-column prop="consolidationUrl" label="并网点图片" align="center" width="200">
          <template #default="scope">
            <div class="elimageurl">
              <div v-for="(item, index) in scope.row.consolidationUrl" :key="index">
                <el-image
                  style="width: 60px; height: 60px; margin-right: 10px"
                  :src="item"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-teleported="true"
                  :preview-src-list="scope.row.consolidationUrl"
                  :initial-index="index"
                  fit="cover"
                />
              </div>
            </div>

            <!-- <img v-for="(item, index) in scope.row.url" :key="index" :src="item" alt="" style="height: 60px" /> -->
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button color="#0052d9" type="primary" @click="newition(scope.row)"> 编辑 </el-button>
            <el-button v-if="BUTTONS.equipmentedit" color="#0052d9" type="primary" @click="newition(scope.row)"> 编辑 </el-button>
            <!-- <el-button @click="onremove(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="pagination">
        <div></div>
        <slot name="pagination">
          <Pagination :pageable="pageable" :handle-size-change="handleSizeChange" :handle-current-change="handleCurrentChange" />
        </slot>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="修改并网点名称" width="1000" :before-close="handleClose" border>
      <div class="dialog_box">
        <div class="dialog_name"><span class="Required">*</span> 并网点名称</div>
        <el-input v-model="emsdeviceidname" style="width: 300px" size="large" placeholder="输入并网点名称" />
      </div>

      <template #footer>
        <div class="dialog_footer">
          <el-button type="primary" @click="determine" size="large" color="#0052d9"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<!--    -->
<script setup lang="ts">
import {
  selectconsolidationURL,
  stationstationName,
  updateconsolidationURL,
  selectconsolidationidURL
} from "@/api/home/Multisite";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import { onMounted, ref, Ref } from "vue";
import { Station } from "@/api/interface";
import { useAuthButtons } from "@/hooks/useAuthButtons";

const { BUTTONS } = useAuthButtons();
// 绑定设备
const Singlevalue = ref("");
const cities: Ref<Station.todo[]> = ref([]);
// 编辑绑定设备
const powerstation: Ref<Station.todo[]> = ref([]);

const poststationstationName = async () => {
  const { data } = await stationstationName({});
  const res = await stationstationName({});
  powerstation.value = res.data;
  cities.value = data;
  cities.value.unshift({
    id: "",
    stationName: "全部",
    energyMgrMode: 0,
    priceCfgMode: 0,
    sortNo: 0,
    timezone: ""
  });
  Singlevalue.value = data[0].id;
};
const query = (val: any) => {
  if (val == 0) {
    getplatformuserlist();
  } else {
    (emsdevicename.value = ""), (Singlevalue.value = "");
    getplatformuserlist();
  }
};
// 编辑
const emsdeviceidname = ref();
const dialogVisible = ref();
const selectems = ref();
const conscolidationId = ref();
const newition = async (row: { url: never[]; emsDeviceId: any; conscolidationId: any }) => {
  console.log(row.conscolidationId);
  conscolidationId.value = row.conscolidationId;
  const { data } = await selectconsolidationidURL({ consolidationId: row.conscolidationId });
  console.log(data);
  selectems.value = data;

  emsdeviceidname.value = selectems.value.name; //设备名称
  dialogVisible.value = true;
};

// 确定
const determine = async () => {
  let obj = {
    name: emsdeviceidname.value,
    consolidationId: conscolidationId.value
  };
  const { data } = await updateconsolidationURL(obj);
  console.log(data);
  getplatformuserlist();
  dialogVisible.value = false;
};
// 弹出取消
const handleClose = () => {
  dialogVisible.value = false;
};
const tableData = ref();
const emsdevicename = ref("");
const pageable = ref({
  pn: 1,
  ps: 10,
  total: 0
});
const getplatformuserlist = async () => {
  let obj = {
    consolidationId: "", // 设备名称
    powerId: Singlevalue.value, //查询电站id
    consolidationName: emsdevicename.value, // 设备名称
    pn: pageable.value.pn,
    ps: pageable.value.ps
  };
  const { data } = await selectconsolidationURL(obj);
  tableData.value = data;
  pageable.value.total = tableData.value.total;
};
// 表格操作 Hooks
const handleSizeChange = async (e: any) => {
  pageable.value.ps = e;
  getplatformuserlist();
};
const handleCurrentChange = async (e: any) => {
  pageable.value.pn = e;

  getplatformuserlist();
};

const currentDate = ref();
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }
  getplatformuserlist();
  poststationstationName();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
<!--

--->
