<template>
  <div class="code-fun-flex-col code-fun-justify-start">
    <div class="code-fun-flex-col code-fun-justify-start group_1">
      <div class="code-fun-flex-col code-fun-justify-start code-fun-items-end group">
        <div class="code-fun-flex-col code-fun-justify-start code-fun-items-start code-fun-relative group_2">
          <div class="code-fun-flex-col section_7">
            <div class="code-fun-flex-col code-fun-justify-start section_1">
              <div class="code-fun-flex-row section_11">
                <div class="code-fun-flex-col code-fun-justify-start section_12" @click="handleCancel">
                  <div class="code-fun-flex-col code-fun-justify-start code-fun-items-center text-wrapper_2">
                    <span class="text_4">{{ cancelText }}</span>
                  </div>
                </div>
                <div class="code-fun-flex-col code-fun-justify-start section_13 code-fun-ml-8" @click="handleConfirm">
                  <div class="code-fun-flex-col code-fun-justify-start code-fun-items-center text-wrapper_3">
                    <span class="text_5">{{ confirmText }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="code-fun-flex-col code-fun-justify-start code-fun-relative section_9">
              <div class="code-fun-flex-col code-fun-justify-start section_10">
                <div class="code-fun-flex-col code-fun-justify-start code-fun-items-start text-wrapper">
                  <input 
                    v-model="inputValue"
                    class="text_3" 
                    :placeholder="placeholder"
                    @keyup.enter="handleConfirm"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="code-fun-flex-col section_8 pos">
            <div class="code-fun-flex-col code-fun-justify-start code-fun-items-start code-fun-self-stretch group_3">
              <span class="text_2">{{ title }}</span>
            </div>
            <div class="code-fun-self-start divider"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '新建文件夹'
  },
  placeholder: {
    type: String,
    default: '新建文件夹'
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  cancelText: {
    type: String,
    default: '取消'
  }
});

const emit = defineEmits(['confirm', 'cancel']);

const inputValue = ref('');

const handleConfirm = () => {
  emit('confirm', inputValue.value);
};

const handleCancel = () => {
  emit('cancel');
};
</script>

<style scoped lang="less">
.group_1 {
  padding-bottom: 1rem;
  .group {
    padding: 0.5rem 0 0.25rem;
    .group_2 {
      margin-right: 0.75rem;
      width: 32.31rem;
      .section_7 {
        padding-top: 5.75rem;
        background-color: #00000000;
        width: 29.06rem;
        height: 18.16rem;
        background-image: url(https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/686f20ecd54496f19f54e801/68e862ab9520a30011f388ff/17600601480475170758.png);
        background-repeat: no-repeat;
        background-size: 100% auto;
        background-position: 0% 0%;
        .section_1 {
          margin-top: 7.88rem;
          background-color: #00000000;
          .section_11 {
            padding: 0.5rem 0.5rem 0.75rem;
            background-color: #f4f4f7;
            border-radius: 0rem 0rem 0.75rem 0.75rem;
            border: solid 0.032rem #edeee8;
            .section_12 {
              padding: 0.25rem 0;
              background-color: #00000000;
              width: 13.63rem;
              height: 3.13rem;
              .text-wrapper_2 {
                margin: 0 0.25rem;
                padding: 0.75rem 0;
                background-color: #f2f2f2;
                border-radius: 0.25rem;
                width: 13.34rem;
                border: solid 0.032rem #d7d7d7;
                .text_4 {
                  color: #757575;
                  font-size: 1.23rem;
                  font-weight: 700;
                  line-height: 1.23rem;
                }
              }
            }
            .section_13 {
              margin-right: 0.25rem;
              padding-top: 0.25rem;
              background-color: #00000000;
              width: 13.59rem;
              height: 3.06rem;
              .text-wrapper_3 {
                margin-left: 0.25rem;
                padding: 0.75rem 0;
                border-radius: 0.25rem;
                background-image: url('assets/53062683132af1946e1a4953530af228.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                width: 13.34rem;
                .text_5 {
                  color: #cddff2;
                  font-size: 1.19rem;
                  line-height: 1.19rem;
                }
              }
            }
          }
        }
        .section_9 {
          margin-top: -12.5rem;
          padding: 1.75rem 0 0.25rem;
          background-color: #00000000;
          .section_10 {
            margin: 0 1.5rem;
            padding-top: 0.25rem;
            background-color: #00000000;
            width: 25.88rem;
            .text-wrapper {
              margin: 0 0.25rem;
              padding: 0.75rem 0;
              background-color: #fefefe;
              border-radius: 0.25rem;
              width: 25.53rem;
              border: solid 0.063rem #e1e1e1;
              .text_3 {
                margin-left: 1rem;
                color: #d0d0d0;
                font-size: 1.38rem;
                font-weight: 700;
                line-height: 1.38rem;
              }
            }
          }
        }
      }
      .section_8 {
        padding: 0 0.13rem;
        background-color: #00000000;
        width: 32.31rem;
        .group_3 {
          padding: 1.5rem 0;
          width: 32.06rem;
          .text_2 {
            margin-left: 10.5rem;
            color: #7a7a7a;
            font-size: 1.54rem;
            font-weight: 700;
            line-height: 1.54rem;
          }
        }
        .divider {
          background-color: #f0f0f0;
          width: 29rem;
          height: 0.094rem;
        }
      }
      .pos {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
      }
    }
  }
}
</style>
