<template>
  <div class="cabinet">
    <div class="box">
      <div v-for="(item, index) in keyList" :key="index" class="cabinet-box" :class="addClass(item)">
        <a-popover v-model="visible[index]" placement="bottom" trigger="click">
          <div slot="title">
            <span>{{ item.codeName }}</span>
            <span>-</span>
           <span> {{ dict.label.key_status[item.status] }}</span>
            <span style="color: #e66767;" v-if="item.status=='2'&&item.using.isTimeout=='1'&&item.using.isTips=='1'">（超期已提醒）
            </span>
            
          </div>
          <div
            style="
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              width: 200px;
              height: 80px;
              cursor: pointer;
            "
            slot="content"
          >
            <div @click="editKeyAdien(1, index, '开柜确认', item)" style="width: 90px">
              <img src="../../../../assets/vehicle/xq-in.png" alt="" />
              <span>开柜</span>
            </div>
            <div @click="editKeyAdien(3, index, '关联钥匙柜', item)" v-if="item.status == '3'" style="width: 90px">
              <img src="../../../../assets/vehicle/jcgl-in.png" alt="" />
              <span>关联车辆</span>
            </div>
            <div @click="editKeyAdien(2, index, '钥匙柜维修', item)" style="width: 90px" v-if="item.status != '4'">
              <img src="../../../../assets/vehicle/wx-in.png" alt="" />
              <span>钥匙柜维修</span>
            </div>
            <div @click="editKeyAdien(7, index, '维修完成', item)" style="width: 90px" v-if="item.status == '4'">
              <img src="../../../../assets/vehicle/wx-in.png" alt="" />
              <span>维修完成</span>
            </div>
            <div @click="editKeyAdien(4, index, '解除关联', item)" style="width: 90px" v-if="item.carId">
              <img src="../../../../assets/vehicle/jcgl-in.png" alt="" />
              <span>解除关联</span>
            </div>
            <div
              @click="editKeyAdien(5, index, '归还提醒', item)"
              style="width: 90px"
              v-if="item.carId && item.using.isTimeout == '1'"
            >
              <img src="../../../../assets/vehicle/txyx-in.png" alt="" />
              <span>归还提醒</span>
            </div>
            <div @click="editKeyAdien(6, index, '使用记录', item)" style="width: 90px">
              <img src="../../../../assets/vehicle/syjl-in.png" alt="" />
              <span>使用记录</span>
            </div>
          </div>
          <div>
            <div style="font-size: 36px">
              {{ index + 1 }}
            </div>
            <div style="font-size: 14px; color: #777; margin-top: 9px">{{ item.plateNumber }}</div>
          </div>
        </a-popover>
      </div>
    </div>
    <div class="rigth-cabinet">
      <img src="../../../../assets/vehicle/yjgl.png" alt="" />
      <div class="edit-box">
        <div>
          <span class="tab"></span>
          <span>钥匙在柜</span>
        </div>
        <div>
          <span class="tab" style="background: #ff9d17"></span>
          <span>钥匙使用中</span>
        </div>
        <div>
          <span class="tab" style="background: #e66767"></span>
          <span>维修中</span>
        </div>
        <div>
          <span class="tab" style="background: #adadad"></span>
          <span>钥匙柜未绑定钥匙</span>
        </div>
      </div>
      <div class="imgs">
        <img style="cursor: pointer;" @click="openConfig(1)" src="../../../../assets/vehicle/yjkm.png" alt="" />
        <img style="cursor: pointer;" @click="openConfig(2)" src="../../../../assets/vehicle/zdpz.png" alt="" />
      </div>
    </div>
    <OpenCabinet ref="openCa" :formType="formType" @add="addCabinText" />
    <Configuration ref="opemModul"/>
  </div>
</template>

