<template>
  <div style="width: 100%;height: 100%;">
    <div style="text-align: right;margin-right: 5px;">
      <el-button class="doorbar-btn" type="primary" plain @click="isOn1 = !isOn1" style="margin-left: 3px">{{isOn1 ? '隐藏操作按钮': '开启操作按钮'}}</el-button>
      <el-button class="doorbar-btn" type="primary" plain @click="controlDool()">{{!isOn2 ? '开启黑名单与闸机联动': '关闭黑名单与闸机联动'}}</el-button>
    </div>
    <div class="success_info_body" style="margin: 0 10px;flex: 1">
      <div class="table_body">
        <div class="table_th">
          <div class="tr4 th_style">门禁分组</div>
          <div class="tr1 th_style" v-show="isOn1">操作</div>
        </div>
        <div class="table_main_body">
          <div class="table_inner_body" :style="{top: tableTop + 'px'}">
            <div v-for="(item,index) in tableList" class="table_tr" :key="index">
              <div class="tr4 tr">{{item.groupName}}</div>
              <div class="tr1 tr" v-show="isOn1">
                <el-button type="text" v-for="item in statusList" :key="item.value" size="small" @click.stop="editStatus(scope.row, item.value)" style="height: 20px;margin-top: -10px">
                  {{ item.name }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    <el-pagination layout="prev, pager, next" :total="tableListSize" style="width: 100%;text-align: center" @current-change="handleCurrentChange"/>-->
  </div>
</template>

<script>
import {controlGroup, gateLinkageSwitch, getGroupListPage, getSwitchStatus} from '@/api/device'
export default {
  name: 'DoorList',
  data() {
    return {
      defaultPhoto: require('@/assets/global_images/photo.png'),
      errorImg: require('@/assets/global_images/photo_error.png'),
      isOn1: false,
      isOn2: false,
      tableTimer: null,
      tableTop: 0,
      tableList: [],
      statusList: [
        { name: '常开', id: '1557975745699823618', value: '0' },
        { name: '常闭', id: '1557975746215723010', value: '3' },
        { name: '门开', id: '1557975746723233793', value: '2' },
        { name: '门闭', id: '1557975747402711041', value: '1' }
      ],
      tableListSize: 0,
      componentTimer: null,
      visibleSize: 8, // 容器内可视最大完整行数
      lineHeight: 20, // 每行的实际高度（包含margin-top/bottom,border等）
      componentTimerInterval: 3600000, //  刷新数据的时间间隔
      tableTimerInterval: 50, //  向上滚动 1px 所需要的时间，越小越快，推荐值 100
      listQuery: {
        groupName: '',
        gateCode: '',
        status: '',
        offset: 1,
        limit: 8
      }, // 筛选条件
      dialogFormVisible: false, // 是否显示编辑框
      timeRange: [], // 时间范围
      multipleSelection: [], // 多选选中项
      list: [], // 列表数据
      colorRow: {
        isColor: false,
        isPop: true
      },
      inoutTypeList: [],
      passWayList: [],
      total: 0, // 数据总数
      listLoading: true // 列表加载动画
    }
  },
  created() {
    getSwitchStatus().then(response => {
      if (response.code === 200) {
        this.isOn2 = response.data === 1
      }
    })
    this.fetchData()
  },
  methods: {
    controlDool() {
      this.isOn2 = !this.isOn2
      gateLinkageSwitch(this.isOn2 ? 1 : 0).then(response => {
        if (response.code === 200) {
          this.$message.success((this.isOn2 ? '开启' : '关闭') + '黑名单与闸机联动成功')
        }
      })
    },
    fetchData(isNowPage = true) {
      if (!isNowPage) { // 是否显示当前页，否则跳转第一页
        this.listQuery.offset = 1
      }
      getGroupListPage(this.listQuery).then(response => {
        if (response.code === 200) {
          this.tableList = response.data.rows
          this.tableListSize = parseInt(response.data.total)
        }
      })
    },
    editStatus(row, status) {
      controlGroup(row.id, status).then(response => {
        if (response.code === 200) {
          this.$message.success('通道控制成功')
          this.fetchData()
        }
      }).catch(_ => { // 异常情况，loading置为false
      })
    },
    handleCurrentChange(val) {
      this.listQuery.offset = val
      this.fetchData()
    },
    // 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
    changePage(val) {
      if (val && val.size) {
        this.listQuery.limit = val.size
      }
      if (val && val.page) {
        this.listQuery.offset = val.page
      }
      this.fetchData()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.doorbar-btn {
  height: 22px;
  padding-top: 4px;
  padding-right: 6px;
  padding-left: 6px;
  margin-right: 4px;
}
.table_body {
  width: 100%;
  margin-top: 0px;
}
.table_th {
  width: 100%;
  display: flex;
  height: 15px;
  line-height: 20px;
}
.tr {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  padding: 0 5px;
  text-align: center;
  font-size: 13px;
  height: 20px !important;
}
.tr1 {
  width: 35%;
}
.tr2 {
  width: 18%;
}
.tr3 {
  width: 15%;
  font-size: 13px;
}

.tr4 {
  flex: 1;
}
.tr5 {
  width: 100px;
}

.th_style {
  color: #b8dffd;
  font-size: 13px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
  text-align: center;
}
.table_main_body {
  width: 100%;
  height: 175px;
  overflow: hidden;
  position: relative;
  margin-top: 5px;
}
.table_inner_body {
  width: 100%;
  position: absolute;
  left: 0;
  color: #cce9ff;
}

.table_tr {
  display: flex;
  font-size: 13px;
  border: 1px solid rgb(71, 160, 199);
  margin-top: 2px;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
:hover{
  background: rgba(255, 153, 51, 0.6);
}
}
.table_tr0 {
  background: rgba(3, 145, 167, 0.1);
}
.table_tr1 {
  background: rgb(64, 87, 120);
}

::v-deep .el-pagination {
  .el-pagination__total {
    color: white !important;
  }
  .el-pagination__jump {
    color: white !important;
  }
  // 两个输入框
  .el-input__inner {
    background-color: #092546;
    border: 1px solid rgba(192, 192, 192, 0.479);
    color: white !important;
  }
  // 左右按键和里面的图标
  button {
    background-color: #092546;
    .el-icon::before {
      color: white;
    }
  }
  // 分页数字
  ul {
    color: white;
    .el-icon::before {
      color: white !important;
    }
  }
  // 分页数字的背景色
  ul > li {
    background-color: #092546;
  }
}
::v-deep .el-loading-mask {
  background-color: rgba(0, 0, 0, 0.479);
}

</style>