<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
      <el-form-item label="设备名称" prop="studentName">
        <el-input v-model="queryParams.equipmentName" placeholder="请输入设备名称" clearable />
      </el-form-item>
      <el-form-item label="借用日期" prop="studentName">
        <el-date-picker v-model="queryParams.borrowTime" type="date" clearable placeholder="请选择借用日期" format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleOption(0)">新增</el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="lendReturnData" stripe>
      <el-table-column label="序号" type="index" width="55" align="center" />
      <el-table-column label="自编码" align="center" prop="encode" width="140" />
      <el-table-column label="设备名称" align="center" prop="equipmentName" width="130" />
      <el-table-column label="型号" align="center" prop="model" />
      <el-table-column label="借用日期" align="center" prop="borrowTime" width="160" />
      <el-table-column label="借用人" align="center" prop="borrowBy" />
      <el-table-column label="用途" align="center" prop="purpose" />
      <el-table-column label="借用期限（天）" align="center" prop="deadline" width="140" />
      <el-table-column label="预计使用期限" align="center" prop="yjuseTime" width="160" />
      <el-table-column label="归还时设备情况" align="center" prop="returnEquipmentCondition" width="160">
        <template slot-scope="{ row }">
          <dict-tag :options="dict.type.equipment_state" :value="row.returnEquipmentCondition" />
        </template>
      </el-table-column>
      <el-table-column label="接收人" align="center" prop="receivedBy" />
      <el-table-column label="归还日期" align="center" prop="returnTime" width="160" />
      <el-table-column label="实际使用时间" align="center" prop="sjuseTime" width="160" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" prop="orgname" width="150" fixed="right">
        <template slot-scope="{ row }">
          <el-button type="text" size="small" @click="handleOption(1, row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleOption(2, row)">查看</el-button>
          <el-button type="text" size="small" @click="handleDelete(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination ref="pageBlock" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" @pagination="getList" />

    <!-- 新增、编辑、查看页面 -->
    <el-dialog title="详细信息" :visible.sync="dialogVisible" width="50%">
      <el-form :model="lendReturnForm" :rules="lendReturnRules" ref="lendReturnForm" label-width="120px"
        label-position="right">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="自编码" prop="encode">
              <el-input v-model="lendReturnForm.encode" placeholder="请输入自编码" :disabled="nowType != 0 ? true : false"
                @change="getOtherInfoByCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="借用人" prop="borrowById">
              <el-select v-model="lendReturnForm.borrowById" filterable placeholder="请选择借用人"
                :disabled="nowType == 2 ? true : false" clearable style="width: 100%;">
                <el-option v-for="(item, index) in userList" :key="index" :label="item.userName" :value="item.userId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="设备名称" prop="equipmentName">
              <el-input v-model="lendReturnForm.equipmentName" placeholder="请输入设备名称"
                :disabled="nowType == 2 ? true : false"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="型号" prop="model">
              <el-input v-model="lendReturnForm.model" placeholder="请输入型号"
                :disabled="nowType == 2 ? true : false"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="借用日期" prop="borrowTime">
              <el-date-picker v-model="lendReturnForm.borrowTime" type="datetime" clearable class="selectWidth"
                placeholder="请选择借用日期" value-format="yyyy-MM-dd HH:mm:ss" :disabled="nowType == 2 ? true : false"
                style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归还日期" prop="returnTime">
              <el-date-picker v-model="lendReturnForm.returnTime" type="datetime" clearable class="selectWidth"
                placeholder="请选择归还日期" value-format="yyyy-MM-dd HH:mm:ss" :disabled="nowType == 2 ? true : false"
                style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="借用期限（天）" prop="deadline">
              <el-input v-model="lendReturnForm.deadline" placeholder="请输入借用期限" :disabled="nowType === 2"
                @input="handleInput"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归还时设备情况" prop="returnEquipmentCondition">
              <el-select v-model="lendReturnForm.returnEquipmentCondition" clearable placeholder="请选择归还时设备情况"
                style="width: 100%;">
                <el-option v-for="(item, index) in dict.type.equipment_state" :key="index" :label="item.label"
                  :value="item.value" :disabled="nowType == 2 ? true : false"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="用途" prop="purpose">
              <el-input v-model="lendReturnForm.purpose" placeholder="请输入用途"
                :disabled="nowType == 2 ? true : false"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收人" prop="receivedById">
              <el-select v-model="lendReturnForm.receivedById" filterable placeholder="请选择接收人"
                :disabled="nowType == 2 ? true : false" clearable style="width: 100%;">
                <el-option v-for="(item, index) in adminUserList" :key="index" :label="item.admin" :value="item.adminId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="预计使用期限" prop="yjuseTime">
              <el-date-picker v-model="lendReturnForm.yjuseTime" type="datetime" clearable class="selectWidth"
                placeholder="请选择" value-format="yyyy-MM-dd HH:mm:ss" :disabled="nowType == 2 ? true : false">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际使用时间" prop="sjuseTime">
              <!-- <el-date-picker v-model="lendReturnForm.sjuseTime" type="datetime" clearable class="selectWidth"
                placeholder="请选择实际使用时间" value-format="yyyy-MM-dd HH:mm:ss" :disabled="nowType == 2 ? true : false">
              </el-date-picker> -->
              <el-input v-model="lendReturnForm.sjuseTime" placeholder="请输入" :disabled="nowType == 2 ? true : false"
                type="number"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="lendReturnForm.remark" placeholder="请输入备注"
                :disabled="nowType == 2 ? true : false"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" v-if="nowType != 2" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增、编辑、查看页面 -->
  </div>
</template>

