<template>
  <div style="width: 98%;margin:20px 1%;">
    <div class="hangeg">
      <el-form :inline="true" :model="FixedUseQueryDTO">
        <el-form-item label="资产名称">
          <el-input v-model="FixedUseQueryDTO.fixedName"></el-input>
        </el-form-item>
        <el-form-item label="资产编号">
          <el-input v-model="FixedUseQueryDTO.fixedCode"></el-input>
        </el-form-item>
        <el-form-item label="归还状态">
          <el-select v-model="FixedUseQueryDTO.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-button type="success" icon="el-icon-success" @click="Uselist1()">使用</el-button>
          <el-button @click="back()">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" style="margin:20px 0px;" border>
      <el-table-column label="序号" width="80" align="center">
        <template slot-scope="scope">
          {{
          (FixedUseQueryDTO.pageNum - 1) * FixedUseQueryDTO.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="useEndTime" 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-column prop="userName" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            :disabled="scope.row.useState==0?false:true"
            @click="Uselist(scope.row)"
          >归还</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="footle">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="FixedUseQueryDTO.pageNum"
        :page-size="FixedUseQueryDTO.pageSize"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 抽屉 -->
    <el-drawer title="使用登记" :visible.sync="drawer" :direction="direction" size="40%"  :before-close="handleClose">
      <div v-show="showid==0" style="width:80%;margin-left:10%;margin-top:60px;">
        <el-form
          :model="user"
          :rules="rules"
          ref="ruleForm1"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="借用姓名" prop="userId">
            <el-select
              v-model="user.userId"
              :multiple="false"
              filterable
              remote
              reserve-keyword
              placeholder="请输入资产借用人姓名"
              :remote-method="remoteMethod"
              :loading="loading"
              style="width:300px"
            >
              <el-option
                v-for="item in options"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="借用备注">
            <el-input v-model="addDTO.startRemarks" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="margin:0px 10px" @click="grtselect()">确认</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div v-show="showid==1" style="width:80%;margin-left:10%;margin-top:60px;">
        <el-form
          :model="user"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="归还姓名" prop="userId">
            <el-select
              v-model="user.userId"
              :multiple="false"
              filterable
              remote
              reserve-keyword
              placeholder="请输入资产归还人姓名"
              :remote-method="remoteMethod"
              :loading="loading"
              style="width:300px"
            >
              <el-option
                v-for="item in options"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="归还备注">
            <el-input v-model="addDTOs.endRemarks" style="width:300px"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="margin:0px 10px" @click="grtselectA()">确认</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  queryByPageByFixedId,
  useRegistered,
  returnRegistration
} from "@/api/assets";
import { secletAllStaff } from "@/api/user";
export default {
  data() {
    return {
      tableData: [], //接受数据
      FixedUseQueryDTO: {
        pageSize: 10,
        pageNum: 1,
        fixedId: null,
        fixedCode: null, //资产编号
        useState: null, //归还状态
        fixedName: null //资产名称
      },
      optionsget: [
        {
          value: 0,
          label: "未归还"
        },
        {
          value: 1,
          label: "已归还"
        },
        {
          value: 2,
          label: "已丢失"
        }
      ],
      fixedState: null,
      total: null,
      //抽屉
      drawer: false,
      direction: "rtl",
      addDTO: {
        fixedId: null, //资产ID
        useState: 0,
        startRemarks: "", //借用备注
        useStartTime: null, //借用时间
        userId: null //使用人
      },
      addDTOs: {
        id: null,
        useState: 1,
        endRemarks: "", //归还备注
        fixedId: null, //资产id
        useEndTime: null, //归还时间
        userId: 0 //归还人
      },
      ///抽屉的修改
      user: {
        companyId: null,
        userName: null,
        userId: null
      },
      options: [],
      list: [],
      loading: false,
      direction: "rtl",
      currentTime: new Date(), // 获取当前时间
      getid: 1,
      ///抽屉
      showid: 1,
      rules: {
        userId: [{ required: true, message: "请输入姓名", trigger: "blur" }]
      }
    };
  },
  created() {
    this.FixedUseQueryDTO.fixedId = this.$route.query.fixedId;
    this.getList();
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.FixedUseQueryDTO.pageNum = val;
      this.getList();
    },
    //查询资产使用情况
    getList() {
      console.log(this.FixedUseQueryDTO);
      queryByPageByFixedId(this.FixedUseQueryDTO)
        .then(res => {
          if (res.success) {
            this.tableData = res.data.list;
            this.total = res.data.total;
          }
        })
        .catch(e => {
          this.$message.error(e.msg);
        });
    },
    //借用
    Uselist1(showid = 0) {
      this.showid = showid;
      this.options = [];
      this.addDTO = {
        fixedId: null, //资产ID
        useState: 0,
        startRemarks: "", //借用备注
        useStartTime: null, //借用时间
        userId: null //使用人
      };
      this.user.userId = null;
      this.user.userName = null;
      this.drawer = true;
      this.selectupdates();
    },
    //归还
    Uselist(row) {
      this.drawer = true;
      this.showid = 1;
      this.addDTOs = {
        id: row.id,
        useState: 1,
        endRemarks: "", //归还备注
        fixedId: null, //资产id
        useEndTime: null, //归还时间
        userId: 0 //归还人
      };
      this.selectupdates();
    },
    //下拉框的搜索
    selectupdates() {
      this.user.companyId = this.$store.getters.companyId;
      secletAllStaff(this.user)
        .then(res => {
          if (res.code == 20000) {
            this.list = res.data;
          }
        })
        .catch(error => {
          this.$message.error("没有当前员工");
        });
    },
    //输入关键字出名字
    remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return (
              item.userName.toLowerCase().indexOf(query.toLowerCase()) > -1
            );
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    //获取当前时间并且处理
    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.addDTO.useStartTime = Y + M + D + h + m + s;
      this.addDTOs.useEndTime = Y + M + D + h + m + s;
    },
    //添加借用
    grtselect() {
      this.timestampToTime();
      this.addDTO.userId = this.user.userId;
      this.addDTO.fixedId = this.FixedUseQueryDTO.fixedId;
      this.$refs.ruleForm1.validate(valid => {
        if (valid) {
          useRegistered(this.addDTO)
            .then(res => {
              if (res.success) {
                this.$message({
                  message: "恭喜您借用申请成功",
                  type: "success"
                });

                this.drawer = false;
                this.getList();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch(e => {
              this.$message.error(e.msg);
            });
        }
      });
    },
    //添加归还
    grtselectA() {
      this.timestampToTime();
      this.addDTOs.fixedId = this.FixedUseQueryDTO.fixedId;
      this.addDTOs.userId = this.user.userId;
      console.log(this.addDTOs);
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          returnRegistration(this.addDTOs)
            .then(res => {
              if (res.success) {
                this.$message({
                  message: "恭喜您归还申请成功",
                  type: "success"
                });
                this.$refs.ruleForm1.resetFields();

                this.drawer = false;
                this.getList();
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch(e => {
              this.$message.error(e.msg);
            });
        }
      });
    },
    //返回
    back() {
      this.$router.push("/administrationlsit");
    },
    //重置
    backget() {
      this.FixedUseQueryDTO = {
        pageSize: 10,
        pageNum: 1,
        fixedId: this.$route.query.fixedId,
        fixedCode: null, //资产编号
        useState: null, //归还状态
        fixedName: null //资产名称
      };
      this.getList();
    },
    //搜索
    selectgetlist() {
      this.getList();
    },
    //关闭
    handleClose(done){
       this.$refs.ruleForm1.resetFields();
        done();
    }
  }
};
</script>
<style>
.footle {
  text-align: right;
}
</style>