<template>
  <div class="" style="background: #f9f9f9">
    <div class="main">
      <div class="tit">设备绑定</div>
      <div class="xian"></div>
      <div class="table">
        <!-- 批量操作 -->
        <!-- <table>
          <tr>
            <th colspan="8" class="tableLeft">
              <el-button type="primary" size="mini" @click="addNewGoods"
                >{{ '添加' }}
              </el-button>
            </th>
          </tr>
        </table> -->
        <table class="table_b">
          <tr>
            <td colspan="4">门店名称</td>
            <td colspan="4">设备码</td>
          </tr>
          <tr v-for="(item, index) in allData" :key="index">
            <td colspan="4">
              <el-input v-model="item.storeName" />

            </td>
            <td colspan="4">
              <div
                style="display: flex"
                v-for="(citem, cindex) in item.barCodeList"
                :key="cindex"
              >
              <el-select
                clearable
                :placeholder="'请选择'"
                v-model="item.barCodeList[cindex]"
              >
                <el-option
                  v-for="item in avalibleCodeList"
                  :key="item.pkId"
                  :label="item.barCode"
                  :value="item.barCode"
                ></el-option> </el-select>
                <!-- <el-input v-model="item.barCodeList[cindex]" /> -->
                <i
                  @click="addCode(index)"
                  style="font-size: 22px; color: #666666; margin-left: 10px"
                  class="el-icon-circle-plus-outline"
                ></i>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </div>
    <div class="footer">
      <div style="margin: 0 auto">
        <el-button
          class="thebtn"
          style="background: #f9f9f9; border: none"
          @click="cancelCz"
        >
          {{ '取消' }}</el-button
        >
        <el-button
          type="primary"
          class="thebtn"
          style="margin-left: 20px"
          @click="saveDate"
        >
          {{ '确认' }}</el-button
        >
      </div>
    </div>
  </div>
</template>

  <script>
import topBar from "@/components/topBar";
import * as equ from "@/api/equipment.js";
export default {
  components: {
    topBar,
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      total: 0,
      moren: "bindDevices",
      topList: [
        {
          name: "设备绑定",
          path: "bindDevices",
        },
      ],
      allData: [{ storeName: "", barCodeList: [""] }],
      avalibleCodeList:[]
    };
  },
  created() {
    this.allData = JSON.parse(this.$route.query.data);

    this.allData.forEach((ele) => {
      this.$set(ele, "barCodeList", [""]);
    });
    this.getOthers()
  },
  methods: {
    getOthers(){
      equ.getAvailableCode().then(res=>{
        this.avalibleCodeList = res.rows
      })
    },
    addCode(index) {
      this.allData[index].barCodeList.push("");
      this.$forceUpdate();
    },
    saveDate() {
      equ.bindEquipment({ mmsList: this.allData }).then((res) => {
        if (res.code == 200) {
          this.$message({
            message:res.msg,
            type:'success'
          })
          this.$router.push({
            path: "devices",
          });
        }
      });
    },

    cancelCz() {
      this.$router.push({
        path: "devices",
      });
    },

    handleClose() {
      this.selectData = [];
      this.dialogVisible = false;
    },
    addNewGoods() {
      this.allData.push({
        cover: "",
        name: "",
        pkAwards: "",
        price: "",
        quantity: "",
      });
    },
  },
};
</script>

  <style lang="scss" scoped>
::v-deep .el-upload--picture-card i {
  color: #c8161d;
}
::v-deep .el-upload--picture-card {
  min-width: 50px !important;
  min-height: 50px !important;
}
::v-deep .el-image {
  width: 50px !important;
  height: 50px !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.baoyou {
  text-align: center;
}
::v-deep .el-radio.is-bordered + .el-radio.is-bordered {
  margin-left: 0;
}
::v-deep .el-radio.is-bordered {
  padding: 0;
  margin: 10px 0;
  width: 100px;
  text-align: center;
  line-height: 34px;
}
::v-deep .el-date-editor.el-input {
  width: 100%;
}
.color-style {
  width: 5px;
  height: 19px;
  background: #c8161d;
  display: block;
  margin-top: 3px;
}
.app-main {
  background: #f9f9f9 !important;
  padding: 0 20px;
}
.content {
  background: #fff;
  padding: 0 30px;
  height: 1100px;
  box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
  border-radius: 8px 8px 8px 8px;
}
::v-deep th {
  border: none !important;
}
// .page {
//   padding: 20px;
//   background: #f9f9f9;
//   font-size: 14px;
.main_a {
  // height: calc(100vh - 124px);
  // display: flex;
  // flex-direction: column;
  // height: calc(100vh - 164px);
  // height: 100%;
}
.main {
  overflow: hidden;
  background: #ffffff;
  border-radius: 8px;
  //margin: 0 20px;
  height: calc(100vh - 230px);
  padding-bottom: 20px;
  box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
}
::v-deep .el-select {
  width: 100%;
}
// }
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0px;
  width: 100%;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
.thebtn {
  width: 137px;
  height: 38px;
}
.tit {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  padding: 0 20px;
  border-left: 5px solid #c8161d;
  margin: 20px 0 10px 0;
}
.xian {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.demo-ruleForm {
  padding: 20px 0;
}
::v-deep .el-date-editor--datetimerange {
  width: auto !important;
}
.flexed {
  display: flex;
}
.flexed_l {
  margin-right: 20px;
}
.table {
  padding: 0 40px 100px 40px;
  margin-top: 1px;
  margin-top: 30px;
  max-height: 630px;
  overflow-y: auto;
  width: 800px;
}

table {
  width: 100%;
  background: #fff;
  border-collapse: collapse;
  border: 1px solid #cccccc;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: collapse;
  //   合并内外边距
  // (去除表格单元格默认的2个像素内外边距*/
}

th {
  padding: 10px 10px;
  text-align: center;
  border: 1px solid #cccccc;
  overflow: hidden;
  border-top: 0;
}
td {
  padding: 10px 10px;
  text-align: center;
  border: 1px solid #cccccc;
  border-top: 0;
  overflow: hidden;
}
.tableFlex {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .tableFlex_i {
    flex: 1;
    ::v-deep .el-input__inner {
      width: 90%;
    }
  }
}
.tableAdd {
  width: 50px;
  img {
    width: 19px;
    height: 19px;
  }
}
.tableAddPro {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 19px;
    height: 19px;
    margin-left: 10px;
  }
}
.tableLeft {
  text-align: left;
  border: 0 !important;
}
.tabList {
  display: flex;
  align-items: center;
  padding: 20px 0px 0 20px;
  .tabList_i {
    padding: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
  }
  .tabAct {
    background: #108ee9;
    color: #fff;
  }
}
.clearBtm {
  border-bottom: 0;
}
.cpHeight {
  height: 50vh;
  overflow-y: auto;
}
.blueCor {
  color: #589ff8;
  cursor: pointer;
}
::v-deep .el-input__icon {
  line-height: 33px;
}
::v-deep .el-button {
  margin-top: 0;
}
</style>
