<template>
  <!-- 留言板后台管理 -->
  <div class="MessageBoard" v-loading="MessageBoardLoading">
    <el-row type="flex" justify="center">
      <el-col :span="7">
        <span class="information">
          <span> {{$t(`message.todayMessage`)}}:</span>
          <span class="num">{{ msgCount.total || 0 }}</span></span 
        >
      </el-col>
      <el-col :span="7">
        <span class="information">
          <span> {{$t(`message.processedMessage`)}}:</span>
          <span class="num">{{ tabelData1.length }}</span></span
        >
      </el-col>
      <el-col :span="7">
        <span class="information">
          <span>  {{$t(`message.unprocessedMessage`)}}:</span
          ><span class="num">{{tabelData0.length}}</span></span
        >
      </el-col>
    </el-row> 
    <!-- 留言分析图表 -->
    <el-row>
      <el-col>
        <h5> {{$t(`message.historyChart`)}}</h5>
      </el-col>
      <el-col>
        <div
          class="chart"
          id="MessageBoardBox"
          style="width: 80vw; height: 260px;margin-left:-100px"
        >
       
        </div>
      </el-col>
    </el-row>
    <!-- 未处理留言表格 -->
    <el-row>
      <el-col>
        <h5>{{$t(`message.unprocessedTabel`)}}</h5>
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="tabelData0"
          style="width: 100%"
          max-height="250"
        >
          <el-table-column fixed prop="id" :label="$t(`message.num`)" >
          </el-table-column>
          <el-table-column fixed prop="userDate" :label="$t(`message.userDate`)" >
          </el-table-column>
          <el-table-column prop="userName" :label="$t(`message.userName`)" >
          </el-table-column>
          <el-table-column prop="msgPage" :label="$t(`message.msgPage`)" >
              <template slot-scope="scope">
                    {{ $t(scope.row.msgPage) }}
                  </template>
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`message.userMsg`)">
          </el-table-column>
          <el-table-column fixed="right" :label="$t(`message.operation`)" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="clickRow(scope.$index, tabelData0)"
                type="text"
                size="small"
              >
               {{$t(`message.reply`)}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- 回复留言弹窗 -->
    <el-dialog
      :title="$t(`message.reply`)"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      :append-to-body="true"
      :visible.sync="dialogFormVisible"
      class="replyDialog"
    >
      <el-form :model="submitReply">
        <el-form-item :label="$t(`message.inputContent`)">
          <el-input v-model="submitReply.message" resize="none"  :placeholder="$t(`message.said`)" type="textarea"  :autosize="{ minRows:3, maxRows: 6 }" ></el-input>
        </el-form-item>
     
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> {{$t(`message.cancel`)}}</el-button>
        <el-button type="primary" @click="handelSubmitReply"
          >{{$t(`message.submitReply`)}}</el-button
        >
      </div>
    </el-dialog>
    <!-- 已处理留言表格 -->
    <el-row>
      <el-col>
        <h5>{{$t(`message.processedTabel`)}}</h5>
        <el-table
          class="table"
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          :data="tabelData1"
          style="width: 100%"
          max-height="250"
        >
          <el-table-column fixed prop="id" :label="$t(`message.num`)" >
          </el-table-column>
          <el-table-column fixed prop="userDate" :label="$t(`message.userDate`)">
          </el-table-column>
          <el-table-column prop="userName"  :label="$t(`message.userName`)" >
          </el-table-column>
          <el-table-column prop="userMsg" :label="$t(`message.userMsg`)"  >
          </el-table-column>
          <el-table-column prop="responDate" :label="$t(`message.responDate`)"        >
          </el-table-column>
          <el-table-column prop="responser" :label="$t(`message.responser`)" >
          </el-table-column>
          <el-table-column prop="respon" :label="$t(`message.respon`)"> </el-table-column>
          <!-- <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                回复
              </el-button>
            </template>
          </el-table-column> -->
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import IndexJs from "../MessageBoard/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: 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;

  // }
  .num {
    color: #21a0ff;
    display: inline-block;
    width: 30px;
    text-align: center;
    //  outline: 1px solid red;
    font-weight: 600;
  }
}

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

</style>
