<!--ticket.wxml-->
<navigation-bar title="工单详情" back="{{true}}" color="black" background="white"></navigation-bar>
<!-- <page-meta page-style="height:{{navHeight}}rpx; padding-top:{{navTop}}rpx;">
  <navigation-bar title="工单详情" back="{{true}}" color="black" background="white"></navigation-bar>
</page-meta> -->
<block wx:if="{{loading}}">
  <view class="card skeleton">加载中...</view>
</block>
<block wx:else>
<scroll-view class="scrollarea" scroll-y scroll-top="{{scrollTop}}" type="list">
  <t-notice-bar
    visible="{{btnStep == 1}}"
    prefixIcon="sound"
    theme="success"
    marquee="{{marquee}}"
    content="请对工单进行仔细检查"
  ></t-notice-bar>
  <view class="padder" />
  <view class="card">
    <view class="card-essential">
      <view class="title text-cut flex flex-v-center">{{ projectTitle }} <view class="property {{ property }}">{{propertyText}}</view></view>
      
      <t-row class="row" gutter="16">
        <t-col span="18" class="row-item">
          <view class="flex">
            <view class="label">工单编号</view>
            <view class="value">{{ticket.no}}</view>
          </view>
        </t-col>
        <t-col span="6" class="row-item">
          <view class="status create" wx:if="{{status === 'create'}}">
            <text class="status-text">待提交</text>
            <image class="status-icon" src="{{ALI_OSS_ROOT}}/wx/right-circle-blue.png" />
          </view>
          <view class="status pending" wx:elif="{{status === 'pending'}}">
            <text class="status-text">待审核</text>
            <image class="status-icon" src="{{ALI_OSS_ROOT}}/wx/right-circle-yellow.png" />
          </view>
          <view class="status approved" wx:elif="{{status === 'approved'}}">
            <text class="status-text">已通过</text>
            <image class="status-icon" src="{{ALI_OSS_ROOT}}/wx/right-circle-green.png" />
          </view>
          <view class="status denied" wx:elif="{{status === 'denied'}}">
            <text class="status-text">已驳回</text>
            <image class="status-icon" src="{{ALI_OSS_ROOT}}/wx/right-circle-red.png" />
          </view>
          <view class="status done" wx:else>
            <text class="status-text">已完成</text>
            <image class="status-icon" src="{{ALI_OSS_ROOT}}/wx/right-circle-green.png" />
          </view>
        </t-col>
      </t-row>
      <t-row class="row" gutter="16">
        <t-col span="24" class="row-item">
          <view class="flex">
            <view class="label">计划日期</view>
            <view class="value">{{timestamp}}</view>
          </view>
          <view class="flex">
            <view class="label">备注</view>
            <view class="value">{{remark}}</view>
          </view>
          <view class="flex" wx:if="{{status === 'denied'}}">
            <view class="label">驳回原因</view>
            <view class="value text-danger">{{reason}}</view>
          </view>
        </t-col>
      </t-row>
    </view>

    <view class="extra flex flex-v-center flex-wrap">
      <view class="extra-item flex flex-v-center" wx:for="{{employees}}" wx:for-item="item" wx:key="id">
        <view class="label">{{item.label}}</view>
        <view class="value">{{item.name}}</view>
      </view>
    </view>
  </view>

  <view class="card">
    <view class="card-essential short">
      <view class="card-title">
        常规巡查
      </view>
    </view>
    <view class="box flex flex-v-center" wx:if="{{editDisable}}">
      <view class="label">完成日期</view>
      <view class="date">{{completetime}}</view>
      <image class="img-cal" src="{{ALI_OSS_ROOT}}/common/calendar.png" alt="" />
    </view>
    <view class="box flex flex-v-center" wx:else bindtap="handleShow" data-attr="completetime">
      <view class="label">完成日期</view>
      <view class="date">{{completetime}}</view>
      <image class="img-cal" src="{{ALI_OSS_ROOT}}/wx/calendar.png" alt="" />
    </view>
    <view class="box flex flex-v-center">
      <view class="box-item flex flex-v-center">
        <view class="label">全职岗编制人数</view>
        <input type="text" class="input" value="{{fulltime}}" placeholder="无" data-attr="fulltime" bind:change="handleTicketInput" disabled />
      </view>
    </view>
    <view class="box flex flex-v-center">
      <view class="box-item flex flex-v-center">
        <view class="label">计时岗编制人数</view>
        <input type="text" class="input" value="{{parttime}}" placeholder="无" data-attr="parttime" bind:change="handleTicketInput" disabled />
      </view>
    </view>
    <view class="box flex flex-v-center">
      <view class="box-item flex flex-v-center">
        <view class="label">是否全勤</view>
        <t-radio-group value="{{isattendance}}" borderless t-class="box" data-attr="isattendance" bind:change="handleTicketInput" disabled="{{editDisable}}">
          <t-radio block="{{false}}" label="是" value="{{0}}" />
          <t-radio block="{{false}}" label="否" value="{{1}}" />
        </t-radio-group>
      </view>
    </view>
    <view class="box flex flex-v-center" wx:if="{{isattendance == 1}}">
      <view class="box-item flex flex-v-center">
        <view class="label">缺勤人数</view>
        <input type="text" class="input" value="{{absencecount}}" placeholder="请输入" data-attr="absencecount" bind:change="handleTicketInput" disabled="{{editDisable}}" />
      </view>
    </view>
    <view class="box flex flex-v-center" wx:if="{{isattendance == 1}}">
      <view class="box-item flex flex-v-center">
        <view class="label">缺勤原因</view>
        <input type="text" class="input" value="{{absencereason}}" placeholder="请输入" data-attr="absencereason" bind:change="handleTicketInput" disabled="{{editDisable}}" />
      </view>
    </view>

    <view class="box flex flex-col" wx:for="{{checkpatrols}}" wx:for-item="patrol" wx:key="point">
      <view class="row flex flex-v-center flex-between {{editDisable ? 'disabled' : ''}}">
        <view class="row-item label">{{ patrol.name }}</view>
        <view class="row-item value {{patrol.value === 'good' ? 'active': ''}}" data-val="good" data-attr="checkpatrols" data-id="{{patrol.point}}" bindtap="handleToogleCheckpoint">良好</view>
        <view class="row-item value {{patrol.value === 'normal' ? 'active': ''}}" data-val="normal" data-attr="checkpatrols" data-id="{{patrol.point}}" bindtap="handleToogleCheckpoint">一般</view>
        <view class="row-item value {{patrol.value === 'bad' ? 'active': ''}}" data-val="bad" data-attr="checkpatrols" data-id="{{patrol.point}}" bindtap="handleToogleCheckpoint">较差</view>
      </view>
      <view class="box-item flex flex-v-center" wx:if="{{patrol.value && patrol.value !== 'good'}}">
        <view class="label">评价理由</view>
        <input type="text" class="input" value="{{patrol.description}}" placeholder="请输入" data-attr="{{patrol.name}}" bind:change="handlePatrolInput" disabled="{{editDisable}}" />
      </view>
    </view>
  </view>

  <view class="card">
    <view class="card-essential short">
      <view class="card-title">
        点位拍照
      </view>
    </view>

    <view class="box flex flex-col" wx:for="{{checkpoints}}" wx:for-item="point" wx:key="point">
      <view class="row flex flex-v-center flex-between pb-8 {{editDisable ? 'disabled' : ''}}">
        <view class="row-item label">{{ point.name }}</view>
        <view class="row-item value {{point.value === 'good' ? 'active': ''}}" data-val="good" data-attr="checkpoints" data-id="{{point.point}}" bindtap="handleToogleCheckpoint">良好</view>
        <view class="row-item value {{point.value === 'normal' ? 'active': ''}}" data-val="normal" data-attr="checkpoints" data-id="{{point.point}}" bindtap="handleToogleCheckpoint">一般</view>
        <view class="row-item value {{point.value === 'bad' ? 'active': ''}}" data-val="bad" data-attr="checkpoints" data-id="{{point.point}}" bindtap="handleToogleCheckpoint">较差</view>
      </view>
      <view class="row flex flex-v-center flex-wrap">
        <view class="row-photo-item" wx:for="{{point.images}}" wx:for-item="img" wx:key="name">
          <image class="photo" src="{{img.url}}" data-src="{{img.url}}" bind:tap="openPreview" />
          <view class="row-photo-item-remove" wx:if="{{!editDisable}}" data-point="{{point.point}}" data-id="{{img.id}}" bind:tap="showImgRemoveConfirm">
            <image class="img" src="{{ALI_OSS_ROOT}}/common/close-circle-filled.png" alt="" />
          </view>
        </view>
        <view class="row-photo-item upload" wx:if="{{!editDisable}}" data-max="{{point.max}}" data-id="{{point.point}}" bind:tap="uploadPhoto">
          <t-icon name="add" size="48rpx" />
        </view>
      </view>
      <view class="row desc flex flex-v-center {{editDisable ? 'disabled' : ''}}">
        <view>说明：</view>
        <input type="text" class="input" value="{{point.description}}" placeholder="请输入点位描述" data-attr="{{point.name}}" bind:change="handlePointInput" disabled="{{editDisable}}" />
      </view>
    </view>
  </view>

  <view class="card" wx:if="{{(status == 'denied' || status == 'create') && btnStep == 1}}">
    <view class="card-essential">
      <view class="flex flex-v-center flex-between">
          <view>是否检查无误，确认提交</view>
          <t-radio-group value="{{btnCheck}}" borderless t-class="box" data-attr="btnCheck" bind:change="handleTicketCheck">
            <t-radio block="{{false}}" label="是" value="{{true}}" />
            <t-radio block="{{false}}" label="否" value="{{false}}" />
          </t-radio-group>
      </view>
    </view>
  </view>

  <view class="btn flex flex-v-center">
    <block wx:if="{{ status == 'denied' || status == 'create' }}">
      <block wx:if="{{btnStep == 0}}">
        <t-button class="btn-item save {{editDisable ? 'disabled' : ''}}" data-status="create" theme="primary" size="large" bindtap="doneSubmit" loading="{{btnStatus == 'create' && btnLoading}}" disabled="{{editDisable}}">保存</t-button>
        <t-button class="btn-item submit {{editDisable ? 'disabled' : ''}}" theme="primary" size="large" bindtap="handleTicketPreivew">预览</t-button>
      </block>
      <block wx:else>
        <t-button class="btn-item save {{editDisable ? 'disabled' : ''}}" theme="primary" size="large" bindtap="handleTicketBack">返回</t-button>
        <t-button class="btn-item submit {{editDisable || !btnCheck ? 'disabled' : ''}}" data-status="pending" theme="primary" size="large" bindtap="doneSubmit" loading="{{btnStatus == 'pending' && btnLoading}}" disabled="{{editDisable || !btnCheck}}">提交</t-button>
      </block>
    </block>
    <block wx:else>
      <t-button class="btn-item save {{operator.disabledBtn ? 'disabled' : ''}}" data-attr="reject" theme="primary" size="large" variant="outline" bindtap="handleShow" loading="{{btnStatus == 'denied' && btnLoading}}" disabled="{{operator.disabledBtn}}">驳回</t-button>
      <t-button class="btn-item submit {{operator.disabledBtn ? 'disabled' : ''}}" data-status="done" theme="primary" size="large" bindtap="doneApprove" loading="{{btnStatus == 'done' && btnLoading}}" disabled="{{operator.disabledBtn}}">通过</t-button>
    </block>
  </view>
