<template>
  <div class="action pagePadding">
    <div
      class="action_show"
      v-if="powers && powers.length > 0 && powers.some((item) => item == '001')"
    >
      <div class="action_show_box">
        <ul class="role-list">
          <p class="role-list__title">角色列表</p>
          <p
            v-if="roleList.length == 0"
            style="line-height: 60px; text-align: center; color: #909399"
          >
            暂无数据
          </p>
          <li
            v-for="(item, index) in roleList"
            :key="'role' + index"
            class="role-list__item"
            :class="{ active: item.id == roleActive.id }"
            @click="!isBtnDisabled && switchRoleHandle(item)"
          >
            {{ item.role_name }}
            <i
              v-if="isBtnDisabled && item.id == roleActive.id"
              class="el-icon-loading"
            />
          </li>
        </ul>
        <div class="rule-view">
          <div class="rule-list">
            <el-row
              v-for="(item, index) in actionList"
              :key="'menu' + item.id + index"
            >
              <el-col
                v-if="item.child && item.child.length > 0"
                class="ffff"
                :span="24"
              >
                <div class="ftitle">
                  <span>{{ item.menu_name }}</span>
                </div>
                <div class="fbody">
                  <div
                    class="fbody-item"
                    v-for="(subItem, subIndex) in item.child"
                    :key="'yemian' + subItem.id + subIndex"
                  >
                    <template
                      v-if="
                        !(
                          subItem.action &&
                          subItem.action.length === 0 &&
                          subItem.action_data &&
                          subItem.action_data.length === 0
                        )
                      "
                    >
                      <div class="stitle">
                        <span class="_h2">{{ subItem.menu_name }}</span>
                        <el-radio-group
                          style="margin: 0 0 0 20px"
                          size="mini"
                          v-if="
                            subItem &&
                            subItem.private &&
                            subItem.private.length === 2
                          "
                          v-model="subItem.is_private_change"
                        >
                          <el-radio-button
                            v-for="(radioN, ri) in subItem.private"
                            :key="radioN.label + ri"
                            :label="radioN.id"
                            >{{ radioN.label }}</el-radio-button
                          >
                        </el-radio-group>
                      </div>
                      <div
                        class="scheck"
                        v-if="subItem.action && subItem.action.length > 0"
                      >
                        <div class="checkAll">
                          <el-checkbox
                            v-model="subItem.checkAll"
                            :disabled="!powers.some((item) => item == '011')"
                            :indeterminate="indeterminateCheck(subItem)"
                            @change="
                              handleCheckAllChange(
                                $event,
                                index,
                                item,
                                subIndex
                              )
                            "
                            >功能全选</el-checkbox
                          >
                        </div>
                        <div class="checkItem">
                          <el-checkbox-group
                            v-model="subItem.checkList"
                            :disabled="!powers.some((item) => item == '011')"
                            @change="
                              handleCheckedGroupChange(
                                $event,
                                index,
                                item,
                                subIndex
                              )
                            "
                          >
                            <template v-for="children in subItem.action">
                              <el-checkbox
                                :disabled="
                                  !powers.some((item) => item == '011')
                                "
                                :key="'checkItem' + children.id"
                                :label="children.id"
                                @change="
                                  handleCheckedChange(
                                    $event,
                                    children.id,
                                    index,
                                    subIndex,
                                    item
                                  )
                                "
                                >{{ children.action_name }}</el-checkbox
                              >
                            </template>
                          </el-checkbox-group>
                        </div>
                      </div>
                      <div
                        class="sfield"
                        v-if="
                          subItem.action_data && subItem.action_data.length > 0
                        "
                      >
                        <div class="checkAll">
                          <el-checkbox
                            v-model="subItem.fieldAll"
                            :disabled="!powers.some((item) => item == '011')"
                            :indeterminate="indeterminateField(subItem)"
                            @change="
                              handleFieldAllChange(
                                $event,
                                index,
                                item,
                                subIndex
                              )
                            "
                            >字段全选</el-checkbox
                          >
                        </div>
                        <div class="checkItem">
                          <el-checkbox-group
                            v-model="subItem.fieldList"
                            :disabled="!powers.some((item) => item == '011')"
                            @change="
                              handleFieldGroupChange(
                                $event,
                                index,
                                item,
                                subIndex
                              )
                            "
                          >
                            <template v-for="children in subItem.action_data">
                              <el-checkbox
                                :key="'FieldItem' + children.id"
                                :label="children.id"
                                :disabled="
                                  !powers.some((item) => item == '011')
                                "
                                @change="
                                  handleFieldChange(
                                    $event,
                                    children.id,
                                    index,
                                    subIndex,
                                    item
                                  )
                                "
                                >{{ children.field_name }}</el-checkbox
                              >
                            </template>
                          </el-checkbox-group>
                        </div>
                      </div>
                    </template>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
      <div class="rule-bottom">
        <el-button
          size="small"
          type="primary"
          v-if="powers.some((item) => item == '011')"
          :disabled="isBtnDisabled"
          @click="save()"
          >提 交</el-button
        >
      </div>
    </div>
    <div v-else>
      <no-auth></no-auth>
    </div>
  </div>
