<template>
  <div class="app-container">
    <!-- 头部区域 -->
    <el-row>
      <!-- 按类型检索 -->
      <el-col class="item" :span="24">
        <span class="title">检索类型</span>
        <el-tag
          :type="selectedType == -1? '': 'info'"
          @click="getItems(-1, selectedState, selectedOrder, keyword, keywordType)"
          style="cursor: pointer"
        >全部</el-tag>
        <el-tag
          class="tag"
          v-for="tag in tags"
          :key="tag.id"
          :type="selectedType == tag.id? '': 'info'"
          @click="getItems(tag.id, selectedState, selectedOrder, keyword, keywordType)"
        >{{tag.name}}</el-tag>
      </el-col>
      <!-- 按状态检索 -->
      <el-col class="item" :span="24">
        <span class="title">状态检索</span>
        <el-tag
          class="tag"
          :type="selectedState == -1? null: 'info'"
          @click="getItems(selectedType, -1, selectedOrder, keyword, keywordType)"
        >全部</el-tag>
        <el-tag
          class="tag"
          :type="selectedState == 0? null: 'info'"
          @click="getItems(selectedType, 0, selectedOrder, keyword, keywordType)"
        >未用</el-tag>
        <el-tag
          class="tag"
          :type="selectedState == 1? null: 'info'"
          @click="getItems(selectedType, 1, selectedOrder, keyword, keywordType)"
        >已用</el-tag>
        <el-tag
          class="tag"
          :type="selectedState == 2? null: 'info'"
          @click="getItems(selectedType, 2, selectedOrder, keyword, keywordType)"
        >待维护</el-tag>
        <el-tag
          class="tag"
          :type="selectedState == 3? null: 'info'"
          @click="getItems(selectedType, 3, selectedOrder, keyword, keywordType)"
        >报废</el-tag>
      </el-col>
      <!-- 排序方式 -->
      <el-col class="item" :span="24">
        <span class="title">排序方式</span>
        <el-tag
          class="tag"
          :type="selectedOrder == 0? '': 'info'"
          @click="getItems(selectedType, selectedState, 0, keyword, keywordType)"
        >登记时间倒序</el-tag>
        <el-tag
          class="tag"
          :type="selectedOrder == 1? '': 'info'"
          @click="getItems(selectedType, selectedState, 1, keyword, keywordType)"
        >登记时间顺序</el-tag>
      </el-col>
      <!-- 关键字检索 -->
      <el-col class="item" :span="24">
        <span class="title">搜索名称</span>
        <el-select v-model="keywordType" placeholder="请选择" size="small" style="width: 150px">
          <el-option label="物品编号" value="1"></el-option>
          <el-option label="使用人姓名" value="2"></el-option>
        </el-select>
        <el-input
          v-model="keyword"
          placeholder="输入关键字"
          clearable
          style="width: 250px"
          @keyup.enter.native="getItems(selectedType, selectedState, selectedOrder, keyword, keywordType)"
          size="small"
          :disabled="keywordType == null"
        ></el-input>
        <el-button
          @click="getItems(selectedType, selectedState, selectedOrder, keyword, keywordType)"
          :disabled="keywordType == null"
          size="small"
        >搜索</el-button>
      </el-col>
    </el-row>

    <!-- 列表区域 -->
    <el-table :data="items" style="width: 100%" v-loading="loading">
      <el-table-column type="index" width="40"></el-table-column>
      <el-table-column label="资产图片" width="110">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="'http://localhost:9102/img' + scope.row.pic"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="number" label="资产编号" width="130"></el-table-column>
      <el-table-column prop="name" label="资产名称"></el-table-column>
      <el-table-column prop="model_number" label="型号" width="100"></el-table-column>
      <el-table-column prop="indate" label="登记时间" width="100"></el-table-column>
      <el-table-column prop="tag_name" label="分类" width="80"></el-table-column>
      <el-table-column prop="address" label="位置"></el-table-column>
      <el-table-column prop="factory" label="生产厂家"></el-table-column>
      <el-table-column prop="service_life" label="服务期限" width="80"></el-table-column>
      <el-table-column prop="next_indate" label="下次维护日期" width="110"></el-table-column>
      <el-table-column label="所属人员" width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.username != null && scope.row.state == 1">{{scope.row.username}}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="60" fixed="right">
        <template slot-scope="scope">
          <span v-if="scope.row.state == 0">未用</span>
          <span v-else-if="scope.row.state == 1">已用</span>
          <span v-else-if="scope.row.state == 1">待维护</span>
          <span v-else>报废</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码区域 -->
    <el-pagination
      v-if="total > 0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageIndex"
      :page-sizes="[20, 50, 100]"
      :page-size="20"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      background
      style="float: right"
    ></el-pagination>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      loading: false,
      tags: null,
      selectedType: -1,
      selectedState: -1,
      selectedOrder: 0,
      keyword: "",
      keywordType: 1,
      items: [],
      //分页相关
      pageIndex: 1,
      pageSize: 20,
      total: 0
    };
  },
  methods: {
    //页码规格变更
    handleSizeChange(val) {
      this.pageSize = val;
      //重新获取
      this.getItems(
        this.selectedType,
        this.selectedState,
        this.selectedOrder,
        this.keyword,
        this.keywordType
      );
    },

    //页码页数变更
    handleCurrentChange(val) {
      this.pageIndex = val;
      //重新获取
      this.getItems(
        this.selectedType,
        this.selectedState,
        this.selectedOrder,
        this.keyword,
        this.keywordType
      );
    },
    //获取标签 其他全部数据
    getItems(type, state, order, keyword, keywordType) {
      //先给全局变量赋值
      this.selectedType = type;
      this.selectedState = state;
      this.selectedOrder = order;
      this.keyword = keyword;
      this.keywordType = keywordType;
      this.loading = true;
      request({
        url: "/goods-no/getAllItems",
        method: "post",
        params: {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          type: type,
          state: state,
          order: order,
          keyword: keyword,
          keywordType: keyword == "" || keyword == null ? 0 : keywordType
        }
      })
        .then(response => {
          this.tags = response.data.tag;
          this.items = response.data.item;
          this.total = response.data.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    }
  },
  mounted() {
    this.getItems(-1, -1, 0, "", 1);
    this.keywordType = null;
  }
};
</script>

<style scoped>
.title {
  line-height: 32px;
  font-size: 14px;
}
.tag {
  margin: 0 5px 5px 0;
  cursor: pointer;
}
.item {
  margin-bottom: 5px;
}
</style>

