<template>
  <!-- 工单总览 -->
 
  <div class="workBK" v-loading="workBKLoading">

    <section v-if="$isMobile" class="workMain">
        <h3>{{ $t(`work.WorkOrderManagement`) }}</h3>
                 <!-- 待处理工单  -->
        <el-tabs v-model="activeName" @tab-click="handleElTabs" style="width: 100%;">
        
          <el-tab-pane class="pendingMain" :label="$t(`work.pendingProcessing`)" name="pendingProcessing">
                
              <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 class="paginationBox">
                  <el-pagination
                  @size-change="handleSizeChange" 
                  @current-change="handleCurrentChange"            
                    :current-page.sync="currentPage1"
                  :page-sizes="pageSizes"             
                  layout="sizes, prev, pager, next"
                  :total="totalLimit1"
                >
                </el-pagination>
                </div>

              </div>
             



          </el-tab-pane>
          <!-- 进行中工单 -->
          <el-tab-pane :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 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 class="paginationBox">
                <el-pagination
                    @size-change="handleSizeChange" 
                    @current-change="handleCurrentChange"            
                      :current-page.sync="currentPage2"
                    :page-sizes="pageSizes"             
                    layout=" sizes, prev, pager, next"
                    :total="totalLimit2"
                  >
                </el-pagination>
               </div>
              </div>
          
          </el-tab-pane>
          <!-- 已完成 -->
          <el-tab-pane :label=" $t(`work.completeWK`)" name="Finished">
            <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 from10" :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>
            <!-- <el-row type="flex" justify="center" style="margin-top: 15px;">
              <el-col :span="24">
            
              </el-col>
           </el-row> -->
           <div class="paginationBox">
                <el-pagination
                  @size-change="handleSizeChange" 
                  @current-change="handleCurrentChange"            
                    :current-page.sync="currentPage10"
                  :page-sizes="pageSizes"             
                  layout=" sizes, prev, pager, next"
                  :total="totalLimit10"
                >
                </el-pagination>
              </div>



              </div>
          
        
          </el-tab-pane>
            <!-- 所有 -->
          <el-tab-pane :label=" $t(`work.allWK`)" name="all">
            <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 class="paginationBox">
                <el-pagination
                  @size-change="handleSizeChange" 
                  @current-change="handleCurrentChange"            
                  :current-page.sync="currentPage0"
                  :page-sizes="pageSizes"             
                  layout="sizes, prev, pager, next"
                  :total="totalLimit0"
                >
                </el-pagination>

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





      </section>


    <section class="workBKContent" v-else>
    <el-row style="margin-bottom: 18px;">
      <el-col :span="24" style="display: flex; align-items: center">
        <h2>{{ $t(`work.WorkOrderManagement`) }}</h2>
        <i class="i ishuaxin1 Refresh"></i>
      </el-col>
    </el-row>


    <el-tabs v-model="activeName" @tab-click="handleElTabs">
         <!-- 待处理工单  1-->
         <el-tab-pane :label=" $t(`work.pendingProcessing`)" name="pendingProcessing">
        <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="550"   
          stripe
        >
          <el-table-column prop="id" :label="$t(`work.WorkID`)"  > </el-table-column>
          <el-table-column prop="email" :label="$t(`work.mailbox`)" :show-overflow-tooltip="true"  width="230"> </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="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`)"   min-width="80">
            <template slot-scope="scope">
              <el-button
                @click="handelDetails(scope.row)"
                type="text"
                size="small"
              >
                {{ $t(`work.details`) }}
              </el-button>

              <el-popconfirm
                  :confirm-button-text='$t(`work.confirm`)'
                  :cancel-button-text='$t(`work.cancel`)'
                  icon="el-icon-info"
                  icon-color="red"
                  :title="$t(`work.confirmClose`)"
                  @confirm="handelCloseWork(scope.row)"
                >
                  <el-button class="elBtn" size="small" slot="reference">{{ $t(`work.close`) }}</el-button>
                </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="center" style="margin-top: 20px;margin-bottom: 10px;">
          <el-col :span="10">
            <el-pagination
              @size-change="handleSizeChange" 
              @current-change="handleCurrentChange"            
                :current-page.sync="currentPage1"
              :page-sizes="pageSizes"             
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalLimit1"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
    
      <!-- 进行中工单  -->
      <el-tab-pane :label="$t(`work.pending`) " name="pending">
        <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`)"  width="150"> </el-table-column>
          <el-table-column prop="email" :label="$t(`work.mailbox`)" :show-overflow-tooltip="true"  width="230"> </el-table-column>
          <el-table-column prop="date" :label="$t(`work.submissionTime`)"  width="150">
            <template slot-scope="scope">
              <span>{{ handelTime(scope.row.date) }}</span>
            </template>
          </el-table-column>
   
          <el-table-column prop="status" :label="$t(`work.status`)"  width="150"> 
            <template slot-scope="scope">
              <span>
                {{$t(handelStatus2(scope.row.status))  }}
              </span>
            </template>          
          </el-table-column>
          <el-table-column fixed="right" :label="$t(`work.operation`)"   min-width="150">
            <template slot-scope="scope">
              <el-button
                @click="handelDetails(scope.row)"
                type="text"
                size="small"
              >
                {{ $t(`work.details`) }}
              </el-button>

              <el-popconfirm
                  :confirm-button-text='$t(`work.confirm`)'
                  :cancel-button-text='$t(`work.cancel`)'
                  icon="el-icon-info"
                  icon-color="red"
                  :title="$t(`work.confirmClose`)"
                  @confirm="handelCloseWork(scope.row)"
                >
                  <el-button class="elBtn" size="small" slot="reference">{{ $t(`work.close`) }}</el-button>
                </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
     
         <!-- 分页 -->
         <el-row type="flex" justify="center" style="margin-top: 15px;">
          <el-col :span="10">
            <el-pagination
              @size-change="handleSizeChange" 
              @current-change="handleCurrentChange"            
                :current-page.sync="currentPage2"
              :page-sizes="pageSizes"             
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalLimit2"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
      <!-- 已结束工单 -->
      <el-tab-pane :label="$t(`work.completeWK`) " name="Finished">

        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="from10"
          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="email" :label="$t(`work.mailbox`)" :show-overflow-tooltip="true" > </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="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`)"   min-width="80">
            <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-row type="flex" justify="center" style="margin-top: 15px;">
          <el-col :span="10">
            <el-pagination
              @size-change="handleSizeChange" 
              @current-change="handleCurrentChange"            
                :current-page.sync="currentPage10"
              :page-sizes="pageSizes"             
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalLimit10"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
        <!-- 所有工单 0 -->
        <el-tab-pane :label=" $t(`work.allWK`)" name="all">

      
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="from0"
          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="email" :label="$t(`work.mailbox`)" :show-overflow-tooltip="true"  width="230"> </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="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`)" style="text-align: left !important;"   min-width="80">
         
            <template slot-scope="scope">
              <el-button
                @click="handelDetails(scope.row)"
                type="text"
                size="small"
              >
                {{ $t(`work.details`) }}
              </el-button>

         

              <el-popconfirm
                   v-if="scope.row.status !== `10`"
                 :confirm-button-text='$t(`work.confirm`)'
                  :cancel-button-text='$t(`work.cancel`)'
                  icon="el-icon-info"
                  icon-color="red"
                 :title="$t(`work.confirmClose`)"
                  @confirm="handelCloseWork(scope.row)"
                >
                  <el-button class="elBtn" size="small" slot="reference">{{ $t(`work.close`) }}</el-button>
                </el-popconfirm>

                <!-- <el-button  style="margin-left: 24px;"></el-button> -->
                <el-popconfirm
                 v-else
                  confirm-button-text='确认'
                  cancel-button-text='取消'
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定关闭此工单吗？"
                  @confirm="handelCloseWork(scope.row)"
                >
                  <el-button style="margin-left: 18px;border:none;background: transparent;width: 50px" size="small" slot="reference"></el-button>
                </el-popconfirm>


            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="center" style="margin-top: 15px;">
          <el-col :span="10">
            <el-pagination
              @size-change="handleSizeChange" 
              @current-change="handleCurrentChange"            
                :current-page.sync="currentPage0"
              :page-sizes="pageSizes"             
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalLimit0"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </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) {
  .workBK{
   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;
          margin: 18px 8px;
        }
  }
  ::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;

  
  }

  .paginationBox{
          text-align: center;
        }


        
  ::v-deep .el-pager li{
   min-width: 19px;
  
  }

  ::v-deep .el-pagination .el-select .el-input{
    margin: 0;
  }



}

