<template>
	<view>
		<cu-custom bgColor="bg-gradual-blueness" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">检查记录详情</block>
		</cu-custom>
    <view class="de-card-list de-list" style="position: relative">
      <web-view id="webview" v-if="mapUrl" :src="mapUrl" style="width: calc(100% - 40upx); height: 300px;margin-left: 20upx;margin-right: 20upx;" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers" ></web-view>
      <view style="position: absolute;width: 100%;top: 620upx">
        <view class="title">
          检测内容
        </view>
        <view class="table-box">
          <uni-table name='varlist' border stripe emptyText="暂无更多数据">
            <!-- 表头行 -->
            <uni-tr>
              <uni-th align="center" style="font-weight: bold;">检测内容</uni-th>
              <uni-th align="center" style="font-weight: bold;width:150upx">状态</uni-th>
            </uni-tr>
            <uni-tr v-for="item in varList" :key="item.RISKPOINT_ID">
              <uni-td>{{item.CHECK_CONTENT}}</uni-td>
              <uni-td v-if='item.ISNORMAL=="1"' align="center">
                <view @click="goToDetail(item.HIDDEN_ID)" style="color: blue;">不合格</view>
              </uni-td>
              <uni-td v-else-if='item.ISNORMAL=="2"' align="center">
                <view  style="color: blue;">已忽略</view>
              </uni-td>
              <uni-td v-else align="center">
                <template v-if="item.IMGCOUNT>0 && isTongyong">
                  <view @click="goToImgs(item.RECORDITEM_ID)" style="color: blue;">合格</view>
                </template>
                <template v-else>合格</template>
              </uni-td>
              <uni-td v-else align="center">
              </uni-td>
            </uni-tr>

          </uni-table>
        </view>
        <view class="title">
          其他隐患信息
        </view>
        <view class="table-box">
          <uni-table name='otherHiddenList' border stripe emptyText="暂无更多数据">
            <!-- 表头行 -->
            <uni-tr>
              <uni-th align="center" style="font-weight: bold;">隐患描述</uni-th>
              <uni-th align="center" style="font-weight: bold;">操作</uni-th>
            </uni-tr>
            <uni-tr v-for="item in otherHiddenList" :key="item.HIDDEN_ID">
              <uni-td>{{item.HIDDENDESCR}}</uni-td>
              <uni-td align="center">
                <view @click="goToDetail(item.HIDDEN_ID)">查看</view>
              </uni-td>
            </uni-tr>
          </uni-table>
        </view>
  <!--		<map style="width: 100%; height: 300px;" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers">-->
  <!--		</map>-->
      <view class="title">
        清单信息
      </view>
      <view>
        <view class="cu-list menu">
          <view class="cu-item">
            <view class="content">
              <text class="text-semi">清单名称</text>
            </view>
            <view class="action">
              <text class="text-grey">{{pd.LIST_NAME}}</text>
            </view>
          </view>
          <view class="cu-item">
            <view class="content">
              <text class="text-semi">排查清单类型</text>
            </view>
            <view class="action">
              <text class="text-grey">{{pd.SCREENTYPENAME}}</text>
            </view>
          </view>
          <view class="cu-item">
            <view class="content">
              <text class="text-semi">检查人</text>
            </view>
            <view class="action">
              <text class="text-grey">{{pd.USERS}}</text>
            </view>
          </view>
          <view class="cu-item">
            <view class="content">
              <text class="text-semi">检查时间</text>
            </view>
            <view class="action">
              <text class="text-grey">{{pd.CHECK_TIME}}</text>
            </view>
          </view>
          <view class="cu-item">
            <view class="content">
              <text class="text-semi">所属部门 </text>
            </view>
            <view class="action">
              <text class="text-grey">{{pd.DEPARTMENT_NAME}}</text>
            </view>
          </view>
          <view class="cu-item">
            <view class="content">
              <text class="text-semi">所属岗位 </text>
            </view>
            <view class="action">
              <text class="text-grey">{{pd.POST_NAME}}</text>
            </view>
          </view>
          <view class="cu-item">
            <view class="content">
              <text class="text-semi">排查周期</text>
            </view>
            <view class="action">
              <text class="text-grey">{{pd.PERIODNAME}}</text>
            </view>
          </view>
          <view class="cu-item">
            <view class="content">
              <text class="text-semi">清单类型</text>
            </view>
            <view class="action">
              <text class="text-grey">{{pd.TYPENAME}}</text>
            </view>
          </view>
          <view  class="cu-item" v-if="isTongyong">
            <view class="content">
              <text class="text-semi">签字照片</text>
            </view>
            <view class="de-sub-content">
              <scroll-view scroll-x class="bg-white nav" scroll-with-animation>
                <view class="cu-item" v-for="(item,index) in files" v-bind:key="index">
                  <view class="imgs">
                    <image :src="baseImgPath+item.FILEPATH" :data-index="index" @click="ViewShowImage" mode=""></image>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
        </view>
        <!-- <view class="cu-tabbar-height"></view> -->
      </view>
    </view>
    </view>
	</view>
