<template>
  <div id="reportPoint" class="report-list">
    <div v-if="typeName=='query'&&!ruleForm.type" style="font-size: 18px;font-weight: bold;text-align: center;margin-bottom: 20px">
      南京市河道无人机巡检报告
    </div>
    <div style="text-align: right">编号：{{ruleForm.reportNo?ruleForm.reportNo:''}}</div>
    <div style="border-left: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;margin-top: 15px;">
      <table style="table-layout: fixed;width: 100%">
        <col style="width: 13.33%"/>
        <col style="width: 20%"/>
        <col style="width: 13.33%"/>
        <col style="width: 20%"/>
        <col style="width: 13.33%"/>
        <col style="width: 20%"/>
        <tbody>
        <tr style="font-size: 14px;color: #666;">
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
            河道名称
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            {{ruleForm.driverName}}
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
            区属
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            {{ruleForm.driverArea}}
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
            巡检时间
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            {{ruleForm.inspectTime}}
          </td>
        </tr>
        <tr v-if="ruleForm.type" style="font-size: 14px;color: #666;">
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
            问题分类
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            {{documentList[ruleForm.type]}}
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
           问题数量
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            {{ruleForm.questionFileList&&ruleForm.questionFileList.length>0?ruleForm.questionFileList.filter(child=>child.file_document==ruleForm.type).length:0}}
          </td>
        </tr>
        <tr v-if="!ruleForm.type" style="font-size: 14px;color: #666;">
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
            起点
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            {{ruleForm.driverStart}}
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
            终点
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            {{ruleForm.driverEnd}}
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
            长度
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            {{ruleForm.inspectLength}}
          </td>
        </tr>
        <tr v-if="!ruleForm.type" style="font-size: 14px;color: #666;">
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
            巡检视频
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="5">
            <span v-if="typeName=='query'">{{ruleForm.videoUrl}}</span>
            <el-input v-else clearable v-model="ruleForm.videoUrl" size="small" placeholder="请输入巡检视频"/>
          </td>
        </tr>
        <tr v-if="!ruleForm.type" style="font-size: 14px;color: #666;">
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;font-weight: bold;">
            巡检正摄图
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="5">
            <span v-if="typeName=='query'">{{ruleForm.imageUrl}}</span>
            <el-input v-else clearable v-model="ruleForm.imageUrl" size="small" placeholder="请输入巡检正摄图"/>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div v-if="ruleForm.filterQuestionList&&!ruleForm.type"
         style="border-left: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6;margin-top: 15px;">
      <table style="table-layout: fixed;width: 100%;text-align: center">
        <col style="width: 8.33%"/>
        <col style="width: 8.33%"/>
        <col style="width: 16.66%"/>
        <col style="width: 16.66%"/>
        <col style="width: 16.66%"/>
        <col style="width: 16.66%"/>
        <col style="width: 16.66%"/>
        <tbody>
        <tr style="font-size: 14px;color: #666;">
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="2">项目
          </td>
          <td :colspan="typeName=='query'?2:1" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">巡检内容</td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">问题图片数量</td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">考核得分</td>
          <td v-if="typeName!='query'" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">校核分</td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">备注</td>
        </tr>
        <tr :key="index" v-for="(item,index) in ruleForm.filterQuestionList" style="font-size: 14px;color: #666;">
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"
              v-if="item.categoryRow" :rowspan="item.categoryRow">{{item.categoryText}}
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"
              v-if="item.typeRow" :rowspan="item.typeRow">{{item.typeText}}
          </td>
          <td :colspan="typeName=='query'?2:1" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">{{item.content}}
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            {{item.questionNum}}
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            {{item.examineScore}}
          </td>
          <td v-if="typeName!='query'" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            <span v-if="typeName=='query'">{{item.checkScore}}</span>
            <el-input @blur="checkScoreblur" v-else clearable v-model="item.checkScore" size="small" placeholder=""/>
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            <span v-if="typeName=='query'">{{item.remark}}</span>
            <el-input v-else clearable v-model="item.remark" size="small" placeholder=""/>
          </td>
        </tr>
        <tr style="font-size: 14px;color: #666;">
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="2"
              rowspan="2">群众满意度调查
          </td>
          <td :colspan="typeName=='query'?2:1" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">满意度得分</td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"></td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            <span v-if="typeName=='query'">{{ruleForm.manyiExamineScore}}</span>
            <el-input @blur="examineScoreblur" v-else clearable v-model="ruleForm.manyiExamineScore" size="small"
                      placeholder=""/>
          </td>
          <td v-if="typeName!='query'" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            <span v-if="typeName=='query'">{{ruleForm.manyiCheckScore}}</span>
            <el-input @blur="checkScoreblur" v-else clearable v-model="ruleForm.manyiCheckScore" size="small"
                      placeholder=""/>
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"></td>
        </tr>
        <tr style="font-size: 14px;color: #666;">
          <td :colspan="typeName=='query'?2:1" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">知晓率得分</td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"></td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            <span v-if="typeName=='query'">{{ruleForm.awareExamineScore}}</span>
            <el-input @blur="examineScoreblur" v-else clearable v-model="ruleForm.awareExamineScore" size="small"
                      placeholder=""/>
          </td>
          <td v-if="typeName!='query'" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            <span v-if="typeName=='query'">{{ruleForm.awareCheckScore}}</span>
            <el-input @blur="checkScoreblur" v-else clearable v-model="ruleForm.awareCheckScore" size="small"
                      placeholder=""/>
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"></td>
        </tr>
        <tr style="font-size: 14px;color: #666;">
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="2">总分
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" :colspan="typeName=='query'?3:2"></td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            <span v-if="typeName=='query'">{{ruleForm.totalExamineScore}}</span>
            <el-input v-else clearable v-model="ruleForm.totalExamineScore" size="small" placeholder=""/>
          </td>
          <td v-if="typeName!='query'" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            <span v-if="typeName=='query'">{{ruleForm.totalCheckScore}}</span>
            <el-input v-else clearable v-model="ruleForm.totalCheckScore" size="small" placeholder=""/>
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"></td>
        </tr>
        <tr style="font-size: 14px;color: #666;">
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" colspan="2">报告描述
          </td>
          <td v-if="typeName!='query'" style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
            <el-select @change="descChange" filterable clearable v-model="ruleForm.descId"
                       size="small"
                       placeholder="请选择评价数据">
              <el-option v-for="item in ruleForm.reportDescList" :key="item.id" :label="item.content" :value="item.id"/>
            </el-select>
          </td>
          <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" :colspan="typeName=='query'?5:4">
            <span v-if="typeName=='query'">{{ruleForm.desc}}</span>
            <el-input v-else v-model="ruleForm.desc" type="textarea" rows="5" size="small"/>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div v-if="ruleForm.questionFileList&&ruleForm.questionFileList.length>0"
         style="text-align: center;margin-top: 40px;">
      <div style="font-size: 16px;font-weight: bold">问题清单</div>
      <div :key="index" v-for="(item,index) in ruleForm.type?ruleForm.questionFileList.filter(child=>child.file_document==ruleForm.type):ruleForm.questionFileList"
           style="margin-left:20%;width: 60%;margin-top: 15px;border-left: 1px solid #e6e6e6;border-top: 1px solid #e6e6e6">
        <table style="table-layout: fixed;text-align: center;width: 100%">
          <col style="width: 20%"/>
          <col style="width: 80%"/>
          <tbody>
          <tr style="font-size: 14px;color: #666;">
            <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">坐标</td>
            <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;"
                v-if="item.location">{{item.location}}<span v-if="item.latitude&&item.longitude">({{parseFloat(item.longitude)}},{{parseFloat(item.latitude)}})</span>
            </td>
            <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;" v-else></td>
          </tr>
          <tr style="font-size: 14px;color: #666;">
            <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">问题描述</td>
            <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
              <span v-if="typeName=='query'">{{typeName=='index'?item.questionContent:item.description}}</span>
              <el-input v-if="typeName=='index'||typeName=='check'" v-model="item.questionContent" type="textarea"
                        rows="1" size="small"/>
              <el-input v-if="typeName!='query'&&typeName!='index'&&typeName!='check'" v-model="item.description" type="textarea" rows="1"
                        size="small"/>
            </td>
          </tr>
          <tr style="font-size: 14px;color: #666;">
            <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">问题图片</td>
            <td style="padding: 12px;border-right: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6;">
              <viewer>
                <img :title="typeName=='index'&&typeName=='check'?item.questionContent:item.description"
                     style="width:100%;height:240px;cursor: pointer" :data-source="item.formatOriginalImg"
                     v-lazy="item.formatSrc"/>
              </viewer>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div style="font-size: 16px;font-weight: bold;margin-top: 20px">问题位置信息</div>
      <div v-show="!mapImg" style="margin-left:20%;width: 60%;height: 400px;margin-top: 20px" id="reportMap">
      </div>
      <img v-show="mapImg" style="width: 60%;height: 400px;margin-top: 20px" :src="mapImg">
    </div>
    <div v-if="typeName=='check'" style="text-align: center;margin-top: 40px;">
      <div style="font-size: 16px;font-weight: bold">审核意见</div>
      <el-input style="width: 60%;margin-left: 0%;margin-top: 15px" v-model="ruleForm.remark" type="textarea" rows="5"
                size="small"/>
    </div>
  </div>
