<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" style="width: 100%" border>
        <el-table-column prop="eid" label="设备编号" />
        <el-table-column prop="emsDeviceId" label="设备名称" />
        <el-table-column prop="powerName" label="归属电站" />
        <el-table-column prop="binding" label="绑定状态" align="center">
          <template #default="scope">
            <!-- <div v-if="scope.row.binding == 1">绑定</div>
            <div v-else>未绑定</div> -->
            <el-switch
              v-model="scope.row.binding"
              active-value="1"
              inactive-value="0"
              disabled
              @change="changeswitch"
              size="large"
            />
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column prop="updateTime" label="修改时间" />
        <!-- <el-table-column prop="updateTime" label="创建时间" /> -->
        <el-table-column prop="url" label="设备图片" align="center" width="200">
          <template #default="scope">
            <div class="elimageurl">
              <div v-for="(item, index) in scope.row.url" :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.url"
                  :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>
      <div class="dialog_box1">
        <div class="dialog_name">上传图片</div>
        <div>
          <UploadImgs v-model:file-list="absoluteStationPicUr1" width="300px" :limit="9">
            <template #empty>
              <el-icon><Picture /></el-icon>
              <span>请上传电站图片</span>
            </template>
            <template #tip>图片类型 __ jpg jpeg png</template>
          </UploadImgs>
        </div>
      </div>
      <div class="dialog_box2">
        <div class="dialog_name">绑定状态</div>
        <el-switch v-model="powerswitch" :active-value="1" :inactive-value="0" @change="changeswitch" size="large" />
      </div>
      <div class="dialog_box2">
        <div class="dialog_name">
          <span v-if="powerswitch == 1" class="Required">*</span>
          <div v-if="powerswitch != 1" class="Required"></div>
          绑定设备
        </div>
        <el-select v-model="powersvalue" placeholder="选择电站" size="large" style="width: 300px">
          <el-option v-for="item in powerstation" :key="item.id" :label="item.stationName" :value="item.id" />
        </el-select>
      </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 { selectemssytemNameURL, stationstationName, updateemssytemNameURL, selectemsNameURL } from "@/api/home/Multisite";
import Pagination from "@/components/ProTable/components/Pagination.vue";
import { onMounted, ref, Ref } from "vue";
import { Station } from "@/api/interface";
import UploadImgs from "@/components/Upload/Imgs.vue";
import { useAuthButtons } from "@/hooks/useAuthButtons";
import { ElNotification } from "element-plus";

const { BUTTONS } = useAuthButtons();
// 绑定设备
const Singlevalue = ref("");
const cities: Ref<Station.todo[]> = ref([]);
// 编辑绑定设备
const powersvalue = ref("");
const powerswitch = ref();
const powerstation: Ref<Station.todo[]> = ref([]);
const absoluteStationPicUr1 = 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 emsId = ref();
const dialogVisible = ref();
const selectems = ref();
const newition = async (row: { url: never[]; emsDeviceId: any; eid: any }) => {
  console.log(row.eid);
  const { data } = await selectemsNameURL(row.eid, {});
  console.log(data);
  selectems.value = data;
  let elementurl = [];
  for (let index = 0; index < selectems.value.emsurl.length; index++) {
    let element = {
      url: selectems.value.emsurl[index]
    };
    elementurl.push(element);
  }
  console.log(elementurl);

  absoluteStationPicUr1.value = elementurl; // 设备图片
  emsdeviceidname.value = selectems.value.emsDeviceId; //设备名称
  emsId.value = selectems.value.eid; // 设备id
  powersvalue.value = selectems.value.pid; // 绑定电站
  powerswitch.value = selectems.value.onlineStatus; // 绑定状态
  dialogVisible.value = true;
  console.log(powersvalue.value);
};

const changeswitch = async (e: any) => {
  if (e == 0) {
    powersvalue.value = "";
  }
  console.log(e);
};
// 确定
const determine = async () => {
  if (powerswitch.value == 1) {
    if (powersvalue.value == "" || powersvalue.value == undefined) {
      ElNotification({
        title: "温馨提示",
        message: "请选择电站并绑定！",
        type: "warning"
      });
      return;
    }
  }
  let obj = {
    emsName: emsdeviceidname.value,
    emsId: emsId.value,
    imageurl: absoluteStationPicUr1.value.map((item: { url: any }) => item.url).join(","),
    binding: powerswitch.value,
    powerId: powersvalue.value
  };
  const { data } = await updateemssytemNameURL(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 = {
    powerId: Singlevalue.value, //查询电站id
    emsdeviceId: emsdevicename.value, // 设备名称
    pn: pageable.value.pn,
    ps: pageable.value.ps
  };
  const { data } = await selectemssytemNameURL(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>
<!-- -->