<script>
import { KeyCaseList, getOpenOne, getRepairSuccess, getRepair, getCarBind, getUnbind,Reminder } from '@/api/keys.js'
import OpenCabinet from './OpenCabinet.vue'
import Configuration from './Configuration.vue'
export default {
  components: { OpenCabinet,Configuration },
  data() {
    return {
      keyList: [],
      visible: Array.from({ length: 30 }).map((item) => false),
      formType: 1,
      showNum:1
    }
  },
  dicts:['key_status'],
  methods: {
    funKeyList() {
      KeyCaseList().then((res) => {
        this.keyList = res.data
      })
    },
    addClass(item) {
      if (item.status == '1') {
        return ' active1'
      }
      if (item.status == '2') {
        return 'cabinet-box'
      }
      if (item.status == '3') {
        return ' active3'
      }
      if (item.status == '4') {
        return ' active2'
      }
    },
    editKeyAdien(type, index, title, item) {
      this.$set(this.visible, index, false)
      // console.log('-------this.visible[index]',this.visible[index]);
      this.formType = type
      this.$refs.openCa.show(title, item)
    },
    // 确定编辑
    addCabinText(vals, flag) {
      if (flag == '开柜' || this.formType == 1) {
        getOpenOne(vals).then((res) => {
          if (res.code == 200) {
            this.$message.success('开柜成功')
          }
          this.funKeyList()
        })
      } else if (flag == '维修完成' || this.formType == 7) {
        getRepairSuccess(vals).then((res) => {
          if (res.code == 200) {
            this.$message.success('操作成功')
          }
          this.funKeyList()
        })
      } else if (flag == '维修' || this.formType == 2) {
        getRepair(vals).then((res) => {
          if (res.code == 200) {
            this.$message.success('操作成功')
          }
          this.funKeyList()
        })
      } else if (flag == '单个关联' || this.formType == 3) {
        getCarBind(vals).then((res) => {
          if (res.code == 200) {
            this.$message.success('关联成功')
          }
          this.funKeyList()
        })
      } else if (this.formType == 4) {
        getUnbind(vals).then((res) => {
          if (res.code == 200) {
            this.$message.success('解除关联成功')
          }
          this.funKeyList()
        })
      }
      else if (this.formType == 5) {
        Reminder(vals).then((res) => {
          if (res.code == 200) {
            this.$message.success('提醒成功')
          }
          this.funKeyList()
        })
      }
    },
    show() {
      this.visible = true
    },
    confirm() {},
    openConfig(num){
      this.showNum=num
      this.$refs.opemModul.visible = true
    },
  },
  created() {
    this.funKeyList()
  },
}
</script>

<style lang="less" scoped>
.cabinet {
  flex: 1;
  // width: 90%;
  height: 654px;
  background: #f0f8fe;
  box-shadow: 0px 5px 9px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  opacity: 1;
  padding: 10px 10px;
  display: flex;
  .box {
    min-width: 750px;
    max-width: 950px;
    display: flex;
    flex-wrap: wrap;
  }
  .cabinet-box {
    width: 15%;
    height: 90px;
    background: url('../../../../assets/vehicle/cs2.png') no-repeat;
    background-size: 100% 100%;
    padding: 2px 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    cursor: pointer;
  }

  .rigth-cabinet {
    width: 170px;
    .edit-box {
      font-family: PingFang SC;
      font-size: 12px;
      color: #4d4d4d;
      margin-top: 30px;
      margin-left: 10px;
      .tab {
        display: inline-block;
        width: 27px;
        height: 12px;
        background: #1cd855;
        border-radius: 0px;
        opacity: 1;
        margin-right: 10px;
      }
    }
  }
  .imgs {
    margin-top: 180px;
    img {
      display: inline-block;
      width: 113px;
      height: 113px;
    }
  }
}
.active1 {
  background: url('../../../../assets/vehicle/ls2.png') no-repeat !important;
  background-size: 100% 100% !important;
}
.active2 {
  background: url('../../../../assets/vehicle/hs2.png') no-repeat !important;
  background-size: 100% 100% !important;
}
.active3 {
  background: url('../../../../assets/vehicle/hs3.png') no-repeat !important;
  background-size: 100% 100% !important;
}
</style>