</template>
<script>
import asyncRequest from "@/apis/service/interest/action";
import resToken from "@/mixins/resToken";
export default {
  name: "Action",
  mixins: [resToken],
  data() {
    return {
      ruleForm: {},
      // 按钮是否可点击
      isBtnDisabled: true,
      // 当前角色
      roleActive: {},
      actionChange: [],
      // 角色列表
      roleList: [],
      rules: [],
      // 功能权限列表
      actionList: [],
      action_data: [], // 字段数据
      action: [], // 功能数据
      private_data: [], //私有数据菜单ID
      private_field: [],
    };
  },
  computed: {
    powers() {
      let tran =
        this.$store.getters.btnList.find(
          (item) => item.menu_route == "action"
        ) || {};
      if (tran && tran.action && tran.action.length > 0) {
        return tran.action;
      } else {
        return [];
      }
    },
    indeterminateCheck() {
      return (item) => {
        // 选中子节点的数量
        const selectItemLength = item.action.filter(
          (filitem) =>
            item.checkList.findIndex((finditem) => finditem === filitem.id) > -1
        ).length;
        // 未选中子节点的数量
        const noSlectItemLength = item.action.filter(
          (filitem) =>
            item.checkList.findIndex((finditem) => finditem === filitem.id) ==
            -1
        ).length;
        // // 当前节点的index
        // 存在选中子节点且存在未选中子节点为中间态
        return selectItemLength > 0 && noSlectItemLength > 0;
      };
    },
    indeterminateField() {
      return (item) => {
        // 选中子节点的数量
        const selectItemLength = item.action_data.filter(
          (filitem) =>
            item.fieldList.findIndex((finditem) => finditem === filitem.id) > -1
        ).length;
        // 未选中子节点的数量
        const noSlectItemLength = item.action_data.filter(
          (filitem) =>
            item.fieldList.findIndex((finditem) => finditem === filitem.id) ==
            -1
        ).length;
        // // 当前节点的index
        // 存在选中子节点且存在未选中子节点为中间态
        return selectItemLength > 0 && noSlectItemLength > 0;
      };
    },
  },
  mounted() {
    // this.initactionList();
  },

  methods: {
    // 全选/全不选
    handleCheckAllChange(checkAll, index, item, subIndex) {
      this.actionList[index].child[subIndex].checkAll = checkAll;
      this.$set(this.actionList, index, item);
      this.actionList[index].child[subIndex].action.forEach((element) => {
        const findindex = this.actionList[index].child[
          subIndex
        ].checkList.findIndex((findItem) => findItem === element.id);
        if (checkAll && findindex == -1) {
          this.actionList[index].child[subIndex].checkList.push(element.id);
        } else if (!checkAll && findindex > -1) {
          this.actionList[index].child[subIndex].checkList.splice(findindex, 1);
        }
      });
    },
    // 全选/全不选
    handleFieldAllChange(fieldAll, index, item, subIndex) {
      this.actionList[index].child[subIndex].fieldAll = fieldAll;
      this.$set(this.actionList, index, item);
      this.actionList[index].child[subIndex].action_data.forEach((element) => {
        const findindex = this.actionList[index].child[
          subIndex
        ].fieldList.findIndex((findItem) => findItem === element.id);
        if (fieldAll && findindex == -1) {
          this.actionList[index].child[subIndex].fieldList.push(element.id);
        } else if (!fieldAll && findindex > -1) {
          this.actionList[index].child[subIndex].fieldList.splice(findindex, 1);
        }
      });
    },
    // 复选框组内的选中/不选中
    handleCheckedGroupChange(event, index, item, subIndex) {
      // console.log(event, index, subIndex);
      this.actionList[index].child[subIndex].checkAll = this.actionList[
        index
      ].child[subIndex].action.every(
        (evitem) =>
          this.actionList[index].child[subIndex].checkList.findIndex(
            (finditem) => finditem === evitem.id
          ) > -1
      );
      this.$set(this.actionList, index, item);
    },
    // 复选框组内的选中/不选中
    handleFieldGroupChange(event, index, item, subIndex) {
      this.actionList[index].child[subIndex].fieldAll = this.actionList[
        index
      ].child[subIndex].action_data.every(
        (evitem) =>
          this.actionList[index].child[subIndex].fieldList.findIndex(
            (finditem) => finditem === evitem.id
          ) > -1
      );
      this.$set(this.actionList, index, item);
    },

    // 单项复选框选中/不选中

    handleCheckedChange(checked, id, index, subIndex, item) {
      // console.log(checked, id, index, subIndex);
      if (checked) {
        // 选中时检查pid的选中状态
        this.actionList[index].child[subIndex].checkList.indexOf(id) == -1 &&
          this.actionList[index].child[subIndex].checkList.push(id);
      } else {
        const find = this.actionList[index].child[subIndex].checkList.findIndex(
          (e) => e == id
        );
        if (find > -1) {
          this.actionList[index].child[subIndex].checkList.splice(find, 1);
        }
        this.actionList[index].child[subIndex].checkAll = false;
      }
      this.$set(this.actionList, index, item);
      // console.log(this.actionList[index].child[subIndex]);
    },
    // 单项复选框选中/不选中
    handleFieldChange(checked, id, index, subIndex, item) {
      // console.log(checked, id, index, subIndex);
      if (checked) {
        // 选中时检查pid的选中状态
        this.actionList[index].child[subIndex].fieldList.indexOf(id) == -1 &&
          this.actionList[index].child[subIndex].fieldList.push(id);
      } else {
        const find = this.actionList[index].child[subIndex].fieldList.findIndex(
          (e) => e == id
        );
        if (find > -1) {
          this.actionList[index].child[subIndex].fieldList.splice(find, 1);
        }
        this.actionList[index].child[subIndex].fieldAll = false;
      }
      this.$set(this.actionList, index, item);
      // console.log(this.actionList[index].child[subIndex]);
    },
    // 切换角色
    switchRoleHandle(item) {
      this.roleActive = Object.assign({}, item);
      this.$nextTick(async () => {
        await this.refreshRoleDetail(item.id);
      });
    },
    // 保存
    async save() {
      this.action_data = []; // 字段数据
      this.action = []; // 功能数据
      let arr = [];
      this.actionList.forEach((x) => {
        x.child.forEach((y) => {
          this.action_data.push(...y.fieldList);
          this.action.push(...y.checkList);
          if (y.is_private_change === "1") {
            arr.push(y.id);
          }
        });
      });

      // this.action_data.length === 0 || 和字段
      if (this.action.length === 0) {
        this.$message.warning("请选择功能!");
      } else {
        const model = {
          roleid: this.roleActive.id,
          role_name: this.ruleForm.role_name,
          level: this.ruleForm.level,
          action: this.action,
          action_data: this.action_data,
          private_data: arr,
          private_field: this.private_field,
        };

        const loadding = this.$loading();
        const res = await asyncRequest.update(model);
        if (res && res.code === 0 && res.data) {
          this.$notify.success({
            title: "保存成功！",
            message: "",
          });
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(res.message);
        }
        loadding.close();
      }
    },
    // 刷新角色详情
    async refreshRoleDetail(roleid) {
      this.isBtnDisabled = true;

      const res = await asyncRequest.detail({ roleid: roleid });

      if (res && res.code === 0 && res.data) {
        let resD = res.data;
        this.ruleForm = resD;

        if (resD.action && resD.action.length > 0) {
          this.action = resD.action;
        } else {
          this.action = [];
        }
        if (resD.action_data && resD.action_data.length > 0) {
          this.action_data = resD.action_data;
        } else {
          this.action_data = [];
        }
        if (resD.private_data === "") {
          resD.private_data = [];
        }
        if (resD.private_data && resD.private_data.length > 0) {
          this.private_data = resD.private_data;
        } else {
          this.private_data = [];
        }
        this.private_field = resD.private_field;
        console.log(this.private_field);
        this.refreshRoleCheckAllStatus();
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
      this.isBtnDisabled = false;
    },
    // 初始化功能权限列表
    async initactionList() {
      const res = await asyncRequest.actionList({});
      if (res && res.code === 0 && res.data) {
        this.rules = res.data;
        await this.initRoleList();
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.$message.warning(res.message);
      }
    },
    // 初始化角色列表
    async initRoleList() {
      const res = await asyncRequest.getRole({});
      if (res && res.code === 0 && res.data) {
        this.roleList = [].concat(res.data);
        if (this.roleList.length > 0) {
          await this.switchRoleHandle(this.roleList[0]);
        } else if (res && res.code >= 100 && res.code <= 104) {
          await this.logout();
        } else {
          this.$message.warning(res.message);
        }
      }
    },
    // 刷新选择状态
    refreshRoleCheckAllStatus() {
      const list = JSON.parse(JSON.stringify(this.rules));
      let arr = list.filter((item) => item.child && item.child.length > 0);
      arr = arr.map((x) => {
        x.child.map((y) => {
          y.checkAll = false;
          y.checkList = [];
          y.fieldAll = false;
          y.fieldList = [];
          y.is_private_change = "0";
          if (y.is_private === "0") {
            y.private = [];
          } else {
            y.private = [
              {
                id: "0",
                label: "公有数据",
              },
              {
                id: "1",
                label: "私有数据",
              },
            ];
          }
          return y;
        });
        return x;
      });
      this.actionList = arr;
      this.actionList.forEach((x, xi) => {
        if (x.child && x.child.length > 0) {
          x.child.forEach((y, yi) => {
            let id = y.id;
            if (y.action && y.action.length > 0) {
              y.action.forEach((z) => {
                const Aindex = this.action.findIndex((a) => a === z.id);
                if (Aindex !== -1) {
                  y.checkList.push(this.action[Aindex]);
                }
                if (y.action.length === y.checkList.length) {
                  y.checkAll = true;
                }
              });
            }
            if (y.action_data && y.action_data.length > 0) {
              y.action_data.map((z) => {
                const Bindex = this.action_data.findIndex((a) => a === z.id);
                if (Bindex !== -1) {
                  y.fieldList.push(this.action_data[Bindex]);
                }
              });
              if (y.action_data.length === y.fieldList.length) {
                y.fieldAll = true;
              }
            }
            if (y.private && y.private.length === 2) {
              let Cindex = this.private_data.findIndex((a) => a === y.id);
              if (Cindex !== -1) {
                y.is_private_change = "1";
              } else {
                y.is_private_change = "0";
              }
            } else {
              y.is_private_change = "0";
            }
          });
        }
        this.$set(this.actionList, xi, x);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.action {
  // height: calc(100vh - 80px);
  height: 100%;
  position: relative;
  width: 100%;
  text-align: center;
  .action_show {
    position: relative;
    width: 100%;
    height: 100%;
    // height: calc(100vh - 122px);
    .rule-bottom {
      padding: 18px 16px 0 18%;
      background: #fff;
      width: 100%;
      text-align: left;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 2px;
        width: 100%;
        background-color: #e4e7ed;
        z-index: 1;
      }
    }
    .action_show_box {
      position: relative;
      height: calc(100% - 50px);
      min-height: calc(100% - 50px);

      display: flex;
      text-align: left;

      .role-list {
        position: relative;
        height: 100%;
        overflow-y: auto;
        width: 15%;
        padding: 8px 16px;
        min-height: 100%;
        flex-shrink: 0;
        &::after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          height: 100%;
          width: 2px;
          background-color: #e4e7ed;
          z-index: 1;
        }
        .role-list__title {
          color: #b4b6c0;
          line-height: 32px;
        }
        .role-list__item {
          position: relative;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          height: 32px;
          line-height: 32px;
          padding-left: 8px;
          color: rgb(48, 49, 51);
          cursor: pointer;
          i {
            position: absolute;
            right: 0;
            line-height: 32px;
          }
        }
        .role-list__item.active {
          color: #63cbe7;
          background: #f7f7f7;
        }
      }
      .rule-view {
        position: relative;
        height: 100%;
        width: 85%;
        overflow-y: scroll;
        // padding: 0 0 0 16px;
        .ffff {
          width: 100%;
          display: flex;
          align-items: stretch;
          .ftitle {
            width: 110px;
            text-align: center;
            border-right: 1px solid #dfe6ec;
            border-bottom: 1px solid #dfe6ec;
            padding: 12px 14px;
            display: flex;
            align-items: center;
            span {
              display: inline-block;
              width: 100%;
              font-size: 17px;
              text-align: center;
              color: #97a8be;
            }
          }
          .fbody {
            width: calc(100% - 110px);
            .fbody-item {
              border-right: 1px solid #dfe6ec;
              border-bottom: 1px solid #dfe6ec;

              .stitle {
                padding: 18px 18px 12px 18px;
                border-bottom: 1px dashed #dfe6ec;
                font-size: 14px;
                color: #97a8be;
                ._h2 {
                  display: inline-block;
                  // width: 100px;
                }
              }
              .scheck {
                padding: 15px 0 10px 0;
                display: flex;
                width: 100%;
                .checkAll {
                  width: 140px;
                  text-align: right;
                  padding: 0 35px 0 0;
                }
                .checkItem {
                  width: calc(100% - 140px);
                }
              }
              .sfield {
                padding: 0 0 10px 0;
                display: flex;
                width: 100%;
                .checkAll {
                  width: 140px;
                  text-align: right;
                  padding: 0 35px 0 0;
                }
                .checkItem {
                  width: calc(100% - 140px);
                }
              }
            }
          }
        }
        // .rule-list {
        //   height: 100%;
        //   overflow-y: auto;
        //   padding: 0 0 80px 0;
        //   .rule-title {
        //     .title {
        //       font-size: 20px;
        //       color: #333;
        //     }
        //     .desc {
        //       margin: 10px 0;
        //       font-size: 12px;
        //       color: #999;
        //     }
        //   }
        //   .rule-item {
        //     .title {
        //       margin: 30px 30px 10px 0;
        //       font-size: 18px;
        //       padding-bottom: 12px;
        //       border-bottom: 1px solid #eee;
        //       color: #333;
        //       .el-checkbox {
        //         margin-left: 10px;
        //       }
        //     }
        //     .el-checkbox-group {
        //       margin: 10px 30px 30px 0;
        //       .el-checkbox {
        //         line-height: 30px;
        //       }
        //       .children-checkbox-hr {
        //         margin: 8px 0;
        //         border: none;
        //         border-top: 2px dotted #eee;
        //       }
        //     }
        //   }
        // }
      }
    }
  }
}
</style>
