<template>
  <!-- 工单记录页面 -->
  <div class="workOrderRecords" v-loading="WKRecordsLoading">

      <section v-if="$isMobile" class="workMain">
        <h3>{{ $t(`personal.workOrderRecord`) }}</h3>
                 <!-- 进行中工单  -->
        <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%;">
        
          <el-tab-pane class="pendingMain" :label="$t(`work.pending`)" name="pending">
                
              <div class="tableBox" >
                <div class="table-title">
                  <span :title="$t(`work.WorkID`)">ID</span>
                  <span :title="$t(`work.submissionTime`)" >{{$t(`work.status`)}}</span>  
                  <span :title="$t(`work.submissionTime`)" >{{$t(`work.operation`)}}</span>          
                </div>
                <div class="rollContentBox">

               
                <el-collapse   accordion>
            
                    <el-collapse-item  :name="item.id" v-for="item in from1" :key="item.id">
                        <template slot="title">
                            <div class="collapseTitle">
                            <span  >{{ item.id }}</span>
                            <span>{{ $t(handelStatus2(item.status))}}</span>
                            <span @click="handelDetails(item)"> {{ $t(`work.details`) }}</span>
                            </div>
                      </template>
                    <div class="belowTable">
                      <div>
                        <p>{{$t(`work.submissionTime`)}}:</p>
                        <p>{{ handelTime(item.date) }}</p>
                      </div>
                    
                    </div>
                    <div id="hash"  >
                      <p>{{$t(`work.mailbox`)}}: </p>
                      <p>{{ item.email }}</p>
                    </div>
                    </el-collapse-item>
                  
                  </el-collapse>
                </div>
          

              </div>




          </el-tab-pane>
          <!-- 已完成工单 -->
          <el-tab-pane :label="$t(`work.completeWK`)" name="success">
            <div class="tableBox" >
                <div class="table-title">
                  <span :title="$t(`work.WorkID`)">ID</span>
                  <span :title="$t(`work.submissionTime`)" >{{$t(`work.status`)}}</span>  
                  <span :title="$t(`work.submissionTime`)" >{{$t(`work.operation`)}}</span>          
                </div>
                <div class="rollContentBox">
                <el-collapse   accordion>
            
                    <el-collapse-item  :name="item.id" v-for="item in from2" :key="item.id">
                        <template slot="title">
                            <div class="collapseTitle">
                            <span  >{{ item.id }}</span>
                            <span>{{ $t(handelStatus2(item.status))}}</span>
                            <span @click="handelDetails(item)"> {{ $t(`work.details`) }}</span>
                            </div>
                      </template>
                    <div class="belowTable">
                      <div>
                        <p>{{$t(`work.submissionTime`)}}:</p>
                        <p>{{ handelTime(item.date) }}</p>
                      </div>
                    
                    </div>
                    <div id="hash"  >
                      <p>{{$t(`work.mailbox`)}}: </p>
                      <p>{{ item.email }}</p>
                    </div>
                    </el-collapse-item>
                  
                  </el-collapse>
          
          
                </div>
              </div>
          
          </el-tab-pane>
          <el-tab-pane :label=" $t(`work.allWK`)" name="reply">
            <div class="tableBox" >
                <div class="table-title">
                  <span :title="$t(`work.WorkID`)">ID</span>
                  <span :title="$t(`work.submissionTime`)" >{{$t(`work.status`)}}</span>  
                  <span :title="$t(`work.submissionTime`)" >{{$t(`work.operation`)}}</span>          
                </div>
                <div class="rollContentBox">
                <el-collapse   accordion>
            
                    <el-collapse-item  :name="item.id" v-for="item in from0" :key="item.id">
                        <template slot="title">
                            <div class="collapseTitle">
                            <span  >{{ item.id }}</span>
                            <span>{{ $t(handelStatus2(item.status))}}</span>
                            <span @click="handelDetails(item)"> {{ $t(`work.details`) }}</span>
                            </div>
                      </template>
                    <div class="belowTable">
                      <div>
                        <p>{{$t(`work.submissionTime`)}}:</p>
                        <p>{{ handelTime(item.date) }}</p>
                      </div>
                    
                    </div>
                    <div id="hash"  >
                      <p>{{$t(`work.mailbox`)}}: </p>
                      <p>{{ item.email }}</p>
                    </div>
                    </el-collapse-item>
                  
                  </el-collapse>
          
                </div>

              </div>
          
        
          </el-tab-pane>
      </el-tabs>





      </section>



      <section class="workBK" v-else>
        <el-row>
          <el-col :span="24" style="display: flex; align-items: center">
            <h2>{{ $t(`personal.workOrderRecord`) }}</h2>
            <i class="i ishuaxin1 Refresh"></i>
          </el-col>
        </el-row>
     
         <!-- 进行中工单  -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
        
          <el-tab-pane class="pendingMain" :label="$t(`work.pending`)" name="pending">
            <el-table
              class="table"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              :data="from1"             
              style="width: 100%; text-transform: none;"
              max-height="600"
              stripe
              
            >
              <el-table-column prop="id" :label="$t(`work.WorkID`)"> </el-table-column>
              <el-table-column prop="date" :label="$t(`work.submissionTime`)" >
                <template slot-scope="scope">
                  <span>{{ handelTime(scope.row.date) }}</span>
                </template>
              </el-table-column>

             <el-table-column prop="email" :label="$t(`work.mailbox`)" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="status" :label="$t(`work.status`)"> 
                <template slot-scope="scope">
                  <span>
                    {{$t(handelStatus2(scope?.row?.status))  }}
                  </span>
                </template>
              
              
              </el-table-column>

              <el-table-column fixed="right" :label="$t(`work.operation`)" >
                <template slot-scope="scope">
                  <el-button
                    @click="handelDetails(scope.row)"
                    type="text"
                    size="small"
                  >
                  {{ $t(`work.details`) }}
                  </el-button>
               
                </template>
              </el-table-column>
            </el-table>
          
          </el-tab-pane>
          <!-- 已完成工单 -->
          <el-tab-pane :label="$t(`work.completeWK`)" name="success">
            <el-table
              class="table"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              :data="from2" 
            
              style="width: 100%; text-transform: none"
              max-height="600"
              stripe
              
            >
              <el-table-column prop="id" :label="$t(`work.WorkID`)"> </el-table-column>
              <el-table-column prop="date" :label="$t(`work.submissionTime`)" >
                <template slot-scope="scope">
                  <span>{{ handelTime(scope.row.date) }}</span>
                </template>
              </el-table-column>

             <el-table-column prop="email" :label="$t(`work.mailbox`)" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="status" :label="$t(`work.status`)"> 
                <template slot-scope="scope">
                  <span>
                    {{$t(handelStatus2(scope?.row?.status))  }}
                  </span>
                </template>
              
              
              </el-table-column>

              <el-table-column fixed="right" :label="$t(`work.operation`)" >
                <template slot-scope="scope">
                  <el-button
                    @click="handelDetails(scope.row)"
                    type="text"
                    size="small"
                  >
                  {{ $t(`work.details`) }}
                  </el-button>
               
                </template>
              </el-table-column>
            </el-table>
          
          </el-tab-pane>
          <el-tab-pane :label=" $t(`work.allWK`)" name="reply">
            <el-table
              class="table"
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              :data="from0" 
              stripe
            
              style="width: 100%; text-transform: none"
              max-height="600"
              
            >
              <el-table-column prop="id" :label="$t(`work.WorkID`)"> </el-table-column>
              <el-table-column prop="date" :label="$t(`work.submissionTime`)" >
                <template slot-scope="scope">
                  <span>{{ handelTime(scope.row.date) }}</span>
                </template>
              </el-table-column>

             <el-table-column prop="email" :label="$t(`work.mailbox`)" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="status" :label="$t(`work.status`)"> 
                <template slot-scope="scope">
                  <span>
                    {{$t(handelStatus2(scope?.row?.status))  }}
                  </span>
                </template>
              
              
              </el-table-column>

              <el-table-column fixed="right" :label="$t(`work.operation`)" >
                <template slot-scope="scope">
                  <el-button
                    @click="handelDetails(scope.row)"
                    type="text"
                    size="small"
                  >
                  {{ $t(`work.details`) }}
                  </el-button>
               
                </template>
              </el-table-column>
            </el-table>
          
        
          </el-tab-pane>
        </el-tabs>

        <el-dialog
      :title="$t(`user.prompt3`)"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <span>{{ $t(msg) }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t(`user.cancel`) }}</el-button>
        <el-button type="primary" @click="determineInformation"> {{ $t(`user.Confirm`) }}</el-button>
      </span>
        </el-dialog>
      </section>
  </div>
