<template>
  <!-- 帮助中心后台页面 -->
  <div class="MessageBoard" v-loading="helpBackstageLoading">
      <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">{{
        $t("login.home")
      }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{ $t("login.backstage") }}</el-breadcrumb-item>
    </el-breadcrumb>  -->


    <el-row  type="flex"  justify="center">
      <el-col :span="7">
        <span class="information"> <span> {{$t(`help.SubmitToday`)}}:</span> <span class="num">{{dailyCount.submitNum||0}}</span></span>
      </el-col>
      <el-col :span="7">
        <span class="information"> <span> {{$t(`help.processed`)}}:</span> <span class="num">{{tableData4.length}}</span></span>
      </el-col >
      <el-col :span="7">
        <span class="information"> <span> {{$t(`help.unprocessed`)}}:</span><span class="num">{{tableData3.length}}</span></span>
      </el-col>
      <el-col :span="7">
        <span class="information"> <span> {{$t(`help.beReviewed`)}}:</span><span class="num">{{tableData8.length}}</span></span>
      </el-col>
      <el-col :span="7">
        <span class="information"> <span>  {{$t(`help.reviewed`)}}:</span><span class="num">{{tableData11.length}}</span></span>
      </el-col>
    </el-row>
    <!-- 留言分析图表 -->
    <el-row>
      <el-col>
        <h5> {{$t(`help.chart`)}}</h5>
      </el-col>
      <el-col>
        <div class="chart" style="width: 100%; height: 260px" id="helpBackstageBox"></div>
      </el-col>
    </el-row>
    <!-- 超时工单列表 -->
    <el-row>
      <el-col>
      <h5>{{$t(`help.timeout`)}}</h5>
        <el-table class="table" :data="tableData7"  style="width: 100%" max-height="250"  :header-cell-style="{'text-align':'center'}"
               :cell-style="{'text-align':'center'}">
           <el-table-column fixed prop="id" :label="$t(`help.num`)">
          </el-table-column>
          <el-table-column fixed prop="type" :label="$t(`help.problem`)" >
          </el-table-column>
          <el-table-column prop="title" :label="$t(`help.problemTitle`)" >
          </el-table-column>
          <el-table-column prop="userName" :label="$t(`help.userName`)">
          </el-table-column>
          <el-table-column prop="date" :label="$t(`help.submissionTime`)">
          </el-table-column>      
            <el-table-column prop="status" :label="$t(`help.dealWith`)" >
          </el-table-column>   
          <el-table-column fixed="right" :label="$t(`help.operation`)" width="120">
            <template slot-scope="scope" >
              <el-button
              @click="handelDetails(scope.row)"
                type="text"
                size="small"
              >
             {{$t(`help.details`)}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
      <!-- 待处理工单列表 -->
    <el-row>
      <el-col>
        <h5>{{$t(`help.beProcessed`)}}</h5>
       <el-table class="table" :data="tableData3" style="width: 100%" max-height="250"  :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}">
           <el-table-column fixed prop="id" :label="$t(`help.num`)" >
          </el-table-column>
          <el-table-column fixed prop="type" :label="$t(`help.problem`)" >
          </el-table-column>
          <el-table-column prop="title" :label="$t(`help.problemTitle`)"  >
          </el-table-column>
          <el-table-column prop="userName" l:label="$t(`help.userName`)" >
          </el-table-column>
          <el-table-column prop="date" :label="$t(`help.submissionTime`)" >
          </el-table-column>      
            <el-table-column prop="status" :label="$t(`help.dealWith`)" >
          </el-table-column>   
          <el-table-column fixed="right" :label="$t(`help.operation`)" >
            <template slot-scope="scope" >
              <el-button
              @click="handelDetails(scope.row)"
                type="text"
                size="small"
              >
             {{$t(`help.details`)}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 已处理工单列表 -->
    <el-row>
      <el-col>
        <h5>  {{$t(`help.processedTable`)}}</h5>
       <el-table class="table" :data="tableData4" style="width: 100%" max-height="250"  :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}">
           <el-table-column fixed prop="id" :label="$t(`help.num`)">
          </el-table-column>
          <el-table-column fixed prop="type" :label="$t(`help.problem`)">
          </el-table-column>
          <el-table-column prop="title" :label="$t(`help.problemTitle`)" >
          </el-table-column>
          <el-table-column prop="userName" :label="$t(`help.userName`)">
          </el-table-column>
          <el-table-column prop="date" :label="$t(`help.submissionTime`)">
          </el-table-column>      
            <el-table-column prop="status" :label="$t(`help.dealWith`)" >
          </el-table-column>   
          <el-table-column fixed="right" :label="$t(`help.operation`)" >
            <template slot-scope="scope" >
              <el-button
              @click="handelDetails(scope.row)"
                type="text"
                size="small"
              >
             {{$t(`help.details`)}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 待审核工单列表 -->
    <el-row>
      <el-col>
        <h5> {{$t(`help.beReviewedTable`)}}</h5>
       <el-table class="table" :data="tableData8" style="width: 100%" max-height="250"  :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}">
           <el-table-column fixed prop="id" :label="$t(`help.num`)" >
          </el-table-column>
          <el-table-column fixed prop="type" :label="$t(`help.problem`)">
          </el-table-column>
          <el-table-column prop="title" :label="$t(`help.problemTitle`)">
          </el-table-column>
          <el-table-column prop="userName" :label="$t(`help.userName`)">
          </el-table-column>
          <el-table-column prop="date" :label="$t(`help.submissionTime`)">
          </el-table-column>      
            <el-table-column prop="status" :label="$t(`help.dealWith`)">
          </el-table-column>   
          <el-table-column fixed="right" :label="$t(`help.operation`)">
            <template slot-scope="scope" >
              <el-button
              @click="handelDetails(scope.row)"
                type="text"
                size="small"
              >
             {{$t(`help.details`)}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 已审核工单列表 -->
    <el-row>
      <el-col>
        <h5>   {{$t(`help.reviewedTable`)}}</h5>
        <el-table class="table" :data="tableData11" style="width: 100%" max-height="250"  :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}">
           <el-table-column fixed prop="id" :label="$t(`help.num`)" >
          </el-table-column>
          <el-table-column fixed prop="type" :label="$t(`help.problem`)" >
          </el-table-column>
          <el-table-column prop="title" :label="$t(`help.problemTitle`)" >
          </el-table-column>
          <el-table-column prop="userName" :label="$t(`help.userName`)" >
          </el-table-column>
          <el-table-column prop="date" :label="$t(`help.submissionTime`)" >
          </el-table-column>      
            <el-table-column prop="status" :label="$t(`help.dealWith`)" >
          </el-table-column>   
          <el-table-column fixed="right" :label="$t(`help.operation`)" >
            <template slot-scope="scope" >
              <el-button
              @click="handelDetails(scope.row)"
                type="text"
                size="small"
              >
             {{$t(`help.details`)}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
     <!-- 已撤回工单列表 -->
    <el-row>
      <el-col>
        <h5>  {{$t(`help.withdrawTable`)}}</h5>
         <el-table class="table" :data="tableData2" style="width: 100%" max-height="250"  :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}">
           <el-table-column fixed prop="id" :label="$t(`help.num`)" >
          </el-table-column>
          <el-table-column fixed prop="type" :label="$t(`help.problem`)" >
          </el-table-column>
          <el-table-column prop="title" :label="$t(`help.problemTitle`)" >
          </el-table-column>
          <el-table-column prop="userName" :label="$t(`help.userName`)" >
          </el-table-column>
          <el-table-column prop="date" :label="$t(`help.submissionTime`)" >
          </el-table-column>      
            <el-table-column prop="status" :label="$t(`help.dealWith`)" >
          </el-table-column>   
          <el-table-column fixed="right" :label="$t(`help.operation`)" >
            <template slot-scope="scope" >
              <el-button
              @click="handelDetails(scope.row)"
                type="text"
                size="small"
              >
             {{$t(`help.details`)}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
     <!-- 已关闭工单列表 -->
    <el-row>
      <el-col>
        <h5>  {{$t(`help.closedTable`)}}</h5>
         <el-table class="table" :data="tableData12" style="width: 100%" max-height="250"  :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}">
           <el-table-column fixed prop="id" :label="$t(`help.num`)" >
          </el-table-column>
          <el-table-column fixed prop="type" :label="$t(`help.problem`)" >
          </el-table-column>
          <el-table-column prop="title" :label="$t(`help.problemTitle`)" >
          </el-table-column>
          <el-table-column prop="userName" :label="$t(`help.userName`)" >
          </el-table-column>
          <el-table-column prop="date" :label="$t(`help.submissionTime`)" >
          </el-table-column>      
            <el-table-column prop="status" :label="$t(`help.dealWith`)" >
          </el-table-column>   
          <el-table-column fixed="right" :label="$t(`help.operation`)" >
            <template slot-scope="scope" >
              <el-button
              @click="handelDetails(scope.row)"
                type="text"
                size="small"
              >
             {{$t(`help.details`)}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

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

<style lang="scss" scoped>
.MessageBoard {
  // outline: 1px solid red;
  // background:#fef4e8 ;
  padding: 20px 100px;
  // height: 100vh;
  width: 100%;
}
.chart {
  outline: 1px solid rgba(0,0,0,0.5);

  text-align: center;
}
.table{
  // outline: 1px solid red;
  margin-top: 10px;
  outline: 1px solid rgba(0,0,0,0.5);
}
//留言数量
.information{
  //  outline: 1px solid rgba(0,0,0,0.5);
   padding: 5px 10px;
  // outline: 1px solid red;
  width: 80%;
  font-size: 15px;
  display: flex;
  margin-top: 5px;
  font-weight: 600;
  // span{
   
   
  //   display: inline-block;
  //   width: 100px;
  //   //  outline: 1px solid red;
  //    text-align: right;
   
  // }
    .num{
       color: #21a0ff;
       display: inline-block;
      width: 30px;
      text-align: center;
      //  outline: 1px solid red;
      font-weight: 600;
     }
}
</style>