<template>
  <view id="dialog3" class="dialog-container">
    <scroll-view class="dialog-content">
      <text>title: {{ title }}</text>
      <template v-for="(item, index) in PageStyleArray">
        <view class="page-style-item" v-if="currentPageStyle[item.key] != null" :key="index">
          <view class="item-text">
            <text class="item-text-key">{{ item.key }}:</text>
            <text class="item-text-value">{{
              currentPageStyle[item.key]
            }}</text>
          </view>
          <view class="mt-10" v-if="item.type == 'boolean'">
            <switch :checked="currentPageStyle.getBoolean(item.key)"
              @change="switchChange(item.key, $event as UniSwitchChangeEvent)">
            </switch>
          </view>
          <view class="mt-10" v-else-if="item.type == 'number'">
            <slider :value="currentPageStyle.getNumber(item.key)" :show-value="true"
              @change="sliderChange(item.key, $event as UniSliderChangeEvent)" />
          </view>
          <view class="mt-10" v-else-if="item.type == 'string'">
            <radio-group class="radio-set-value" @change="radioChange(item.key, $event as RadioGroupChangeEvent)">
              <radio class="ml-10" v-for="(item2, index2) in item.value" :key="index2" :value="item2"
                :checked="currentPageStyle[item.key] == item2">{{ item2 }}
              </radio>
            </radio-group>
          </view>
        </view>
      </template>
      <text class="mt-10 choose-close-animation-type-title">choose close dialogPage animationType</text>
      <radio-group class="choose-close-animation-type-radio-group" @change="handleChooseAnimationType">
        <radio class="ml-10 mt-10" v-for="item in closeAnimationTypeList" :key="item" :value="item"
          :checked="closeAnimationType == item">{{ item }}
        </radio>
      </radio-group>
      <button class="mt-10" @click="closeThisDialog">
        closeThisDialog
      </button>
    </scroll-view>
  </view>
</template>

<script>
  import { PageStyleItem, PageStyleArray } from './page-style.uts';
  type CloseAnimationType =
    'auto' |
    'none' |
    'slide-out-right' |
    'slide-out-left' |
    'slide-out-top' |
    'slide-out-bottom' |
    'fade-out' |
    'zoom-in' |
    'zoom-fade-in'

  export default {
    data() {
      return {
        title: 'dialog 3',
        PageStyleArray: PageStyleArray as PageStyleItem[],
        currentPageStyle: {} as UTSJSONObject,
        closeAnimationType: 'auto' as CloseAnimationType,
        closeAnimationTypeList: [
          'auto',
          'none',
          'slide-out-right',
          'slide-out-left',
          'slide-out-top',
          'slide-out-bottom',
          'fade-out',
          'zoom-in',
          'zoom-fade-in'
        ]
      }
    },
    onLoad(_ : OnLoadOptions) {
      this.getPageStyle()
    },
    methods: {
      getPageStyle() {
        this.currentPageStyle = this.$page.getPageStyle()
      },
      radioChange(key : string, e : RadioGroupChangeEvent) {
        this.setStyleValue(key, e.detail.value);
      },
      sliderChange(key : string, e : UniSliderChangeEvent) {
        this.setStyleValue(key, e.detail.value);
      },
      switchChange(key : string, e : UniSwitchChangeEvent) {
        this.setStyleValue(key, e.detail.value);
      },
      setStyleValue(key : string, value : any) {
        const style = {}
        style[key] = value
        this.setPageStyle(style)
        this.getPageStyle()
      },
      setPageStyle(style : UTSJSONObject) {
        this.$page.setPageStyle(style);
      },
      handleChooseAnimationType(e : RadioGroupChangeEvent){
        this.closeAnimationType = e.detail.value as CloseAnimationType
      },
      closeThisDialog() {
        uni.closeDialogPage({
          dialogPage: this.$page,
          animationType: this.closeAnimationType,
          success(res) {
            console.log('closeDialog success', res)
          },
          fail(err) {
            console.log('closeDialog fail', err)
          },
          complete(res) {
            console.log('closeDialog complete', res)
          }
        })
      }
    }
  }
</script>

<style>
  .dialog-container {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dialog-content {
    width: 90%;
    height: 500px;
    padding: 10px 6px;
    background-color: #fff;
    border-radius: 6px;
  }

  .mt-10 {
    margin-top: 10px;
  }
  .ml-10 {
    margin-left: 10px;
  }

  .page-style-item {
    padding: 6px 0;
    margin-top: 10px;
    background-color: #ffffff;
    border-radius: 5px;
  }

  .item-text {
    flex-direction: row;
  }

  .item-text-key {
    font-weight: bold;
  }

  .item-text-value {
    margin-left: 5px;
  }

  .radio-set-value {
    flex-direction: row;
  }
  .choose-close-animation-type-title{
    font-weight: bold;
  }
  .choose-close-animation-type-radio-group{
    flex-direction: row;
    flex-wrap: wrap;
  }
  </style