<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="['dataAnalysis: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/gisMap')"></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'"></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" :isShowTool="false" @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: '/src/assets/images/gisMap/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">
@import '@/assets/styles/variables.module.scss';
.homeMainPage {
  height: calc(100vh - 120px);
  overflow: auto;
  background: $mainColor1;
  margin-bottom: 100px;
  div {
    margin-top: 20px;
    font-size: 16px;
  }
}
</style>