<script>
import {
  addLendingReturn, deleteLendingReturn, editLendingReturn,
  getLendingReturn,
  getLRDetailByID
} from "../../../../api/smartSchool/schoolProperty/lendingReturn";
import { getRepairencode } from "../../../../api/smartSchool/schoolProperty/repairApplicant";
import { getUserList } from "../../../../api/smartSchool/schoolProperty/equipmenTledger";
import { getAdmin } from '@/api/smartSchool/schoolProperty/classiFication.js'

export default {
  dicts: ['equipment_state'],
  data() {
    return {
      queryParams: {
        equipmentName: '',
        borrowTime: '',
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      total: 0,
      lendReturnData: [],
      lendReturnForm: {
        id: '',
        encode: '',
        equipmentId: '',
        equipmentName: '',
        model: '',
        borrowTime: '',
        borrowById: '',
        borrowBy: '',
        purpose: '',
        deadline: null,
        returnTime: '',
        returnEquipmentCondition: '',
        receivedById: '',
        yjuseTime: '',
        sjuseTime: '',
        remark: '',
      },
      lendReturnRules: {
        encode: [
          { required: true, message: '请输入自编码', trigger: 'blur' },
        ],
        equipmentName: [
          { required: true, message: '请输入设备名称', trigger: 'blur' },
        ],
        model: [
          { required: true, message: '请输入型号', trigger: 'blur' },
        ],
        borrowById: [
          { required: true, message: '请输入借用人', trigger: 'blur' },
        ],
        borrowTime: [
          { required: true, message: '请输入借用日期', trigger: 'change' },
        ],
        deadline: [
          { required: true, message: '请输入借用期限', trigger: 'change' },
        ],
        purpose: [
          { required: true, message: '请输入用途', trigger: 'change' },
        ],
      },
      dialogVisible: false,
      nowType: 0, // 0新增、1编辑、2查看
      userList: [], //用户列表
      adminUserList: [] //管理员用户列表
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleInput() {
      // 获取输入框的值
      let value = this.lendReturnForm.deadline;
      // 移除非数字字符，包括小数点和负号
      value = value.replace(/[^0-9]/g, '');
      // 更新输入框的值
      this.lendReturnForm.deadline = value;
    },

    // 获取列表数据
    getList() {
      this.loading = true
      getLendingReturn({ ...this.queryParams }).then(res => {
        if (res.code == 200) {
          this.total = res.total
          this.lendReturnData = res.rows
          this.loading = false
        }
      })
    },

    // 重置搜索
    resetQuery() {
      this.queryParams = {
        equipmentName: '',
        borrowTime: '',
        pageNum: 1,
        pageSize: 10,
      }
      this.getList()
    },

    //根据自编码获取信息
    getOtherInfoByCode() {
      const code = this.lendReturnForm.encode
      getRepairencode(code).then(res => {
        if (res.code == 200) {
          this.lendReturnForm.equipmentId = res.data.equipmentId
          this.lendReturnForm.model = res.data.model
          this.lendReturnForm.equipmentName = res.data.equipmentName
        }
      })
    },

    // 0新增、1编辑、2查看
    handleOption(type, item) {
      this.lendReturnForm = {
        id: '',
        encode: '',
        equipmentId: '',
        equipmentName: '',
        model: '',
        borrowTime: '',
        borrowById: '',
        borrowBy: '',
        purpose: '',
        deadline: '',
        returnTime: '',
        returnEquipmentCondition: '',
        receivedById: '',
        yjuseTime: '',
        sjuseTime: '',
        remark: '',
      }
      this.nowType = type
      this.getSelectUser()
      this.getAdminUserList()
      if (type != 0) {
        const id = item.id
        getLRDetailByID(id).then(res => {
          if (res.code == 200) {
            Object.keys(this.lendReturnForm).forEach(key => {
              if (res.data[key]) {
                this.$set(this.lendReturnForm, key, res.data[key]);
              }
            })
          }
        })
      }
      this.dialogVisible = true
    },

    //获取用户列表数据
    getSelectUser() {
      getUserList().then(res => {
        if (res.code == 200) {
          this.userList = res.rows
        }
      })
    },

    //获取管理员用户列表
    getAdminUserList() {
      getAdmin().then(res => {
        if (res.code == 200) {
          this.adminUserList = res.data
        }
      })
    },

    //删除
    handleDelete(id) {
      this.$confirm("此操作将永久删除该数据，是否继续？", '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteLendingReturn(id).then(res => {
          if (res.code == 200) {
            this.$message.success("删除成功！")
          }
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除！'
        });
      });

    },

    //表单提交
    submitForm() {
      const borrowById = this.lendReturnForm.borrowById
      this.lendReturnForm.borrowBy = borrowById == '' ? '' : this.userList.find(item => item.userId == borrowById).userName
      const receivedById = this.lendReturnForm.receivedById
      this.lendReturnForm.receivedBy = receivedById == '' ? '' : this.adminUserList.find(item => item.adminId == receivedById).admin
      this.$refs['lendReturnForm'].validate((valid) => {
        if (valid) {
          if (this.nowType == 1) {
            //1编辑
            editLendingReturn({ ...this.lendReturnForm }).then(res => {
              if (res.code == 200) {
                this.$message.success("编辑成功！")
                this.dialogVisible = false
                this.getList()
              }
            })
          } else if (this.nowType == 0) {
            //0新增
            addLendingReturn({ ...this.lendReturnForm }).then(res => {
              if (res.code == 200) {
                this.$message.success("新增成功！")
                this.dialogVisible = false
                this.getList()
              }
            })
          }
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped></style>
