<template>
  <div v-loading="dataListLoading">
    <el-row>
      <el-col :span="5">
        <div class="grid-content flex">
          <label class="flex_son">设备类型</label>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content bg-purple-light">
          <el-button class="div_width div_height" @click="btnClic(0)">
            {{deviceInfo.type}}
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row margin-bottom="0">
      <el-col :span="5">
        <div class="grid-content flex">
          <label class="flex_son">设备名称</label>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content bg-purple-light">
          <el-button class="div_width div_height" @click="btnClic(1)">
            {{deviceInfo.brandName}}
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="5">
        <div class="grid-content flex">
          <label class="flex_son">规格型号</label>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content bg-purple-light">
          <el-button class="div_width div_height" @click="btnClic(2)">
            {{deviceInfo.specType}}
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="5">
        <div class="grid-content flex">
          <label class="flex_son">条码编号</label>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content bg-purple-light">
          <el-button class="div_width div_height" @click="btnClic(3)">
            {{deviceInfo.code}}
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="5">
        <div class="grid-content flex">
          <label class="flex_son">设备状态</label>
        </div>
      </el-col>
      <el-col :span="19">
        <el-select
          v-model="deviceInfo.selectValue"
          ref="pop"
          class="div_width"
          @change="selectChange(deviceInfo.selectValue)"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="5">
        <div class="grid-content flex">
          <label class="flex_son">使用者</label>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content bg-purple-light">
          <el-dropdown
            placement="bottom"
            trigger="click"
            @command="batchOperate"
            class="div_width div_height"
          >
            <el-button class="div_width div_height">
              {{deviceInfo.user}}
              <i class="el-icon-arrow-right el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="staff">人员</el-dropdown-item>
              <el-dropdown-item command="depat">使用地/部门/库存</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="5">
        <div class="grid-content flex">
          <label class="flex_son">自带编码</label>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content bg-purple-light">
          <el-button class="div_width div_height" @click="btnClic(5)">
            {{deviceInfo.qr}}
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="5">
        <div class="grid-content flex">
          <label class="flex_son">入库时间</label>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content bg-purple-light">
          <el-button class="div_width div_height" @click="btnClic(6)">{{deviceInfo.gmtInbound}}</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="5">
        <div class="grid-content flex">
          <label class="flex_son">出借时间</label>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content bg-purple-light">
          <el-button class="div_width div_height" @click="btnClic(7)">{{deviceInfo.gmtOutbound}}</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="5">
        <div class="grid-content flex">
          <label class="flex_son">备注</label>
        </div>
      </el-col>
      <el-col :span="19">
        <div class="grid-content bg-purple-light">
          <el-button class="div_width div_height" @click="btnClic(8)">
            {{deviceInfo.mark}}
            <i class="el-icon-arrow-right el-icon--right"></i>
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-button type="primary" class="div_width" @click="goOrGo">{{btnScanValue}}</el-button>
  </div>
