
<baidu-map #map [options]="opts">
  <polyline [points]="points" [options]="polylineOptions" (loaded)="polylineLoaded($event)"
    (clicked)="polylineClicked($event)"></polyline>
</baidu-map>

<div class="main">
  <div class="left">
    <fieldset>
      <legend (click)="toHighWay()">高速公路:</legend>

      <div class="proj-info" *ngIf="!highShow">
        <label>
          <div>

            项目总数：
          </div>
          <div>
            {{staticHighWay.total}}个
          </div>
        </label>
        <label>
          <div>

            总建设里程：
          </div>
          <div>
            {{staticHighWay.mileage}}Km
          </div>
        </label>
        <label>
          <div>

            总投资：
          </div>
          <div>
            {{staticHighWay.capital}}亿
          </div>
        </label>
      </div>
      <section *ngIf="highShow" class="sub">
        <div class="item" *ngFor="let prj of projects;let i=index">
          <label (click)="highLight(i,prj,'p');setPrj(prj);">{{prj.name}} </label>
          <!-- <section class="sub">
                    <label (click)=" highLight(i,sec,'s');setCamera(sec);" *ngFor="let sec of prj.secs;let i=index">{{sec.name}}
                    
                    </label>
                  </section>  -->
        </div>
      </section>

    </fieldset>
    <fieldset>
      <legend>普通干线:</legend>

      <div class="proj-info" *ngIf="!normalShow">
        <label>
          <div>

            项目总数：
          </div>
          <div>
            {{staticNormal.total}}个
          </div>
        </label>
        <label>
          <div>

            总建设里程：
          </div>
          <div>
            {{staticNormal.mileage}}Km
          </div>
        </label>
        <label>
          <div>

            总投资：
          </div>
          <div>
            {{staticNormal.capital}}亿
          </div>
        </label>
      </div>
      <section *ngIf="normalShow" class="sub">

        <label (click)="highLight(i,prj)" *ngFor="let prj of normalProjects;let i=index">{{prj.name}}
        </label>
      </section>
    </fieldset>
  </div>
</div>
<!-- <div *ngIf="debug">
         theme:
         <input type="textarea" [(ngModel)]="theme">
         <button (click)="setTheme(theme)">set theme</button>
         set curive:
         <input type="checkbox" [(ngModel)]="curive">
         <input type="number" [(ngModel)]="curiveLength">
        <select [(ngModel)]="type" (ngModelChange)="typeChange($event)">
          <option value="0">project</option>
          <option value="1">course</option>
          <option value="2">SECTION</option>
        </select>
        <select [(ngModel)]="currentCouseId">
          <option *ngFor="let c of courses" [value]="c.id" >{{c.name}}</option>
        </select>
        <select [(ngModel)]="currentProjId" (ngModelChange)="proj2Change($event,1)">
            <option *ngFor="let c of projects1"  [value]="c.id" >{{c.name}}</option>
          </select>
          <select [(ngModel)]="currentProjId" (ngModelChange)="proj2Change($event,2)">
              <option *ngFor="let c of projects2" [value]="c.id" >{{c.name}}</option>
            </select>
      </div> -->
<!-- <button (click)="openDialog('custom-modal-1')" >新增项目</button> -->
<!-- <button  (click)="toHighWay()">高速公路</button> -->
<!-- <div class="proj-info" *ngIf="!highShow">
        <label>
          <div>

            项目总数：
        </div>
        <div>
          {{staticHighWay.total}}个
        </div>
      </label>
      <label>
        <div>

          总建设里程：
      </div>
      <div>
        {{staticHighWay.mileage}}Km
      </div>
    </label>
    <label>
      <div>

        总投资：
    </div>
    <div>
      {{staticHighWay.capital}}亿
    </div>
  </label>
      </div> -->

<!-- </section>
      <section>
          <button [ngClass]="{focus:normalShow}" (click)='toNormal()'>普通干线
            </button>

            <div  *ngIf="!normalShow">

                <label>
                    <div>
          
                        项目总数：
                  </div>
                  <div>
                    {{staticNormal.total}}个
                  </div>
                </label>
                <label>
                  <div>
          
                    总建设里程：
                </div>
                <div>
                  {{staticNormal.mileage}}Km
                </div>
              </label>
              <label>
                <div>
          
                  总投资：
              </div>
              <div>
                {{staticNormal.capital}}亿
              </div>
            </label>
              </div>
            
      </section>
   </div>
  
   <div class="map">
     <div id="polylineLength"></div>
     <div id="result"></div>


   </div>
   <div class="right">
     </div> -->
