<template>
  <div class="app-container2">
    <div class="title">{{ cinemaInfo.movieName }}</div>
    <div class="titleInfo">

    </div>
    <div class="centerInfo">

    </div>

    <div class="box">
      <div
        v-for="(seatItem, index) in cinemaInfo.seatList"
        class="seatClass"
        :key="seatItem.id"
        :style="{
          height: cinemaInfo.height + 'rem',
          width: cinemaInfo.width + 'rem',
          top: cinemaInfo.mg_top+(seatItem.gRow-1) * (cinemaInfo.height) + 'rem',
          left: cinemaInfo.mg_left+(seatItem.gCol-1) * (cinemaInfo.width) + 'rem',
          margin: 0,
          padding: 0,
          display:block,
          verticalAlign:bottom,
        }"
      >
        <img
          v-if="seatItem.type==0"
          class="seatImg0Class"
          :seatId="seatItem.id"
          :seatIndex="index"
          style="width:92%;height:95%"
          background-attachment="fixed"

        />
        <img
          v-if="seatItem.type==1"
          class="seatImg1Class"
          :seatId="seatItem.id"
          :seatIndex="index"
          src="@/assets/kuwei/130.png"
          style="width:92%;height:95%"
          background-attachment="fixed"
        />
        <img
          v-if="seatItem.type==2"
          class="seatImg2Class"
          :seatId="seatItem.id"
          :seatIndex="index"
          style="width:92%;height:95%"
          background-attachment="fixed"
          src="@/assets/kuwei/130.png"
        />
        <img
          v-if="seatItem.type==3"
          class="seatImgClass"
          :seatId="seatItem.id"
          :seatIndex="index"
          src="@/assets/kuwei/133.png"
          style="width:100%;height:100%"
        />
        <img
          v-if="seatItem.type==4"
          class="seatImgClass"
          :seatId="seatItem.id"
          :seatIndex="index"
          src="@/assets/kuwei/134.png"
          style="width:100%;height:100%"
        />
        <img15
          v-if="seatItem.type==5"
          class="seatImgClass"
          :seatId="seatItem.id"
          :seatIndex="index"
          src="@/assets/kuwei/135.png"
          style="width:100%;height:100%"
        />
        <span class="seatImgkxClass2" v-if="seatItem.type==0">空 闲</span>
        <span class="seatImgClass2" v-if="seatItem.type!=-1">{{seatItem.code}}</span>
      </div>

    </div>

  </div>
</template>

<script>
import crudReport from '@/api/report'
export default {
  data() {
    return {
      //影院 厅信息
      cinemaInfo: {
        width: 2, // 每个座位的宽
        height: 2, // 每个座位的高
        mg_top:0,//距离左边距
        mg_left:0,//距离右边距
        positionDistin: 2.1, // 每个座位偏移距离
        movieName: "一号仓库",
        //座位信息
        seatList: [
          {
            //座位id
            id: "16879097",
            //座位X轴实际位置，去掉过道
            //座位X轴位置
            gRow: 1,
            //座位Y轴位置
            gCol: 1,
            //类型：区分座位状态，详情看seatTypeList数组，按0,1,2顺序下去代表不同状态，切换图片
            type: "0",
          },
          {
            id: "16879101",
            gRow: 1,
            gCol: 2,
            type: "1",

          },
          {
            id: "16879104",
            gRow: 1,
            gCol: 3,
            type: "0",

          },
          {
            id: "16879099",
            gRow: 1,
            gCol: 5,
            type: "0",

          },
          {
            id: "16879102",
            gRow: 1,
            gCol: 6,
            type: "0",
          }

        ],
      }

    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    //点击座位的时候切换图片。
    getList() {
      crudReport.get().then(res => {
        this.cinemaInfo = res
      })
    },
  },
};
</script>

<style scoepd>

.app-container2 {
  background: #050C1E;
  height: 2800px;
  min-height: 88vh;
  padding: 20px 20px 0px 20px;
}
.seatClass {
  background: #050C1E;
  position: absolute;
}
.box {
  border: 0px;
  background: #050C1E;
  position: relative;
  margin-top: -40px;
  fvertical-align:bottom;
  display:block;
  margin: 0;
  padding: 0;
}
.seatImg0Class {
  background: rgba(166, 129, 230, 0.4);
  position: absolute;
  top: 0;
  left: 0;
  height: 90%;
  border-radius:3px;
  display:block;
}
.seatImg1Class {
  background: rgba(53, 180, 94, 1);
  position: absolute;
  top: 0;
  left: 0;
  height: 90%;
  border-radius:3px;
}
.seatImg2Class {
  background: rgba(225, 94, 104, 1);
  position: absolute;
  top: 0;
  left: 0;
  border-radius:3px;
}
.seatImgClass {
  background: #345578;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.seatImgClass2 {
  color: #100d0b;
  font-size: 7px;
  position: absolute;
  top: 20px;
  left: 2px;
  height: 100%;
  text-align:center;
}
.seatImgkxClass2 {
  color: rgba(255, 255, 255, 0.94);
  font-size: 10px;
  position: absolute;
  top: 6px;
  left: 8px;
  height: 100%;
  font-weight:bold;
  text-align:center;
}
.title {
  width: 100%;
  height: 35px;
  background-image: linear-gradient(45deg, #9fa5d5, #aebaf8);
  text-align: center;
  line-height: 35px;
  font-size: 14px;
  color: #fff;
  letter-spacing: 2px;
  font-style:normal;
}
.titleInfo {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #ccc;
  margin-top: 10px;
  padding: 0 10px 0 10px;
}
.centerInfo {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}

</style>
