<template>
  <div style="margin:20px 2%">
    <div class="hangeg">
      <el-form :inline="true" :model="queryDTO">
        <el-form-item label="资产名称">
          <el-input v-model="queryDTO.fixedName"></el-input>
        </el-form-item>
        <el-form-item label="资产编号">
          <el-input v-model="queryDTO.fixedCode"></el-input>
        </el-form-item>
        <el-form-item label="归还状态">
          <el-select v-model="queryDTO.useState" placeholder="请选择">
            <el-option
              v-for="item in optionsget"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left:0px">
          <el-button type="primary" icon="el-icon-search" @click="selectgetlist()">查询</el-button>
          <el-button type="info" icon="el-icon-refresh" @click="backget()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      style="width:99%"
      :cell-style="{'text-align':'center'}"
      :header-cell-style="{'text-align':'center'}"
      border
    >
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">
          {{
          (queryDTO.pageNum - 1) * queryDTO.pageSize + scope.$index + 1
          }}
        </template>
      </el-table-column>
      <el-table-column prop="fixedName" label="资产名称"></el-table-column>
      <el-table-column prop="fixedCode" label="资产编号"></el-table-column>
      <el-table-column prop="userName" label="使用姓名">
        <template slot-scope="scope">
          <el-tag>{{scope.row.userName}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="useStartTime" label="使用时间"></el-table-column>
      <el-table-column prop="prop" label="归还时间">
        <template slot-scope="scope">{{scope.row.useEndTime==null?'暂未归还':scope.row.useEndTime}}</template>
      </el-table-column>
      <el-table-column prop="useState" label="资产状态">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.useState== '0' ? 'danger' : scope.row.useState == '1' ? 'success':'warning' "
          >{{scope.row.useState == '0' ? '未归还' : scope.row.useState == '1' ? '已归还':'已丢失'}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
    <div class="footle">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="queryDTO.pageNum"
        :page-size="queryDTO.pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { queryBypageget } from "@/api/assets";
export default {
  data() {
    return {
      queryDTO: {
        pageNum: 1,
        pageSize: 10,
        userId: null,
        fixedCode: null, //资产编号
        useState: null, //归还状态
        fixedName: null //资产名称
      },
      optionsget: [
        {
          value: 0,
          label: "未归还"
        },
        {
          value: 1,
          label: "已归还"
        },

      ],
      tableData: [],
      total: null
    };
  },
  created() {
    this.queryDTO.userId = this.$store.getters.urId; //获取账号使用者的usid
    this.getlist();
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.queryDTO.pageNum = val;
      this.getlist();
    },
    //重置
    backget() {
      this.queryDTO = {
        pageNum: 1,
        pageSize: 10,
        userId: this.$store.getters.urId,
        fixedCode: null, //资产编号
        useState: null, //资产状态
        fixedName: null //资产名称
      };
      this.getlist();
    },
    //搜索
    selectgetlist() {
      this.getlist();
    },
    //分页查询
    getlist() {
      queryBypageget(this.queryDTO)
        .then(res => {
          if (res.success) {
            this.tableData = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(e => {
          this.$$message.error(e.msg);
        });
    }
  }
};
</script>
<style>
.footle {
  text-align: right;
}
</style>