<template>
  <div class="set-pagecon-auth">
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限组：{{ authorityName }}</el-breadcrumb-item>
        <el-breadcrumb-item>页面：{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="el-card auth-item button-auth-item">
      <div class="auth-item-caption">头按钮权限设置</div>
      <div class="auth-item-content" v-if="authButtons.tableBtns.length != 0">
        <el-checkbox-group v-model="buttonCheckGroup">
          <el-checkbox
            border
            v-for="(item, index) in authButtons.tableBtns"
            :key="index"
            :name="item.enName"
            :label="item.buttonId"
            :checked="item.checkStatus == 1"
            >{{ item.cnName }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>
    <div class="el-card auth-item button-auth-item">
      <div class="auth-item-caption">行按钮权限设置</div>
      <div class="auth-item-content" v-if="authButtons.rowBtns.length != 0">
        <el-checkbox-group v-model="buttonCheckGroupRow">
          <el-checkbox
            :label="item.buttonId"
            border
            v-for="(item, index) in authButtons.rowBtns"
            :key="index"
            :checked="item.checkStatus == 1"
            >{{ item.cnName }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>
    <div class="el-card auth-item button-auth-item">
      <div class="auth-item-caption">列数据权限设置</div>
      <div class="auth-item-content" v-if="authColumns.length != 0">
        <el-checkbox-group v-model="columnCheckGroupRow">
          <el-checkbox
            :label="item.fieldId"
            border
            v-for="(item, index) in authColumns"
            :key="index"
            :checked="item.checkStatus == 1"
            :disabled="item.requireState == 1"
            >{{ item.cnName }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
    </div>
    <div>
      <el-button type="primary" @click="saveSetting">保存</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, computed, onMounted, watch, nextTick } from "vue";
import templateHooks from "@/Hooks/templateHooks.js";
import { authorService } from "@/ApiService/authorService";
const { $route, $router, $message } = templateHooks();
const buttonCheckGroup = ref([]);
const buttonCheckGroupRow = ref([]);
const columnCheckGroupRow = ref([]);
const authColumns = ref([]);
const authButtons = reactive({
  rowBtns: [],
  tableBtns: [],
});
const pageActivated = ref(false);
const authorityId = computed(() => {
  return $route.query.authorityId;
});
const webId = computed(() => {
  return $route.query.webId;
});
const title = computed(() => {
  return $route.query.title;
});
const authorityName = computed(() => {
  return $route.query.authorityName;
});
const fetchbuttons = () => {
  authButtons.tableBtns = [];
  authButtons.rowBtns = [];
  buttonCheckGroup.value = [];
  buttonCheckGroupRow.value = [];
  authorService
    .queryButtonWebpageAuthorityConfig({
      authorityId: authorityId.value,
      webId: webId.value,
    })
    .then((res) => {
      if (res.code == 0) {
        let tableBtns = [],
          rowBtns = [];
        res.data.map((item) => {
          if (item.type == 1) {
            tableBtns.push(item);
          } else if (item.type == 0) {
            rowBtns.push(item);
          }
        });
        nextTick(() => {
          authButtons.tableBtns = tableBtns;
          authButtons.rowBtns = rowBtns;
        });
      } else {
        $message.error(res.err);
      }
    });
};
const fetchcolumns = () => {
  authColumns.value = [];
  columnCheckGroupRow.value = [];
  authorService
    .queryFieldWebpageAuthorityConfig({
      authorityId: authorityId.value,
      webId: webId.value,
    })
    .then((res) => {
      if (res.code == 0) {
        authColumns.value = res.data;
      } else {
        $message.error(res.err);
      }
    });
};
const saveSetting = () => {
  saveField();
  let ids = JSON.parse(JSON.stringify(buttonCheckGroup.value))
    .concat(JSON.parse(JSON.stringify(buttonCheckGroupRow.value)))
    .join(",");
  const postData = {
    ids: ids || " ",
    authorityId: authorityId.value,
    webId: webId.value,
  };
  authorService.addButtonWebpageAuthority(postData).then((res) => {
    if (res.code == 0) {
      $message.success("设置成功");
      fetchbuttons();
    } else {
      $message.error(res.err);
    }
  });
};
const saveField = () => {
  let ids = columnCheckGroupRow.value.join(",");

  const postData = {
    ids: ids || " ",
    authorityId: authorityId.value,
    webId: webId.value,
  };
  console.log(postData);
  authorService.addFieldWebpageAuthority(postData).then((res) => {
    if (res.code != 0) {
      $message.error(res.err);
    } else {
      fetchcolumns();
    }
  });
};

watch(
  webId,
  (val) => {
    if ($route.name == "setPageConAuth") {
      fetchbuttons();
      fetchcolumns();
    }
  },
  { immediate: true }
);
onMounted(() => {});
</script>
<script>
export default {
  name: "setPageConAuth",
  //   data() {
  //     return {
  //       baseParams: { authorityId: "", webId: "" },
  //       buttonCheckGroup: [],
  //       buttonCheckGroupRow: [],
  //       columnCheckGroupRow: [],
  //       authButtons: {},
  //       authColumns: [],
  //       pageActivated: true,
  //     };
  //   },
  //   mounted() {
  //     this.baseParams.authorityId = this.$route.query.authorityId;
  //     this.baseParams.webId = this.$route.query.webId;
  //     this.fetchbuttons();
  //     this.fetchcolumns();
  //   },
  //   // beforeDestroy() {
  //   //     console.log('路由变化清空数据');
  //   //     this.data = this.$options.data();
  //   // },
  //   beforeRouteUpdate(to, from, next) {
  //     // to：目标路由对象
  //     // from：原路由对象
  //     // next：可指定路由进行跳转

  //     next();
  //     // console.log(to); //查询数据
  //   },
  //   computed: {
  //     title: function () {
  //       return this.$route.query.title;
  //     },
  //     authorityId: function () {
  //       return this.$route.query.authorityId;
  //     },
  //     webId: function () {
  //       return this.$route.query.webId;
  //     },
  //   },
  //   activated() {
  //     this.pageActivated = true;
  //   },
  //   deactivated() {
  //     this.pageActivated = false;
  //   },
  //   watch: {
  //     "$route.query.authorityId"(val) {
  //       console.log("authorityId", val);
  //       if (!this.baseParams.webId && this.pageActivated) {
  //         return;
  //       }
  //       this.baseParams.authorityId = val;
  //       this.reSetData();
  //     },
  //     "$route.query.webId"(val) {
  //       console.log("webId", val);
  //       if (!this.baseParams.authorityId && this.pageActivated) {
  //         return;
  //       }
  //       this.baseParams.webId = val;
  //       this.reSetData();
  //     },
  //   },
  //   methods: {
  //     reSetData() {
  //       this.authButtons.tableBtns = [];
  //       this.authButtons.rowBtns = [];
  //       this.authColumns = [];
  //       this.columnCheckGroupRow = [];
  //       this.buttonCheckGroupRow = [];
  //       this.buttonCheckGroup = [];
  //       this.$nextTick(() => {
  //         this.fetchbuttons();
  //         this.fetchcolumns();
  //       });
  //     },
  //     fetchbuttons() {
  //       authorService
  //         .queryButtonWebpageAuthorityConfig(this.baseParams)
  //         .then((res) => {
  //           if (res.code == 0) {
  //             let tableBtns = [],
  //               rowBtns = [];
  //             res.data.map((item) => {
  //               if (item.type == 1) {
  //                 tableBtns.push(item);
  //               } else if (item.type == 0) {
  //                 rowBtns.push(item);
  //               }
  //             });
  //             this.authButtons = { tableBtns, rowBtns };
  //           } else {
  //             this.$message.error(res.err);
  //           }
  //         });
  //     },
  //     fetchcolumns() {
  //       authorService
  //         .queryFieldWebpageAuthorityConfig(this.baseParams)
  //         .then((res) => {
  //           if (res.code == 0) {
  //             this.authColumns = res.data;
  //           } else {
  //             this.$message.error(res.err);
  //           }
  //         });
  //     },
  //     btnChange(obj) {
  //       console.log(obj);
  //       console.log(this.buttonCheckGroupRow);
  //     },
  //     saveSetting() {
  //       this.saveField();
  //       console.log(this.buttonCheckGroup);
  //       let ids = JSON.parse(JSON.stringify(this.buttonCheckGroup))
  //         .concat(JSON.parse(JSON.stringify(this.buttonCheckGroupRow)))
  //         .join(",");
  //       const postData = {
  //         ids: ids,
  //         ...this.baseParams,
  //       };
  //       authorService.addButtonWebpageAuthority(postData).then((res) => {
  //         if (res.code == 0) {
  //           this.$message.success("设置成功");
  //           // this.buttonCheckGroup = [];
  //           // this.buttonCheckGroupRow = [];
  //           // this.authButtons = this.$options.data().authButtons;
  //           // this.$nextTick(() => {
  //           //     this.fetchbuttons();
  //           // });
  //         } else {
  //           this.$message.error(res.err);
  //         }
  //       });
  //     },
  //     saveField() {
  //       const postData = {
  //         ids: this.columnCheckGroupRow.join(","),
  //         ...this.baseParams,
  //       };
  //       console.log(postData);
  //       authorService.addFieldWebpageAuthority(postData).then((res) => {
  //         if (res.code != 0) {
  //           this.$message.error(res.err);
  //         } else {
  //           this.fetchcolumns();
  //         }
  //       });
  //     },
  //   },
};
</script>
<style lang="scss">
.set-pagecon-auth {
  padding: 0 10px;
  .breadcrumb {
    height: 40px;
    display: flex;
    align-items: center;
    align-content: center;
    :deep(.Breadcrumb) {
      display: flex;
      align-items: center;
      align-content: center;
    }
  }
  .auth-item {
    margin-bottom: 20px;
    padding: 0 10px;
    &-caption {
      font-size: 16px;
      line-height: 60px;
      border-bottom: 1px solid #dadada;
    }
    .auth-item-content {
      padding: 10px 15px;
      .el-checkbox {
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }
  }
}
</style>