.workBK {

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;

}
.workBKContent{
  width: 100%;
  margin: 0 auto;
}

.elBtn{
  background: #e60751;
  color: #fff;
  border:none;
  margin-left: 18px;
}



::v-deep .el-table__footer-wrapper tbody td.el-table__cell,
.el-table__header-wrapper tbody td.el-table__cell {
  text-align: center;
}
.moneyItem {
  // outline: 1px solid red;
  width: 80%;
  display: flex;
  font-size: 14px;
  align-items: center;
  font-weight: 550;
  color: rgba(0, 0, 0, 0.7);
  flex-direction: column;
  height: 100px;
  justify-content: center;
 div:nth-of-type(1){
  // outline: 1px solid red;
  width: 100%;
  padding-left: 10px;
 }

  .moneyInput {
    display: flex;
    // width: 60%;
    align-items: center;
    outline: 1px solid #dcdfe6;
    margin: 0;
    padding: 0px;
    border-radius: 4px;
    height: 38px;
    margin-top: 25px;
    p {
      display: inline-block;
      // outline: 1px solid red;

      height: 30px;
      margin: 0;
      padding: 0;
      padding-top: 5px;
      color: rgba(0, 0, 0, 0.3);
    }
    input:nth-of-type(1){
       padding-left: 5%;
    }
    input {
      // outline: 1px solid rgba(0, 0, 0, 0.1);
      display: inline-block;
      width: 45%;
      height: 30px;
      border: none;
      outline: none;
      // outline: 1px solid red;  
      // padding-left: 13%;


      
    }
    input::-webkit-input-placeholder {
        /* WebKit browsers，webkit内核浏览器 */
        color: #c0c4cc;
       
      }
      .InputIcon:hover{
        color: #409eff;
        cursor: pointer;
      }

  }
}
::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;
}
// .el-date-editor--daterange.el-input,
// .el-date-editor--daterange.el-input__inner,
// .el-date-editor--timerange.el-input,
// .el-date-editor--timerange.el-input__inner {
//   width: 235px;
// }

.el-tab-pane{
  // background: #d2c3ea ;
  padding: 1px;
  border-radius: 5px;
  overflow: hidden !important;
 border:1px solid rgba(0,0,0,0.1);
}
</style>