<template>
  <div class="app-container">
    <!-- 上部分区域 资产详情 -->
    <el-row style="margin-bottom: 20px">
      <el-col :span="3">
        <el-image
          style="width: 100px; height: 100px"
          :src="'http://localhost:9102/img' + assetData.pic"
        ></el-image>
      </el-col>
      <el-col class="detail" :span="6">
        <span class="tips">{{assetData.name}}</span>
        <span class="number">{{assetData.modelNumber}}</span>
      </el-col>
      <el-col class="detail" :span="3">
        <span>所属分类</span>
      </el-col>
      <el-col class="detail" :span="3">
        <span>生产厂家</span>
      </el-col>
      <el-col class="detail" :span="3">
        <span>位置</span>
      </el-col>
      <el-col class="detail" :span="2">
        <span>服务期限</span>
      </el-col>
      <el-col class="detail" :span="3">
        <span>下次维护日期</span>
      </el-col>
      <el-col class="detail" :span="1">
        <el-button type="primary" size="small" @click="backToList" style="float:right">返回</el-button>
      </el-col>
      <el-col class="detail" :span="6">
        <span class="tips">{{assetData.amount}}{{assetData.unit}}</span>
      </el-col>
      <el-col class="detail" :span="3">
        <span class="tips">{{assetData.tagName}}</span>
      </el-col>
      <el-col class="detail" :span="3">
        <span class="tips">{{assetData.address}}</span>
      </el-col>
      <el-col class="detail" :span="3">
        <span class="tips">{{assetData.factory}}</span>
      </el-col>
      <el-col class="detail" :span="2">
        <span class="tips">{{assetData.serviceLife}}天</span>
      </el-col>
      <el-col class="detail" :span="4">
        <span class="tips">{{assetData.nextIndate}}</span>
      </el-col>
    </el-row>

    <!-- 下部分区域 详细分配情况 -->
    <el-row style="margin-bottom: 20px">
      <el-col :span="24">
        <span class="title">搜索</span>
        <el-input
          placeholder="输入编号搜索"
          v-model="searchNumber"
          clearable
          @keyup.enter.native="getItem(searchNumber, currentSearchState, currentSearchOrder)"
          @blur="getItem(searchNumber, currentSearchState, currentSearchOrder)"
          style="width:150px"
          size="small"
        ></el-input>
        <!-- 筛选 -->
        <span class="title">筛选</span>
        <el-tag
          class="tag"
          :type="currentSearchState == -1? null: 'info'"
          @click="getItem(searchNumber, -1, currentSearchOrder)"
        >全部</el-tag>
        <el-tag
          class="tag"
          :type="currentSearchState == 0? null: 'info'"
          @click="getItem(searchNumber, 0, currentSearchOrder)"
        >未用</el-tag>
        <el-tag
          class="tag"
          :type="currentSearchState == 1? null: 'info'"
          @click="getItem(searchNumber, 1, currentSearchOrder)"
        >已用</el-tag>
        <el-tag
          class="tag"
          :type="currentSearchState == 2? null: 'info'"
          @click="getItem(searchNumber, 2, currentSearchOrder)"
        >待维护</el-tag>
        <el-tag
          class="tag"
          :type="currentSearchState == 3? null: 'info'"
          @click="getItem(searchNumber, 3, currentSearchOrder)"
        >报废</el-tag>
        <!-- 排序 -->
        <span class="title">排序</span>
        <el-tag
          class="tag"
          :type="currentSearchOrder == 0? null: 'info'"
          @click="getItem(searchNumber, currentSearchState, 0)"
        >资产编号顺序</el-tag>
        <el-tag
          class="tag"
          :type="currentSearchOrder == 1? null: 'info'"
          @click="getItem(searchNumber, currentSearchState, 1)"
        >资产编号倒序</el-tag>
        <el-tag
          class="tag"
          :type="currentSearchOrder == 2? null: 'info'"
          @click="getItem(searchNumber, currentSearchState, 2)"
        >更新时间顺序</el-tag>
        <el-tag
          class="tag"
          :type="currentSearchOrder == 3? null: 'info'"
          @click="getItem(searchNumber, currentSearchState, 3)"
        >更新时间倒序</el-tag>
        <el-button class="bottom-button" type="text" @click="toRecord">操作记录</el-button>
        <el-button class="bottom-button" type="text" @click="openEditCodeDialog">修改编号</el-button>
        <el-button class="bottom-button" type="text" @click="openAddDialog">添加资产</el-button>
        <el-button class="bottom-button" type="text" @click="openMaintainDialog">维护资产</el-button>
      </el-col>
    </el-row>
    <div v-loading="loading">
      <div class="card" v-for="item in itemData" :key="item.id">
        <div class="number" style="margin-bottom: 20px">
          <span class="number-title">{{item.modelNo}}</span>
          <span style="float:right">
            {{item.state == 0? "未使用": item.state == 1?
            "已使用":item.state == 2? "维护中": "已报废"}}
          </span>
        </div>
        <div class="number">
          <span v-if="item.state == 1">{{item.username}} / {{item.phone}}</span>
          <el-popover placement="bottom" trigger="click">
            <el-button
              class="single-item"
              type="text"
              @click="openDealDialog(item.id, item.modelNo, item.state)"
            >处置资产</el-button>
            <el-button
              class="single-item"
              type="text"
              @click="deleteItem(item.id, item.modelNo)"
            >删除资产</el-button>
            <span slot="reference" class="options">· · ·</span>
          </el-popover>
        </div>
      </div>
    </div>

    <!-- 添加资产的dialog -->
    <el-dialog title="添加资产" :visible.sync="addDialogVisible" width="400px">
      <el-form ref="addForm" :model="addItemForm" :rules="rules1" label-width="70px">
        <el-form-item label="数量" prop="amount">
          <el-input v-model="addItemForm.amount" placeholder="请输入数量" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="addItem">提交</el-button>
      </span>
    </el-dialog>

    <!-- 修改资产编号的dialog -->
    <el-dialog title="修改编号" :visible.sync="editCodeDialogVisible" width="600px">
      <el-form ref="editCodeForm" :model="editCodeForm" :rules="rules2" label-width="100px">
        <el-form-item label="部门编号" prop="divisionCode">
          <el-input v-model="editCodeForm.divisionCode" placeholder="请输入部门编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="字母前缀" prop="suffixCode">
          <el-input v-model="editCodeForm.suffixCode" placeholder="请输入字母前缀" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editCodeDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="editCode">提交</el-button>
      </span>
    </el-dialog>

    <!-- 处置资产的dialog -->
    <el-dialog title="处置资产" :visible.sync="dealDialogVisible" width="400px">
      <el-form ref="dealForm" :model="dealForm" :rules="rules3" label-width="80px">
        <el-form-item label="资产编号" prop="modelNo">
          <el-input v-model="dealForm.modelNo" disabled></el-input>
        </el-form-item>
        <el-form-item label="资产状态" prop="state">
          <el-select v-model="dealForm.state" placeholder="请选择资产状态" style="width: 100%">
            <el-option label="未用" value="0" v-if="dealForm.currentState != 0"></el-option>
            <el-option label="已用" value="1" v-if="dealForm.currentState != 1"></el-option>
            <el-option label="报废" value="3" v-if="dealForm.currentState == 0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择人员" prop="userId" v-if="dealForm.state == 1">
          <el-select
            v-model="dealForm.userId"
            filterable
            placeholder="请选择要分配给的人员"
            style="width: 100%"
          >
            <el-option v-for="user in userData" :key="user.id" :label="user.name" :value="user.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dealDialogVisible=false">取消</el-button>
        <el-button
          type="primary"
          @click="manageItem(dealForm.id, dealForm.state, dealForm.userId)"
        >提交</el-button>
      </span>
    </el-dialog>

    <!-- 维护资产的dialog -->
    <el-dialog title="维护资产" :visible.sync="maintainDialogVisible" width="800px">
      <el-form ref="maintainForm" :model="maintainForm" :rules="rules4" label-width="140px">
        <el-form-item label="资产编号" prop="ids">
          <el-select
            v-model="maintainForm.ids"
            multiple
            placeholder="请选择要维护的资产"
            style="width: 100%"
          >
            <el-option
              v-for="item in itemData"
              v-if="item.state == 2"
              :key="item.id"
              :label="item.modelNo"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维护人" prop="maintain">
          <el-input v-model="maintainForm.maintain" placeholder="请输入维护人" clearable></el-input>
        </el-form-item>
        <el-form-item label="维护人联系方式" prop="maintainPhone">
          <el-input v-model="maintainForm.maintainPhone" placeholder="请输入联系方式" clearable></el-input>
        </el-form-item>
        <el-form-item label="维护厂家" prop="maintainCompany">
          <el-input v-model="maintainForm.maintainCompany" placeholder="请输入维护厂家" clearable></el-input>
        </el-form-item>
        <el-form-item label="维护厂家联系方式" prop="maintainCompanyPhone">
          <el-input v-model="maintainForm.maintainCompanyPhone" placeholder="请输入联系方式" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="maintainDialogVisible=false">取消</el-button>
        <el-button type="primary" @click="maintainItem">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      loading: false,
      assetId: null,
      assetData: [],
      itemData: [],
      userData: [],
      divisionCode: "",
      suffixCode: "",
      searchNumber: "",
      currentSearchState: -1,
      currentSearchOrder: 0,
      addDialogVisible: false,
      editCodeDialogVisible: false,
      dealDialogVisible: false,
      maintainDialogVisible: false,
      addItemForm: {
        amount: null
      },
      editCodeForm: {
        divisionCode: null,
        suffixCode: null
      },
      dealForm: {
        id: null,
        modelNo: "",
        state: 0,
        userId: null,
        currentState: 0
      },
      maintainForm: {
        ids: [],
        maintain: "",
        maintainPhone: "",
        maintainCompany: "",
        maintainCompanyPhone: ""
      },
      rules1: {
        amount: [
          { required: true, message: "请输入要增加的数量", trigger: "blur" }
        ]
      },
      rules2: {
        divisionCode: [
          { required: true, message: "请输入部门编码", trigger: "blur" }
        ],
        suffixCode: [
          { required: true, message: "请输入前缀编码", trigger: "blur" }
        ]
      },
      rules3: {
        state: [{ required: true, message: "请选择状态", trigger: "blur" }]
      },
      rules4: {
        ids: [
          { required: true, message: "请选择要维护的资产", trigger: "blur" }
        ],
        maintain: [{ required: true, message: "请输入", trigger: "blur" }],
        maintainPhone: [{ required: true, message: "请输入", trigger: "blur" }],
        maintainCompany: [
          { required: true, message: "请输入", trigger: "blur" }
        ],
        maintainCompanyPhone: [
          { required: true, message: "请输入", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    //获取资产详情
    getAsset() {
      this.loading = true;
      request({
        url: "/goods/getAssetById",
        method: "post",
        params: { id: this.assetId }
      })
        .then(response => {
          this.assetData = response.data;
          //顺便再获取一下物品列表
          this.getItem("", -1, 0);
        })
        .catch(error => {
          this.loading = false;
        });
    },
    //获取物品
    getItem(searchNumber, currentSearchState, currentSearchOrder) {
      this.loading = true;
      this.searchNumber = searchNumber;
      this.currentSearchOrder = currentSearchOrder;
      this.currentSearchState = currentSearchState;
      request({
        url: "/goods-no/getItems",
        method: "post",
        params: {
          goodsId: this.assetData.id,
          modelNo: this.searchNumber,
          order: this.currentSearchOrder,
          state: this.currentSearchState
        }
      })
        .then(response => {
          this.itemData = response.data;
          this.loading = false;
          //重新单独获取数量
          this.resetAmount();
          //如果数组有长度 获取一下当前的divisionCode和suffixCode
          if (this.itemData.length > 0) {
            this.divisionCode = this.itemData[0].divisionCode;
            this.suffixCode = this.itemData[0].suffixCode;
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    //重新获取数量
    resetAmount() {
      request({
        url: "/goods-no/getItemAmount",
        method: "post",
        params: {
          id: this.assetData.id
        }
      })
        .then(response => {
          this.assetData.amount = response.data;
        })
        .catch(error => {});
    },
    //打开新建的dialog
    openAddDialog() {
      this.addItemForm.amount = null;
      this.addDialogVisible = true;
    },
    //打开编辑前缀的dialog
    openEditCodeDialog() {
      this.editCodeForm.divisionCode = this.divisionCode;
      this.editCodeForm.suffixCode = this.suffixCode;
      this.editCodeDialogVisible = true;
    },
    //打开处置资产的dialog
    openDealDialog(id, modelNo, state) {
      //在此处获取下拉列表的用户
      this.getUser();
      this.dealForm.id = id;
      this.dealForm.modelNo = modelNo;
      this.dealForm.state = null;
      this.dealForm.userId = null;
      this.dealForm.currentState = state;
      this.dealDialogVisible = true;
    },
    //打开维护资产的dialog
    openMaintainDialog() {
      this.maintainForm.ids = [];
      this.maintainForm.maintain = "";
      this.maintainForm.maintainPhone = "";
      this.maintainForm.maintainCompany = "";
      this.maintainForm.maintainCompanyPhone = "";
      this.maintainDialogVisible = true;
    },
    //维护资产
    maintainItem() {
      this.$refs.maintainForm.validate(valid => {
        if (valid) {
          this.loading = true;
          request({
            url: "/goods-no/maintainItems",
            method: "post",
            params: {
              ids: this.maintainForm.ids.join(","),
              operator: this.maintainForm.maintain,
              operatorPhone: this.maintainForm.maintainPhone,
              company: this.maintainForm.maintainCompany,
              companyPhone: this.maintainForm.maintainCompanyPhone
            }
          })
            .then(response => {
              this.$message({
                message: "维护完毕",
                type: "success"
              });
              this.maintainDialogVisible = false;
              this.getItem("", -1, 0);
            })
            .catch(error => {
              this.loading = false;
            });
        }
      });
    },
    //增加数量
    addItem() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.loading = true;
          request({
            url: "/goods-no/addItems",
            method: "post",
            params: {
              goodsId: this.assetData.id,
              amount: this.addItemForm.amount
            }
          })
            .then(response => {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.addDialogVisible = false;
              this.getItem("", -1, 0);
            })
            .catch(error => {
              this.loading = false;
            });
        }
      });
    },
    //修改资产编号
    editCode() {
      this.$refs.editCodeForm.validate(valid => {
        if (valid) {
          if (
            this.editCodeForm.divisionCode == this.divisionCode &&
            this.editCodeForm.suffixCode == this.suffixCode
          ) {
            this.$message({
              message: "尚未修改",
              type: "error"
            });
          } else {
            this.loading = true;
            request({
              url: "/goods-no/editItemCode",
              method: "post",
              params: {
                goodsId: this.assetData.id,
                divisionCode: this.editCodeForm.divisionCode,
                suffixCode: this.editCodeForm.suffixCode
              }
            })
              .then(response => {
                this.$message({
                  message: "修改编号成功",
                  type: "success"
                });
                this.editCodeDialogVisible = false;
                this.getItem("", -1, 0);
              })
              .catch(error => {
                this.loading = false;
              });
          }
        }
      });
    },
    //删除物品
    deleteItem(id, name) {
      this.$confirm("确定要删除资产" + name + "吗", "添加标签", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      })
        .then(() => {
          this.loading = true;
          request({
            url: "/goods-no/deleteItemById",
            method: "post",
            params: { id: id }
          })
            .then(response => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getItem("", -1, 0);
            })
            .catch(error => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    //处置资产
    manageItem(id, state, userId) {
      this.$refs.dealForm.validate(valid => {
        if (valid) {
          if (state == 1 && userId == null) {
            this.$message({
              message: "请选择要分配的用户",
              type: "error"
            });
          } else {
            this.loading = true;
            request({
              url: "/goods-no/manageItem",
              method: "post",
              params: {
                id: id,
                state: state,
                userId: state == 1 ? userId : null,
                operatorId: window.sessionStorage.getItem("LSUserId")
              }
            })
              .then(response => {
                this.$message({
                  message: "资产处置完毕",
                  type: "success"
                });
                this.getItem("", -1, 0);
                this.dealDialogVisible = false;
              })
              .catch(error => {
                this.loading = false;
              });
          }
        }
      });
    },
    //获取用户信息
    getUser() {
      request({
        url: "/user/getUser",
        method: "post"
      })
        .then(response => {
          this.userData = response.data;
        })
        .catch(error => {});
    },
    //回到前一个页面
    backToList() {
      this.$router.go(-1);
    },
    //到操作记录
    toRecord() {
      this.$router.push("/operation/" + this.assetId);
    }
  },
  mounted() {
    //为本页的assetId赋值
    this.assetId = this.$route.params.id;
    if (this.assetId == null) {
      this.$router.go("/404");
    } else {
      this.getAsset();
    }
  }
};
</script>

<style scoped>
.tag {
  cursor: pointer;
}
.detail {
  line-height: 50px;
  height: 50px;
}
.detail span {
  color: #444;
  font-size: 14px;
}
.detail .tips {
  color: #777;
}
.detail .number {
  font-size: 12px;
  color: #999;
}
.title {
  font-size: 14px;
  line-height: 40px;
  margin: 0 15px 0 15px;
}
.bottom-button {
  float: right;
  margin-left: 5px;
}
.card {
  float: left;
  width: 200px;
  height: 67px;
  background-color: #eee;
  margin: 0 10px 10px 0;
  padding: 10px;
}
.card .number {
  width: 100%;
  font-size: 12px;
  color: #555;
}
.card .number-title {
  font-size: 13px;
  font-weight: bold;
}
.options {
  float: right;
  font-weight: bold;
  cursor: pointer;
}
.single-item {
  margin: 0 5px;
  padding: 0;
}
</style>

