<template>
  <!-- 订阅管理后台-->
  <div class="subscribeBoard">
    <el-row type="flex" justify="center">
      <el-col :span="7" >
        <span class="information">
          <!-- 今日报告数量 -->
          <span> {{$t(`subscribe.dayReport`)}}:</span>
          <span class="num">200</span></span
        >
      </el-col>
      <el-col :span="7">
        <span class="information">
          <!-- 重大消息报告数量 -->
          <span> {{$t(`subscribe.greatReport`)}}:</span>
          <span class="num">100</span></span
        >
      </el-col>
      <el-col :span="7">
        <span class="information">
          <!-- 自定义消息数量 -->
          <span> {{$t(`subscribe.customizeMessage`)}}:</span
          ><span class="num">500</span></span
        >
      </el-col>
      <el-col :span="7">
        <span class="information">
          <!-- 未审核报告数量 -->
          <span> {{$t(`subscribe.unauditedReport`)}}:</span
          ><span class="num">10000</span></span
        >
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col :span="24">
        <span class="information">
          <!-- 已审核报告数量 -->
          <span> {{$t(`subscribe.reviewedReport`)}}:</span>
          <span class="num">200</span></span
        >
      </el-col>
     
    </el-row>
 
    <!-- 分析图表 -->
    <el-row>
      <el-col>
        <h5>{{$t(`subscribe.chart`)}}</h5>
      </el-col>
      <el-col>
        <div
          class="chart"
          id="MessageBoardBox"
          style="width: 100%; height: 260px"
        >
          图表
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px">
      <!-- 报告发布 -->
      <el-col>
        <el-button type="warning" @click="handelReportRelease">{{$t(`subscribe.ReportRelease`)}}</el-button>
      </el-col>
    </el-row>
    <!-- 待审核报告 -->
    <el-row>
      <el-col>
        <h5>{{$t(`subscribe.beReviewedRelease`)}}</h5>
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="from"
          style="width: 100%"
          max-height="250"
        >
          <el-table-column fixed prop="id" :label="$t(`subscribe.number`)" width="150">
          </el-table-column>
          <el-table-column fixed prop="userDate" :label="$t(`subscribe.date`)" width="150">
          </el-table-column>
          <el-table-column prop="userName" :label="$t(`subscribe.ReportType`)" width="120">
          </el-table-column>
          <el-table-column prop="msgPage" :label="$t(`subscribe.state`)" width="120">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.publisher`)">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.auditor`)">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.Subscriber`)">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.MessageTitle`)">
          </el-table-column>
          
          <el-table-column  :label="$t(`subscribe.operation`)" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="clickRowAaudit(scope.$index, tabelData0)"
                type="text"
                size="small"
              >
                {{$t(`subscribe.audit`)}}
              </el-button>
            </template>
          </el-table-column>
        
        </el-table>
      </el-col>
    </el-row>
    <!-- 已拒绝报告 -->
    <el-row>
      <el-col>
        <h5>  {{$t(`subscribe.rejectedRelease`)}}</h5>
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="from"
          style="width: 100%"
          max-height="250"
        >
          <el-table-column fixed prop="id" :label="$t(`subscribe.number`)" width="150">
          </el-table-column>
          <el-table-column fixed prop="userDate" :label="$t(`subscribe.date`)" width="150">
          </el-table-column>
          <el-table-column prop="userName" :label="$t(`subscribe.ReportType`)" width="120">
          </el-table-column>
          <el-table-column prop="msgPage" :label="$t(`subscribe.state`)" width="120">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.publisher`)">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.auditor`)">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.Subscriber`)">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.MessageTitle`)">
          </el-table-column>
          
          <el-table-column  :label="$t(`subscribe.operation`)" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="clickRow(scope.$index, tabelData0)"
                type="text"
                size="small"
              >
               {{$t(`subscribe.correction`)}}
              </el-button>
            </template>
          </el-table-column>
        
        </el-table>
      </el-col>
    </el-row>
       <!-- 已发布报告历史 -->
    <el-row>
      <el-col>
        <h5>  {{$t(`subscribe.publishedRelease`)}}</h5>
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="from"
          style="width: 100%"
          max-height="250"
        >
          <el-table-column fixed prop="id" :label="$t(`subscribe.number`)" width="150">
          </el-table-column>
          <el-table-column fixed prop="userDate" :label="$t(`subscribe.date`)" width="150">
          </el-table-column>
          <el-table-column prop="userName" :label="$t(`subscribe.ReportType`)" width="120">
          </el-table-column>
          <el-table-column prop="msgPage" :label="$t(`subscribe.state`)" width="120">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.publisher`)">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.auditor`)">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.Subscriber`)">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.MessageTitle`)">
          </el-table-column>
          
          <el-table-column   :label="$t(`subscribe.operation`)" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="clickRow(scope.$index, tabelData0)"
                type="text"
                size="small"
              >
                {{$t(`subscribe.details`)}}
              </el-button>
            </template>
          </el-table-column>
        
        </el-table>
      </el-col>
    </el-row>
      <!-- 自定义消息历史 -->
    <el-row>
      <el-col>
        <h5> {{$t(`subscribe.customizeHistory`)}}</h5>
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="from"
          style="width: 100%"
          max-height="250"
        >
          <el-table-column fixed prop="id" :label="$t(`subscribe.number`)" width="150">
          </el-table-column>
          <el-table-column fixed prop="userDate" :label="$t(`subscribe.date`)" width="150">
          </el-table-column>
          <el-table-column prop="userName" :label="$t(`subscribe.subscriber1`)" width="120">
          </el-table-column>
          <el-table-column prop="msgPage" :label="$t(`subscribe.subscriber1Email`)" width="120">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.subscriber1Type`)">
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`subscribe.MessageTitle`)">
          </el-table-column>      
          <el-table-column  :label="$t(`subscribe.operation`)" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="clickRow(scope.$index, tabelData0)"
                type="text"
                size="small"
              >
              {{$t(`subscribe.details`)}}
              </el-button>
            </template>
          </el-table-column>
        
        </el-table>
      </el-col>
    </el-row>
   
  
  
  </div>
</template>

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

<style lang="scss" scoped>
.subscribeBoard {
  // outline: 1px solid red;
  // background:#fef4e8 ;
  padding: 20px 100px;
  min-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: 100%;
  font-size: 15px;
  display: flex;
  margin-top: 5px;
  font-weight: 600;
  // span{

  //   display: inline-block;
  //   width: 100px;
  //   //  outline: 1px solid red;
  //    text-align: right;

  // }
  span:nth-of-type(1){
      display: inline-block;
      //  outline: 1px solid red;
       width: 150px;
  }
  .num {
    color: #21a0ff;
    display: inline-block;
    width: 100px;
    text-align: left;
    //  outline: 1px solid red;
    font-weight: 600;
  }
}

.replyDialog  {
  // border: 1px solid red;
  width: 60%;
  margin: 0 auto;
}
</style>
<style >

</style>
