<template>
  <div>
    <el-table :data="roleListData" style="width: 100%">
      <el-table-column prop="name" label="" width="150" align="center">
        <template #default="{ row }">
          <el-input v-model="row.name" />
        </template>
      </el-table-column>

      <el-table-column :label="item.name" align="center" v-for="(item, index) in typeHeadList" :key="index">
        <el-table-column prop="name" :label="ite.name" align="center" v-for="(ite, ide) in item.menus" :key="`${index}_${ide}`">
          <template #default="{ row }">
            <el-checkbox value="Value 1" size="large">
              <template #default>
                <div class="box box1" :class="{ disabled: disabled(ite, row) }" v-if="!isCheck(ite, row)" @click="clickItem(ite, row)">
                  <el-icon><CloseBold style="color: red" /></el-icon>
                </div>
                <div class="box box2" v-else @click="clickItem(ite, row)">
                  <el-icon><Select style="color: #fff" /></el-icon>
                </div>
              </template>
            </el-checkbox>
          </template>
        </el-table-column>
      </el-table-column>

      <el-table-column prop="date" label="操作" width="100" align="center">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="handleComplete(row)">保存</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button class="mt-4" style="width: 100%" @click="emit('addType')"> 添加类型 </el-button>
  </div>
</template>
<script setup lang="ts">
import { TRoleList, TRoleMenuList } from "@/api/index.d";
import { PropType, ref } from "vue";

const { roleListData, typeHeadList } = defineProps({
  typeHeadList: {
    type: Array as PropType<TRoleMenuList.TRes[]>,
    default: () => [],
  },
  roleListData: {
    type: Array as PropType<TRoleList[]>,
    default: () => [],
  },
});

const emit = defineEmits(["complete", "addType"]);
const handleComplete = (row: TRoleList) => {
  let p = { ...row, menus: row.roleMenu };
  delete p.roleMenu;
  emit("complete", p);
};

const isCheck = (ite, row) => {
  let flag = false;
  row.roleMenu.forEach((item) => {
    if (ite.id == item.id) {
      flag = true;
    }
  });
  return flag;
};
const clickItem = (val, e) => {
  if (val.id == 1 && e.id <= 3) return;
  let flag = e.roleMenu.some((item) => val.id == item.id);
  if (!flag) {
    e.roleMenu.push(val);
  } else {
    e.roleMenu = e.roleMenu.filter((item) => item.id != val.id);
  }
};
const disabled = (ite, row) => {
  if (ite.id == 1 && row.id <= 3) return true;
  return false;
};
</script>

<style scoped lang="less">
.box {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #02174f;
}
.box1 {
  background-color: #fff;
}
.disabled {
  background-color: #bababa;
}
.box2 {
  background-color: #02174f;
}
.el-checkbox :deep(.el-checkbox__input) {
  display: none;
}
</style>
