<template>
  <div class="main" v-loading="orderDetailsLoading">
    <!-- 工单处理详情页面 -->
     <section v-if="$isMobile" class="MobileMain">
        <h4>{{ $t(`work.WKDetails`) }}</h4>
          <div class="contentMobile">
            <el-row>
            <el-col :xs="24" :sm="10" :md="10" :lg="12" :xl="12">
              <p>
                <span class="orderTitle"> {{ $t(`work.WorkID`) }}:</span
                ><span class="orderContent">{{ticketDetails.id}}</span>
              </p>

            </el-col>

            <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
              <p>
                <span class="orderTitle">{{ $t(`work.mailbox`) }}:</span>
                <span class="orderContent">{{ ticketDetails.email }}</span>
              </p>

            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="10" :md="10" :lg="10" :xl="10">
              <p>
                <span class="orderTitle"> {{ $t(`work.status`) }}:</span
                ><span class="orderContent">{{ $t(handelStatus2(ticketDetails.status))  }}</span>
              </p>

            </el-col>

          </el-row>
              <!-- 故障描述 -->
        <el-row style="margin-top: 30px !important">
          <el-col>
            <h5>{{ $t(`work.describe`) }}:</h5>
            <div style="border: 1px solid rgba(0, 0, 0, 0.1); padding: 20px 10px;word-wrap: break-word;
                overflow-wrap: break-word;
                max-height: 200px;margin-top: 18px;
                overflow-y: auto;border-radius: 5px;">
              {{ ticketDetails.desc }}
            </div>
          </el-col>
        </el-row>

          <!-- 提交内容 回复内容 记录 -->
        <h5 style="margin-top:30px">{{ $t(`work.record`) }}:</h5>
        <div class="submitContent">
          <el-row style="margin: 0;">
            <div
              v-for="item in recordList"
              :key="item.time"
            style="margin-top: 20px"
            >
              <div class="submitTitle">
                <div class="userName">{{ item.name }}</div>
                <div class="time"> {{ handelTime(item.time) }}</div>
              </div>

              <div id="contentBox">
                <!-- <span  style="
                      display: inline-block;
                      width: 100%;
                      word-wrap: break-word;
                      overflow-wrap: break-word;
                      max-height: 200px;
                      overflow-y: auto;
                    "></span> -->

                    {{ item.content }}
              </div>
              <!-- 下载附件 -->
              <span
                class="downloadBox"
                v-show="item.files"
                @click="handelDownload(item.files)"
                >{{ $t(`work.downloadFile`) }}</span
              >
            </div>
          </el-row>
        </div>

      
         <!-- 已完结的订单不能操作 -->
   
         <section v-if="ticketDetails.status !== `10`" style="margin-top:30px">
            <div>
              <el-row>
                <el-col>
                  <h5 style="margin-bottom: 18px;">{{ $t(`work.continue`) }}:</h5>
                  <el-input
                    type="textarea"
                    :placeholder="$t(`work.input`)"
                    v-model="replyParams.desc"
                    resize="none"
                    :autosize="{ minRows: 2, maxRows: 6 }"
                     maxlength="250"
                     show-word-limit
                  >
                  </el-input>
                </el-col>
              </el-row>
              <el-form>
                <!-- 附件 -->
                <el-form-item style="width: 100%;">
                <div style="width: 100%">{{ $t(`work.enclosure`) }}</div>
                <div class="prompt">
                {{ $t(`work.fileType`) }}：jpg, jpeg, png, mp3, aif, aiff, wav, wma,
                mp4, avi, rmvb
              </div>
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  drag
                  action
                  multiple
                  :limit="fileLimit"
                  :on-exceed="handleExceed"
                  :on-remove="handleRemove"             
                  :file-list="fileList"
                  :on-change="handelChange"
                  show-file-list
                  :auto-upload="false"
                
                
                >
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">
                    {{ $t(`work.fileCharacters`) }}<em> {{ $t(`work.fileCharacters2`) }}</em>
                  </div>
                </el-upload>
              </el-form-item>
          
                <el-button
            
                  @click="handelResubmit"
                  type="plain"       
                  style="border-radius: 20px;"
                  class="elBtn"
                  >   {{ $t(`work.submit2`) }}</el-button
                >

                <el-button
                style="border-radius: 20px;"
                  type="plain"       
                  @click="handelEnd"
                  class="elBtn"
                  >   {{ $t(`work.endWork`) }}</el-button
                >

              </el-form>
            </div>
         </section>

         <el-dialog
            :title="$t(`work.Tips`)"
            :visible.sync="closeDialogVisible"
            width="70%"
           >
            <span>{{ $t(`work.confirmClose`) }}</span>
            <span slot="footer" class="dialog-footer">
              <el-button style="border-radius: 20px" @click="closeDialogVisible = false">{{ $t(`work.cancel`) }}</el-button>
              <el-button type="primary" :loading="orderDetailsLoading" style="border:none;border-radius: 20px" class="elBtn" @click="confirmCols">{{ $t(`work.confirm`) }}</el-button>
            </span>
          </el-dialog>

      </div>
         
      </section>



    <div class="content" v-else>
      <!-- 工单详情 -->
      <el-row type="flex" justify="end">
        <el-col class="orderDetails">
          <h3>{{ $t(`work.WKDetails`) }}</h3>
          <el-row>
            <el-col :span="12">
              <p>
                <span class="orderTitle"> {{ $t(`work.WorkID`) }}:</span
                ><span class="orderContent">{{ticketDetails.id}}</span>
              </p>
            </el-col>
            <el-col :span="12">
              <p>
                <span class="orderTitle">{{ $t(`work.mailbox`) }}:</span>
                <span class="orderContent">{{ ticketDetails.email }}</span>
              </p>
            </el-col>

           
          </el-row>
     
          <el-row>         
            <el-col :span="12">
              <p>
                <span class="orderTitle"> {{ $t(`work.status`) }}:</span
                ><span class="orderContent">{{ $t(handelStatus2(ticketDetails.status))  }}</span>
              </p>
            </el-col>
          </el-row>
        
        </el-col>
      </el-row>
     
      <!-- 故障描述 -->
      <el-row >
        <el-col>
          <h4> {{ $t(`work.describe`) }}:</h4>
          <p style="border: 1px solid rgba(0, 0, 0, 0.1); padding: 20px 10px; max-height: 200px; min-height: 100px;margin-top: 18px;         
              word-wrap: break-word;
              overflow-wrap: break-word;            
              overflow-y: auto;border-radius: 5px;">
            {{ ticketDetails.desc }}
          </p>
        </el-col>
      </el-row>
      <!-- 提交内容 回复内容 记录 -->
      <h4>{{ $t(`work.record`) }}:</h4>
      <div class="submitContent">
        <el-row style="margin: 0;">
          <div
            v-for="item in recordList"
            :key="item.time"
            style="margin-top: 20px"
          >
            <div class="submitTitle">
              <span>{{ $t(`work.user1`) }}:{{ item.name }}</span>
              <span> {{ $t(`work.time4`) }}:{{ handelTime(item.time) }}</span>
            </div>

            <div class="contentBox">
              <span  style="
                    display: inline-block;
                    width: 100%;
                    word-wrap: break-word;
                    overflow-wrap: break-word;
                    max-height: 200px;
                    overflow-y: auto;
                  ">{{ item.content }}</span>
            </div>
            <!-- 下载附件 -->
            <span class="downloadBox" v-show="item.files" @click="handelDownload(item.files)">{{ $t(`work.downloadFile`) }}</span>
          </div>
        </el-row>
      </div> 
      <!-- 已完结的订单不能操作 -->
   
      <section v-if="ticketDetails.status !== `10`">
        <div>
          <el-row>
            <el-col>
              <h4 style="margin-bottom: 18px;">{{ $t(`work.continue`) }}:</h4>
              <el-input
                type="textarea"
                :placeholder="$t(`work.input`)"
                v-model="replyParams.desc"
                resize="none"
                :autosize="{ minRows: 2, maxRows: 6 }"
                maxlength="250"
                show-word-limit
              >
              </el-input>
            </el-col>
          </el-row>
          <el-form>
            <!-- 附件 -->
            <el-form-item style="width: 50%;">
            <div style="width: 100%">{{ $t(`work.enclosure`) }}</div>
            <p class="prompt">
            {{ $t(`work.fileType`) }}：jpg, jpeg, png, mp3, aif, aiff, wav, wma,
            mp4, avi, rmvb
          </p>
            <el-upload
              class="upload-demo"
              ref="upload"
              drag
              action
              multiple
              :limit="fileLimit"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"             
              :file-list="fileList"
              :on-change="handelChange"
              show-file-list
              :auto-upload="false"
             
             
            >
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                {{ $t(`work.fileCharacters`) }}<em> {{ $t(`work.fileCharacters2`) }}</em>
              </div>
            </el-upload>
          </el-form-item>
        
            <el-button
              @click="handelResubmit"
              type="plain"       
              style="width: 200px;border-radius: 20px;"
              class="elBtn"
              >   {{ $t(`work.submit2`) }}</el-button
            >


          
                  <el-button
             style="width: 200px;border-radius: 20px;"
              type="plain"       
              @click="handelEnd"
              class="elBtn"
              >   {{ $t(`work.endWork`) }}</el-button
            >
          
          
          </el-form>
        </div>
      </section>

      <el-dialog
        :title="$t(`work.Tips`)"
        :visible.sync="closeDialogVisible"
        width="30%"
      >
        <span>{{ $t(`work.confirmClose`) }}</span>
        <span slot="footer" class="dialog-footer">
          <el-button style="border-radius: 20px" @click="closeDialogVisible = false">{{ $t(`work.cancel`) }}</el-button>
          <el-button type="primary" :loading="orderDetailsLoading" style="border:none;border-radius: 20px" class="elBtn" @click="confirmCols">{{ $t(`work.confirm`) }}</el-button>
        </span>
      </el-dialog>


    </div>
  </div>
