<link rel="stylesheet" href="/plugins/addon/ticket_internal_premium/template/admin/css/order.css" />
<link rel="stylesheet" href="/plugins/addon/ticket_internal_premium/template/admin/css/common/viewer.min.css">
<!-- =======内容区域======= -->
<div id="content" class="template" v-cloak>
  <com-config class="ticket_detail">
    <t-loading attach="#content" size="small" :loading="pageLoading"></t-loading>
    <div class="detail-box" ref="scrollDiv">
      <div class="top-box">
        <t-divider class="reply-divider" align="left">{{lang.order_detail}}</t-divider>
        <div class="top-title">
          <div class="ticket-title">#{{orderDetailData.ticket_num}}-{{orderDetailData.title}}</div>
          <div class="ticket-info">
            <span class="info-title" @click="goUserPagr">{{lang.order_text18}}：<span
                class="blue-text">{{orderDetailData.username || '--'}}</span></span>
            <span class="info-title">{{lang.order_text19}}：<span class="info-item">{{ orderDetailData.create_time ?
                formatDate(orderDetailData.create_time) : '--'}}</span></span>
            <span class="info-title">{{lang.order_text20}}：<span
                class="info-item">{{orderDetailData.distanceTime}}</span></span>
            <span class="log-btn" @click="handelLog"
              v-permission="'auth_addon_ticket_internal_premium_log'">{{lang.order_text21}}</span>
          </div>
        </div>
        <div class="select-box">
          <div>
            <span>{{lang.order_text22}}：</span>
            <span class="host-div">
              <template v-if="product_obj_list.length !==0">
                <span v-for="(item,index) in product_obj_list" :key="item.id" class="host-item"
                  @click="goProductDetail(item)">
                  {{item.showName}}
                  <span v-if="(index !== product_obj_list.length - 1) && product_obj_list.length !== 1">、</span>
                </span>
              </template>
              <span class="host-item" v-else>--</span>
            </span>
          </div>
          <div>
            <span>{{lang.order_text165}}：</span>
            <span class="host-div">
              <span class="host-item" v-if="orderDetailData.ticket_id !== 0"
                @click="goTicketDetail(orderDetailData.ticket_id)">{{orderDetailData.ticket_title}}
              </span>
              <span class="host-item" v-else>--</span>
            </span>

          </div>

          <div>
            <span>{{lang.order_text65}}：</span>
            <t-tree-select ref="single-tree-select" style="width: 240px; margin-right: 20px;" v-model="params.type_id"
              :data="departmentList" :tree-props="{ expandAll: true, valueMode: 'onlyLeaf'}"
              :placeholder="lang.please_search_order_type">
              <template #value-display="{ value }">
                <div v-if="getNodePath(value)">{{ getNodePath(value) }}</div>
                <div v-else>{{ initNodeName }}</div>
              </template>
            </t-tree-select>
          </div>
          <div>
            <span>{{lang.order_text25}}：</span>
            <t-select class="select-240 no-mar" :placeholder="lang.please_search_order_status" clearable
              v-model="params.status" :keys="{ label: 'name', value: 'id'}" :options="order_status_options">
            </t-select>
          </div>
          <div class="save-btn">
            <t-button @click="handelEditOrderStatus" :loading="editLoding"
              v-permission="'auth_addon_ticket_internal_premium_ticket_save'">{{lang.order_text13}}</t-button>
          </div>
        </div>
      </div>
      <div class="bottom-box">
        <t-divider class="reply-divider" align="left">{{lang.order_text26}}</t-divider>
        <t-list class="reply-list">
          <t-list-item v-for="(item, index) in replyList" :key="item.id + 't' + index">
            <div class="star-box"
              v-if="item.type === 'star' && (orderDetailData.show_score === 1 || (orderDetailData.show_score === 0 && orderDetailData.satisfaction !== ''))">
              <div class=" star-text" v-if="orderDetailData.attitude === ''">{{lang.order_text140}}</div>
              <div class="star-text" v-else>{{lang.order_text141}}</div>
              <div class="star-main">
                <div class="star-item">
                  <div class="star-title">{{lang.order_text100}}</div>
                  <t-rate v-model="starObj.satisfaction" allow-half color="#FFC329" size="24px"
                    :disabled="orderDetailData.satisfaction !== ''"></t-rate>
                </div>
                <div class="star-item">
                  <div class="star-title">{{lang.order_text101}}</div>
                  <t-rate v-model="starObj.attitude" allow-half color="#FFC329" size="24px"
                    :disabled="orderDetailData.attitude !== ''"></t-rate>
                </div>
                <div class="star-item">
                  <div class="star-title">{{lang.order_text102}}</div>
                  <t-rate v-model="starObj.processing_time" allow-half color="#FFC329" size="24px"
                    :disabled="orderDetailData.processing_time !== ''"></t-rate>
                </div>
              </div>
              <t-button class="send-btn" @click="starSubmit" :loading="starLoading"
                v-if="orderDetailData.show_score === 1">{{lang.order_text138}}</t-button>
            </div>
            <div class="reply-item" v-if="item.type !== 'star'">
              <div class=" reply-top" v-if="orderDetailData.post_admin_id > 0 && item.id == 0">
                <span class="reply-user red-text">{{lang.order_text28 }}</span>
                <span class="user-name" :class="item.client_id ? 'link-style' : ''"
                  @click="goClientPage(item.client_id)">{{item.type === 'Client' ? item.client_name : item.type ===
                  'Admin' ? item.admin_name : item.name ? item.name : '--'}}</span>
              </div>
              <div class="reply-top" v-else>
                <span class="reply-user"
                  :class="item.type === 'Client' ? 'green-text' : item.type === 'Admin' ? 'red-text' : 'pink-text'">{{item.type
                  === 'Client' ? lang.order_text27 : item.type === 'Admin' ? lang.order_text28 : lang.order_text29
                  }}</span>
                <span class="user-name" :class="item.client_id ? 'link-style' : ''"
                  @click="goClientPage(item.client_id)">{{item.type === 'Client' ? item.client_name : item.type ===
                  'Admin' ? item.admin_name : item.name ? item.name : '--'}}</span>
              </div>
              <div class="reply-main">
                <div class="reply-middle"
                  :class="item.type === 'Client' ? 'green-bg' : item.type === 'Admin' ? 'blue-bg' : 'pink-bg'"
                  @mouseover="mouseOver(item)" @mouseleave="mouseLeave(item)">
                  <div v-html="item.content" @click="hanldeImage($event)" class="replu-conten"></div>
                  <template v-if="item.type === 'notes'">
                    <div class="text-btn" v-show="item.isShowBtn && item.id != 0"
                      v-permission="'auth_addon_ticket_internal_premium_notes_update_and_delete'">
                      <t-button shape="circle" class="edit-btn" variant="text" @click="editItem(item)">
                        <t-icon name="edit-1" size="small" style="color:#1862DC" />
                      </t-button>
                      <t-button shape="circle" variant="text" @click="deleteItem(item)">
                        <t-icon name="delete" size="small" style="color:#FF0000" />
                      </t-button>
                    </div>
                  </template>
                  <template v-else>
                    <div class="text-btn" v-show="item.isShowBtn && item.id != 0"
                      v-permission="'auth_addon_ticket_internal_premium_ticket_reply_update_and_delete'">
                      <t-button shape="circle" class="edit-btn" variant="text" @click="editItem(item)">
                        <t-icon name="edit-1" size="small" style="color:#1862DC" />
                      </t-button>
                      <t-button shape="circle" variant="text" @click="deleteItem(item)">
                        <t-icon name="delete" size="small" style="color:#FF0000" />
                      </t-button>
                    </div>
                  </template>
                </div>
                <div class="reply-bottom">
                  <div v-if="item.attachment && item.attachment.length > 0">
                    <div class="reply-list-attachment-item" v-for="(f,i) in item.attachment" :key="i"
                      @click="clickFile(f)">
                      <span :title="f.name">
                        <t-icon name="file-paste" size="small" style="color:#9696A3"></t-icon>{{f.name}}
                      </span>
                    </div>
                  </div>
                </div>
                <div class="time-div"><span>{{formatDate(item.create_time)}}</span></div>
              </div>
            </div>
          </t-list-item>
        </t-list>
      </div>

      <div class="relply-input">
        <!-- <textarea id="tiny" name="content" v-model="replyData"></textarea> -->
        <com-tinymce ref="comTinymce"></com-tinymce>
      </div>
      <div class="btn-box">
        <div>
          <template v-if="!isAddNotes">
            <t-button class="add-btn" @click="addNotes" v-show="!isEditing"
              v-if="$checkPermission('auth_addon_ticket_internal_premium_notes_create')">{{lang.order_text30}}
            </t-button>
            <t-button class="re-btn" @click="replayVisible = true"
              v-if="$checkPermission('auth_addon_ticket_internal_premium_use_prereply')">{{lang.order_text31}}
            </t-button>
            <t-button class="add-btn"
              v-if="orderDetailData.show_finish === 1 && $checkPermission('auth_addon_ticket_internal_premium_handle_complete')"
              v-show="!isEditing" @click="handelVisible = true;">
              <t-tooltip :content="lang.order_text83" theme="light">
                <span style="display: flex; align-items: center; ">{{lang.order_text82}} <t-icon
                    name="help-circle"></t-icon></span>
              </t-tooltip>
            </t-button>
          </template>
        </div>
        <div v-if="isEditing">
          <div>
            <t-button class="ok-btn" @click="handelEdit" :loading="editLoding">{{lang.order_text32}}</t-button>
            <t-button theme="default" class="canle-btn" @click="cancelEdit">{{lang.order_text33}}</t-button>
          </div>
        </div>
        <div v-else-if="isAddNotes">
          <div>
            <t-button class="ok-btn" @click="handelAddNotes" :loading="addNotesLing"
              v-if="$checkPermission('auth_addon_ticket_internal_premium_notes_create')">{{lang.order_text30}}</t-button>
            <t-button theme="default" class="canle-btn" @click="cancelAddNotes">{{lang.order_text33}}</t-button>
          </div>
        </div>
        <div v-else>
          <div>
            <t-button class="send-btn" @click="submitReply" :loading="sendLoading"
              v-if="$checkPermission('auth_addon_ticket_internal_premium_ticket_reply')">{{lang.order_text34}}
            </t-button>
            <t-button theme="default" @click="goList">{{lang.order_text35}}</t-button>
          </div>
        </div>
      </div>
    </div>

    <t-back-top container=".area" :visible-height="0" style="position: fixed" :offset="['24px', '245px']"
      :duration="200">
      <template #content>
        <div>
          <t-icon name="backtop" size="28"></t-icon>
          <div>{{lang.order_text80}}</div>
        </div>
      </template>
    </t-back-top>

    <t-back-top :visible-height="0" style="position: fixed" :offset="['24px', '165px']" :duration="200">
      <template #content>
        <div @click="goBotoom" class="center-box">
          <t-icon name="backtop" size="28" style="transform:rotate(180deg);"></t-icon>
          <div>{{lang.order_text81}}</div>
        </div>
      </template>
    </t-back-top>

    <!-- 删除弹窗 -->
    <t-dialog :visible.sync="deleteVisible" :header="lang.order_text36" :body="lang.order_text37"
      @confirm="handelDelete" @close="deleteVisible = false">
    </t-dialog>
    <!-- 日志记录弹窗 -->
    <t-dialog :header="lang.order_text21" placement="center" :visible.sync="logVisible" width="800" :footer="false">
      <t-table :pagination="pagination" @page-change="onPageChange" row-key="index" :data="logList" :columns="columns">
        <template #description="slotProps">
          <div class="description-box" v-html="slotProps.row.description"></div>
        </template>
        <template #create_time="slotProps">
          <div>{{formatDate(slotProps.row.create_time)}}</div>
        </template>
      </t-table>
    </t-dialog>
    <t-dialog :header="lang.order_text84" placement="center" :visible.sync="handelVisible" @confirm="handelProcessed"
      @close="handelVisible = false; closeOrder = false;">
      <t-checkbox v-model="closeOrder">{{lang.order_text85}}</t-checkbox>
    </t-dialog>
    <!-- 预设回复弹窗 -->
    <t-dialog :header="lang.order_text38" :placement="top" :close-btn="false" :confirm-btn="null" :top="'20%'"
      :visible.sync="replayVisible" width="1300">
      <div class="replay-box">
        <div class="replay-item" @click="usePrePlay(item)" v-for="item in prereplyList" :key="item.id"
          v-html="item.content"></div>
      </div>
    </t-dialog>
    <div>
      <img id="viewer" :src="preImg" alt="">
    </div>
  </com-config>
</div>
<!-- =======页面独有======= -->
<script src="/plugins/addon/ticket_internal_premium/template/admin/js/lang.js"></script>

<script src="/plugins/addon/ticket_internal_premium/template/admin/api/order.js"></script>
<script src="/plugins/addon/ticket_internal_premium/template/admin/js/ticket_internal_detail.js"></script>
<script src="/tinymce/tinymce.min.js"></script>
<script src="/plugins/addon/ticket_internal_premium/template/admin/js/xss.js"></script>
<script src="/{$template_catalog}/template/{$themes}/components/comTinymce/comTinymce.js"></script>
<script src="/plugins/addon/ticket_internal_premium/template/admin/js/common/viewer.min.js"></script>