<template>
  <el-dialog
    title="货位详情"
    :visible.sync="addRepairNotesDialog"
    v-if="addRepairNotesDialog"
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    class="turnover-detail-box"
    append-to-body
    width="70%"
  >
    <el-empty
      description="暂无货位详情"
      v-if="storageLocationList.length == 0"
    ></el-empty>
    <div v-else class="detail-box">
      <div v-for="item of storageLocationList" :key="item.id">
        <div v-if="item.isOccupy == 0" class="detail-sigle-box true">
          <p>{{ item.code }}</p>
          <span>闲置</span>
        </div>
        <div v-if="item.isOccupy == 1" class="detail-sigle-box false">
          <p>{{ item.code }}</p>
          <span>在用</span>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'turnoverDetail',

    data() {
      return {
        addRepairNotesDialog: false,
        dataList: [
          {
            id: 1,
            code: 13,
            status: 1
          },
          {
            id: 2,
            code: 13,
            status: 2
          },
          {
            id: 3,
            code: 13,
            status: 1
          },
          {
            id: 4,
            code: 13,
            status: 1
          },
          {
            id: 5,
            code: 13,
            status: 2
          },
          {
            id: 6,
            code: 13,
            status: 2
          },
          {
            id: 7,
            code: 13,
            status: 2
          },
          {
            id: 8,
            code: 13,
            status: 2
          },
          {
            id: 9,
            code: 13,
            status: 1
          },
          {
            id: 10,
            code: 13,
            status: 1
          },
          {
            id: 11,
            code: 13,
            status: 1
          },
          {
            id: 12,
            code: 13,
            status: 1
          },
          {
            id: 13,
            code: 13,
            status: 1
          },
          {
            id: 14,
            code: 13,
            status: 1
          },
          {
            id: 15,
            code: 13,
            status: 1
          },
          {
            id: 16,
            code: 13,
            status: 1
          },
          {
            id: 17,
            code: 13,
            status: 1
          },
          {
            id: 18,
            code: 13,
            status: 1
          },
          {
            id: 19,
            code: 13,
            status: 1
          },
          {
            id: 20,
            code: 13,
            status: 1
          },
          {
            id: 21,
            code: 13,
            status: 1
          },
          {
            id: 22,
            code: 13,
            status: 1
          },
          {
            id: 23,
            code: 13,
            status: 1
          },
          {
            id: 24,
            code: 13,
            status: 1
          },
          {
            id: 25,
            code: 13,
            status: 1
          }
        ],
        // turnoverData: {},
        storageLocationList: []
      };
    },

    methods: {
      handleClose() {
        this.addRepairNotesDialog = false;
      },

      init(data) {
        // this.turnoverData = data;
        this.storageLocationList = data.extInfo.positionList;
        console.log(this.storageLocationList, '1111');
        // this.getStorageLocationList();
        this.addRepairNotesDialog = true;
      }

      // async getStorageLocationList() {
      //   await categoryVehicleList(this.turnoverData.categoryId).then((res) => {
      //     console.log(res, '货位数据');
      //   });
      // }
    }
  };
</script>

<style scoped lang="scss">
  .turnover-detail-box {
    .detail-box {
      padding: 0 2rem;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      color: #333;
      font-size: 1.1rem;
      overflow: auto;

      .detail-sigle-box {
        display: flex;
        height: 8rem;
        width: 7rem;
        margin: 1rem;
        align-items: center;
        flex-direction: column;
        justify-content: space-evenly;

        &.true {
          background-color: #95f204;
        }

        &.false {
          background-color: #02a7f0;
        }
      }
    }
  }
</style>
