<template>
  <div class="app-container">
    <div class="filter-container" style="margin: 10px 0 10px 0">
      <div class="flex">
        <div class="w_input">
          <span class="textSpan">      操作人：</span>
          <el-input
            v-model="body.optUser"
            clearable
            style="width:65%"
            placeholder="请输入操作人名"
            size="small"
          >
          </el-input>
        </div>
        <!-- <div class="w_input">
          <span class="textSpan">操作类型：</span>
          <el-input v-model="body.interfaceDesc" placeholder="请输入操作类型" size="small" style="width:65%" clearable>
          </el-input>
        </div> -->
        <div class="w_input">
          <span class="textSpan">日志类型：</span>
          <el-select v-model="body.type" placeholder="请选择日志类型" size="small" style="width:65%" clearable>
            <el-option
              v-for="item in status"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select>
        </div> 
      </div>
     
 <!-- 时间范围筛选 -->
        <div class="w_date">
          <span class="textSpan">时间范围：</span>
          <el-date-picker
            v-model="createTime"
            size="small"
            type="datetimerange"
            range-separator="至"
            style="width:40%"
            @change="oncheckTimeStart"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker> 
          <el-button type="primary" plain @click="handleSearch" icon="el-icon-search">查询</el-button>
              </div>
      
    </div>

    <!-- 表格 -->
    <el-table v-loading="loading" :data="tableData" border style="width: 100%">
      <el-table-column
        label="序号"
        width="60"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>

      <el-table-column
        label="创建时间"
        width="180"
        align="center"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作人" align="center" show-overflow-tooltip width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.optUser }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作信息" align="center" show-overflow-tooltip width="300">
        <template slot-scope="scope">
          <span>{{ scope.row.optInfo}}</span>
        </template>
      </el-table-column>

       <el-table-column label="接口描述" align="center" show-overflow-tooltip width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.interfaceDesc }}</span>
        </template>
      </el-table-column>


      <el-table-column label="日志类型" align="center" show-overflow-tooltip clearable>
        <template slot-scope="scope">
          <span>{{ scope.row.type }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        current-page.sync="body.current"
        :current-page="body.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="body.size"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import api from "@/api/optLog.js";
export default {
  data() {
    return {
      createTime: "",
      loading: false,
      tableData: [],
      total: 30,
      body: {
        current: 1, //当前页
        size: 10, //每页条数
        optUser: "", //操作人
        // createTime: "",
        optInfo:"",//操作接口
        type:"",
        startTime:"",
        endTime:"",
        interfaceDesc:""
      },
     status:[
       {id:1,name:"订单"},
       {id:2,name:"产品"},
       {id:3,name:"供应商"},
       {id:4,name:"客户"},
     ],
    };
  },
  created(){
    this.getData();
  },
  methods: {
    handleSearch(){
      this.body.current = 1
      // console.log(this.body.optInfo)
      if(this.createTime==null){
        //发送时间为空时清空 body 里的发送时间
        this.createTime=""
        this.body.startTime="";
        this.body.endTime="";
      }
      this.getData();
    },
    //获取数据
    getData() {
      this.loading = true;
      api.Search(this.body).then(res => {
        console.log(res,"rrr");
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        this.loading=false;
      });
    },

    //页码
    handleSizeChange(val) {
      this.body.size = val;
      this.getData();
    },
    //换页
    handleCurrentChange(val) {
      this.body.current = val;
      this.getData();
    },
     oncheckTimeStart() {
      if(this.createTime!==null){
        console.log(this.createTime);
        this.body.startTime=this.createTime[0];
        this.body.endTime=this.createTime[1];
      }     
    }
  }
};
</script>

<style scoped>
.w_date {
  width:90%;
}
.flex {
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
}
.w_input {
  width: 38%;
}
.el-card {
  border: 0px solid #fff;
}

.edit_dev >>> .el-transfer-panel {
  width: 250px;
}
</style>