</template>>
<script>
import {
  apiFindEquipmentByCode,
  apiChangeEquipment,
} from "@/api/api_equipment";
import * as dd from "dingtalk-jsapi";
export default {
  data() {
    return {
      options: [
        {
          value: 0,
          label: "入库",
        },
        {
          value: 1,
          label: "售出",
        },
        {
          value: 2,
          label: "不可用",
        },
        {
          value: 3,
          label: "调拨",
        },
        {
          value: 4,
          label: "申领",
        },
      ],
      staff: "",
      deviceInfo: {
        id: 0,
        code: "",
        selectValue: "",
        type: "",
        specType: "",
        brandName: "",
        typeId: "",
        specId: "",
        brandId: "",
        user: "",
        userId: "",
        gmtInbound: "",
        gmtOutbound: "",
        originalCode: "", //设备原有标识
        mark: "",
        employee: true, //是否员工使用
        state: 0, //状态
        equipmentState: 0, //设备状态
        no: "", //流程编号
        buyAmount: 0.0, //买入金额
        saleAmount: 0.0, //出售金额
        qr: "", //设备本身标识
        owner: "", //所属人
        unit: "", //单位
        num: 0, //数量
      },
      dataListLoading: false,
      btnScanValue: "继续盘点",
      btnOpt: 0, //0表示继续扫一扫 1表示更新
      oldKey: "", //记录第一获取的值，
      userId: 0, //回收时传过来的用户id，用来判断设备是否为用户名下
    };
  },
  created() {
    // this.handleGetImgCaptcha()
  },
  mounted() {
    this.getDateCookie();
    console.log(this.deviceInfo.code.length);
    
    if (typeof this.$route.query.type == "undefined") {
      if (this.deviceInfo.code.length == 0) {
        //缓存中没有数据
        this.scan();
        this.deviceInfo.selectValue = this.options[0].value;
      }
    } else if (this.$route.query.type == 4) {
      //人员资产回收
      this.btnScanValue = "继续回收";
      this.userId = this.$cookie.get("idUser");
      this.scan();
    } else {
      this.checkEditDevicinfo();
      if (this.$route.query.type == 2) {
        //人员选择过来
        this.deviceInfo.employee = true;
      } else if (this.$route.query.type == 3) {
        //使用地选择过来
        this.deviceInfo.employee = false;
      }
    }
  },
  methods: {
    batchOperate(command) {
      this.saveDateCookie();
      switch (command) {
        case "staff":
          //去搜索人员
          this.$router.push({ name: "devicestaffdepat", query: { type: 0 } });
          break;
        case "depat":
          //去搜索部门
          this.$router.push({ name: "devicestaffdepat", query: { type: 1 } });
          break;
      }
    },
    goOrGo() {
      console.log(this.btnOpt);
      console.log;
      if (this.btnOpt == 0) {
        this.scan();
      } else {
        //更新设备信息
        //这里判断关键字段是否为空
        if (this.deviceInfo.user == "") {
          this.$message.error("请选择使用者");
          return;
        }
        if (this.deviceInfo.code == "") {
          this.$message.error("请扫码后再编辑");
          return;
        }
        if (this.deviceInfo.type == "") {
          this.$message.error("请选择设备类型");
          return;
        }
        if (this.deviceInfo.brandName == "") {
          this.$message.error("请选择设备名称");
          return;
        }

        if (this.deviceInfo.specType == "") {
          this.$message.error("请选择规格型号");
          return;
        }
        this.dataListLoading = true;
        apiChangeEquipment(this.deviceInfo).then((data) => {
          console.log(data.data);
          if (data.code == 0) {
              if(this.$route.query.type == 4){
                this.$message("回收成功");
                this.btnOpt = 0;
                this.btnScanValue = "继续回收";
              }else{
                this.$message("更新成功");
                this.btnOpt = 0;
                this.btnScanValue = "继续盘点";
              }
            
          } else {
            this.$message.error("异常");
          }

          this.dataListLoading = false;
        });
      }
    },
    scan() {
      this.clearDateCookie();
      console.log("开始扫码");
      console.log(dd);
      dd.biz.util.scan({
        type: "all", // type 为 all、qrCode、barCode，默认是all。
        onSuccess: function (data) {
          console.log("sucess");
          console.log(data);
          this.deviceInfo.code = data.text;
          this.getDeviceInfo();
        }.bind(this),
        onFail: function (err) {
          console.log("fail");
          console.log(err);
        }.bind(this),
      });
    },
    btnClic(type) {
      console.log("btnClick");
      this.saveDateCookie();
      if (type === 0) {
        //选择类型
        this.$router.push({ name: "devicetype" });
      } else if (type === 1) {
        //选择设备名称
        this.$router.push({ name: "devicetype", query: { type: 1 } });
      } else if (type === 2) {
        //选择规格型号
        this.$router.push({ name: "devicetype", query: { type: 2 } });
      } else if (type === 3) {
        //扫二维码
        this.scan();
      } else if (type === 4) {
        //选择使用者
        this.$refs.pop.$el.click();
      } else if (type === 5) {
        //自带编码
        this.$router.push({ name: "deviceqr" });
      } else if (type === 6) {
        //入库时间
      } else if (type === 7) {
        //出街时间
      } else if (type === 8) {
        //备注
        this.$router.push({ name: "devicemark" });
      }
    },
    checkEditDevicinfo() {
      if (this.oldKey !== this.getKey()) {
        this.btnOpt = 1;
        this.btnScanValue = "更新设备信息";
      }
    },
    selectChange(value) {
      this.deviceInfo.state = value;
      this.deviceInfo.equipmentState = value;
      //console.log(value)
      this.saveDateCookie();
      this.checkEditDevicinfo();
    },
    getDeviceInfo() {
      this.dataListLoading = true;
      apiFindEquipmentByCode({}, this.deviceInfo.code).then((data) => {
        console.log(data);
        
        if (data.code == 0) {
          if (typeof data.data == "undefined") {
            this.$message("未绑定设备");
          } else {
            this.deviceInfo.type = data.data.type;
            this.deviceInfo.typeId = data.data.typeId;
            this.deviceInfo.specType = data.data.specType;
            this.deviceInfo.specId = data.data.specId;
            this.deviceInfo.brandName = data.data.brandName;
            this.deviceInfo.brandId = data.data.brandId;
            this.deviceInfo.code = data.data.code;
            this.deviceInfo.user = data.data.user;
            this.deviceInfo.userId = data.data.userId;
            this.deviceInfo.gmtInbound = data.data.gmtInbound;
            this.deviceInfo.gmtOutbound = data.data.gmtOutbound;
            this.deviceInfo.originalCode = data.data.originalCode;
            this.deviceInfo.mark = data.data.mark;
            this.deviceInfo.id = data.data.id;
            this.deviceInfo.num = data.data.num;
            this.deviceInfo.unit = data.data.unit;
            this.deviceInfo.owner = data.data.owner;
            this.deviceInfo.qr = data.data.qr;
            this.deviceInfo.state = data.data.state;
            this.deviceInfo.equipmentState = data.data.equipmentState;
            this.deviceInfo.buyAmount = data.data.buyAmount;
            this.deviceInfo.saleAmount = data.data.saleAmount;
            this.deviceInfo.no = data.data.no;
            this.deviceInfo.employee = data.data.employee;
            //this.deviceInfo.selectValue = data.data.selectValue
            this.deviceInfo.selectValue = this.options[
              this.deviceInfo.equipmentState
            ].value;

            this.oldKey = this.getKey();
            if (this.$route.query.type == 4) {
              if (data.data.userId != this.userId) {
                this.$message.error("改设备不在该人员名下！请核对！");
              } else {
                this.deviceInfo.state = 0
                this.deviceInfo.equipmentState = 0
                this.deviceInfo.selectValue = this.options[
                this.deviceInfo.equipmentState
                ].value;
                this.deviceInfo.employee = false
                this.deviceInfo.userId = 217
                this.deviceInfo.user = '库房'
                this.deviceInfo.owner = '库房'
                this.btnScanValue = '资产回收'
                this.btnOpt = 1
              }
            }
          }
        } else {
          this.$message.error("异常" + data.msg);
        }

        this.dataListLoading = false;
      });
    },
    clearDateCookie() {
      this.deviceInfo.type = "";
      this.deviceInfo.typeId = "";
      this.deviceInfo.specType = "";
      this.deviceInfo.specId = "";
      this.deviceInfo.brandName = "";
      this.deviceInfo.brandId = "";
      this.deviceInfo.code = "";
      this.deviceInfo.user = "";
      this.deviceInfo.userId = "";
      this.deviceInfo.gmtInbound = "";
      this.deviceInfo.gmtOutbound = "";
      this.deviceInfo.originalCode = "";
      this.deviceInfo.mark = "";
      this.deviceInfo.id = 0;
      this.deviceInfo.num = 0;
      this.deviceInfo.unit = "";
      this.deviceInfo.owner = "";
      this.deviceInfo.qr = "";
      this.deviceInfo.state = 0;
      this.deviceInfo.equipmentState = 0;
      this.deviceInfo.buyAmount = 0.0;
      this.deviceInfo.saleAmount = 0.0;
      this.deviceInfo.no = "";
      this.deviceInfo.employee = true;
      //this.deviceInfo.selectValue = this.$cookie.set('selectValue')
      this.deviceInfo.selectValue = this.options[
        this.deviceInfo.equipmentState
      ].value;

      this.saveDateCookie();
    },
    getKey() {
      return (
        this.deviceInfo.type +
        this.deviceInfo.typeId +
        this.deviceInfo.specType +
        this.deviceInfo.specId +
        this.deviceInfo.brandName +
        this.deviceInfo.brandId +
        this.deviceInfo.code +
        this.deviceInfo.user +
        this.deviceInfo.userId +
        this.deviceInfo.gmtInbound +
        this.deviceInfo.gmtOutbound +
        this.deviceInfo.originalCode +
        this.deviceInfo.mark +
        this.deviceInfo.id +
        this.deviceInfo.num +
        this.deviceInfo.unit +
        this.deviceInfo.owner +
        this.deviceInfo.qr +
        this.deviceInfo.state +
        this.deviceInfo.equipmentState +
        this.deviceInfo.buyAmount +
        this.deviceInfo.saleAmount +
        this.deviceInfo.no +
        this.deviceInfo.employee
      );
    },
    saveDateCookie() {
      this.$cookie.set("strFirs", this.deviceInfo.type);
      this.$cookie.set("idFirs", this.deviceInfo.typeId);
      this.$cookie.set("strThir", this.deviceInfo.specType);
      this.$cookie.set("idThir", this.deviceInfo.specId);
      this.$cookie.set("strSec", this.deviceInfo.brandName);
      this.$cookie.set("idSec", this.deviceInfo.brandId);
      this.$cookie.set("qrCode", this.deviceInfo.code);
      this.$cookie.set("userName", this.deviceInfo.user);
      this.$cookie.set("idUser", this.deviceInfo.userId);
      this.$cookie.set("inputTime", this.deviceInfo.gmtInbound);
      this.$cookie.set("outTime", this.deviceInfo.gmtOutbound);
      this.$cookie.set("code", this.deviceInfo.originalCode);
      this.$cookie.set("reamrk", this.deviceInfo.mark);
      this.$cookie.set("devId", this.deviceInfo.id);
      this.$cookie.set("devNum", this.deviceInfo.num);
      this.$cookie.set("devUnit", this.deviceInfo.unit);
      this.$cookie.set("devOwner", this.deviceInfo.owner);
      this.$cookie.set("devQr", this.deviceInfo.qr);
      this.$cookie.set("devState", this.deviceInfo.state);
      this.$cookie.set("devEQState", this.deviceInfo.equipmentState);
      this.$cookie.set("devBuyAmount", this.deviceInfo.buyAmount);
      this.$cookie.set("devSaleAmount", this.deviceInfo.saleAmount);
      this.$cookie.set("devNo", this.deviceInfo.no);
      this.$cookie.set("devIsEmployee", this.deviceInfo.employee);
      //this.$cookie.set('selectValue', this.deviceInfo.selectValue)
    },
    getDateCookie() {
      this.deviceInfo.type = this.$cookie.get("strFirs");
      this.deviceInfo.typeId = this.$cookie.get("idFirs");
      this.deviceInfo.specType = this.$cookie.get("strThir");
      this.deviceInfo.specId = this.$cookie.get("idThir");
      this.deviceInfo.brandName = this.$cookie.get("strSec");
      this.deviceInfo.brandId = this.$cookie.get("idSec");
      this.deviceInfo.code = this.$cookie.get("qrCode");
      this.deviceInfo.user = this.$cookie.get("userName");
      this.deviceInfo.userId = this.$cookie.get("idUser");
      this.deviceInfo.gmtInbound = this.$cookie.get("inputTime");
      this.deviceInfo.gmtOutbound = this.$cookie.get("outTime");
      this.deviceInfo.originalCode = this.$cookie.get("code");
      this.deviceInfo.mark = this.$cookie.get("reamrk");
      this.deviceInfo.id = this.$cookie.get("devId");
      this.deviceInfo.num = this.$cookie.get("devNum");
      this.deviceInfo.unit = this.$cookie.get("devUnit");
      this.deviceInfo.owner = this.$cookie.get("devOwner");
      this.deviceInfo.qr = this.$cookie.get("devQr");
      this.deviceInfo.state = this.$cookie.get("devState");
      this.deviceInfo.equipmentState = this.$cookie.get("devEQState");
      this.deviceInfo.buyAmount = this.$cookie.get("devBuyAmount");
      this.deviceInfo.saleAmount = this.$cookie.get("devSaleAmount");
      this.deviceInfo.no = this.$cookie.get("devNo");
      this.deviceInfo.employee = this.$cookie.get("devIsEmployee");
      //this.deviceInfo.selectValue = this.$cookie.set('selectValue')
      this.deviceInfo.selectValue = this.options[
        this.deviceInfo.equipmentState
      ].value;
    },
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 10px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5f2f1;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.div_height {
  height: 38px;
}
.div_width {
  width: 100%;
}
.width_100 {
  width: 100px;
}
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  padding: 1em;
}
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border: 1px solid;
}
.flex_son {
  width: 100%;
  height: 100%;
  border: 0x solid;
}
.zero_size {
  width: 1px;
  height: 1px;
}
</style>