<template>
  <!-- 首页 -->
  <div class="publicContainer homeMainPage flex flex-v">
    <h2>全局公共内容说明</h2>
    <div>
      产品化全局静态资源引入地址：https://server2.wh-nf.cn:8870/file/NFProductWeb/css/element-ui.scss
    </div>
    <el-divider />
    <div>获取自定义的全局字典内容（\src\utils\fixDict.js）:{{ propsColorYs }}</div>
    <div>
      <el-button type="primary" @click="messageTips">
        全局各类消息提示ElMessage、ElMessageBox、ElNotification、ElMessageBox、confirm-loading
      </el-button>
    </div>
    <el-divider />
    <div>获取接口返回字典数据：{{ rated_voltage }}</div>
    <div>
      按钮权限判断v-hasPermi：
      <el-button
        type="primary"
        icon="Edit"
        v-hasPermi="['newfiber-business-base:rtuSiteInfo:edit']"
      >
        修改
      </el-button>
    </div>
    <el-divider />
    <div>
      导出公共方法：<el-button type="warning" @click="exportData"> 导出 </el-button>
    </div>
    <div>公共的验证方法：@/utils/validate.js</div>
    <div>
      公共的图片image src(assets内部)：<el-image
        :src="getImageUrl('marker.png', 'images')"
      ></el-image>
    </div>
    <el-divider />
    <div>ref的绑定值获取：proxy.$refs["uploadRef"]</div>
    <el-divider />
    <div>
      日期选择默认日期设置：
      <el-date-picker
        type="daterange"
        v-model="daterange"
        value-format="YYYY-MM-DD"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        placeholder="请选择日期"
      >
      </el-date-picker>
    </div>
    <el-divider />
    <div>
      海康插件js引入(https://server2.wh-nf.cn:8870/file/NFProductWeb/videoHK/jsWebControl-1.0.0.min.js、
      https://server2.wh-nf.cn:8870/file/NFProductWeb/videoHK/jsencrypt.min.js ):
      <br /><br />
      <el-button type="warning" @click="dialogShow = true"> 查看海康视频监控 </el-button>
    </div>
    <el-divider />
    <div>
      若依封装的svg-icon选择应用本地化：(elementplus用的是http://www.w3.org的svg地址)
      <svg-icon icon-class="client" />
      <icon-select />
    </div>
    <el-divider />
    <div>
      全局图片文件上传组件(三种类型)：
      <!-- 图片上传 picture 一行两列，如需修改自行定义样式即可 -->
      <ImageFileUpload
        :limit="3"
        :saveFileArr="bindImgArr"
        :listType="'picture'"
      ></ImageFileUpload>
      <!-- 图片上传   picture-card -->
      <ImageFileUpload
        :limit="3"
        :saveFileArr="bindImgArr"
        :listType="'picture-card'"
      ></ImageFileUpload>
      <!-- 文件上传 -->
      <ImageFileUpload
        :limit="3"
        :saveFileArr="bindImgArr"
        :listType="'text'"
        :fileType="['pdf', 'xls', 'xlsx']"
      ></ImageFileUpload>
    </div>
    <el-divider />
    <div>
      图片自带点击预览组件
      <ImagePreview
        :src="'http://42.193.7.161:9000/newfiber-standard/2023/07/08/200X200_20230708150004A083.png'"
        :width="100"
        :height="100"
      ></ImagePreview>
    </div>
    <el-divider />
    <div>
      空数据组件
      <Empty :width="220" :height="220" :emptyText="'暂无数据...'"></Empty>
    </div>
    <el-divider />
    <div>
      富文本编辑器
      <WangEditor :modelValue="editValue" @update:modelValue="getWEditVal"></WangEditor>
    </div>
    <el-divider />
    <div>
      地图选点获取位置、经纬度(mapCenter地图中心点)：
      <el-button type="warning" @click="showMap = true"> 查看示例 </el-button>
      <MapPosition
        v-if="showMap"
        :isShowSearch="true"
        :isSelectAddress="true"
        :mapCenter="[110.79296501902053, 32.63162738215532]"
        @getPlace="getAddress"
      ></MapPosition>
    </div>
    <!-- 查看海康视频弹窗 -->
    <el-dialog v-model="dialogShow" title="海康视频" width="800px" append-to-body>
      <VideosHK v-if="dialogShow"></VideosHK>
      <el-divider />
    </el-dialog>
  </div>
</template>

<script setup name="homeMainPage">
import ImageFileUpload from "@/components/ImageFileUpload/index.vue"; //图片文件上传
import WangEditor from "@/components/WangEditor/index.vue"; //富文本编辑器
import IconSelect from "@/components/IconSelect/index.vue"; //icon选择器
import MapPosition from "@/components/Map/index.vue"; //地图选点获取经纬度位置组件
import VideosHK from "@/components/videoHK/index.vue"; //查看海康视频

const { proxy } = getCurrentInstance();

const propsColorYs = proxy.fixDict["propsColorYs"]; //获取自定义的全局字典内容
const { rated_voltage } = proxy.useDict("rated_voltage"); //获取接口返回字典数据
// 修改时默认传的图片
const bindImgArr = ref([
  {
    id: "",
    name: "u799u799u799u799_20230708150703A084.png",
    originalName: "200X200.png",
    url:
      "http://42.193.7.161:9000/newfiber-standard/2023/07/08/200X200_20230708150004A083.png",
  },
]);
const editValue = ref(""); //富文本编辑器绑定值 <p><strong>12312321</strong></p>
// 地图默认显示渲染一个点位信息
const mapForm = ref({
  address: "十堰市排水中心",
  lonLat: "114.39778958759788,30.478518033935494",
});
// 日期默认显示
const daterange = ref(
  // [proxy.moment(new Date()).subtract(30, 'days').format('YYYY-MM-DD'), proxy.moment().format('YYYY-MM-DD')] //过去30天
  [
    proxy.moment(new Date()).format("YYYY-MM-DD"),
    proxy.moment(new Date()).add(30, "days").format("YYYY-MM-DD"),
  ] //未来30天
);
const dialogShow = ref(false);
const showMap = ref(false);

// 各类消息提示框，具体参考/src/plugins/modal.js
function messageTips() {
  proxy.$modal.msgSuccess("成功提示");
  proxy.$modal.msgWarning("警告消息");
  proxy.$modal.msgError("错误提示");
  // proxy.$modal.alertError('系统提示 error');
  // proxy.$modal.alertSuccess('系统提示 success');
  // proxy.$modal.loading('加载中...');
  // proxy.$modal.closeLoading();//关闭loading
}
// 数据导出
function exportData() {
  let params = {};
  proxy.download(
    "/business/siteHistoryMonitor/reportingServiceExport",
    params,
    `报表服务-${new Date().getTime()}.xlsx`
  );
}

// 获取富文本编辑器内容
function getWEditVal(val) {
  console.log("引用组件获取富文本编辑器内容--", val);
  editValue.value = val;
}

// 地图默认渲染一个点位及位置名称信息
function initDefaultPoint() {
  setTimeout(() => {
    if (window.newfiberMap && mapForm.value.lonLat) {
      let position = mapForm.value.lonLat.split(",");
      newfiberMap.removeByIds(["addressSearch"]);
      newfiberMap.geojsonToMap(
        NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson([
          {
            id: "addressSearch",
            name: mapForm.value.address,
            geometrys: `POINT(${position.join(" ")})`,
            type: NewFiberMap.Enum.VectorType.ICON,
            style: {
              url:
                NewFiberMapConfig.SDK_INIT_SRC_PREFIX +
                "/static/images/running_path/marker.png",
              width: 50,
              height: 50,
            },
            labelOptions: {
              font: "13px HarmonyOS Sans SC-Bold, HarmonyOS Sans SC",
              color: "rgb(255,255,255,1)",
              pixelOffset: [0, -38],
              backgroundColor: "rgba(64,158,255,1)",
              showBackground: true,
              distanceDisplayCondition: [Number.MIN_VALUE, 55000],
            },
          },
        ])
      );
    }
  }, 100);
}

// 获取位置
function getAddress(val) {
  console.log("获取位置信息--", val);
}

onMounted(() => {
  initDefaultPoint(); // 地图默认渲染一个点位及位置名称信息
});
</script>

<style scoped lang="scss">
.homeMainPage {
  height: 100%;
  margin-bottom: 100px;
  div {
    margin-top: 20px;
    font-size: 16px;
  }
}
</style>