<!--ticket.wxml-->
<navigation-bar title="工单详情" back="{{true}}" color="black" background="white"></navigation-bar>

<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">{{ ticket.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>
          <view class="flex" wx:if="{{property == 'review'}}">
            <view class="label">关联工单</view>
            <view class="value">{{relation}}</view>
          </view>
          <view class="flex">
            <view class="label">计划日期</view>
            <view class="value">{{ticket.timestamp}}</view>
          </view>
          <view class="flex">
            <view class="label">完成日期</view>
            <view class="value">{{ticket.completetime}}</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-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>
    </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">
      <view class="card-title">
        {{propertyText}}
      </view>

      <view class="textarea">
        <view class="label">事件描述</view>
        <textarea class="textarea-input" value="{{description}}" data-attr="description" bindinput="handleTicketInput" auto-height placeholder="请输入" disabled="{{editDisable}}" />
      </view>
      <view class="textarea">
        <view class="label">处理过程</view>
        <textarea class="textarea-input" value="{{process}}" data-attr="process" bindinput="handleTicketInput" auto-height placeholder="请输入" disabled="{{editDisable}}" />
      </view>
      <view class="textarea">
        <view class="label">事件结果</view>
        <textarea class="textarea-input" value="{{result}}" data-attr="result" bindinput="handleTicketInput" auto-height placeholder="请输入" disabled="{{editDisable}}" />
      </view>
      <view class="textarea">
        <view class="label">客户反馈</view>
        <textarea class="textarea-input" value="{{feedback}}" data-attr="feedback" bindinput="handleTicketInput" auto-height placeholder="请输入" disabled="{{editDisable}}" />
      </view>
    </view>
    <view class="section">现场图片</view>
    <view class="card-photo flex flex-wrap">
      <view class="card-photo-item" wx:for="{{images}}" wx:for-item="img" wx:key="name">
        <image class="photo" src="{{img.url}}" data-src="{{img.url}}" bind:tap="openPreview" />
        <view class="card-photo-item-remove" wx:if="{{!editDisable}}" data-val="{{img.name}}" bind:tap="showImgRemoveConfirm">
          <image class="img" src="{{ALI_OSS_ROOT}}/common/close-circle-filled.png" alt="" />
        </view>
      </view>
      <view class="card-photo-item upload" wx:if="{{!editDisable}}" bind:tap="uploadPhoto">
        <t-icon name="add" size="48rpx" />
      </view>
    </view>
  </view>

  <view class="card" wx:if="{{(status == 'denied' || status == 'create') && btnStep == 1}}">
    <view class="card-essential">
      <view class="box flex flex-v-center flex-between">
          <view class="label">是否检查无误，确认提交</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' : ''}}" theme="primary" size="large" bindtap="handleTicketPreivew">预览</t-button>
        <t-button class="btn-item submit {{editDisable ? 'disabled' : ''}}" data-status="create" theme="primary" size="large" bindtap="doneSubmit" loading="{{btnStatus == 'create' && btnLoading}}" disabled="{{editDisable}}">保存</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>
  
  <view class="padder" />
  <view class="padder" />
</scroll-view>

  <t-image-viewer
    showIndex="{{true}}"
    visible="{{previewVisible}}"
    images="{{previewImages}}"
    bind:close="onPreviewClose"
  ></t-image-viewer>
  
  <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>