<template>
  <div>
    <div style="margin:20px 2%">
      <div class="hangeg">
        <el-form :inline="true" :model="queryDTO">
          <el-form-item label="资产名称" style="margin-left:0px;">
            <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.fixedState" 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 label="资产地址">
            <el-input v-model="queryDTO.fixedAddress"></el-input>
          </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="assetslist"
        style="width: 99%"
        border
        :cell-style="{'text-align':'center'}"
        :header-cell-style="{'text-align':'center'}"
      >
        <el-table-column label="序号" width="50px" 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="fixedMoney" label="资产金额"></el-table-column>
        <el-table-column prop="fixedAddress" label="资产地址"></el-table-column>
        <el-table-column prop="registerTime" label="登记时间" width="150px"></el-table-column>
        <el-table-column prop="prop" label="登记人" width="width">
          <template slot-scope="scope">
            <el-tag>{{scope.row.userName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="fixedState" label="资产状态">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.fixedState== '0' ? 'success' : scope.row.fixedState == '1' ? 'warning':'danger' "
            >{{scope.row.fixedState == '0' ? '未使用' : scope.row.fixedState == '1' ? '已使用':'已丢失'}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="资产使用情况" width="130px">
          <template slot-scope="scope">
            <el-button type="primary" @click="selectFrom(scope.row)" size="mini">查询资产使用</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="prop" label="操作" width="220px" align="center">
          <template slot-scope="scope">
            <el-row :gutter="20">
              <el-col :span="4">
                <el-button type="danger" size="mini" @click="open(scope.row)">丢失登记</el-button>
              </el-col>
              <el-col :span="8" style="margin-left:5px">
                <el-button
                  type="primary"
                  size="mini"
                  style="margin-left:40px"
                  icon="el-icon-edit"
                  @click="goUpdate(scope.row)"
                >修改资产信息</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <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 {
  queryBypage,
  useRegistered,
  returnRegistration,
  lose
} from "@/api/assets";
import { secletAllStaff } from "@/api/user";
export default {
  data() {
    return {
      //查询资产
      queryDTO: {
        fixedController: null,
        companyId: null,
        pageNum: 1,
        pageSize: 10,
        fixedCode: null, //资产编号
        fixedAddress: null, //资产地址
        fixedState: null, //资产状态
        fixedName: null //资产名称
      },
      optionsget: [
        {
          value: 0,
          label: "未使用"
        },
        {
          value: 1,
          label: "已使用"
        },
        {
          value: 2,
          label: "已丢失"
        }
      ],
      assetslist: [], //表格资产
      total: null,
      //抽屉
      drawer: false,
      direction: "rtl",
      addDTOlist: {
        fixedId: null, //资产ID
        fixedState: 2,
        fixedLoseRemarks: null, //丢失备注
        fixedLoseTime: null
      },
      ///抽屉的修改
      user: {
        companyId: null,
        userName: null,
        userId: null
      },
      options: [],
      list: [],
      loading: false,
      direction: "rtl",
      currentTime: new Date(), // 获取当前时间
      ///抽屉
      showid: 1
    };
  },
  created() {
    this.queryDTO.companyId = this.$store.getters.companyId; //查询资产获取Id
    this.queryDTO.fixedController = this.$store.getters.urId; //获取账号使用者的usid
    this.selectAssets();
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.queryDTO.pageNum = val;
      this.selectAssets();
    },
    //重置
    backget() {
      this.queryDTO = {
        fixedController: this.$store.getters.urId,
        companyId: this.$store.getters.companyId,
        pageNum: 1,
        pageSize: 10,
        fixedCode: null, //资产编号
        fixedAddress: null, //资产地址
        fixedState: null, //资产状态
        fixedName: null //资产名称
      };
      this.selectAssets();
    },
    //搜索
    selectgetlist() {
      this.selectAssets();
    },
    //查询公司资产（分页）
    selectAssets() {
      queryBypage(this.queryDTO)
        .then(res => {
          if (res.success) {
            this.assetslist = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          this.$message.error("查询公司资产失败");
        });
    },
    //修改资产信息
    goUpdate(row) {
      this.$router.push({
        path: "/administrationUpdate",
        query: {
          id: row.fixedId
        }
      });
    },
    //获取当前时间并且处理
    timestampToTime() {
      var date = this.currentTime;
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      this.addDTOlist.fixedLoseTime = Y + M + D + h + m + s;
    },
    //添加借用
    //查看资产使用情况
    selectFrom(row) {
      this.$router.push({
        path: "/administrationselect",
        query: {
          fixedId: row.fixedId
        }
      });
    },
    //丢失备注
    open(row) {
      this.$prompt("请输入丢失备注", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消"
      })
        .then(({ value }) => {
          this.timestampToTime();
          this.addDTOlist.fixedLoseRemarks = value;
          this.addDTOlist.fixedId = row.fixedId;
          lose(this.addDTOlist)
            .then(res => {
              if (res.success) {
                this.selectAssets();
                this.$message({
                  type: "success",
                  message: "丢失备注是成功"
                });
              } else {
                this.$message.error("丢失备注失败");
              }
            })
            .catch(e => {
              this.$message.error(e.msg);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入"
          });
        });
    }
  }
};
</script>

<style>
.hangeg .el-form-item{
  margin-left: 20px;
}
</style>