</template>

<script>
import axios from "axios";
import IndexJs from "./index";
export default {
  mixins: [IndexJs],

  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
// 手机端适配
@media screen and (min-width: 220px) and (max-width: 1279px) {
  .main {
    width: 100%;    
    padding: 15px 18px !important;
    margin: 0;
    padding-top: 30PX !important;
    background: transparent !important;
    min-height: 300px !important;
    
  }

  .MobileMain{
    width: 100%;
  }

  .contentMobile{
    // display: flex;
    // justify-content: space-around;
  
    p{
      height: 40px;
      line-height: 40px;
      padding: 0px 8px;
      margin-top: 8px;
      border-radius: 5px;
      border:1px solid rgba(0, 0, 0, 0.1);
      font-size: 0.9rem;
      margin-left: 18px;
    }
  }

  .el-row{
    margin: 0 !important;
  }

  

  .submitTitle {
    //  border:1px solid red;
    font-size: 14px;
    width: 600px;
  
    .userName{
      color: #661FFB;
    }
    .time{
      margin-left: 8px;
    }
   
   
  }

  #contentBox{
      border:1px solid rgba(0, 0, 0, 0.1);
      margin-top: 5px;
      padding: 8px;
      border-radius: 5px;
      font-size: 0.9rem;
      word-wrap: break-word;

    }

  ::v-deep .el-upload-dragger{
    width: 332px !important;
  }


}


