<template>
  <!-- <TableLayout :row-style="{height:'30px'}" :header-row-style="{height:'30px'}" size="mini" class="device-part-table" :column="column" :data="tableData"></TableLayout> -->
  <el-table
    :stripe="true"
    class="device-part-table"
    height="250"
    size="mini"
    :row-style="{ height: '20px' }"
    :header-row-style="{ height: '20px', lineHeight: '14px' }"
    :data="part"
    border
    style="width: 100%"
  >
    <!-- <el-table-column prop="id" label="" width="50" align="center">
    </el-table-column> -->
    <el-table-column
      show-overflow-tooltip
      prop="name"
      label="部件名称"
      width="280"
      align="center"
    >
      <!-- <template slot-scope="scope">
        <el-input size="mini" v-model="scope.row.name"></el-input>
      </template> -->
    </el-table-column>
    <el-table-column
      prop="action"
      label="部件状态类型"
      width="250"
      align="center"
      show-overflow-tooltip
    >
      <template slot-scope="scope">
        <span v-for="(item, index) in scope.row.operation" :key="item.id">
          {{ item.name }}
          {{ index < scope.row.operation.length - 1 ? "、" : "" }}
        </span>
      </template>
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      prop="keycode"
      label="部件键值"
      width="250"
      align="center"
    >
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      prop="comment"
      label="操作维护"
      align="center"
    >
      <template slot-scope="scope">
        <el-button size="mini" type="danger" @click="remove(scope)"
          >移除</el-button
        >
        <el-button
          size="mini"
          type="primary"
          @click="$emit('editorOperation', scope.row)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
    <el-table-column
      show-overflow-tooltip
      prop="comment"
      label="部件说明"
      align="center"
    >
    </el-table-column>
  </el-table>
</template>

<script>
import { getOperationApi } from "@/api/training/operation";
// import TableLayout from '@/components/layout/TableLayout.vue'
export default {
  components: {},
  props: {
    part: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      operationList: [],
    };
  },
  activated() {
    this.initData();
  },
  methods: {
    async initData() {
      const { data } = await getOperationApi();
      this.operationList = data;
      console.log(data);
    },
    remove(data) {
      const index = this.part.findIndex((item) => {
        if (item.keycode === data.row.keycode) {
          return true;
        }
        return false;
      });
      this.part.splice(index, 1);
      console.log(data);
    },
  },
  // 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-part-table {
  margin: 10px 0;
  ::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-part-table {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0px 2px 10px 0px rgba(16, 166, 180, 0.2);
  border: 1px solid #10a6b4;
  ::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;
   .el-table__row--striped .el-table__cell {
      background-color: #f1fafa !important;
    }
  }
  ::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>