</template>

<script>
	import {
		basePath,
		deptId,
		corpinfoId,
		loginSession,
		baseImgPath
	} from '@/common/tool.js';
	import gcoord from '@/common/gcoord.js'
  var wv;//计划创建的webview
	export default {
		data() {
			return {
				recordItemList: [],
				baseImgPath:baseImgPath,
				CHECKRECORD_ID: '',
				hiddenList: [],
				varList: [],
				pd: [],
				otherHiddenList: [],
				title: 'map',
				scale:13,
				latitude: 39.935866846326036,
				longitude: 119.64918897343684,
				covers: [],
				mapVarList: [],
				mapHdList: [],
				mapPd: [],
				mapCinfo: [],
				mapCheckrecord: [],

				files: [],
				isTongyong:true,
				mapUrl:'',
			}
		},
		onLoad(e) {
			loginSession();console.info(corpinfoId)
			if(corpinfoId =='ffbf90f7064340ae9d56c16d4f560423'){
				this.isTongyong=false;
			}
			this.CHECKRECORD_ID = e.CHECKRECORD_ID;
			this.getData();
			this.getOtherHidden();
			this.getMap();
		},
		methods: {
			//跳转事件
			goToDetail(e) {
				// uni.navigateTo({
				// 	url: '/pages/basics/hidden-perils/fill-in-case/fill-in-case-detail-view?id='+e
				// });
				uni.navigateTo({
					url: '/pages/application/hidden-danger-management/hidden-danger-record/hidden-danger-record-detail?id='+e,
				});
			},
			goToImgs(e){
				uni.navigateTo({
					url: '/pages/application/check-record/imgs_details?id='+e,
				});
			},

			getData() {
				var _this = this;
				uni.showLoading({
					title: '请稍候'
				})
				uni.request({
					url: basePath + '/app/checkrecord/goEdit',
					method: 'POST',
					dataType: 'json',
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						CHECKRECORD_ID: _this.CHECKRECORD_ID,
					},
					success: (res) => {

						if (res.data != null) {
							uni.hideLoading();
							_this.varList = res.data.varList;
							_this.pd = res.data.pd;
							_this.files = res.data.qianming;
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000
							});
						}
					}
				});
			},
			getOtherHidden() {
				var _this = this;
				uni.showLoading({
					title: '请稍候'
				})
				uni.request({
					url: basePath + '/app/hidden/getChcenkHidden',
					method: 'POST',
					dataType: 'json',
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						CHECKRECORD_ID: _this.CHECKRECORD_ID,
					},
					success: (res) => {

						if (res.data != null) {
							uni.hideLoading();
							_this.otherHiddenList = res.data.hiddenList;
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000
							});
						}
					}
				});
			},
			getMap() {
				var _this = this;
				uni.showLoading({
					title: '请稍候'
				})
				uni.request({
					url: basePath + '/app/checkrecord/goMap',
					method: 'POST',
					dataType: 'json',
					header: {
						'Content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						CHECKRECORD_ID: _this.CHECKRECORD_ID,
						CORPINFO_ID: corpinfoId
					},
					success: (res) => {

						if (res.data != null) {
							uni.hideLoading();
							_this.mapVarList = res.data.varList;
							_this.mapHdList = res.data.hdList;
							_this.mapPd = res.data.pd;
							_this.mapCinfo = res.data.cinfo;
							_this.mapCheckrecord = res.data.checkrecord;
							if (_this.validStr(res.data.cinfo.LONGITUDE) && _this.validStr(res.data.cinfo.LATITUDE)) {
							  if (res.data.cinfo.LONGITUDE.length <16) {
                                var result = gcoord.transform(
                                        [res.data.cinfo.LONGITUDE, res.data.cinfo.LATITUDE], // 经纬度坐标
                                        gcoord.BD09, // 当前坐标系
                                        gcoord.GCJ02 // 目标坐标系
                                );
                                _this.longitude = result[0];
                                _this.latitude = result[1];
                              } else {
                                _this.longitude = res.data.cinfo.LONGITUDE;
                                _this.latitude = res.data.cinfo.LATITUDE;
                              }
							}

							if (_this.validStr(res.data.checkrecord.LONGITUDE) && _this.validStr(res.data.checkrecord.LATITUDE)) {
                              if (res.data.checkrecord.LONGITUDE.length <16) {
								var result1 = gcoord.transform(
									[res.data.checkrecord.LONGITUDE, res.data.checkrecord.LATITUDE], // 经纬度坐标
									gcoord.BD09, // 当前坐标系
									gcoord.GCJ02 // 目标坐标系
								);
								var checkMarker={latitude: result1[1],longitude: result1[0],iconPath: '../../static/map/50.png'}
                                _this.covers.push(checkMarker);
                              } else {
                                var checkMarker={latitude: res.data.checkrecord.LATITUDE, longitude: res.data.checkrecord.LONGITUDE,iconPath: '../../static/map/50.png'}
                                _this.covers.push(checkMarker);
                              }
							}

							for(var i=0;i<res.data.varList.length;i++){
                              if (_this.validStr(res.data.varList[i].LONGITUDE) && _this.validStr(res.data.varList[i].LATITUDE)) {
                                if (res.data.varList[i].LONGITUDE.length <16) {
                                  var result2 = gcoord.transform(
                                          [res.data.varList[i].LONGITUDE, res.data.varList[i].LATITUDE], // 经纬度坐标
                                          gcoord.BD09, // 当前坐标系
                                          gcoord.GCJ02 // 目标坐标系
                                  );
                                  var checkMarker = {
                                    latitude: result2[1],
                                    longitude: result2[0],
                                    iconPath: '../../static/map/50.png'
                                  }
                                  _this.covers.push(checkMarker);
                                } else {
                                  var checkMarker={latitude: res.data.varList[i].LATITUDE, longitude: res.data.varList[i].LONGITUDE,iconPath: '../../static/map/50.png'}
                                  _this.covers.push(checkMarker);
                                }
                              }
							}

							console.info(res.data.hdList);
							for(var i=0;i<res.data.hdList.length;i++){
                              if (_this.validStr(res.data.hdList[i].LONGITUDE) && _this.validStr(res.data.hdList[i].LATITUDE)) {
                                if (res.data.hdList[i].LONGITUDE.length <16) {
                                  var result3 = gcoord.transform(
                                      [res.data.hdList[i].LONGITUDE, res.data.hdList[i].LATITUDE], // 经纬度坐标
                                      gcoord.BD09, // 当前坐标系
                                      gcoord.GCJ02 // 目标坐标系
                                  );
                                  var checkMarker={latitude: result3[1],longitude: result3[0],iconPath: '../../static/map/h.png'}
                                  _this.covers.push(checkMarker);
                                  console.info(_this.covers);
                                } else {
                                  var checkMarker={latitude: res.data.hdList[i].LATITUDE, longitude: res.data.hdList[i].LONGITUDE,iconPath: '../../static/map/h.png'}
                                  _this.covers.push(checkMarker);
                                }
                              }
							}

                          this.mapUrl = ("/hybrid/html/mapShow.html?"+JSON.stringify(_this.covers));
                          this.$nextTick(()=>{
                            // #ifdef APP-PLUS
                            var currentWebview = this.$scope.$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
                            setTimeout(function() {
                              wv = currentWebview.children()[0]
                              wv.setStyle({
                                position: 'unset',
                                top: _this.CustomBar + 5,
                                height:300,
                                'margin-left':10,
                                'margin-right':10
                              })
                            }, 1000); //如果是页面初始化调用时，需要延时一下
                            // #endif
                          })

						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000
							});
						}
					}
				});
			},

			ViewShowImage(e) {
				let files = [];
				for (var i = 0; i < this.files.length; i++) {
					files.push(baseImgPath+this.files[i].FILEPATH)
				}
				uni.previewImage({
					urls: files,
					current: e.currentTarget.dataset.index
				});
			},
			/* getRecordItem() {
				var _this = this;
				uni.showLoading({
					title: '请稍候'
				})
				uni.request({
					url: basePath + '/app/hidden/getCheckrecord',
					method: 'POST',
					dataType: 'json',
					header:{
							'Content-type':'application/x-www-form-urlencoded'
					},
					data: {
					CHECKRECORD_ID: _this.CHECKRECORD_ID,
					},
					success: (res) => {

						if (res.data != null) {
							uni.hideLoading();
							_this.recordItemList = res.data.varList;
						} else {
							uni.showToast({
								title: res.data.message,
								duration: 2000
							});
						}
					}
				});
			},
			 */
		}

	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.title {
		font-weight: bold;
		margin: 30upx 20upx;
		padding-left: 10upx;
		border-left: 4px solid #0081FF;
	}

	navigator {
		color: #0066CC;
		text-decoration: underline;
	}
</style>