<template>

  <div class="box-center">
    <!-- 头 -->
    <div class="app-top">
      <div class="app-titel" style="margin-top: 5px">
        <div class="label">用户名：</div>
        <div>
             <el-input maxlength="10" clearable v-model="username"></el-input>
        </div>
        <div class="label">设备编号：</div>
        <div>
           <el-input maxlength="20" clearable v-model="imei"></el-input>
        </div>
        <div class="label">录音来源：</div>
        <div>
            <el-select v-model="sourceCode" filterable clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
        <div class="app-titel" style="margin-top: 15px">
        <!-- <div class="label" style="color: #ffffff">筛选相关：</div> -->
        <div style="margin-left: 16px">
          <el-button type="primary" @click="noempty()">筛选</el-button>
        </div>
        <div style="margin-left: 20px">
          <el-button @click="empty()">清空筛选条件</el-button>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="cen-tab">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
          <el-table-column
            prop="username"
            label="用户名"
            align="center"
          >
          </el-table-column>

          <el-table-column
            prop="sourceCode"
            label="录音来源"
             align="center"
           >
             <template slot-scope="scope">
                <span v-if="scope.row.sourceCode==2">SIM设备</span>
                 <span v-if="scope.row.sourceCode==6">wifi设备</span>
              </template>
          </el-table-column>

          <el-table-column
            prop="imei"
            label="设备编号"
             align="center">
          </el-table-column>

          <el-table-column
           prop="recordDuration"
            label="录音时长"
            align="center">
          </el-table-column>

           <el-table-column
            prop="recordEndTime"
            label="录音结束时间"
            align="center"
          >
          </el-table-column>
           <el-table-column
            prop="receptionTime"
            label="文件上传时间"
            align="center"
          >
          </el-table-column>
        </el-table>
        <div style="display: flex;justify-content:flex-end;margin-top: 10px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="current"
              :page-sizes="[10, 30, 50]"
              :page-size="size"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
        </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      currentPage4:1,
      tableData: [],
      options: [
         {value: '2',label: 'SIM设备'},
         {value: '6',label: 'wifi设备'}
        ],
       username:'',
       imei:'',
       sourceCode:'',
       size:10,
       current:1,
       total:0
    };
  },
    computed: {
    ...mapGetters(["permissions"]),
  },
  created() {
    this.file_index_upload = this.permissions["file_index_upload"];
    this.file_index_edit = this.permissions["file_index_edit"];
    this.file_index_start = this.permissions["file_index_start"];
  },
  mounted() {
    this.filefindByPage()
  },
  methods: {
    noempty(){
        this.current=1;
        this.filefindByPage()
    },
    empty(){
        this.username='';
        this.imei='';
        this.sourceCode='';
        this.current=1;
        this.filefindByPage()
    },
    filefindByPage(){
        this.tableData=[];
        this.$api.http.filefindByPage({
          username:this.username,
          imei:this.imei,
          sourceCode:this.sourceCode/1||null,
          size:this.size,
          current:this.current
        }).then((res) => {
         res.data.records.map(item=>{
           item.recordDuration=Math.floor(item.recordDuration/60)
         })
          this.tableData=res.data.records;
          this.total=res.data.total
        })
    },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.size=val;
        this.filefindByPage()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.current=val;
        this.filefindByPage()
      }
  },
};
</script>

<style scoped="scoped" lang="scss" >
#avue-view{
  overflow: hidden;
}
.box-center {
  width: 100%;
  min-height: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
}
.cen-tab{
  width: 100%;
  padding: 15px;
  background: #FFFFFF;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  padding-bottom: 15px;
  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    .label {
      font-size: 14px;
      font-weight: 400;
      color: #32363d;
      line-height: 14px;
      margin-left: 15px;
    }
    .toptimeqhuan {
      height: 30px;
      background: #ffffff;
      display: flex;
      align-items: center;
    }
    .toptimeqhuan div {
      padding-left: 20px;
      padding-right: 20px;
      text-align: center;
      line-height: 30px;
      font-size: 14px;
      margin-right: 15px;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
    }
  }
}
</style>
