<template>
  <el-dialog title="选择角色模板" width="677px" v-model="visible">
    <div class="content">
      <div class="title">选择模板，快速创建好角色</div>
      <div class="role_template">
        <div class="item" :class="{ active: item.cehcked }" v-for="item in list" :key="item.id"
          @click="selectRoleHandle(item)">
          <div class="header">
            <div class="title">
              {{ item.name }}
            </div>
            <el-radio v-model="item.cehcked" :value="true" readonly size="large"></el-radio>
          </div>
          <div class="role_list">
            <div class="rl_t">包含角色：</div>
            <div class="rl_r">
              <div class="row" v-for="val in item.children" :key="val.id">{{ val.name }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <div class="btn">
          <el-button @click="visible = false" size="large" style="width: 100%;">自己创建</el-button>
        </div>
        <div class="btn">
          <el-button type="primary" size="large" @click="submitHandle" :loading="loading" style="width: 100%;">
            确 定
          </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { roleTemplateList, saveByTemplate } from '@/api/account/roleTemplate'

const visible = ref(false)

const loading = ref(false)
const list = ref([])

// 获取角色模板列表
async function roleTemplateListAjax() {
  try {
    const res = await roleTemplateList({ isEnable: 1 })
    res.forEach(el => {
      el.cehcked = false
    });
    list.value = res
  } catch (error) {
    console.log(error);
  }
}

function show() {
  visible.value = true
  roleTemplateListAjax()
}

function selectRoleHandle(item) {
  list.value.forEach(item => item.cehcked = false)
  item.cehcked = true
}

// 提交
const emits = defineEmits(['success'])
async function submitHandle() {
  try {
    let item = list.value.find(item => item.cehcked)
    if (item === undefined) {
      ElNotification({
        title: '注意',
        message: '请选择角色模板',
        type: 'error'
      })
      return
    }

    loading.value = true
    await saveByTemplate({
      id: item.id
    })
    ElNotification({
      title: '注意',
      message: '角色创建成功',
      type: 'success'
    })
    emits('success')
    visible.value = false
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    loading.value = false
  }, 500);
}

defineExpose({
  show
})

onMounted(() => {
  roleTemplateListAjax()
})
</script>

<style scoped lang="scss">
.content {
  padding: 28px 0;

  .title {
    font-size: 16px;
    color: #333;
  }

  .role_template {
    padding: 14px 0 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 14px;
    grid-row-gap: 14px;

    .item {
      border: 1px solid #ececec;
      border-radius: 8px;
      padding: 14px 18px;
      transition: all .3s ease-in-out;

      &.active {
        border-color: var(--el-color-primary);
      }

      &:hover {
        cursor: pointer;
        border-color: var(--el-color-primary);
      }

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
        }
      }

      .role_list {
        display: flex;
        gap: 2px;

        div {
          flex: 1;
        }

        .rl_t {
          color: #333;
        }

        .rl_r {
          display: flex;
          flex-direction: column;
          gap: 4px;

          .row {
            display: flex;
            justify-content: flex-end;
            color: #666;
          }
        }
      }
    }
  }
}

.dialog-footer {
  display: flex;
  gap: 14px;

  .btn {
    flex: 1;
  }
}
</style>