<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-24 15:45:01
-->
<template>
  <div class="page">
    <div class="topbox">
      <topBar v-if="topList.length > 0"
              :topList="topList"
              :moren="moren"></topBar>
    </div>
    <div class="main">
      <div v-for="(item,index) in typeList"
           :key="index"
           class="table_a">
        <div class="change_l">{{ item.label }}</div>
        <div class="table_b">
          <div v-for="(ctem,cndex) in item.enumList"
               :key="cndex"
               class="table_c">
            <div class="change_i table_cc">
              <el-checkbox v-model="ctem.changed"
                           @change="checkClickA($event,index,cndex)">{{ ctem.label }}</el-checkbox>
            </div>
            <div v-for="(stem,sndex) in ctem.enumList"
                 :key="sndex">
              <div class="change_i">
                <el-checkbox v-model="stem.changed"
                             @change="checkClickB($event,index,cndex,sndex)">{{ stem.label }}</el-checkbox>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button size="small"
                 class="thebtn2"> {{ '取消' }}</el-button>
      <el-button size="small"
                 @click="submit"
                 class="thebtn1"> {{ '确认' }}</el-button>
    </div>
  </div>
</template>

<script>
import topBar from '@/components/topBar'
import * as api from '@/api/notice.js'
export default {
  name: 'Bzpz',
  components: {
    topBar,
  },
  data() {
    return {
      tabActive: 0,
      topList: [
        {
          name: '前台公告',
          id: 0,
        },
        {
          name: '后台公告',
          id: 1,
        },
        {
          name: '站内信配置',
          id: 2,
        },
      ],
      typeList: [],
      gradeList: [],
      rangList: [],
      awardList: [],
      menuList: [],
      moren: '/configManage/noticeConfig/email',
      topList: [
        {
          name: '前台公告',
          path: '/configManage/noticeConfig/noticeConfig',
        },
        {
          name: '后台公告',
          path: '/configManage/noticeConfig/noticeBack',
        },
        {
          name: '站内信配置',
          path: '/configManage/noticeConfig/email',
        },
      ],
    }
  },
  mounted() {
    // 获取列表
    this.getDataList()
  },
  methods: {
    getNoticeList() {
      api
        .noticeList({
          functionType: 2,
          websiteType: 1,
        })
        .then((res) => {
          this.typeList.forEach((item) => {
            res.data.forEach((ctem) => {
              if (item.value == ctem.topCategory) {
                item.enumList.forEach((stem) => {
                  stem.changed = true
                  ctem.secondCategoryVOList.forEach((sstem) => {
                    if (stem.value == sstem.secondCategory) {
                      stem.enumList.forEach((cstem) => {
                        sstem.contentVOList.forEach((csstem) => {
                          if (cstem.value == csstem) {
                            cstem.changed = true

                            item.changed = true
                          }
                        })
                      })
                    }
                  })
                })
              }
            })
          })
          this.$forceUpdate()
          console.log(
            '%c [ this.typeList ]-108',
            'font-size:13px; background:#b96843; color:#fdac87;',
            this.typeList
          )
        })
    },
    handleLink(item) {
      this.tabActive = item.id
    },
    submit() {
      let obj = {
        functionType: 2,
        websiteType: 1,
        topCategoryVOList: [],
      }
      this.typeList.forEach((item) => {
        if (item.changed) {
          obj.topCategoryVOList.push({
            topCategory: item.value,
            secondCategoryVOList: [],
          })
        }
      })
      console.log(
        '%c [ this.typeList ]-156',
        'font-size:13px; background:#68496c; color:#ac8db0;',
        this.typeList
      )
      this.typeList.forEach((item, index) => {
        item.enumList.forEach((ctem) => {
          ctem.checkArr = []
          ctem.enumList.forEach((stem) => {
            if (stem.changed) {
              ctem.checkArr.push(stem.value)
            }
          })
        })
      })

      this.typeList.forEach((item, index) => {
        item.enumList.forEach((ctem) => {
          if (obj.topCategoryVOList.length > 0 && ctem.changed) {
            obj.topCategoryVOList[index].secondCategoryVOList.push({
              secondCategory: ctem.value,
              contentVOList: ctem.checkArr,
            })
          }
        })
      })
      if (obj.topCategoryVOList.length > 0) {
        api.noticeSave(obj).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
          })
        })
      }
    },
    getDataList() {
      // 获取公告类型
      api.noticeType().then((res) => {
        this.typeList = res.data
        // 公告等级
        api.noticeGrade().then((res) => {
          this.gradeList = res.data
          // 等级详情
          api.gradeRanglist().then((res) => {
            res.data.forEach((item) => {
              item.value = item.pkId
              item.label = item.gradeName
            })
            this.rangList = res.data
            // 奖衔详情
            api.awardsList().then((res) => {
              res.rows.forEach((item) => {
                item.value = item.pkId
                item.label = item.awardsName
              })
              this.awardList = res.rows
              // 菜单
              api.menuList().then((res) => {
                this.menuList = res.data
                this.setNewArr()
              })
            })
          })
        })
      })
    },
    setNewArr() {
      this.rangList.forEach((item) => {
        item.changed = false
      })
      this.awardList.forEach((item) => {
        item.changed = false
      })
      this.gradeList.forEach((item) => {
        item.enumList = []
        item.changed = false
      })
      this.menuList.forEach((item) => {
        item.changed = false
        item.enumList.forEach((ctem) => {
          ctem.changed = false
        })
      })
      this.gradeList[0].enumList = this.rangList
      this.gradeList[1].enumList = this.awardList
      this.typeList.forEach((item) => {
        item.enumList = []
        item.changed = false
      })
      this.typeList[0].enumList = this.gradeList
      this.typeList[1].enumList = this.menuList
      // 获取回显
      this.getNoticeList()
      this.$forceUpdate()
    },
    checkClickA(e, index, cndex) {
      if (e) {
        this.typeList[index].enumList[cndex].changed = true
        this.typeList[index].changed = true
        this.typeList[index].enumList[cndex].checkArr = []
        this.typeList[index].enumList[cndex].enumList.forEach((item) => {
          if (item.changed) {
            this.typeList[index].enumList[cndex].checkArr.push(item.value)
          }
        })
      } else {
        this.typeList[index].enumList[cndex].changed = false
        this.typeList[index].enumList[cndex].enumList.forEach((item) => {
          item.changed = false
        })

        this.typeList[index].enumList.forEach((item) => {
          this.typeList[index].changed = false
          if (item.changed) {
            this.typeList[index].changed = true
          }
        })
      }
      this.$forceUpdate()
    },
    checkClickB(e, index, cndex, sndex) {
      if (e) {
        this.typeList[index].enumList[cndex].changed = true
        this.typeList[index].enumList[cndex].enumList[sndex].changed = true
        this.typeList[index].enumList[cndex].checkArr = []
        this.typeList[index].enumList[cndex].enumList.forEach((item) => {
          if (item.changed) {
            this.typeList[index].enumList[cndex].checkArr.push(item.value)
          }
        })
        this.typeList[index].changed = true
      } else {
        this.typeList[index].enumList[cndex].enumList[sndex].changed = false
        this.typeList[index].enumList[cndex].checkArr = []
        this.typeList[index].enumList[cndex].enumList.forEach((item) => {
          if (item.changed) {
            this.typeList[index].enumList[cndex].checkArr.push(item.value)
          }
        })
        this.typeList[index].enumList.forEach((item) => {
          this.typeList[index].changed = false
          if (item.changed) {
            this.typeList[index].changed = true
          }
        })
      }
      this.$forceUpdate()
    },
  },
}
</script>
<style scoped lang="scss">
.page {
  background: #f9f9f9;
  padding: 20px;
}
.topbox {
  align-items: center;
  padding: 0px 0 15px 0;
  display: flex;
  //   background: skyblue;
  .levelList_i {
    margin-left: 20px;
    position: relative;
    cursor: pointer;
    padding: 0 5px;
    min-width: 88px;
    height: 34px;
    border-radius: 17px;
    border: 1px solid #cccccc;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    text-align: center;
    line-height: 34px;
  }
}
.act {
  color: #ffffff;
  background: #08143f;
}
.act1 {
  border-bottom: 3px solid #1890ff !important;
}
.cha {
  font-size: 16px;
  color: #606266;
  position: absolute;
  top: 10px;
}
.li {
  width: 40px;
  margin: 0 auto;
  border-bottom: 3px solid transparent;
}
.main {
  background: #fff;
  border-top: 1px solid #ccc;
}
.table_a {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  // border-top: 1px solid #ccc;
}
.table_b {
  display: flex;
  flex-direction: column;
  // border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  width: 100%;
}
.table_c {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;

}
.table_c:last-child{
  border-bottom: 0;
}
.table_cc {
  width: 140px;
  border-right: 1px solid #ccc;
}
.change_l {
  padding: 0 44px;
}
.change_i {
  display: flex;
  align-items: center;
  padding: 30px 15px;
}
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
</style>
