<template>
  <div class="rai-checkbox-content" id="rai-checkbox-content">
    <div class="rai-checkbox-bigS-box">
      <el-checkbox
        v-model="itB.Checked"
        v-for="itB in data.ItemsBig"
        :key="itB.PermissionName"
        @change="(e) => bigServeCheck(e, itB, data)"
        :indeterminate="itB.isIndeterminate && !itB.disabled"
        class="bigS-item"
        :disabled="itB.disabled || (formData.qyBigServeCheck != getQyBigServeCheckNumber(itB.PermissionName) && formData.qyBigServeCheck != 0)"
        >{{ itB.PermissionName }}</el-checkbox
      >
    </div>
    <div class="rai-checkbox-box">
      <div class="rai-checkbox-main-container">
        <div class="rai-checkbox-main-row">
          <div
            class="rai-checkbox-item"
            v-for="it in data.Items"
            :key="it.ChartPermissionId"
            :style="{ width: [23, 148, 62].includes(it.ChartPermissionId) ? '84px' : it.ChartPermissionId == 30 ? '110px' : '168px' }"
          >
            <template v-if="it.Child">
              <el-checkbox
                :label="it.PermissionName"
                style="margin-right: 8px"
                v-model="it.Checked"
                @change="handleItemCheck(it, data)"
                :indeterminate="it.isIndeterminate"
                :disabled="it.disabled"
              ></el-checkbox>
              <el-checkbox-group v-model="data.CheckList" style="height: unset" @change="handleQYChecked(it, data)" :disabled="it.disabled">
                <div class="rai-checkbox-serve-box">
                  <el-checkbox :label="itChild.ChartPermissionId" v-for="itChild in it.Child" :key="itChild.ChartPermissionId" class="small-item">{{ itChild.PermissionName }}</el-checkbox>
                </div>
              </el-checkbox-group>
            </template>
            <template v-else>
              <el-checkbox-group v-model="data.CheckList" style="height: unset; margin-right: 8px" @change="handleQYChecked(it, data)">
                <el-checkbox :label="it.ChartPermissionId" :disabled="it.disabled">{{ it.PermissionName }}</el-checkbox>
              </el-checkbox-group>
            </template>
          </div>
        </div>
        <el-checkbox-group v-model="data.CheckList" style="height: unset">
          <div class="rai-checkbox-upS-box">
            <el-checkbox
              :label="itU.ChartPermissionId"
              v-for="itU in data.ItemsUp"
              :key="itU.ChartPermissionId"
              class="rai-checkbox-item upS-item"
              :disabled="itU.disabled"
              @change="(e) => handleUpdateChecked(e, itU.PermissionName, data)"
              >{{ itU.PermissionName }}</el-checkbox
            >
          </div>
        </el-checkbox-group>
      </div>
      <div class="rai-checkbox-private-container">
        <el-checkbox-group v-model="data.CheckList" style="height: unset">
          <div class="rai-checkbox-upS-box">
            <el-checkbox
              :label="itP.ChartPermissionId"
              v-for="(itP, inP) in data.ItemsPrivate"
              :key="itP.ChartPermissionId"
              :disabled="itP.disabled"
              :style="{ height: hasNoChild ? '48px' : '95px', width: itP.ChartPermissionId == 52 && data.CheckList.includes(52) ? '220px' : itP.PermissionName.includes('研选') ? '130px' : '84px' }"
              class="rai-checkbox-item upS-item"
              @change="(e) => handlePrivateChecked(e, itP, data)"
            >
              {{ itP.PermissionName }}
              <p v-if="itP.ChartPermissionId == 31" class="checkbox-text">(30000元/年)</p>
              <p v-if="itP.ChartPermissionId == 52" class="checkbox-text">(点/2000元)</p>
              <input
                @click.stop
                @input="validateInteger"
                placeholder="请输入点数"
                style="margin-left: 10px"
                v-if="itP.ChartPermissionId == 52 && data.CheckList.includes(52)"
                v-model="minus_sign_val"
              />
            </el-checkbox>
          </div>
        </el-checkbox-group>
        <div class="rai-checkbox-notice-box" v-if="data.ItemsUp.length > 0">
          <span class="rai-checkbox-notice" v-if="formData.qyBigServeCheck"> 同时包含{{ formData.qyBigServeCheck == 2 ? "12" : "16" }}次专项调研</span>
          <p class="rai-checkbox-notice" v-if="equityGroupDisabled(data.CheckList)">同时包含升级行业各5次专项调研</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "raiPermissionbox",
  data() {
    return {
      minus_sign_val: "",
    };
  },
  props: {
    data: {
      required: true,
      type: Object,
    },
    formData: {
      //formData.qyBigServeCheck  0-无 1- 70万 2- 45万
      required: true,
      type: Object,
    },
    hasNoChild: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    // 回显
    if (this.data.CheckList && this.data.CheckList.length > 0) {
      this.data.Items.map((item) => {
        if (item.Child) {
          item.Child.map((t) => {
            this.handleQYChecked(item, this.data);
          });
        } else {
          this.handleQYChecked(item, this.data);
        }
      });
      this.data.ItemsPrivate.map((itP) => {
        let flag = this.data.CheckList.includes(itP.ChartPermissionId);
        this.handlePrivateChecked(flag, itP, this.data);
      });
      this.data.ItemsUp.map((itU) => {
        let flag = this.data.CheckList.includes(itU.ChartPermissionId);
        this.handleUpdateChecked(flag, itU.PermissionName, this.data);
      });
    }
  },
  methods: {
    // 套餐选中逻辑修复
    bigServeCheck(value, itB, item) {
      this.formData.qyBigServeCheck = value ? this.getQyBigServeCheckNumber(itB.PermissionName) : 0;

      // 更新 `indeterminate` 状态
      item.ItemsBig.forEach((itB) => (itB.isIndeterminate = false));

      const bigServeItems = this.hasNoChild
        ? [22, 21, 20, 19, 23, 30]
        : process.env.NODE_ENV === "production"
        ? [22, 39, 21, 38, 20, 37, 19, 36, 23, 30, 148, 62]
        : [22, 37, 21, 36, 20, 35, 19, 34, 23, 30, 148, 62];

      if (value) {
        item.CheckList = [...new Set([...item.CheckList, ...bigServeItems])];
      } else {
        item.CheckList = item.CheckList.filter((t) => !bigServeItems.includes(t));
      }

      if (!this.hasNoChild) {
        // 更新子级状态
        item.Items.forEach((ele) => {
          if (ele.Child) {
            ele.Checked = value;
            this.handleItemCheck(ele, item);
          }
        });
      }
    },
    // 医药、消费、科技、智造（有主客观）选中
    // 父子选中逻辑修复
    handleItemCheck(it, item) {
      const childIds = it.Child.map((t) => t.ChartPermissionId);

      if (it.Checked) {
        item.CheckList = [...new Set([...item.CheckList, ...childIds])];
      } else {
        item.CheckList = item.CheckList.filter((t) => !childIds.includes(t));
      }

      this.updateParentStatus(it, item);
    },
    // 更新父级状态
    updateParentStatus(it, item) {
      let count = 0;

      if (it.Child) {
        it.Child.forEach((child) => {
          if (item.CheckList.includes(child.ChartPermissionId)) count++;
        });
        it.Checked = count === it.Child.length;
        it.isIndeterminate = count > 0 && count < it.Child.length;
      }

      // 更新禁用状态
      const relatedItem = item.ItemsUp.find((up) => up.PermissionName.includes(it.PermissionName));
      if (relatedItem) {
        relatedItem.disabled = count !== 0;
      }
    },
    handleQYChecked(it, item) {
      // console.log(it,item);
      let count = 0;
      if (it.Child) {
        // 有主客观
        it.Child.map((t) => {
          if (item.CheckList.includes(t.ChartPermissionId)) count++;
        });
        it.Checked = count == 2;
        it.isIndeterminate = count == 1;
      }
      if (this.hasNoChild) {
        if (item.CheckList.includes(it.ChartPermissionId)) count++;
      }
      // 设置升级套餐的禁用
      let changeItem = item.ItemsUp.find((itUp) => itUp.PermissionName.includes(it.PermissionName));
      if (changeItem) changeItem.disabled = count != 0;
      // 设置大套餐的状态
      let bigServeCheckNum;
      if (this.formData.qyBigServeCheck) {
        //qyBigServeCheck有值就作用在对应的大套餐
        bigServeCheckNum = this.formData.qyBigServeCheck == 1 ? 1 : 0;
      } else {
        // 默认作用在45万上 原本有状态的话，就作用在有状态的大套餐
        bigServeCheckNum = item.ItemsBig[1].isIndeterminate || item.ItemsBig[1].Checked ? 1 : 0;
      }
      // 正式服 各行业的客观的chartPermissionId和测试服的不一样
      let allChartPermissionIds = process.env.NODE_ENV === "production" ? [22, 39, 21, 38, 20, 37, 19, 36, 23, 30, 148, 62] : [22, 37, 21, 36, 20, 35, 19, 34, 23, 30, 148, 62];

      let bigServeItems = this.hasNoChild ? [22, 21, 20, 19, 23, 30] : allChartPermissionIds;
      if (bigServeItems.every((t) => item.CheckList.includes(t))) {
        item.ItemsBig[bigServeCheckNum].Checked = true;
        this.formData.qyBigServeCheck = this.getQyBigServeCheckNumber(item.ItemsBig[bigServeCheckNum].PermissionName);
      } else {
        item.ItemsBig[bigServeCheckNum].Checked = false;
        this.formData.qyBigServeCheck = 0;
      }
      item.ItemsBig[bigServeCheckNum].isIndeterminate = bigServeItems.some((t) => item.CheckList.includes(t)) && !item.ItemsBig[bigServeCheckNum].Checked;
    },
    handleUpdateChecked(value, name, item) {
      let isDisabled = item.ItemsUp.some((itU) => item.CheckList.includes(itU.ChartPermissionId));
      // 设置大套餐禁用
      item.ItemsBig.map((itb) => (itb.disabled = isDisabled));
      // 设置基础套餐禁用
      item.Items.find((its) => name.includes(its.PermissionName)).disabled = value;
    },
    handlePrivateChecked(value, itP, item) {
      if (![20032, 20031, 31].includes(itP.ChartPermissionId)) return;
      // 买方严选的互斥
      item.ItemsPrivate.forEach((itPri) => {
        if ([20032, 20031, 31].includes(itPri.ChartPermissionId) && itP.ChartPermissionId != itPri.ChartPermissionId && value) {
          itPri.disabled = true;
        } else {
          itPri.disabled = false;
        }
      });
    },
    equityGroupDisabled(item) {
      return item.some((key) => key > 100000);
    },
    getQyBigServeCheckNumber(permissionName) {
      return permissionName.includes("70") ? 1 : 2;
    },
    // 数字输入校验
    validateInteger() {
      this.minus_sign_val = this.minus_sign_val.replace(/[^0-9]/g, "");
      if (this.minus_sign_val !== "") {
        this.minus_sign_val = parseInt(this.minus_sign_val, 10);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.rai-checkbox-content {
  // width: 100%;
  // height: 160px;
  padding: 20px 0 20px 20px;
  border: 1px dashed #aab4cc;
  // display: flex;
  .rai-checkbox-bigS-box {
    display: flex;
    .bigS-item {
      display: inline-flex;
      align-items: center;
      padding: 4px 8px;
      height: 22px;
      margin: 0 20px 20px 0;
    }
  }
  .rai-checkbox-box {
    display: flex;
    // flex-wrap: wrap;
    .rai-checkbox-main-container {
      .rai-checkbox-main-row {
        display: flex;
        .small-item {
          display: inline-flex;
          align-items: center;
          border: solid 1px #dcdfe6;
          padding: 4px 12px;
          height: 48px;
          width: 84px;
          margin-right: -1px;
          margin-bottom: -1px;
          &:first-child {
            margin-top: -1px;
          }
        }
      }
    }
    .rai-checkbox-private-container {
      .rai-checkbox-notice-box {
        display: flex;
        align-items: center;
        border: solid 1px #dcdfe6;
        border-left: none;
        height: 48px;
        margin-right: -1px;
        margin-left: -276px;
        padding-left: 200px;
        .rai-checkbox-notice {
          color: #f00;
        }
      }
    }
    .rai-checkbox-upS-box {
      display: flex;
      .upS-item {
        position: relative;
        justify-content: flex-start;
        .checkbox-text {
          position: absolute;
          font-size: 12px;
          color: #999;
          bottom: 15px;
          left: 20px;
        }
        input {
          width: 90px;
          height: 30px;
          border-radius: 4px;
          padding-left: 10px;
          border: 1px solid #dcdfe6;
        }
      }
    }
    .rai-checkbox-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: solid 1px #dcdfe6;
      margin-bottom: -1px;
      margin-right: -1px;
      padding-left: 12px;
      min-height: 48px;
      width: 168px;
      .rai-checkbox-serve-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        height: unset;
      }
    }
  }
}
</style>
<style lang="scss">
#rai-checkbox-content {
  .el-checkbox {
    color: #333333;
  }
}
</style>