.main {

  width: 100%;
    min-height: 100vh;
    background: #fff;
    background-image: url(../../assets/img/miningAccount/top.png);
    background-size: 100% 50%;
    background-repeat: no-repeat;
    background-position: 30% -15%;
    padding: 0;
    margin: 0;
    padding-top: 60PX;
    display: flex;
    justify-content: center;
  
}
.content{
  width: 50%;
  margin: 0 auto;
}
//工单详情
.orderDetails {
  // padding-left: 20px;
  // outline: 1px solid red;

 
  p {
    width: 80%;
    outline: 1px solid rgba(0, 0, 0, 0.1) ;
    border-radius: 4px;
    display: flex;
    font-weight: 600;
    padding: 10px 10px;
    font-size: 14px;
    display: flex;
  align-items: center;
  
  }

  .orderTitle {
    //  outline: 1px solid red;
    display: inline-block;
    //  width: 60px;

    // width: 100px;
    text-align: center;
   
  }
  .orderContent {
    flex: 1;
    display: inline-block;
    color: #661FFB;
    font-weight: normal;
    // font-weight: 600;
    // outline: 1px solid rgba(0,0,0,0.3);
    border-radius: 4px;
    text-align: left;
    padding-left: 5px;
  }
}
//提交内容
.submitContent {
  
  max-height: 300px;
  overflow: hidden;
  overflow-y: auto;
  display: flex;
   
   flex-direction: column;
   padding: 20px;
   border:1px solid #ccc;
   background: rgba(265, 0, 0, 0.01);
   border-radius: 5px;
   margin-top: 18px;
  .submitTitle {
    //  border:1px solid red;
    font-size: 14px;
    width: 600px;
    display: flex;
    justify-content: left;
    span:nth-of-type(2) {
      margin-left: 50px;
    }
  }
  .contentBox {
    width: 50vw;
    // min-height: 50px;
    // border: 1px solid rgba(0, 0, 0, 0.1);
    // border:1px solid red;
    padding: 0px 10px;
    padding-left: 5px;
    font-size: 15px;
    //  max-height: 200px;
    max-height: 80px;
    display: inline-block;
    overflow: scroll;
    overflow-x: auto;
    overflow-y: auto;
  }
  .downloadBox {
    font-size: 15px;
    color: #661FFB;
    display: inline-block;
    cursor: pointer;
  }
  .replyBox {
    margin-top: 20px;
  }
}