<!-- <section>
          <button (click)="goToVideo()">视频监管

            </button>
          <label>监管项目:{{cameraSum.project}}个</label>
          <label>监控点总计：{{cameraSum.total}}  个 </label>

      </section>
      <section>
          <button>建设程序监管

            </button>

      </section>
      <section>
          <button>质量安全监管 </button>
          <label>年度累计完成产值:</label>
          <label>年度总目标产值：   </label>
      </section>
      <section>
          <button>造价监管

            </button>
          <label></label>
          <label> </label>
          <label></label>
      </section>  -->
<!-- <section>
          <button>数据信息
            </button>
            <label>名字：{{currProj.name}}</label>
          <label>里程：{{currProj.mileage}}</label>
          <label>投资：{{currProj.capital}}</label>
      </section>
   </div>  
</div>  


<jw-modal id="custom-modal-1">
  <h1>添加项目</h1>
  <p>项目名称: <input type="text" [(ngModel)]="proj.name" /></p>
  <p>capital: <input type="text" [(ngModel)]="proj.capital" /></p>
  <p>coordinate: <input type="text" [(ngModel)]="proj.coordinate" /></p>
  <p>course: <input type="text" [(ngModel)]="proj.course" /></p>
  <p>lineStyle: 
      <input [(colorPicker)]="proj.lineStyle" [style.background]="proj.lineStyle"/>
  </p>
  <p>lineWidth: <input type="text" [(ngModel)]="proj.lineWidth" /></p>
  <p>mileage: <input type="text" [(ngModel)]="proj.mileage" /></p>

  <button (click)="addProj(proj)">添加</button>
  <button (click)="closeModal('custom-modal-1');">Close</button>
</jw-modal>



<jw-modal id="custom-modal-2">
    <h1>添加course</h1>
    <p>courses名称: <input type="text" [(ngModel)]="course.name" /></p>
    <p>lineStyle:
        <input [(colorPicker)]="course.lineStyle" [style.background]="course.lineStyle"/>
      </p>
    <p>lineWidth: <input type="text" [(ngModel)]="course.lineWidth" /></p>
    <p>coordinate: <input type="text" [(ngModel)]="course.coordinate" /></p>
    <p>mark:
      <select [(ngModel)]="course.mark" >
        <option [value]="1">高速公路</option>
        <option [value]="2">普通干线</option>
      </select>
    </p>

    <button (click)="addCourse(course)">添加</button>
    <button (click)="closeModal('custom-modal-2');">Close</button>
  </jw-modal>

  <jw-modal id="custom-modal-3">
      <h1>添加section</h1>
      <p>section名称: <input type="text" [(ngModel)]="section.name" /></p>
      <p>projectId: <input type="text" [(ngModel)]="section.project" /></p>
      <p>lineStyle:
          <input [(colorPicker)]="section.lineStyle" [style.background]="section.lineStyle"/>
      </p>
      <p>lineWidth: <input type="text" [(ngModel)]="section.lineWidth" /></p>
      <p>coordinate: <input type="text" [(ngModel)]="section.coordinate" /></p>
      <p>mileage: <input type="text" [(ngModel)]="section.mileage" /></p>
     
  
      <button (click)="addSection(section)">添加</button>
      <button (click)="closeModal('custom-modal-3');">Close</button>
    </jw-modal>
    <jw-modal id="marker">
        <h1>添加监控</h1>
        <p>监控名称: <input type="text" [(ngModel)]="camera.name" /></p>
        <p>section: 
          <select [(ngModel)]="camera.section">
            <option *ngFor="let s of allsecs" [value]="s.id">{{s.name}}</option>
          </select>
        
        </p>
        <p>coordinate: <input type="text" [(ngModel)]="camera.coordinate" /></p>
      
       
    
        <button (click)="addCamera(camera)">添加</button>
        <button (click)="closeModal('marker');">Close</button>
      </jw-modal>-->

<div class="function">
  <div class="tooltip">
    <img alt="视频监控" (click)="goToVideo()" class="tooltip" src="/assets/video.svg">
    <span class="tooltiptext">视频监控</span>
  </div>
  <div class="tooltip">
    <img alt="视频监控" (click)="goToVideo()" class="tooltip" src="/assets/baseline-security.svg">
  
    <span class="tooltiptext">质量安全监管
      </span>
  </div>
  <div class="tooltip">
    <img alt="视频监控" (click)="goToVideo()" class="tooltip" src="/assets/baseline-assessment.svg">
    <span class="tooltiptext">建设程序监管        </span>
  </div>
  <div class="tooltip">
    <img alt="视频监控" (click)="goToVideo()" class="tooltip" src="/assets/baseline-featured_play.svg">
    <span class="tooltiptext">视频监控</span>
  </div>
  <div class="tooltip">
    <img alt="视频监控" (click)="goToVideo()" class="tooltip" src="/assets/baseline-table_chart-24px.svg">
    <span class="tooltiptext">造价监管</span>
    

  </div>

</div>