<template>
  <div>
    <div class="title">
      新闻管理
      <div class="title_time">{{ currentDate }}</div>
    </div>
    <div class="card">
      <div class="buttonadd">
        <el-button type="primary" size="large" color="#0052d9" @click="buttonadd">新增</el-button>
      </div>

      <el-table :data="tableData.records" :show-overflow-tooltip="true" style="width: 100%" border>
        <el-table-column prop="name" label="图片名称" />

        <el-table-column prop="operationDate" label="创建时间" />
        <el-table-column prop="newsimages" label="图片地址" width="700" />
        <el-table-column prop="newsimages" label="并网点图片" width="200">
          <template #default="scope">
            <div class="elimageurl">
              <el-image
                style="width: 60px; height: 60px; margin-right: 10px"
                :src="scope.row.newsimages"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-teleported="true"
                :preview-src-list="[scope.row.newsimages]"
                :initial-index="0"
                fit="cover"
              />
            </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 v-if="false" 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="1200" :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_box">
        <div class="dialog_name"><span class="Required">*</span> 上传图片</div>
        <UploadImgs v-model:file-list="absoluteStationPicUr1" width="300px" :limit="1">
          <template #empty>
            <el-icon><Picture /></el-icon>
            <span>请上传电站图片</span>
          </template>
        </UploadImgs>
      </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 { onMounted, ref } from "vue";
import UploadImgs from "@/components/Upload/Imgs.vue";
import { selectnewimagesURL, insertnewimagesURL } from "@/api/home/Multisite";
import Pagination from "@/components/ProTable/components/Pagination.vue";

const absoluteStationPicUr1 = ref();
const tableData = ref();
const dialogVisible = ref(false);
const emsdeviceidname = ref();
const pageable = ref({
  pn: 1,
  ps: 10,
  total: 0
});
const getplatformuserlist = async () => {
  let obj = {
    pn: pageable.value.pn,
    ps: pageable.value.ps
  };
  const { data } = await selectnewimagesURL(obj);
  console.log(data);

  tableData.value = data;
  pageable.value.total = tableData.value.total;
};
const newition = (row: any) => {
  console.log(row);
  // alert("你点击了 " + row + " 次!");
};
// 关闭弹窗
const handleClose = (row: any) => {
  console.log(row);
  dialogVisible.value = false;
};
const determine = async () => {
  console.log(1);
  let obj = {
    newimages: absoluteStationPicUr1.value[0].url,
    name: emsdeviceidname.value
  };
  const { data } = await insertnewimagesURL(obj);
  console.log(data);
  dialogVisible.value = false;
  getplatformuserlist();
};
// 表格操作 Hooks
const handleSizeChange = async (e: any) => {
  pageable.value.ps = e;
  getplatformuserlist();
};
const handleCurrentChange = async (e: any) => {
  pageable.value.pn = e;

  getplatformuserlist();
};
const buttonadd = async () => {
  absoluteStationPicUr1.value = "";
  emsdeviceidname.value = "";
  dialogVisible.value = true;
};

const currentDate = ref();
onMounted(() => {
  const current = localStorage.getItem("currentDate");
  if (current) {
    currentDate.value = current;
  }

  getplatformuserlist();
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
<!--

-->