//提交内容 下载附件
.download {
  display: inline-block;
  // border:1px solid red;
  margin-top: 10px;
  margin-left: 20px;
  padding: 8px 15px;
  border-radius: 4px;
  font-size: 14px;
  background: #f0f9eb;
  color: #67c23a;
  cursor: pointer;
}
.download:hover {
  color: #000;
  outline: 1px solid rgba(0, 0, 0, 0.1);
}
//回复内容

.reply {
  font-size: 15px;
  // outline: 1px solid red;
  margin-top: 10px;
  padding: 5px 0px;
  .replyTitle {
    font-weight: 600;
  }
  .replyContent {
    color: #661FFB;

    // font-weight: 600;
  }
}
::v-deep.replyInput .el-input.is-disabled .el-input__inner {
  color: #000;
}
.edit {
  font-size: 15px;
  color: #661FFB;
  cursor: pointer;
  margin-left: 10px;
}

//审核内容
.auditBox {
  // outline: 1px solid red;
  .submitTitle {
    //  outline: 1px solid red;
    font-size: 14px;
    width: 600px;
    display: flex;
    justify-content: left;
    span:nth-of-type(2) {
      margin-left: 50px;
    }
  }
  .contentBox {
    width: 54vw;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 5px 5px;
    padding-left: 5px;
    font-size: 15px;
    //  max-height: 200px;
    max-height: 80px;
    display: inline-block;
    overflow: scroll;
    overflow-x: auto;
    overflow-y: auto;
  }
  .downloadBox {
    font-size: 15px;
    color: #661FFB;
    // border: 1px solid red;
    cursor: pointer;
    display: inline-block;
  }
}
//from表单
.registeredForm {
  //  outline: 1px solid red;

  .mandatory {
    color: red;
    margin-right: 5px;
  }
}
.logistics {
  display: flex;
  // outline: 1px solid red;
  margin-bottom: 30px;
  width: 26%;
  justify-content: space-between;
}
.closingOrder {
  // outline: 1px solid red;
  font-size: 14px;
  margin: 0;

  span {
    cursor: pointer;
    color: #661FFB;
  }
  span:hover {
    color: #67c23a;
  }
}

.elBtn{
  background: #661FFB;color: aliceblue;
}
.elBtn:hover{
  background: #ecf5ff;color: #409eff;
}
.machineCoding{
  outline: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  max-height: 300px;
  padding: 10px !important;
  margin-top: 8px;
  overflow-y: auto;
}
.orderNum{
  width: 800px !important;
  padding: 0px !important;
  outline: none !important;
  border: none !important;
 
  // outline: 1px solid red  !important;
}

.el-row{
  margin: 18px 0px;
}
</style>
