<template>
  <el-tabs v-model="activeName" @tab-click="handleClick" class="app-container">
    <el-tab-pane label="物资配置" name="first">
      <div class="section">
        <el-header>库管员配置</el-header>
        <el-main>
          <el-row>
            <el-checkbox-group v-model="selectedValues" class="checkbox-group">
              <el-checkbox
                v-for="item in options"
                :key="item.roleId"
                :label="item.roleId"
                :value="item.roleId"
                :checked="item.check"
                class="checkbox-item"
              >
                {{ item.roleName }}
              </el-checkbox>
            </el-checkbox-group>
          </el-row>
          <div style="display: flex; justify-content: left">
            <el-button
              type="success"
              icon="el-icon-plus"
              size="small"
              @click="handleSaveKeeper"
              >保存库管员配置</el-button
            >
          </div>
        </el-main>
      </div>
      <div class="section">
        <el-header>维修员配置</el-header>
        <el-main>
          <el-row>
            <el-checkbox-group
              v-model="selectedValuesRepair"
              class="checkbox-group"
            >
              <el-checkbox
                v-for="item in optionsRepair"
                :key="item.roleId"
                :label="item.roleId"
                :value="item.roleId"
                :checked="item.check"
                class="checkbox-item"
              >
                {{ item.roleName }}
              </el-checkbox>
            </el-checkbox-group>
          </el-row>
          <div style="display: flex; justify-content: left">
            <el-button
              type="success"
              icon="el-icon-plus"
              size="small"
              @click="handleSaveRepair"
              >保存维修员配置</el-button
            >
          </div>
        </el-main>
      </div>
    </el-tab-pane>
    <!-- <el-tab-pane label="新购配置" name="second" >
      <div>
        <div class="app-container">
        <h4 class="form-header h4">库管员配置</h4>
        <el-main>
          <el-checkbox-group v-model="selectedValues">
              <el-checkbox
            v-for="item in options"
            :key="item.id"
            :label="item.id"
            :value="item.id"
            :checked="item.check"
              class="checkbox-item">
            {{ item.name }}
          </el-checkbox>
          </el-checkbox-group>
            <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleQuery"
                >保存库管员配置</el-button
            >
        </el-main>
        </div>
            <div class="app-container">
          <h4 class="form-header h4">维修员配置</h4>
          <el-main>
          <el-checkbox-group v-model="selectedValues">
      <el-checkbox
        v-for="item in options"
        :key="item.id"
        :label="item.id"
        :value="item.id"
        :checked="item.check"
        class="checkbox-item">
        {{ item.name }}
      </el-checkbox>
  </el-checkbox-group>
    <el-button type="primary" icon="el-icon-plus" size="mini"
        @click="handleQuery">保存维修员2配置</el-button>
  </el-main>
  </div>
      </div>
    </el-tab-pane> -->
  </el-tabs>
</template>

<script>
import { listRole } from "@/api/system/role";
import { getKeeperIds, updateBmConfig } from "@/api/ma/typeConfigKeeper";
export default {
  name: "SiteConfig",
  data() {
    return {
      activeName: "first",
      roleIdsKeeper: [],
      roleIdsRepair: [],
      roleIdsRepair: [],
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
      },
      // 模拟后端返回的对象数组
      options: [],
      optionsRepair: [],
      // 记录选中的 id
      selectedValues: [],
      selectedValuesRepair: [],
    };
  },
  created() {
    this.getList();
    this.getListRepair();
  },
  // watch: {
  //   // 监听选中的值变化，更新后端数据
  //   selectedValues(newValues) {
  //     // 你可以根据需要将 newValues 更新到后端
  //     console.log("选中的ID:", newValues);
  //   },
  // },
  methods: {
    //库管员配置
    async getList() {
      const itemName = "ku_guan_role_ids";
      //获取已有绑定的库管员
      await getKeeperIds(itemName).then((response) => {
        const roleIds = response.rows[response.rows.length - 1].itemValue
          .split(",")
          .map((item) => Number(item));
        this.roleIdsKeeper = roleIds;
      });
      //获取所有的库管员
      await listRole(this.queryParams).then((response) => {
        const list = response.rows;
        this.options = list;
        this.selectedValues = this.roleIdsKeeper;
      });
    },

    //维修员配置
    async getListRepair() {
      const itemName = "wei_xiu_role_ids";
      //获取已有绑定的维修员
      await getKeeperIds(itemName).then((response) => {
        const roleIds = response.rows[response.rows.length - 1].itemValue
          .split(",")
          .map((item) => Number(item));
        this.roleIdsRepair = roleIds;
      });
      //获取所有的维修员
      await listRole(this.queryParams).then((response) => {
        const list = response.rows;
        this.optionsRepair = list;
        this.selectedValuesRepair = this.roleIdsRepair;
      });
    },
    handleSaveKeeper() {
      const itemValue = this.selectedValues.join(",");
      const itemName = "ku_guan_role_ids";
      updateBmConfig({ itemName: itemName, itemValue: itemValue }).then(
        (response) => {
          this.$message.success("保存成功！");
          this.getList();
          this.getListRepair();
        }
      );
    },
    handleSaveRepair() {
      const itemValue = this.selectedValuesRepair.join(",");
      const itemName = "wei_xiu_role_ids";
      updateBmConfig({ itemName: itemName, itemValue: itemValue }).then(
        (response) => {
          this.$message.success("保存成功！");
          this.getList();
          this.getListRepair();
        }
      );
    },
    handleClick(tab, event) {
      if (tab.name == "first") {
        this.getList();
        this.getListRepair();
      } else if (tab.name == "second") {
        // this.resetForm("queryForm");
        // this.getboxList();
      }
    },
  },
};
</script>

<style scoped>
.section {
  margin-bottom: 20px;
}

.el-header,
.el-footer {
  background-color: #f8f8f9;
  color: #333;
  text-align: left;
  width: 100%;
  line-height: 60px;
  border: 1px solid #dfe6ec;
}

.el-main {
  background-color: white;
  color: black;
  text-align: left;
  width: 100%;
  height: 300px;
  border-radius: 2px;
  border: 1px solid #dfe6ec;
  padding: 10px;
  line-height: 120px;
  position: sticky;
  font-weight: 200px;
}

::v-deep .el-checkbox {
  color: #606266;
  font-weight: 200;
  font-size: 2px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-right: 30px;
  margin-bottom: 2px;
  margin-top: 2px;
}

/* 调整checkbox的样式 */
::v-deep .checkbox-group {
  display: flex;
  width: 100%;
  flex-wrap: wrap; /* 使复选框换行 */
  gap: 5px; /* 间距 */
  margin-top: 0px;
  margin-bottom: 80px;
}

::v-deep .checkbox-item {
  display: inline-block;
  height: 15px;
  width: calc(16% - 5px); /* 每个复选框的宽度，去除间距 */
  vertical-align: top; /* 顶部对齐 */
  margin-bottom: 0px;
  margin-top: 0px;
}
</style>