<template>
  <div class="section-card">
    <div class="bg-container" v-show="!folded">
      <SectionHeader :title="label" v-if="label" 
        :filterType="headerOptions.filterType" 
        :filter="headerOptions.filter" 
        :options="headerOptions.options" 
        v-model="headerOptions.modelValue">
        <svg-icon v-if="foldable" :name="`${ `#icon-arrow-double-${locate}`}`" fill="#0ACDFF" :size="20" style="margin-right: 20px;" @click="foldCard"></svg-icon>
      </SectionHeader>
      <slot></slot>
    </div>
    <div @click="foldCard" v-show="folded && foldable" :class="['v-title-container', labelWrap && 'v-title-container-wrap', `v-title-container-${locate}`]">
      <div class="svg-btn-inner svg-btn-right" v-if="locate === 'right'"><svg-icon name="#icon-arrow-double-left" fill="#0ACDFF" :size="20"></svg-icon></div>
      <div :class="['v-title', `v-title-${locate}`]">
        <div v-for="(item, index) in labelArr" :key="index" >{{item}}</div>
      </div>
      <div class="svg-btn-inner svg-btn-left" v-if="locate === 'left'"><svg-icon name="#icon-arrow-double-right" fill="#0ACDFF" :size="20"></svg-icon></div>
    </div>
  </div>
</template>

<script setup lang="ts" name="DzSectionCard">
  import SvgIcon from './../svgIcon'
  import SectionHeader from './../sectionHeader'
  import { ref, onMounted, watch } from 'vue'
import { title } from 'process';

  interface Props {
    locate?: string,
    label: string,
    labelWrap?: boolean,
    fold?: boolean,
    foldable?: boolean,
    headerOptions?: any,
  }

  const props = withDefaults(defineProps<Props>(),
  {
    locate: 'left',
    label: '',
    labelWrap: false,
    fold: false,
    foldable: false,
    headerOptions: {}
  })

  const folded = ref(false)
  const labelArr = ref([] as string[])

  onMounted(() => {
    folded.value = props.fold
    labelArr.value = props.label ? props.label.split('') : []
  })

  //@ts-ignore
  watch(props.label, (newVal:string) => {
      labelArr.value = newVal ? newVal.split('') : []
  })

  //@ts-ignore
  watch(props.fold, (newVal:boolean) => {
      folded.value = newVal
  })

  const foldCard = () =>  {
    folded.value = !folded.value
  }

</script>
<style lang="less" scoped>
.section-card {
  margin-bottom: 16px;
  position: relative;

  .svg-btn {
    position: absolute;
    top: 10px;
    right: 5px;
    height: 30px;
    width: 30px;
    z-index: 1000;
    cursor: pointer;
  }
  .bg-container {
    // width: 100%;
    width: 480px;
    height: 100%;
    background: rgba(0,32,70,0.8);
  }

  .v-title-container {
    display: flex;
    .v-title {
      display: flex;
      padding: 10px;
      writing-mode: vertical-rl;
      flex-wrap: wrap;
      background-image: linear-gradient(0deg, #072856 0%, #0E5FFF 100%);
      color: #D1F9FE;
      font-size: 20px;
      align-items: center;
      div {
        writing-mode: horizontal-tb;
        width: 22px;
        height: 22px;
        font-size: 20px;
      }
    }
    .v-title-right {
      writing-mode: vertical-lr;
    }
    .svg-btn-inner {
      width: 34px;
      height: 34px;
      border: 1px solid #4F92D9;
      border-radius: 4px;
      margin-left: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #002654;
      cursor: pointer;
    }
    .svg-btn-right {
      margin-right: 10px;
    }
  }
  .v-title-container-right {
    justify-content: flex-end;
  }
  .v-title-container-wrap {
    height: 100%;
  }
}

</style>
