<template>
  <div class="tab7">
    <div class="insideTop">
      留言审核
    </div>
    <div class="obstruct"></div>
    <!-- 主要内容 -->
    <div class="conten">
      <div class="classify">全部</div>
      <div class="search">
        <span>提交时间：</span>
        <el-date-picker
          style="width: 240px"
          v-model="time"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
        </el-date-picker>
        <span class="search_k">留言内容：</span>
        <el-input
          v-model="formData.searchKey"
          placeholder="关键字"
          style="width: 240px"
        ></el-input>
        <span class="search_k">状态：</span>
        <el-select
          v-model="formData.type"
          placeholder="请选择"
          style="width: 240px"
        >
          <el-option label="全部" value=""></el-option>
          <el-option label="待审核" value="1"></el-option>
          <el-option label="审核通过" value="time"></el-option>
          <el-option label="审核不通过" value="number"></el-option>
        </el-select>
        <!-- 右侧按钮 -->
        <div class="search_btn">
          <el-button type="primary">查 询</el-button>
          <el-button>重 置</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column label="序号" width="80">
            <template slot-scope="scope">
              {{
                scope.$index + (formData.pageNum - 1) * formData.pageSize + 1
              }}
            </template>
          </el-table-column>
          <el-table-column label="留言内容">
            <template #default="{ row }">
              <span class="table_name" :title="row.name1">{{ row.name1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name2" label="发布人" width="180"> </el-table-column>
          <el-table-column prop="name2" label="发布时间" width="180">
          </el-table-column>
          <el-table-column prop="name2" label="审核状态" width="180">
          </el-table-column>
          <el-table-column label="操作" width="180">
            <template #default>
              <el-button type="text" style="color: #254e91;">通过</el-button>
              <el-button type="text">不通过</el-button>
              <el-button type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <div class="paging">
      <el-pagination
        layout="sizes,prev, pager, next,jumper"
        :total="total"
        :current-page="formData.pageNum"
        @current-change="currentChange"
        @size-change="sizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tab7',
  components: {},
  data () {
    // 这里存放数据
    return {
      total: 100,
      time: '',
      formData: {
        startTime: '',
        endTime: '',
        pageNum: 1,
        pageSize: 9999,
        searchKey: '',
        type: 'time'
      },
      tableData: [
        { name1: '1231231231231231231123123123', name2: '2013-12-26  13:33:23', name3: true },
        { name1: '123', name2: '123', name3: false },
        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
        { name1: '123', name2: '123', name3: false },
        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
        { name1: '123', name2: '123', name3: false },
        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
        { name1: '123', name2: '123', name3: false },
        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
        { name1: '123', name2: '123', name3: false },
        { name1: '123', name2: '2013-12-26  13:33:23', name3: true },
        { name1: '123', name2: '123', name3: false }
      ]
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    time (val) {
      this.handleSelect(val)
    }
  },
  // 方法集合
  methods: {
    // 分页器方法
    currentChange (val) {
      // console.log('当前页改变了', val)
    },
    sizeChange (val) {
      // console.log('条数改变了', val)
    }, // 点击查看
    lookGood (id) {
      this.$router.push({
        path: '/layout/tab7Look'
        // query: { conLeftId: this.conLeft }
      })
    },
    // 时间处理----------------
    handleSelect (e) {
      const date = []
      for (const i in e) {
        date.push(this.gettime(e[i]))
      }
      this.formData.startTime = date[0]
      if (date[1]) {
        this.formData.endTime = date[1].replace('00:00:00', '23:59:59')
      }
      if (e === null) this.formData.endTime = ''
    },
    gettime (data) {
      const value =
        data.getFullYear() +
        '-' +
        this.checkTime(data.getMonth() + 1) +
        '-' +
        this.checkTime(data.getDate()) +
        ' ' +
        this.checkTime(data.getHours()) +
        ':' +
        this.checkTime(data.getMinutes()) +
        ':' +
        this.checkTime(data.getSeconds())
      return value
    },
    checkTime (i) {
      if (i < 10) {
        i = '0' + i
      }
      return i
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.tab7 {
  height: 100%;
  .insideTop .add{
    right: 55px;
  }
  .conten {
    padding: 15px 30px 0;
    height: calc(100% - 32px);
    .classify {
      text-align: center;
      width: 40px;
      padding-bottom: 10px;
      color: #b9412e;
      border-bottom: 2px solid #b9412e;
    }
    .search {
      margin-bottom: 20px;
      position: relative;
      margin-top: 12px;
      height: 40px;
      .search_k {
        margin-left: 30px;
      }
      .search_btn {
        display: flex;
        justify-content: space-between;
        width: 200px;
        position: absolute;
        right: 22px;
        top: 0;
      }
    }
    .table {
      max-width: 1533px;
    }
    /deep/.el-table__body-wrapper {
      max-height: 485px;
      overflow-y: auto;
    }
  }
  .paging {
    position: absolute;
    bottom: 15px;
    right: 50px;
  }
}
</style>
