<div *ngIf="debug">
  标注：<input id="markerText" type="text">
  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> 

<div id="baidu-map"></div>
<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>
        </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>

<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>添加marker</h1>
        <p>marker 名称: <input type="text" [(ngModel)]="marker.name" /></p>
        <p>子标题 名称: <input type="text" [(ngModel)]="marker.mark" /></p>
        <p>divStyle:
          <input [(colorPicker)]="marker.divStyle" [style.background]="marker.divStyle"/>
      </p>
        <p>coordinate: <input type="text" [(ngModel)]="marker.coordinate" /></p>
      
 

    
        <button (click)="addMarker(marker)">添加</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="tooltiptextx">视频监控</span>
  </div>
  <div class="tooltip">
    <img alt="视频监控"  class="tooltip" src="/assets/baseline-security.svg">
  
    <span class="tooltiptextx">质量安全监管
      </span>
  </div>
  <div class="tooltip">
    <img alt="视频监控"  class="tooltip" src="/assets/baseline-assessment.svg">
    <span class="tooltiptextx">建设程序监管        </span>
  </div>
  <div class="tooltip">
    <img alt="视频监控"  class="tooltip" src="/assets/baseline-featured_play.svg">
    <span class="tooltiptextx">投资监管</span>
  </div>
  <div class="tooltip">
    <img alt="视频监控"  class="tooltip" src="/assets/baseline-table_chart-24px.svg">
    <span class="tooltiptextx">造价监管</span>
    

  </div>

</div>