<template>
  <div class="waterMark">
    <div class="deviceBox">
      <div class="deviceBtnGroup">
        <h4>水印下发</h4>
        <!-- <el-button
          type="primary"
          icon="el-icon-plus"
          @click.native.stop="handleAdddevice()"
          >导入</el-button
        > -->
      </div>

      <div class="deviceTable">
        <div class="batchBox" v-if="this.multipleSelection.length !== 0">
          <el-button type="text" icon="el-icon-s-promotion">批量下发</el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          stripe
          style="width: 100%"
          height="calc(100% - 40px)"
          v-loading="loading"
          :row-class-name="tableRowClassName"
          highlight-current-row
          @selection-change="handleSelectionChange"
        >
          <template slot="empty">
            <el-empty :image-size="160" description="暂无数据"></el-empty>
          </template>
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="设备CMD_ID" width="125">
            <template slot-scope="scope">{{ scope.row.cmdid }}</template>
          </el-table-column>
          <!-- <el-table-column prop="channel" label="通道"> </el-table-column> -->
          <el-table-column
            prop="bottomLeft"
            label="通道1左下角水印"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.index == tableCli"
                v-model="scope.row.bottomLeft"
              />
              <span v-else>{{ scope.row.bottomLeft }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="bottomRIght"
            label="通道1右下角水印"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.index == tableCli"
                v-model="scope.row.bottomRIght"
              />
              <span v-else>{{ scope.row.bottomRIght }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="bottomLeft"
            label="通道2左下角水印"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.index == tableCli"
                v-model="scope.row.bottomLeft"
              />
              <span v-else>{{ scope.row.bottomLeft }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="bottomRIght"
            label="通道2右下角水印"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.index == tableCli"
                v-model="scope.row.bottomRIght"
              />
              <span v-else>{{ scope.row.bottomRIght }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="bottomLeft"
            label="通道3左下角水印"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.index == tableCli"
                v-model="scope.row.bottomLeft"
              />
              <span v-else>{{ scope.row.bottomLeft }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="bottomRIght"
            label="通道3右下角水印"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.index == tableCli"
                v-model="scope.row.bottomRIght"
              />
              <span v-else>{{ scope.row.bottomRIght }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="bottomLeft"
            label="通道4左下角水印"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.index == tableCli"
                v-model="scope.row.bottomLeft"
              />
              <span v-else>{{ scope.row.bottomLeft }}</span></template
            >
          </el-table-column>
          <el-table-column
            prop="bottomRIght"
            label="通道4右下角水印"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input
                v-if="scope.row.index == tableCli"
                v-model="scope.row.bottomRIght"
              />
              <span v-else>{{ scope.row.bottomRIght }}</span></template
            >
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="120">
            <template slot-scope="scope">
              <el-button
                type="text"
                v-if="scope.row.index == tableCli"
                :disabled="multipleSelection.length !== 0"
                @click="handleSave(scope.row, scope)"
                >保存</el-button
              >
              <el-button
                v-else
                type="text"
                :disabled="multipleSelection.length !== 0"
                @click="handleEdit(scope.row, scope)"
                >编辑</el-button
              >
              <el-button type="text" :disabled="multipleSelection.length !== 0"
                >下发</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pageNation">
          <el-pagination
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :current-page="page"
            :page-size="pageSize"
            layout="sizes, prev, pager, next, jumper,total"
            :total="total"
            background
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { getTowerListApi, delTowerApi } from "@/utils/api/index";
export default {
  components: {},
  data() {
    return {
      tableData: [
        {
          cmdid: "10020",
          bottomLeft: "省检-四班-500kV芜城5382线038#小号侧 ",
          bottomRIght: "西格玛-2020-09-10",
        },

        {
          cmdid: "10021",
          channel: "通道1",
          bottomLeft: "上海市普陀区金沙江路 1518 弄",
          bottomRIght: "上海市普陀区金沙江路 1518 弄",
        },
        {
          cmdid: "10021",
          channel: "通道2",
          bottomLeft: "上海市普陀区金沙江路 1518 弄",
          bottomRIght: "上海市普陀区金沙江路 1518 弄",
        },
        {
          cmdid: "10021",
          channel: "通道3",
          bottomLeft: "上海市普陀区金沙江路 1518 弄",
          bottomRIght: "上海市普陀区金沙江路 1518 弄",
        },
        {
          cmdid: "10021",
          channel: "通道4",
          bottomLeft: "上海市普陀区金沙江路 1518 弄",
          bottomRIght: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      multipleSelection: [],
      isEdit: false,
      tableCli: -1,
      page: 1, // 当前页数
      pageSize: 20, // 每页数量
      total: 0, //总条数
      loading: false,
    };
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //选中
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
      this.tableCli = -1;
    },
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex;
    },
    handleEdit(val, scope) {
      console.log(val, scope);
      this.tableCli = scope.$index;
      console.log(this.tableCli);
    },
    handleSave(val, scope) {
      this.tableCli = -1;
    },
    handleCurrentChange(val) {
      this.page = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
  },
};
</script>
<style lang="less">
.waterMark {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  padding: 12px 12px;
  background: @color-white;
  .deviceBox {
    border: 1px solid #dddddd;
    height: calc(100% - 24px);
    padding: 12px;
    border-radius: 4px;
    .searchBox {
      margin-top: 8px;
      .ml10 {
        margin-left: 10px;
      }
      .el-form {
        .dybox {
          .el-form-item__content {
            width: 120px;
          }
        }
        .xlbox {
          .el-form-item__content {
            width: 160px;
          }
        }
      }
    }
  }
  .deviceBtnGroup {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .deviceTable {
    margin-top: 8px;
    height: calc(100% - 40px);
    position: releative;
    .batchBox {
      height: 40px;
      position: absolute;
      line-height: 40px;
      background: #fafafa;
      width: calc(100% - 116px);
      left: 78px;
      z-index: 4;
      top: 55px;
    }
    .el-input--small {
      font-size: 12px;
      .el-input__inner {
        padding: 0px 8px;
      }
    }
  }
}
</style>
