<template>
  <!-- <TableLayout :row-style="{height:'30px'}" :header-row-style="{height:'30px'}" size="mini" class="device-ip-table" :column="column" :data="tableData"></TableLayout> -->
  <el-table
    class="device-ip-table"
    height="180"
    size="mini"
    :row-style="{ height: '20px' }"
    :header-row-style="{ height: '20px', lineHeight: '14px' }"
    :data="ips"
    border
    style="width: 100%"
  >
    <el-table-column
      show-overflow-tooltip
      prop="group"
      label="组系"
      width="50"
      align="center"
    >
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      prop="ip"
      label="IP地址"
      width="280"
      align="center"
    >
      <template slot-scope="scope">
        <el-input v-model="scope.row.ip" placeholder="请输入内容"></el-input>
      </template>
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      prop="action"
      label="操作"
      width="180"
      align="center"
    >
      <template slot-scope="scope">
        <el-button
          :loading="loadingGroup === scope.row.group"
          @click.prevent="testConnect(scope.row)"
          type="primary"
          size="mini"
          >测试连接</el-button
        >
      </template>
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      prop="status"
      label="状态"
      width="50"
      align="center"
    >
      <template slot-scope="scope">
        <i class="device-status device-inline" v-if="scope.row.status"></i>
        <i class="device-status device-outline" v-else></i>
      </template>
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      prop="comment"
      label="备注说明"
      align="center"
    >
      <template slot-scope="scope">
        <el-input
          maxlength="20"
          class="custom-input"
          show-word-limit
          v-model="scope.row.comment"
        ></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
// import TableLayout from '@/components/layout/TableLayout.vue'
import { testConnectDeviceApi } from '@/api/training/device'
export default {
  components: {},
  props: {
    groups: {
      type: Number,
      default: 1
    },
    ips: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      loadingGroup: null
    }
  },
  methods: {
    groupChange (e) {
      console.log(e)
    },
    async testConnect (ipInfo) {
      try {
        const ipRex = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/
        if (ipRex.test(ipInfo.ip)) {
          console.log(ipInfo)
          this.loadingGroup = ipInfo.group
          const { data } = await testConnectDeviceApi({ host: ipInfo.ip })
          this.$set(ipInfo, 'status', data?.alive)
          this.loadingGroup = null
          if (!data?.alive) {
            this.$message.error('当前测试IP：【' + ipInfo.ip + '】不在线')
          } else {
            this.$message.success('当前测试IP：【' + ipInfo.ip + '】在线')
          }
        } else {
          this.$message.error('IP格式不正确')
        }
      } catch (error) {
        this.loadingGroup = null
      }
    }
  }
  // watch: {
  //   groups (newValue, oldValue) {
  //     console.log(newValue, oldValue)
  //     newValue > oldValue
  //       ? this.ips.push({})
  //       : this.ips.splice(this.ips.length - 1, 1)
  //   }
  // }
}
</script>

<style lang="scss" scoped>
// 基本样式
.device-ip-table {
  ::v-deep .device-status {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .device-inline {
    background-color: green;
    box-shadow: 0 0 3px 1px green;
  }
  .device-outline {
    box-shadow: 0 0 3px 1px rgb(255, 0, 0);
    background-color: rgb(255, 0, 0);
  }
}
</style>
<style lang="scss" scoped>
// 表格样式
.device-ip-table {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0px 2px 10px 0px rgba(16, 166, 180, 0.2);
  border: 1px solid #208ac6;
  ::v-deep .el-table__header-wrapper {
    th {
      padding: 6px 0;
      background-color: $--color-primary;
      border-right: none;
    }
    .cell {
      color: #fff;
    }
  }
  ::v-deep .el-table__body-wrapper {
    // border: 1px solid #82d0d8;
  }
  ::v-deep .device-status {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
  .device-inline {
    background-color: green;
    box-shadow: 0 0 3px 1px green;
  }
  .device-outline {
    box-shadow: 0 0 3px 1px rgb(255, 0, 0);
    background-color: rgb(255, 0, 0);
  }
  .cell {
    text-align: center;
  }

  th.el-table__cell {
    padding: 6px 0;
    background-color: $--color-primary;

    .cell {
      color: #fff;
    }
  }

  ._action_.edit {
    color: $--color-primary;
  }

  ._action_.view {
    color: $--color-primary;
  }

  ._action_.delete {
    color: $--color-danger;
  }

  .el-table__body-wrapper {
    max-height: calc(100vh - var(--table-max-height));
    overflow-y: auto;
  }

  .el-table__header .el-table__cell {
    border-right-color: rgba($color: #fff, $alpha: 0.3);
  }
}

.el-table::before,
.el-table--group::after,
.el-table--border::after {
  background-color: transparent;
}

.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #f1fafa;
}

.el-pagination {
  margin-top: 10px;
  text-align: right;
}
</style>