</template>

<script>
  import AMap from 'AMap'
  export default {
    name: "report",
    data() {
      return {
      }
    },
    props: {
      mapImg:{
        type: String,
        default() {
          return '';
        }
      },
      ruleForm: {
        type: Object,
        default() {
          return {};
        }
      },
      typeName: {
        type: String,
        default() {
          return 'index';
        }
      },
      documentList:{
        type:Object,
        default(){
         return {}
        }
      }
    },
    mounted() {
      if(this.ruleForm.questionFileList&&this.ruleForm.questionFileList.length>0){
        this.initMap()
      }
    },
    methods: {
      initMap(){
        let me=this
        this.map = new AMap.Map('reportMap', {
          zooms:[10,18]
        })
        this.map.setCity('南京市')
        this.map.on("complete", function() {
          var opts = {
            subdistrict: 0,   //获取边界不需要返回下级行政区
            extensions: 'all',  //返回行政区边界坐标组等具体信息
            level: 'district'  //查询行政级别为 市
          };
          let district = new AMap.DistrictSearch(opts);
          district.search('南京', function(status, result) {
            let polygons = [];
            var bounds = result.districtList[0].boundaries;
            if (bounds) {
              for (var i = 0, l = bounds.length; i < l; i++) {
                let polygon = new AMap.Polygon({
                  strokeWeight: 2,
                  path: bounds[i],
                  fillOpacity: 0,
                  fillColor: '#fff',
                  strokeColor: '#ff0000'
                });
                polygons.push(polygon);
              }
            }
            me.polygons = polygons
            me.map.add(me.polygons)
          });
          let centerPoint = null
          me.ruleForm.questionFileList.map(item => {
            if (item.gaode_longitude && item.gaode_latitude) {
              let point = new AMap.LngLat(item.gaode_longitude, item.gaode_latitude)
              let filter = me.ruleForm.questionFileList.filter(child => child.gaode_longitude == item.gaode_longitude && child.gaode_latitude == item.gaode_latitude)
              if (!centerPoint) {
                centerPoint = point
                me.addFileMarker(point,item,filter.length,'center')
              }else{
                me.addFileMarker(point,item,filter.length)
              }
            }
          })
        })
      },
      addFileMarker(point, item, num, center) {
        let me=this
        let icon = new AMap.Icon({
          // 图标尺寸
          size: new AMap.Size(25,25),
          // 图标的取图地址
          image: require('../../assets/img/marker-img.png'),
          // 图标所用图片大小
          imageSize: new AMap.Size(25, 25),
        });
        let marker =new AMap.Marker({
          position: point,
          icon: icon,
          offset: new AMap.Pixel(0, -0)
        });
        marker.setDraggable(true)
        marker.setLabel({
          offset: new AMap.Pixel(0, -20),  //设置文本标注偏移量
          content: "<div class='label-info'>"+(item.location+(num>1?('('+num+'张)'):''))+"</div>", //设置文本标注内容
          direction: 'right' //设置文本标注方位
        });
        marker.setMap(this.map);
        console.log(center)
        if(center){
          me.map.setZoomAndCenter(10,point)
        }
      },
      examineScoreblur() {
        let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
        let totalExamineScore = 0
        ruleForm.filterQuestionList.map(item => {
          if (parseInt(item.examineScore)) {
            totalExamineScore += parseInt(item.examineScore)
          }
        })
        // if(ruleForm.driverExam!=1){
        //   if (parseInt(ruleForm.manyiExamineScore)) {
        //     totalExamineScore += parseInt(ruleForm.manyiExamineScore)
        //   }
        //   if (parseInt(ruleForm.awareExamineScore)) {
        //     totalExamineScore += parseInt(ruleForm.awareExamineScore)
        //   }
        // }
        if (parseInt(ruleForm.manyiExamineScore)) {
          totalExamineScore += parseInt(ruleForm.manyiExamineScore)
        }
        if (parseInt(ruleForm.awareExamineScore)) {
          totalExamineScore += parseInt(ruleForm.awareExamineScore)
        }
        ruleForm.totalExamineScore = totalExamineScore
        this.ruleForm = Object.assign({}, ruleForm)
      },
      checkScoreblur() {
        let ruleForm = JSON.parse(JSON.stringify(this.ruleForm))
        let totalCheckScore = 0
        ruleForm.filterQuestionList.map(item => {
          if (parseInt(item.checkScore)) {
            totalCheckScore += parseInt(item.checkScore)
          }
        })
        // if(ruleForm.driverExam!=1){
        //   if (parseInt(ruleForm.manyiCheckScore)) {
        //     totalCheckScore += parseInt(ruleForm.manyiCheckScore)
        //   }
        //   if (parseInt(ruleForm.awareCheckScore)) {
        //     totalCheckScore += parseInt(ruleForm.awareCheckScore)
        //   }
        // }
        if (parseInt(ruleForm.manyiCheckScore)) {
          totalCheckScore += parseInt(ruleForm.manyiCheckScore)
        }
        if (parseInt(ruleForm.awareCheckScore)) {
          totalCheckScore += parseInt(ruleForm.awareCheckScore)
        }
        ruleForm.totalCheckScore = totalCheckScore
        this.ruleForm = Object.assign({}, ruleForm)
      },
      descChange(val) {
        if (val) {
          let child = this.ruleForm.reportDescList.find(item => item.id == val)
          if (child) {
            this.ruleForm.desc = child.content
          }
        }
      }
    }
  }
</script>

<style lang="less">
  .report-list {
    .anchorBL {
      display: none !important;
    }
  }
  .amap-logo,.amap-copyright {
    display: none !important;
  }

  .amap-marker-label{
    color: #fff!important;
    font-size: 12px!important;
    border-color: #ff6600!important;
    height: 20px!important;
    line-height: 20px!important;
    padding: 0 5px!important;
    font-family: "微软雅黑";
    background-color: #ff6600!important;
  }
</style>
