<template>
  <!-- 首页 -->
  <div class="publicContainer homeMainPage flex flex-v" id="rainReport">
    <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 class="pdf-details">导出公共方法：<el-button type="warning" @click="exportData"> 导出 </el-button></div>
    <div class="pdf-details">导出公共方法：<el-button type="danger" @click="exportPdf"> 导出PDF </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'"
        :refField="'scenePhotos'"
        :refType="'sceneCheckPhotosFileList'"
      ></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'; //查看海康视频
import { pageToPDF } from '@/utils/exportPdf.js'; //导出下载PDF

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`);
}
//导出PDF文件 class="pdf-details"是处理分页隔断问题
function exportPdf() {
  const lableList = document.getElementsByClassName('pdf-details');
  pageToPDF('vue页面导出PDF', document.querySelector('#rainReport'), lableList);
}

// 获取富文本编辑器内容
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%;
  background: #f5f7fe;
  margin-bottom: 100px;
  div {
    margin-top: 20px;
    font-size: 16px;
  }
}
</style>