<div class="pharmacy">
  <!-- 头部 start -->
  <div class="pharmacy-header">
   <div class="pharmacy-logo">
			<div class="pharmacy-name__title">一站式服务管理平台</div>
    </div>
    <div class="pharmacy-name">
			<div class="pharmacy-title">个人报修</div>
			<div class="pharmacy-btn">
				<button class="btn default" (click)='speediness()'>快速报修</button>
			</div>
    </div>
    <div class="right">
      <div class="userInfo dropdown">
        <div class="user" (mouseenter)="showDropdown = true" (mouseleave)="showDropdown = false">
          <img src="../../assets/images/icon_keshi.png" alt="">
          <span><ng-container *ngIf="loginUser.dept"></ng-container>{{loginUser.name}}</span>
          <i class="icon_transport transport-xiala1 ml8"></i>
        </div>
        <div class="dropdown-content r8" [hidden]="!showDropdown" (mouseenter)="showDropdown = true" (mouseleave)="showDropdown = false">
          <div class="dropdownItem" (click)="etitPasswrod()">修改密码</div>
					<div class="dropdownItem" (click)="editInfo()">修改个人信息</div>
          <div class="dropdownItem" (click)="logOut()">退出</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 头部 end -->
  <div class="pharmacy-main">
    <div class="list-template pharmacy-main__list pharmacy-main__print">
			<div class="list-template__content">
			  <div class="list-template__top" nz-row>
			    <div nz-col nzLg='18' class="list-template__searchBox">
			      <div class="list-template__searchItem">
			        <span class="label width-108">报修时间区间：</span>
			        <nz-range-picker [(ngModel)]="acceptTime" nzFormat="yyyy-MM-dd HH:mm:ss"
							(ngModelChange)="changeDate($event)"></nz-range-picker>
			      </div>
						<div class="list-template__searchItem">
						  <span class="label">状态：</span>
							<nz-select class="formItem" [nzDropdownMatchSelectWidth]="false" nzServerSearch nzShowSearch nzAllowClear nzPlaceHolder="请选择状态"
							  [(ngModel)]="status">
							  <ng-container *ngFor="let option of statusData">
							    <nz-option [nzLabel]="option.name" [nzValue]="option.id"></nz-option>
							  </ng-container>
							</nz-select>
						</div>
						<div class="list-template__searchItem">
						  <span class="label">单号：</span>
							<input type="text" class="search-input" [(ngModel)]="incidentsign" nz-input placeholder="请输入单号" />
						</div>
			    </div>
			    <div nz-col nzLg="6" class="list-template__btns">
			      <button class="btn default" (click)='search()'>搜索</button>
			      <button class="btn default ml8" (click)='reset()'>重置</button>
			    </div>
			  </div>
			  <div class="list-template__bottom">
			    <nz-table class="list-template__nzTable" [nzData]="listOneData" nzSize="middle" [nzShowPagination]="false"
			      [nzLoading]="loading1">
			      <thead>
			        <tr class="thead">
								<th nzWidth="80px">序号</th>
			          <th>工单号</th>
								<th>报修内容</th>
			          <th>报修时间</th>
			          <th>状态</th>
			          <th>维修人</th>
								<th>维修人电话</th>
								<th>维修费用</th>
			          <th nzWidth="150px">操作</th>
			        </tr>
			      </thead>
			      <tbody>
			        <tr *ngFor="let data of listOneData let index = index;">
								<td>{{ index+(pageOneIndex-1) * pageSize + 1 }}</td>
			          <td>{{ data.incidentsign}}</td>
			          <td>{{ data.description}}</td>
			          <td>{{ data.startDate | date: "yyyy-MM-dd HH:mm" }}</td>
			          <td>{{ data.state?data.state.name:'无' }}</td>
								<td>{{ data.handlingPersonnelUser ? data.handlingPersonnelUser.name : "无"}}</td>
								<td>{{ data.handlingPersonnelUser ? data.handlingPersonnelUser.phone : "无"  }}</td>
								<td>{{ data.rsPrice?data.rsPrice : '-' }}</td>
			          <td>
			            <div class="coop">
										<span (click)="showAppraiseBx(data)" *ngIf="data.state && data.state.value == 'close' && !data.wxdegree">评价</span>
										<span (click)="delBx(data)" *ngIf="data.state && data.state.value=='accept'">撤销</span>
										<span (click)="detailBx(data)">查看</span>
			            </div>
			          </td>
			        </tr>
			      </tbody>
			    </nz-table>
			    <div class="list-template__pagination">
			      <nz-pagination [(nzPageIndex)]="pageOneIndex" [(nzTotal)]="listOneLength" nzShowSizeChanger [(nzPageSize)]="pageSize"
			        (nzPageIndexChange)="getConnectList()" (nzPageSizeChange)="getConnectList()">
			      </nz-pagination>
			    </div>
			  </div>
			</div>
    </div>
  </div>
