<template>
  <div class="operation-setting">
    <div class="operation-setting-main">
      <el-tabs
        :value="activeTabPanel"
        tab-position="left"
        style="height: 200px"
      >
        <el-tab-pane
          v-for="(deviceList, i) in groupInfo"
          :label="`第 ${i + 1} 组`"
          :key="i"
          :name="`${i}`"
        >
          <template v-if="!anewSubjectId || anewSubjectId !== subjectInfo.id">
            <div
              class="device-item"
              v-for="(device, index) in deviceList"
              :key="device.id"
            >
              <div class="device-item-position">{{ index + 1 }}</div>
              <div class="device-item-name">
                <span class="item-label">操作设备{{ index + 1 }}：</span>
                <el-tooltip
                  effect="dark"
                  :content="device.name"
                  placement="top"
                >
                  <span
                    style="color: #208ac6; font-weight: bold; overflow: hidden"
                    >{{ device.name }}</span
                  >
                </el-tooltip>
              </div>
              <div class="device-item-user">
                <span class="item-label">操作人员：</span>
                <el-select
                  v-model="device.user"
                  filterable
                  placeholder="请选择"
                  size="mini"
                  @change="userChangehandler(device)"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.disabled"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="device-item-rule">
                <span class="item-label">考核规则：</span>
                <el-select
                  v-model="device.rule"
                  filterable
                  @change="$emit('userjudeRuleChage')"
                  placeholder="请选择"
                  size="mini"
                >
                  <el-option
                    v-for="item in trainRules.automaticScoring"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="
                      deviceList.find((item) => item.rule === 1) && item.id == 1
                    "
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </template>
          <template v-else>
            <div
              class="device-item"
              v-for="(device, index) in deviceList"
              :key="device.id"
            >
              <div class="device-item-position">{{ index + 1 }}</div>
              <div class="device-item-name">
                <span class="item-label">操作设备{{ index + 1 }}：</span>
                <el-tooltip
                  effect="dark"
                  :content="device.deviceInfo.name"
                  placement="top"
                >
                  <span
                    style="color: #208ac6; font-weight: bold; overflow: hidden"
                    >{{ device.deviceInfo.name }}</span
                  >
                </el-tooltip>
              </div>
              <div class="device-item-user">
                <span class="item-label">操作人员：</span>
                <el-select
                  v-model="device.user"
                  filterable
                  placeholder="请选择"
                  size="mini"
                  @change="userChangehandler(device)"
                >
                  <el-option
                    v-for="item in userList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="item.disabled"
                  >
                  </el-option>
                </el-select>
              </div>
              <div class="device-item-rule">
                <span class="item-label">考核规则：</span>
                <el-select
                  v-model="device.rule"
                  filterable
                  placeholder="请选择"
                  @change="$emit('userjudeRuleChage')"
                  size="mini"
                >
                  <el-option
                    v-for="item in trainRules.automaticScoring"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    :disabled="
                      deviceList.find((item) => item.rule === 1) && item.id == 1
                    "
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
          </template>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="floor">
      <el-button
        size="mini"
        :disabled="groupInfo.length < 1 || groupInfo.length >= form.maxGroups"
        icon="el-icon-plus"
        type="primary"
        @click="addGroup"
        >增加分组</el-button
      >
      <el-button
        :disabled="groupInfo.length <= 1"
        size="mini"
        icon="el-icon-delete"
        type="danger"
        @click="removeGroup"
        >删除分组</el-button
      >
    </div>
  </div>
</template>

<script>
import { findUserByRoleApi } from "@/api/system/user";
export default {
  props: {
    subjectInfo: {
      type: Object,
      default: () => {},
    },
    form: {
      type: Object,
      default: () => {},
    },
    groupInfo: {
      type: Array,
      default: () => [],
    },
    trainRules: {
      type: Array,
      default: () => [],
    },
    anewSubjectId: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      userList: [],
      activeTabPanel: 0,
    };
  },
  created() {
    this.initData();
  },
  activated() {
    this.initData();
  },
  methods: {
    userChangehandler(device) {
      const users = new Set();
      // 遍历groupInfo数组，并将所有的用户添加到users集合中
      this.groupInfo.forEach((item) => {
        item.forEach((i) => {
          users.add(i.user);
        });
      });

      // 遍历userList数组，并根据用户是否存在于users集合来设置disabled属性
      this.userList.forEach((item) => {
        item.disabled = users.has(item.id) && item.id !== "0";
      });
      if (device && device.user === "0") {
        device.rule = 2;
      }
    },
    ruleChangehandler() {
      const rules = new Set();
      this.groupInfo.forEach((item) => {
        item.forEach((i) => {
          users.add(i.user);
        });
      });
    },
    async initData() {
      this.getUser();
    },
    async getUser() {
      const { data } = await findUserByRoleApi(3);
      data.unshift({ id: "0", name: "机器人" });
      this.userList = data;
    },
    addGroup() {
      this.groupInfo.push(
        this.groupInfo[0]?.map((item) => {
          return { ...item, user: null, groups: this.groupInfo.length + 1 };
        })
      );
      this.activeTabPanel = `${this.groupInfo.length - 1}`;
    },
    removeGroup() {
      if (this.groupInfo.length === 1) return;

      this.groupInfo.splice(this.activeTabPanel, 1);
      this.groupInfo.forEach((group) => {
        group.forEach((item, i) => {
          item.groups = i + 1;
        });
      });
      this.activeTabPanel = `${this.groupInfo.length - 1}`;
      this.userChangehandler();
    },
  },
  watch: {
    subjectInfo() {
      this.activeTabPanel = `${this.groupInfo.length - 1}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.operation-setting {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  .operation-setting-main {
    width: 60%;
    min-width: 500px;
    background-color: #f5f5f5;
    border-radius: 4px;
  }
  ::v-deep .el-tabs__header {
    background-color: #f0f4ff;
    padding: 10px 0;
    .el-tabs__item {
      font-size: 14px;
      font-weight: bold;
    }
  }
  ::v-deep .el-tabs__content {
    padding: 10px 0;
  }
  .device-item {
    display: flex;
    margin-bottom: 15px;
    white-space: nowrap;
    > div {
      display: flex;
      align-items: center;
      width: 30%;
    }
    // > div:nth-child(2) {
    //   width: 20%;
    // }

    .device-item-position {
      border: 2px solid #208ac6;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #208ac6;
      font-size: 14px;
      margin-right: 10px;
    }
    .item-label {
      font-weight: bold;
    }
  }
  .floor {
    display: flex;
    margin-top: 10px;
    width: 50%;
    justify-content: center;
  }
}
</style>
