<template>
  <div class="dilog">
    <el-dialog
      width="40%"
      title="亮灯提示"
      :visible.sync="Redlightvisible"
      :before-close="close"
    >
      <el-table
        :data="RedlightData"
        height="300px"
        @selection-change="handleSelectionChange"
        header-cell-class-name="Redlight"
        ref="multipleTable"
      >
        <el-table-column type="selection" width="55" :selectable="selectable">
        </el-table-column>
        <el-table-column property="imei1" label="IMEI/SN" width="150">
          <template slot-scope="{ row }">
            <span>
              {{ row.imei1 || row.imei2 || row.sn }}
            </span>
          </template>
        </el-table-column>
        <el-table-column property="model_info" label="机器信息" width="280">
          <template slot-scope="{ row }">
            <span style="display: felx; align-items: center">
              <el-popover placement="right" width="350" trigger="click">
                <img
                  v-if="!!row['img'] || row['goods_img']"
                  style="height: 350px"
                  :src="row['img'] || row['goods_img']"
                />
                <img
                  v-if="!!row['img'] || row['goods_img']"
                  slot="reference"
                  style="float: left; height: 50px"
                  :src="row['img'] || row['goods_img']"
                />
              </el-popover>
              {{
                row["brand_name"] +
                  row["model_name"] +
                  +row["rom_name"] +
                  row["color_name"] || row["machine_name"]
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column property="status" label="亮灯状态">
          <template slot-scope="{ row }">
            <span>
              {{ row.tipsStatus == 0 ? "不在货架" : "成功" }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button type="warning" @click="closeLight">关灯</el-button>
        <el-button @click="quzou">已取走</el-button>
        <el-button type="primary" @click="close">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["Redlightvisible", "RedlightData"],
  data() {
    return {
      gridDataList: [],
    };
  },
  methods: {
    close() {
      this.$emit("Batchdialogclose");
    },
    //关灯
    closeLight() {
      this.$emit("tipCloseLight", this.gridDataList);
    },
    //取走
    quzou() {
      this.$emit("tipCloseLight", this.gridDataList, 1);
    },
    //选中事件
    handleSelectionChange(e) {
      this.gridDataList = e;
    },

    selectable(row, rowIndex) {
      if (row.tipsStatus == 0) {
        this.Redlight();
      } else {
        return true;
      }
    },
    //清空选中状态
    clearCheckboxRow() {
      this.$refs.multipleTable.clearSelection();
    },
    Redlight() {
      return "Redlight";
    },
  },
};
</script>

<style scoped lang='scss'>
::v-deep .el-table .Redlight .cell .el-checkbox__inner {
  //找到表头那一行，然后把里面的复选框隐藏掉
  display: none !important;
}
</style>