<template>
  <a-modal
    :visible="visible"
    :title="title"
    :maskClosable="false"
    :width="hasLeftSlot ? width || 1100 : width || 600"
    :okText="t('确定')"
    :cancelText="t('取消')"
    @ok="$emit('submit')"
    @cancel="$emit('close')"
  >
    <slot name="header"></slot>
    <div class="content" :style="contentStyle">
      <div
        :class="['left', isDeptSelect ? 'left-box' : '']"
        v-if="hasLeftSlot"
        :style="{ 'flex-basis': leftWidth }"
      >
        <slot name="left"></slot>
      </div>
      <div class="right">
        <slot></slot>
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
  import { computed, useSlots } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  defineEmits(['submit', 'close']);
  defineProps({
    title: String,
    width: Number,
    visible: { type: Boolean, default: false },
    isDeptSelect: { type: Boolean, default: false },
    leftWidth: { type: String, default: '400px' },
    contentStyle: { type: Object },
  });
  const hasLeftSlot = computed(() => {
    return !!useSlots().left;
  });
</script>
<style lang="less" scoped>
  .content {
    display: flex;
    height: 616px;

    .left {
      width: 400px;
      flex-basis: 400px;
      border-right: 1px solid #ddd;
      height: 100%;
    }

    .right {
      flex: 1;
      width: calc(100% - 400px);
      height: 100%;
    }
  }

  :deep(.list-box) {
    display: flex;
    flex-wrap: wrap;
    align-content: baseline;
    overflow-y: auto;
    padding: 0 0 16px;
    height: calc(100% - 50px);
  }

  :deep(.close-icon) {
    cursor: pointer;
    font-size: 20px;
    width: 16px;
    height: 16px;
    line-height: 10px;
    border: 1px solid #999;
    border-radius: 50%;
    color: #999;
    transform: rotate(45deg);
    text-align: center;
  }

  :deep(.title) {
    font-size: 16px;
    color: #333;
    padding: 0 0 10px 10px;
    margin: 0 20px;
    border-bottom: 1px solid #f0f0f0;
  }

  :deep(.ant-checkbox-inner) {
    border-radius: 50%;
  }

  :deep(.ant-checkbox-checked .ant-checkbox-inner) {
    border-radius: 50%;
  }

  .left-box {
    margin-left: calc(50% - 155px);
  }

  :deep(.list-page-box) {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto;
    align-content: baseline;
    height: calc(100% - 118px);
  }

  :deep(.page-box) {
    height: 52px;
    border-top: 1px solid rgb(238 238 238 / 93%);
    text-align: right;
    padding: 10px 16px;
    background: #fff;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
  }
</style>