</scroll-view>
  <t-image-viewer
    showIndex="{{true}}"
    visible="{{previewVisible}}"
    images="{{previewImages}}"
    bind:close="onPreviewClose"
  ></t-image-viewer>

<t-calendar visible="{{completetimeVisible}}" bind:confirm="selectDate" data-attr="completetime" bind:close="handleHide" min-date="{{minDateQuery}}" defaultValue="{{defaultDateQuery}}" />

<t-popup visible="{{rejectVisible}}" placement="bottom">
  <view class="popup short">
    <view class="popup-title flex flex-v-center flex-between">
      <view class="popup-btn" data-attr="reject" bindtap="handleHide">Cancel</view>
      <view class="popup-txt">驳回原因</view>
      <view class="popup-btn" data-attr="reject" bindtap="doneReject">Confirm</view>
    </view>
    <view class="popup-search">
      <textarea class="popup-textarea-input" value="{{reason}}" data-attr="reason" bindinput="handleTicketInput" auto-height placeholder="请输入驳回原因" />
    </view>
  </view>
</t-popup>

<t-dialog
  visible="{{confirmVisible}}"
  content="删除后无法恢复，是否确认删除?"
  cancel-btn="取消"
  confirm-btn="确定"
  bind:confirm="imgConfirmYes"
  bind:cancel="imgConfirmNo"
/>

</block>