<template>
  <div class="home">
    <div class="map" id="map"></div>
    <div class="left-part">
      <el-card>
        <template #header>
          <div class="custom-title">
            <img src="@/assets/images/title.svg" />
            <span>本月</span>
          </div>
        </template>
        <div class="custom-card">
          <div class="card-item">
            <span>147</span>
            <span>所有数量</span>
          </div>
          <div class="card-item">
            <span>147</span>
            <span>已解决</span>
          </div>
          <div class="card-item">
            <span>147</span>
            <span>未解决</span>
          </div>
          <div class="card-item">
            <span>147</span>
            <span>已上报</span>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 10px">
        <template #header>
          <div class="custom-title">
            <img src="@/assets/images/title.svg" />
            <span>本周</span>
          </div>
        </template>
        <div class="custom-card week-card">
          <div class="card-item">
            <span>147</span>
            <span>所有数量</span>
          </div>
          <div class="card-item">
            <span>147</span>
            <span>已解决</span>
          </div>
          <div class="card-item">
            <span>147</span>
            <span>未解决</span>
          </div>
          <div class="card-item">
            <span>147</span>
            <span>已上报</span>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 10px">
        <template #header>
          <div class="custom-title">
            <img src="@/assets/images/title.svg" />
            <span>当天</span>
          </div>
        </template>
        <div class="custom-card day-card">
          <div class="card-item">
            <span>147</span>
            <span>所有数量</span>
          </div>
          <div class="card-item">
            <span>147</span>
            <span>已解决</span>
          </div>
          <div class="card-item">
            <span>147</span>
            <span>未解决</span>
          </div>
          <div class="card-item">
            <span>147</span>
            <span>已上报</span>
          </div>
        </div>
      </el-card>
      <el-card style="margin-top: 10px">
        <template #header>
          <div class="custom-title">
            <img src="@/assets/images/title.svg" />
            <span>统计分析</span>
          </div>
        </template>
        <BaseChart width="100%" height="230px" :option="pieOptions" />
      </el-card>
    </div>
    <div class="right-part">
      <div class="event-title">
        <div>
          <el-select style="width: 100px" v-model="queryParams.level" clearable placeholder="事件等级">
            <el-option v-for="dict in event_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
          <el-select style="width: 100px; margin-left: 10px" v-model="queryParams.level" clearable placeholder="事件类型">
            <el-option v-for="dict in event_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
          <el-date-picker
            v-model="queryParams.dateRange"
            style="margin-left: 10px"
            type="daterange"
            unlink-panels
            range-separator="～"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="shortcuts"
          />
        </div>
        <div style="margin-top: 10px">
          <el-input v-model="queryParams.addr" style="width: 210px" placeholder="输入地点关键词" :suffix-icon="Search" />
          <div style="margin-left: 10px">
            <el-button color="#3CBBED" style="color: #fff">查询</el-button>
            <el-button>重置</el-button>
          </div>
        </div>
      </div>
      <div class="event-list">
        <el-table :data="tableData" :show-header="false" :border="false" style="width: 100%; --el-table-border-color: none">
          <el-table-column prop="level" />
          <el-table-column prop="type" />
          <el-table-column prop="addr" show-overflow-tooltip />
          <el-table-column prop="date" />
          <el-table-column width="60">
            <template #default="{ row }">
              <el-button link type="primary" @click="showDetails(row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="event-footer">
        <el-pagination background layout="prev, pager, next" :total="1000" />
      </div>
    </div>
    <el-dialog v-model="dialog.visible" :title="dialog.title" width="1000px" top="0">
      <el-form ref="addFormRef" :model="form" label-position="top" label-width="90px" label-suffix=":">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="事件ID" prop="handler" :rules="[{ required: true, message: '请输入', trigger: 'blur' }]">
              <el-input v-model="form.handler" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="事件类型" prop="handleWay">
              <el-select v-model="form.level" clearable placeholder="请选择">
                <el-option v-for="dict in event_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发生时间" prop="handleContent">
              <el-date-picker style="width: 100%" v-model="form.value1" type="date" placeholder="请选择" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="事件等级" prop="handleWay">
              <el-select v-model="form.level" clearable placeholder="请选择">
                <el-option v-for="dict in event_level" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="桩号" prop="handleWay">
              <el-input v-model="form.handler" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地点描述" prop="handleWay">
              <el-input v-model="form.handler" type="textarea" placeholder="请输入" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="event-media">
        <div class="event-media-title">现场画面</div>
        <div class="event-media-content">
          <div class="imgs">
            <el-image :src="imgUrl" show-progress :preview-src-list="imgList" fit="cover" />
            <el-image :src="imgUrl" show-progress :preview-src-list="imgList" fit="cover" />
          </div>
        </div>
      </div>
      <div class="event-media" style="margin-top: 10px">
        <div class="event-media-title">现场视频</div>
        <div class="event-media-content">
          <div class="videos">
            <div id="dplayer1"></div>
            <div id="dplayer2"></div>
            <div id="dplayer3"></div>
            <div id="dplayer4"></div>
          </div>
        </div>
      </div>
      <div class="report-btn">
        <img @click="generateReport" src="@/assets/images/report.svg" alt="" />
      </div>
      <template v-if="showReport">
        <div class="report-editor">
          <div class="report-title">报告内容：</div>
          <div style="border: 1px solid #d9d9d9; margin-top: 10px">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" mode="default" />
            <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" @onCreated="handleCreated" />
          </div>
        </div>
        <div style="margin-top: 20px">
          <div class="report-title">格式选择：</div>
          <el-select style="width: 300px; margin-top: 10px" v-model="fileType" clearable placeholder="请选择">
            <el-option label="pdf" :value="1"></el-option>
            <el-option label="word" :value="2"></el-option>
            <el-option label="图片" :value="3"></el-option>
          </el-select>
        </div>
        <div>
          <el-button color="#2AB55C" style="color: #fff; margin-top: 20px; margin-bottom: 30px" @click="htmlToPdfFn">导出报告</el-button>
        </div>
      </template>
      <!-- <template #footer>
        <div class="dialog-footer">
        </div>
      </template> -->
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { Search, Location } from '@element-plus/icons-vue';
import BaseChart from '@/components/BaseChart/index.vue';
import monitorIcon from '@/assets/images/monitor.svg';
import DPlayer from 'dplayer';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { exportAsPdf, exportAsWord, exportAsImage } from 'html2image-pdf-word';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const bdmap = ref(null);
const marks = ref([
  {
    longitude: 118.84651017058795,
    latitude: 32.03286965957209
  },
  {
    longitude: 118.87381865809128,
    latitude: 32.050866853291296
  },
  {
    longitude: 118.88459832421101,
    latitude: 32.01094988629638
  }
]);
const { event_level } = toRefs<any>(proxy?.useDict('event_level'));
const editorRef = shallowRef();
const toolbarConfig = {};
const editorConfig = { placeholder: '请输入内容...' };
// 内容 HTML
const valueHtml = ref('<p>hello</p>');
const handleCreated = (editor) => {
  console.log('created', editor);
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const fileType = ref(1);
const showReport = ref(false);
const htmlToPdfFn = async () => {
  const dom: any = document.querySelector('.w-e-text-container');
  const filename = '报告';
  const type = fileType.value;
  switch (type) {
    case 1:
      await exportAsPdf(dom, filename);
      break;
    case 2:
      await exportAsWord(dom, filename);
      break;
    case 3:
      await exportAsImage(dom, filename);
      break;
  }
};

const queryParams = ref({
  level: undefined,
  dateRange: undefined,
  addr: undefined
});
const dialog = reactive({
  visible: false,
  title: '事件详情'
});
const form = reactive({});
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];
const pieOptions = computed(() => {
  const options = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'horizontal',
      left: 'center',
      itemWidth: 15,
      itemHeight: 8,
      itemGap: 10
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        radius: ['40%', '80%'],
        center: ['50%', '60%'],
        data: [
          {
            value: 40,
            name: '已解决',
            itemStyle: {
              color: '#FAC858'
            }
          },
          {
            value: 17,
            name: '未解决',
            itemStyle: {
              color: '#93BEFF'
            }
          },
          {
            value: 15,
            name: '已上报',
            itemStyle: {
              color: '#507AFC'
            }
          }
        ],
        labelLine: {
          show: false
        },
        label: {
          show: false,
          position: 'center'
        }
      }
    ]
  };
  return options;
});
const tableData = [
  {
    date: '2016-05-03',
    level: '严重',
    addr: '地点',
    type: '交通事故'
  },
  {
    date: '2016-05-03',
    level: '严重',
    addr: '地点',
    type: '交通事故'
  },
  {
    date: '2016-05-03',
    level: '严重',
    addr: '地点',
    type: '交通事故'
  }
];
const imgUrl = new URL(`@/assets/images/profile.jpg`, import.meta.url).href;
const imgList = [new URL(`@/assets/images/profile.jpg`, import.meta.url).href, new URL(`@/assets/images/profile.jpg`, import.meta.url).href];
onMounted(() => {
  const map = new BMapGL.Map('map'); // 创建地图实例
  const point = new BMapGL.Point(118.879999, 32.016216); // 创建点坐标
  map.centerAndZoom(point, 14);
  map.enableScrollWheelZoom(true);
  bdmap.value = map;
  map.addEventListener('click', function (e) {
    const { lng, lat } = e.latlng;
    console.log(e.latlng);
  });
  showMarks();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
const showMarks = () => {
  bdmap.value.clearOverlays();
  marks.value.forEach((item) => {
    const pt = new BMapGL.Point(Number(item.longitude), Number(item.latitude));
    const icon = new BMapGL.Icon(monitorIcon, new BMapGL.Size(30, 30));
    const marker = new BMapGL.Marker(pt, { icon });
    bdmap.value.addOverlay(marker);
  });
};
const showDetails = () => {
  showReport.value = false;
  dialog.visible = true;
  nextTick(() => {
    const dp = new DPlayer({
      container: document.getElementById('dplayer1'),
      video: {
        url: new URL(`@/assets/images/demo.mp4`, import.meta.url).href
      }
    });
    const dp2 = new DPlayer({
      container: document.getElementById('dplayer2'),
      video: {
        url: new URL(`@/assets/images/demo.mp4`, import.meta.url).href
      }
    });
    const dp3 = new DPlayer({
      container: document.getElementById('dplayer3'),
      video: {
        url: new URL(`@/assets/images/demo.mp4`, import.meta.url).href
      }
    });
    const dp4 = new DPlayer({
      container: document.getElementById('dplayer4'),
      video: {
        url: new URL(`@/assets/images/demo.mp4`, import.meta.url).href
      }
    });
  });
};
const generateReport = () => {
  showReport.value = true;
  proxy?.$modal.msgSuccess('报告生成成功');
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  background-color: #f0f2f5;
  position: relative;

  .left-part {
    position: absolute;
    width: 300px;
    top: 10px;
    left: 20px;
    z-index: 10;
  }

  .right-part {
    position: absolute;
    background: #fff;
    border-radius: 4px;
    top: 10px;
    width: 550px;
    right: 20px;
    bottom: 10px;
    z-index: 10;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
  }
}

.custom-title {
  display: flex;
  align-items: center;
  color: #000000;
  font-size: 16px;

  img {
    height: 16px;
    margin-right: 5px;
  }
}

.custom-card {
  display: flex;
  justify-content: space-between;

  .card-item {
    display: flex;
    width: 22.5%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 71px;
    background: #e3eefe;
    color: #2d5794;
    border-radius: 4.8px;

    span:first-child {
      flex: 1;
      font-size: 22px;
      margin-top: 10px;
    }

    span:last-child {
      width: 80%;
      text-align: center;
      height: 26px;
      line-height: 26px;
      border-top: 0.6px solid #d0dff4;
      font-size: 10px;
    }
  }
}

.week-card {
  .card-item {
    background: #fef4e3;

    span:first-child {
      color: #7c5b22;
    }

    span:last-child {
      border-color: #eddbbc;
      color: #8c692e;
    }
  }
}

.day-card {
  .card-item {
    background: #e3fef0;

    span:first-child {
      color: #248647;
    }

    span:last-child {
      border-color: #ade7cd;
      color: #238546;
    }
  }
}

.map {
  width: 100%;
  height: 100%;
}

.event-title {
  flex-shrink: 0;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);
  border-radius: 4px 4px 0 0;

  > div {
    display: flex;
    align-items: center;

    > .el-select {
      flex-shrink: 0;
    }
  }
}

.event-list {
  flex: 1;
  overflow-y: auto;

  :deep() {
    .el-table__cell {
      border: none;
    }
  }
}

.event-footer {
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 20px;

  :deep() {
    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .el-pager li {
      background: transparent;
      border: 1px solid #00000026;
      color: #000000a6;
    }

    .el-pagination.is-background .is-active {
      background: #1890ff !important;
      border: none !important;
      color: #fff !important;
      font-weight: normal;
    }
  }
}

.event-media {
  border: 1px solid #f0f0f0;

  &-title {
    background: #fbfbfb;
    padding: 10px;
    font-size: 14px;
    color: #000000;
  }

  &-content {
    padding: 20px;

    .imgs {
      display: flex;
      flex-wrap: wrap;

      .el-image {
        height: 100px;
        width: 100px;
        margin-right: 10px;
        border-radius: 4px;
        margin-top: 10px;
      }
    }

    .videos {
      display: flex;
      flex-wrap: wrap;

      div {
        height: 200px;
        width: 32%;
        border-radius: 4px;
        margin-right: 10px;
        margin-top: 10px;
      }
    }
  }
}

.report-btn {
  text-align: center;
  margin-top: 20px;

  img {
    height: 62px;
    cursor: pointer;
  }
}
.hidden-report {
  position: absolute;
  visibility: hidden;
  left: -9999px;
  top: -9999px;
  width: max-content;
  height: max-content;
  display: inline-block;
  contain: layout;
}

.report-content {
  width: 800px;
  height: auto;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #eee;
}
.report-editor {
  margin-top: 20px;
}
.report-title {
  color: #5d5d5dd9;
  font-size: 14px;
}
</style>