</div>

<!-- 修改密码 -->
<nz-modal [(nzVisible)]="isPwdVisible" nzTitle="修改密码" (nzOnCancel)="pwdHandleCancel()" (nzOnOk)="pwdHandleOk()" [nzOkLoading]="pwdIsOkLoading" (nzAfterOpen)="pwdAfterOpen()">
  <div>
    <label>
      原始密码:
      <nz-input-group [nzSuffix]="suffixTemplate">
        <input minlength="9" [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="原始密码" [(ngModel)]="upModalData.pwdOld" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
      </ng-template>
    </label>
    <label>新密码:
      <div style="display: flex;">
        <nz-input-group [nzSuffix]="suffixTemplate">
          <input minlength="9" [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="新密码" [(ngModel)]="upModalData.newPwd" (ngModelChange)="blurNewPwd()" />
        </nz-input-group>
        <ng-template #suffixTemplate>
          <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
        </ng-template>
        <div class="red" style="display: flex;justify-content: center;align-items: center;padding-left: 5px;" *ngIf="enoughRegFlag">弱</div>
        <div style="display: flex;justify-content: center;align-items: center;padding-left: 5px;" *ngIf="mediumRegFlag">中</div>
        <div class="green" style="display: flex;justify-content: center;align-items: center;padding-left: 5px;" *ngIf="strongRegFlag">强</div>
      </div>
    </label>
    <div class="red">强密码需包含大小写字母、数字、特殊字符，长度至少9个字符</div>
    <label>确认新密码:
      <nz-input-group [nzSuffix]="suffixTemplate">
        <input minlength="9" [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="确认新密码" [(ngModel)]="upModalData.newPwd2" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon [nzType]="passwordVisible ? 'eye-invisible' : 'eye'" (click)="passwordVisible = !passwordVisible"></i>
      </ng-template>
    </label>
  </div>
</nz-modal>

<!-- 修改个人信息 -->
<div class="save add display_flex align-items_center justify-content_flex-center" *ngIf="infoModal">
  <div class="modalBody">
    <div class="title">修改个人信息<i class="icon_transport transport-guanbi" (click)="hideModal()"></i>
    </div>
    <overlay-scrollbars #osComponentRef1 class="content">
      <form nz-form [formGroup]="validateForm" class="addForm" (ngSubmit)="submitForm()">
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">姓名</nz-form-label>
          <nz-form-control nzErrorTip="请填写姓名!">
            <nz-input-group>
              <input type="name" nz-input formControlName="name" placeholder="请填写姓名" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="account">工号</nz-form-label>
          <nz-form-control nzErrorTip="请填写工号!">
            <nz-input-group>
              <input type="account" nz-input formControlName="account" placeholder="请填写工号" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>

				<nz-form-item>
				  <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="buildingId">楼栋</nz-form-label>
				  <nz-form-control nzErrorTip="请选择楼栋!">
						<nz-select [nzDropdownMatchSelectWidth]="false" type="buildingId" nzAllowClear
						  formControlName="buildingId" nzPlaceHolder="请选择楼栋" (ngModelChange)="buildingChange($event)">
						  <nz-option nzLabel="{{data.buildingName}}" nzValue="{{data.id}}" *ngFor="let data of buildingList">
						  </nz-option>
						</nz-select>
				  </nz-form-control>
				</nz-form-item>

				<nz-form-item>
				  <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="floorId">楼层</nz-form-label>
				  <nz-form-control nzErrorTip="请选择楼层!">
				    <nz-select [nzDropdownMatchSelectWidth]="false" type="floorId" nzAllowClear
				      formControlName="floorId" nzPlaceHolder="请选择楼层">
				      <nz-option nzLabel="{{data.floorName}}" nzValue="{{data.id}}" *ngFor="let data of allFloorList">
				      </nz-option>
				    </nz-select>
				  </nz-form-control>
				</nz-form-item>

				<nz-form-item>
				  <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="address">详细地址</nz-form-label>
				  <nz-form-control>
				    <nz-input-group>
				      <input type="text" nz-input formControlName="address" placeholder="请填写详细地址" />
				    </nz-input-group>
				  </nz-form-control>
				</nz-form-item>

        <nz-form-item>
          <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phone">联系电话</nz-form-label>
          <nz-form-control>
            <nz-input-group>
              <input type="phone" nz-input formControlName="phone" placeholder="请填写联系电话" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
      </form>
    </overlay-scrollbars>
    <div class="display_flex justify-content_flex-center">
      <button nzType="primary" nz-button (click)="submitForm()" [nzLoading]="btnLoading">确认</button>
      <button class="btn cancel" nz-button nzType="default" (click)="hideModal()">取消</button>
    </div>
  </div>
</div>

<!-- 操作成功/失败提示框 -->
<app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
  [info]="promptInfo" (closeModel)="closeModel()"></app-prompt-modal>


<div class="mask-style" *ngIf="isSpinning">
	<nz-spin nzSimple class="spin-style"></nz-spin>
</div>

<router-outlet (deactivate)="getConnectList()"></router-outlet>

<!-- 快速报修 -->
<div class="commonModal display_flex justify-content_flex-center align-items_center" *ngIf="bxModal">
  <div class="modalBody">
    <div class="title">一键报修<i class="icon_transport transport-guanbi" (click)="hideBxModal()"></i>
    </div>
    <div class="content">
      <form nz-form [formGroup]="validateBxForm" class="bxFormAdd" (ngSubmit)="confirmBx()">
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="4" nzRequired nzFor="description">故障描述</nz-form-label>
          <nz-form-control>
            <nz-input-group style="width:442px;">
              <textarea nz-input formControlName="description" rows="4" placeholder="请输入故障描述"></textarea>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
				<nz-form-item>
					<nz-form-label [nzSm]="4" [nzXs]="4" nzFor="description">图片上传</nz-form-label>
					<nz-form-control style="display: inline-block;" *ngIf="repairImgs.length === 0">
					  <nz-upload nzListType="picture-card" [(nzFileList)]="fileList"
						[nzShowUploadList]="showUploadList" [nzPreview]="handlePreview"
						nzFileType="image/jpeg,image/png" nzAccept="image/jpeg,image/png"
						[nzShowButton]="fileList.length < 3"
						[nzBeforeUpload]="beforeUpload" [nzAction]="temporarilyUrl"
						[nzSize]="10240">
					    <i nz-icon nzType="plus"></i>
					    <div class="ant-upload-text">上传照片</div>
					  </nz-upload>
					  <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible = false">
					    <ng-template #modalContent>
					      <img [src]="previewImage" [ngStyle]="{ width: '100%' }" />
					    </ng-template>
					  </nz-modal>
					  <div class="tips">只支持.jpg.png.jpg 格式，最多上传3 张图片。</div>
					</nz-form-control>
					<div class="thumbList" *ngIf="repairImgs.length > 0">
					  <div class="thumb" *ngFor="let item of repairImgs;let index = index;" (click)="previewImageHandler(repairImgs, index)"><img [src]="item.thumbFilePath" alt=""></div>
					</div>
				</nz-form-item>
        <nz-form-item>
          <nz-form-label [nzSm]="4" [nzXs]="4" nzRequired nzFor="contacts">联系人</nz-form-label>
          <nz-form-control style="display: inline-block;">
            <nz-input-group>
              <input style="width:168px;" class="mr8" nz-input formControlName="contacts" placeholder="请输入联系人" />
            </nz-input-group>
          </nz-form-control>

          <nz-form-label nzRequired nzFor="contactsInformation">联系电话</nz-form-label>
          <nz-form-control style="display: inline-block;">
            <nz-input-group>
              <input style="width:185px;" nz-input formControlName="contactsInformation" placeholder="请输入联系电话" />
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item style="display: inline-block;vertical-align:bottom;" class="last">
          <nz-form-label [nzSm]="4" [nzXs]="4" nzRequired nzFor="building">详细地址</nz-form-label>
          <nz-form-control style="display: inline-block;">
            <nz-select [nzDropdownMatchSelectWidth]="false" style="width:120px;" class="mr8" type="building"
              nzShowSearch formControlName="building" nzPlaceHolder="请选择楼栋"
              (ngModelChange)="changeBuilding($event)">
              <nz-option [nzLabel]="data.buildingName" [nzValue]="data.id" *ngFor="let data of buildings">
              </nz-option>
            </nz-select>
          </nz-form-control>
          <nz-form-label [nzSm]="4" [nzXs]="4" nzRequired nzFor="floor" hidden></nz-form-label>
          <nz-form-control style="display: inline-block;">
            <nz-select [nzDropdownMatchSelectWidth]="false" style="width:120px;" class="mr8" type="floor" nzShowSearch
             formControlName="floor" nzPlaceHolder="请选择楼层" [nzLoading]="floorLoading">
              <nz-option [nzLabel]="data.floorName" [nzValue]="data.id" *ngFor="let data of floors"></nz-option>
            </nz-select>
          </nz-form-control>
          <nz-form-label [nzSm]="4" [nzXs]="4" nzRequired nzFor="officeAddress" hidden></nz-form-label>
          <nz-form-control style="display: inline-block;" class="address">
            <nz-input-group>
              <input class="addressFocus" style="width:185px;" nz-input formControlName="officeAddress" placeholder="请输入详细位置"/>
              <div class="addressList" *ngIf="isShowAddressList">
                <ng-container *ngIf="!addressLoading && addressList.length">
                  <div class="addressItem ellipsis-oneline" *ngFor="let item of addressList" [title]="item.name" (click)="selectAddress(item.name)">{{item.name}}</div>
                </ng-container>
                <div *ngIf="!addressLoading && !addressList.length" class="w100 h100 padding8 display_flex justify-content_flex-center align-items_center">
                  <nz-empty></nz-empty>
                </div>
                <div *ngIf="addressLoading" class="w100 h100 padding8 display_flex justify-content_flex-center align-items_center">
                  <nz-spin nzSimple></nz-spin>
                </div>
              </div>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
      </form>
    </div>
    <div class="display_flex justify-content_flex-center">
      <button nz-button nzType="primary" (click)="confirmBx()">
        确认
      </button>
      <button class="btn cancel" nz-button nzType="default" (click)="hideBxModal()">
        取消
      </button>
    </div>
  </div>
</div>

<!-- 撤销报修 -->
<app-dialog-delete
  [delModal]="delBxModal"
  (hideDelModalEvent)="hideDelBxModal()"
  [btnLoading]="btnLoading"
  (confirmDelEvent)="confirmDelBx()"
  content="您确认要撤销吗？"
></app-dialog-delete>

<!-- 报修评价模态框 -->
<div
  class="save display_flex align-items_center justify-content_flex-center appraise"
  *ngIf="appraiseModalBx"
>
  <div class="modalBody">
    <div class="title">
      评价<i
        class="icon_transport transport-guanbi"
        (click)="hideAppraiseBx()"
      ></i>
    </div>
    <div class="content">
      <div class="jiTit borderB">您的评价对我们至关重要，感谢您！</div>
      <br />
      <div class="star">
        <div
          nz-row
          class="alignC display_flex justify-content_flex-center align-items_center"
        >
          <div nz-col nzSpan="4">星级：</div>
          <div nz-col nzSpan="20">
            <nz-rate [(ngModel)]="starNumBx"></nz-rate>
          </div>
        </div>
        <div nz-row>
          <div nz-col nzSpan="4">评级：</div>
          <div nz-col nzSpan="20">
            <textarea
              rows="4"
              nz-input
              [(ngModel)]="appraiseContentBx"
            ></textarea>
          </div>
        </div>
      </div>
      <br />
    </div>
    <div class="btns display_flex justify-content_flex-center">
      <button
        nz-button
        nzType="primary"
        [nzLoading]="btnLoading"
        (click)="confirmAppraiseBx()"
      >
        确认
      </button>
      <button
        class="btn cancel"
        nz-button
        nzType="default"
        (click)="hideAppraiseBx()"
      >
        关闭
      </button>
    </div>
  </div>
