<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
      <el-form-item label="设备名称" prop="equipmentName">
        <el-input v-model="queryParams.equipmentName" placeholder="请输入设备名称" clearable />
      </el-form-item>
      <el-form-item label="领用人" prop="recipientBy">
        <el-input v-model="queryParams.recipientBy" placeholder="请输入领用人" clearable />
      </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="collectionData" stripe>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号" type="index" width="50" align="center" />
      <el-table-column label="自编码" align="center" prop="encode" width="180" />
      <el-table-column label="设备名称" align="center" prop="equipmentName" />
      <el-table-column label="型号" align="center" prop="model" />
      <el-table-column label="领用日期" align="center" prop="recipientTime" width="200" />
      <el-table-column label="领用人" align="center" prop="recipientBy" />
      <el-table-column label="退还日期" align="center" prop="returnTime" width="200" />
      <el-table-column label="退还时设备情况" align="center" prop="returnEquipmentCondition" />
      <el-table-column label="接收人" align="center" prop="receivedBy" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="操作" align="center" prop="orgname" width="150" fixed="right">
        <template slot-scope="{ row }">
          <div>
            <el-button type="text" size="small" @click="handleOption(2, row)">查看</el-button>
            <el-button type="text" size="small" @click="handleOption(1, row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
          </div>
        </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="collectionForm" :rules="collectionRules" ref="achievementForm" label-width="120px"
        label-position="right">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="自编码" prop="encode">
              <el-input v-model="collectionForm.encode" placeholder="请输入自编码" @change="getRencode"
                :disabled="nowType != 0 ? true : false"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备名称" prop="equipmentName">
              <el-input v-model="collectionForm.equipmentName" 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="model">
              <el-input v-model="collectionForm.model" placeholder="请输入型号"
                :disabled="nowType == 2 ? true : false"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="领用人" prop="recipientById">
              <el-select v-model="collectionForm.recipientById" filterable placeholder="请选择领用人" clearable
                style="width: 100%;" :disabled="nowType == 2 ? true : false">
                <el-option v-for="(item, index) in userListly" :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="recipientTime">
              <el-date-picker v-model="collectionForm.recipientTime" 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="returnTime">
              <el-date-picker v-model="collectionForm.returnTime" 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-row>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="接收人" prop="receivedById">
              <el-select v-model="collectionForm.receivedById" filterable placeholder="请选择接收人" clearable
                style="width: 100%;" :disabled="nowType == 2 ? true : false">
                <el-option v-for="(item, index) in adminUserListjs" :key="index" :label="item.admin"
                  :value="item.adminId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="退还时设备情况" prop="returnEquipmentCondition">
              <el-input v-model="collectionForm.returnEquipmentCondition" 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="yjuseTime">
              <el-date-picker v-model="collectionForm.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="collectionForm.sjuseTime" 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-row>
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="collectionForm.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 {
  getReceive,
  queryReceive,
  addReceive,
  editReceive,
  deleteReceive,

} from '@/api/smartSchool/schoolProperty/collectionLedger.js'
import { getUserList } from "../../../../api/smartSchool/schoolProperty/equipmenTledger";
import { getAdmin } from '@/api/smartSchool/schoolProperty/classiFication.js'
import {
  getRepairencode,//根据自编码获取设备信息
} from '@/api/smartSchool/schoolProperty/repairApplicant.js'
export default {
  data() {
    return {
      queryParams: {
        equipmentName: '',
        recipientBy: '',
        pageNum: 1,
        pageSize: 10,
      },
      loading: false,
      total: 0,
      collectionData: [],
      //领用人
      userListly: [],
      //接受人
      adminUserListjs: [],
      //新增
      collectionForm: {
        encode: '',
        equipmentName: '',
        model: '',
        recipientById: '',
        recipientBy: '',
        recipientTime: '',
        returnTime: '',
        receivedById: '',
        receivedBy: '',
        returnEquipmentCondition: '',
        yjuseTime: '',
        sjuseTime: '',
        remark: '',


      },
      dialogVisible: false,
      nowType: 0, // 0新增、1编辑、2查看
      collectionRules: {
        encode: [
          { required: true, message: "自编码不能为空", trigger: "blur" }
        ],
        recipientTime: [
          { required: true, message: "领用日期不能为空", trigger: "blur" }
        ],
        recipientById: [
          { required: true, message: "领用人不能为空", trigger: "blur" }
        ],
        returnTime: [
          { required: true, message: "退还日期不能为空", trigger: "blur" }
        ],
        returnEquipmentCondition: [
          { required: true, message: "退还时设备情况不能为空", trigger: "blur" }
        ],
        receivedById: [
          { required: true, message: "接收人不能为空", trigger: "blur" }
        ],
        yjuseTime: [
          { required: true, message: "预计使用时间不能为空", trigger: "blur" }
        ],
        sjuseTime: [
          { required: true, message: "实际使用时间不能为空", trigger: "blur" }
        ]
      },
      dialogVisible: false,
      isEditable: true,


    }
  },
  created() {
    this.getList();
    this.getSelectUser();
    this.getAdminUserList();

  },
  methods: {
    // 获取列表数据
    getList() {
      getReceive(this.queryParams).then(response => {
        this.loading = false;
        this.collectionData = response.rows;
        console.log('this.collectionData ', this.collectionData);
        this.total = response.total;
      }).catch(err => {
        this.loading = false;
      })
    },
    // 0新增、1编辑、2查看
    handleOption(type, item) {
      this.collectionForm = {
        id: '',
        encode: '',
        equipmentName: '',
        model: '',
        recipientById: '',
        recipientBy: '',
        recipientTime: '',
        returnTime: '',
        receivedById: '',
        receivedBy: '',
        returnEquipmentCondition: '',
        yjuseTime: '',
        sjuseTime: '',
        remark: '',
      }
      this.nowType = type;
      this.getSelectUser();
      this.getAdminUserList();
      if (type != 0) {
        const id = item.id;
        queryReceive(id).then(res => {
          if (res.code == 200) {
            console.log(res.data);
            Object.keys(this.collectionForm).forEach(key => {
              if (res.data[key]) {
                this.$set(this.collectionForm, key, res.data[key]);
              }
            });
          }

        })
      }
      this.dialogVisible = true
    },

    //获取领用人数据
    getSelectUser() {
      getUserList().then(res => {
        if (res.code == 200) {
          this.userListly = res.rows
        }
      })
    },

    //获取接受人列表
    getAdminUserList() {
      getAdmin().then(res => {
        if (res.code == 200) {
          this.adminUserListjs = res.data
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const { id, equipmentName, model } = row;
      const equipmentNames = equipmentName || this.equipmentNames;
      const models = model || this.models;
      this.$modal
        .confirm(`是否确认删除"${equipmentNames} ${models}"的数据项？`)
        .then(() => {
          return deleteReceive(id, equipmentNames, models);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },

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

      this.getList();
    },
    // 取消按钮
    cancel() {
      this.dialogVisible = false;
      this.reset();
    },
    //自编码
    async getRencode() {
      try {
        const response = await getRepairencode(this.collectionForm.encode);
        console.log("response", response);
        this.collectionForm.equipmentId = response.data.equipmentId;
        this.collectionForm.equipmentName = response.data.equipmentName;
        this.collectionForm.model = response.data.model;

      } catch (error) {

      }
    },


    reset() {
      // 这里需要重置对话框表单
      this.collectionForm = {
        encode: null,
        equipmentName: null,
        model: null,
        recipientBy: null,
        recipientTime: null,
        returnTime: null,
        receivedBy: null,
        returnEquipmentCondition: null,
        yjuseTime: null,
        sjuseTime: null,
        remark: null,

      };
    },


    //表单提交
    submitForm() {
      const recipientById = this.collectionForm.recipientById;
      this.collectionForm.recipientBy = recipientById == '' ? '' : this.userListly.find(item => item.userId == recipientById).userName
      const receivedById = this.collectionForm.receivedById;
      this.collectionForm.receivedBy = receivedById == '' ? '' : this.adminUserListjs.find(item => item.adminId == receivedById).admin
      this.$refs["achievementForm"].validate(valid => {
        if (valid) {
          if (this.nowType == 1) {
            if (this.collectionForm.id != null) {
              editReceive(this.collectionForm).then(response => {
                console.log('this.collectionForm', this.collectionForm)
                this.$modal.msgSuccess("修改成功");
                this.dialogVisible = false;
                this.getList();
              });
            }
          } else if (this.nowType == 0) { // 新增操作 
            addReceive(this.collectionForm).then(response => {
              console.log('this.collectionForm', this.collectionForm)
              console.log(response)
              this.$modal.msgSuccess("新增成功");
              this.dialogVisible = false;
              this.getList();
            });
          }
        }
      });
    }


  }
}
</script>

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