</template>

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

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

  .tableBox{
    margin: 0 auto;
    width: 95%;
    min-height: 300px;
    // background: palegoldenrod;
    overflow: hidden;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 20px;
    box-shadow: 0px 0px 5px 2px #ccc;
    margin-top: 10px;
    .table-title{
      height: 50px;
      background: #D2C4E8;
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-weight: 600;
      padding-left: 0 !important;
      padding-right: 18PX;
 
      span{
        text-align: center;
       
      }
      span:nth-of-type(1){
        width:30% !important;
      }
      span:nth-of-type(2){
        width:40% !important;
      }
      span:nth-of-type(3){
        width:30% !important;
      }
    }

    .rollContentBox{
      background: palegoldenrod;
      max-height: 500px;
    
      overflow: hidden;
      overflow-y: auto;
    }
    .collapseTitle{
      width: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      padding-left: 0 !important;
      span{
        text-align: center;
        overflow: hidden;
        text-overflow: ellipsis;

      }
      span:nth-of-type(1){
        width:30% !important;
      }
      span:nth-of-type(2){
        width:40% !important;
      }
      span:nth-of-type(3){
        width:30% !important;
        color: #6621FF;
      }

    
    }
    .belowTable{
        display: flex;
        justify-content: space-between;
        div {
          width: 50%;
          height: auto;
          text-align: left;
          padding-left: 8%;        
        }
       
      }

      #hash{
          width: 100%;
          padding-left: 8%;
          margin-top: 8px;
         
         
          .text{
            width: 93%;         
            height: auto;
            word-wrap: break-word; /* 旧版的浏览器支持 */
            overflow-wrap: break-word; /* 标准属性 */
            color: #8F61F5;
            text-decoration: underline;
         
          }
        }
        .paginationBox{
          text-align: center;
        }
  }
  ::v-deep .el-collapse-item__content{
    background: #EDF2FA !important;
    padding: 8px;
  }


  .el-tab-pane{
  // background: #d2c3ea ;
  padding: 1px;
  border-radius: 0px !important;
  overflow: hidden !important;
  border:none !important;

  
  }



}

.workOrderRecords{
    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;
   
}
.bth{
  padding-top: 51px;
  padding-left: 70px !important;
}
.workBK{
  padding: 30px 50px;
  width: 75%;
  margin: 0 auto ;
  min-height: 360px;
  // background: #fff;
  border-radius: 8px;
  
  
}


.el-tabs{
  margin-top: 30px;
}
.elBtn{
  background: #697861;color: aliceblue;
}
.elBtn:hover{
  background: #ecf5ff;color: #409eff;
}
.el-tab-pane{
  // background: #d2c3ea ;
  padding: 1px;
  border-radius: 5px;
  overflow: hidden !important;
 border:1px solid rgba(0,0,0,0.1);
}

::v-deep .el-tabs__item.is-active{
  color: #6621FF !important;
}

::v-deep .el-tabs__active-bar{
  background-color: #6621FF !important;
}
::v-deep .el-button--text{
  color: #6621FF !important;
}


</style>