<script setup>
import { apiCustomerUser } from '@/api/customer'
import { watch } from 'vue'

const props = defineProps({
  userId: {
    type: [Number, String],
    default: ''
  }
})

const checkedIds = defineModel('checkedIds', { type: Array, default: [] })

const opts = ref([])
async function getAuthData() {
  const res = await apiCustomerUser.userPermissionData({
    UserId: props.userId || ''
  })
  if (res.Ret !== 200) return
  opts.value = res.Data.List || []
  const selectArr = res.Data.SelectedList || []
  if (selectArr.length === 0) {
    opts.value.forEach(item => {
      item.PublicChild && item.PublicChild.forEach(_i => {
        checkedIds.value.push(_i.ChartPermissionId)
      })
    });
  } else {
    checkedIds.value = res.Data.SelectedList
  }

}
getAuthData()

// 二级品种选中态改变
function handleSelectChange(checked, item) {
  console.log('二级品种选中态改变');
  if (checked) {
    checkedIds.value.push(item.ChartPermissionId)
  } else {
    checkedIds.value = checkedIds.value.filter(i => i !== item.ChartPermissionId)
  }
}

// 一级品种选中态改变
function handleChangeLevel1(checked, item) {
  console.log('一级品种选中态改变');
  if (checked) {
    item.PrivateChild && item.PrivateChild.forEach(_i => {
      if (!checkedIds.value.includes(_i.ChartPermissionId)) {
        checkedIds.value.push(_i.ChartPermissionId)
      }
    })
  } else {
    //取消全选
    let ids = []
    item.PrivateChild && item.PrivateChild.forEach(_e => {
      ids.push(_e.ChartPermissionId)
    })
    checkedIds.value = checkedIds.value.filter(_e => !ids.includes(_e))
  }
}

// 控制一级品种的状态 0全没选中 1部分选中 2全选中
function level1Status(item) {
  let allCount = 0//一级品种总共有多少二级
  let count = 0//当前有多少该一级品种下面的二级是选中的
  if (item.PublicChild) {
    allCount = allCount + item.PublicChild.length
    count = count + item.PublicChild.length //公有的都选中
  }
  if (item.PrivateChild) {
    allCount = allCount + item.PrivateChild.length
    item.PrivateChild.forEach(_i => {
      if (checkedIds.value.includes(_i.ChartPermissionId)) {
        count++
      }
    })
  }

  if (count === 0) {//全没选中
    return 0
  } else if (count === allCount) {//全选中了
    return 2
  } else {//部分选中
    return 1
  }
}

//全选状态 0全没选中 1部分选中 2全选中
const allSelectStatus = computed(() => {

  let count = 0 //总共有多少二级品种
  opts.value.forEach(item => {
    if (item.PublicChild) {
      count = count + item.PublicChild.length
    }
    if (item.PrivateChild) {
      count = count + item.PrivateChild.length
    }
  })

  if (checkedIds.value.length === 0) return 0
  if (checkedIds.value.length > 0 && checkedIds.value.length < count) return 1
  if (checkedIds.value.length === count) return 2
})

// 全选状态改变
function handleChangeAll(checked) {
  let arr=[]
  opts.value.forEach(item => {
    item.PublicChild?.forEach(_i=>{
      arr.push(_i.ChartPermissionId)
    })
    if (checked){//权限将所有私有权限选中
      item.PrivateChild?.forEach(_i=>{
        arr.push(_i.ChartPermissionId)
      })
    }
  })
  checkedIds.value=arr
}

</script>

<template>
  <div class="permission-table-wrap">
    <div class="item-wrap">
      <div class="checkall-box">
        <el-checkbox
          :model-value="allSelectStatus === 2"
          :indeterminate="allSelectStatus === 1"
          @change="handleChangeAll"
          >全选</el-checkbox
        >
      </div>
    </div>
    <div
      class="item-wrap"
      v-for="level1 in opts"
      :key="level1.ChartPermissionId"
    >
      <div class="checkall-box">
        <el-checkbox
          @change="handleChangeLevel1($event, level1)"
          :model-value="level1Status(level1) === 2"
          :indeterminate="level1Status(level1) === 1"
          >{{ level1.PermissionName }}</el-checkbox
        >
      </div>
      <!-- 公有权限 -->
      <div class="child-box" v-if="level1.PublicChild">
        <span class="label-tag pub-tag">公有</span>
        <el-checkbox
          :model-value="checkedIds.includes(pubitem.ChartPermissionId)"
          disabled
          v-for="pubitem in level1.PublicChild"
          :key="pubitem.ChartPermissionId"
          >{{ pubitem.PermissionName }}</el-checkbox
        >
      </div>
      <!-- 私有权限 -->
      <div class="child-box" v-if="level1.PrivateChild">
        <span class="label-tag pri-tag">私有</span>
        <el-checkbox
          :model-value="checkedIds.includes(priitem.ChartPermissionId)"
          v-for="priitem in level1.PrivateChild"
          :key="priitem.ChartPermissionId"
          @change="handleSelectChange($event, priitem)"
          >{{ priitem.PermissionName }}</el-checkbox
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.permission-table-wrap {
  margin-top: 10px;
  margin-left: 60px;
  border: 1px solid #ebeff6;
  .item-wrap {
    border-bottom: 1px solid #ebeff6;
    .checkall-box {
      border-bottom: 1px solid #ebeff6;
      padding: 14px 16px;
      background-color: #f9faff;
    }
    .child-box {
      padding: 14px 16px;
      .label-tag {
        display: inline-block;
        padding: 2px 3px;
        margin-right: 10px;
      }
      .pub-tag {
        color: #436cff;
        background-color: #d1e4ff;
      }
      .pri-tag {
        color: #edab29;
        background-color: #fffaeb;
      }
    }
  }
}
</style>