<template>
  <view class="xd-dailog" :style="{zIndex:zIndex <= 4000? 4000:zIndex }" v-if="uiShow">
    <view
      class="xd-dailog__mask"
      :style="[{backgroundColor:maskBackgroundColor}]"
      @click="bodyClose"
    ></view>
    <view
      class="xd-dailog__body"
      @click.stop
      :style="[boxStyleComp]"
    >
      <view class="xd-dailog__body-cover" :style="[bodyCoverBoxStyle]"></view>
      <view class="xd-dailog__body-title" v-if="showTitleComp">
        <slot name="title">
          {{title}}
        </slot>
      </view>
      <view class="xd-dailog__body-close" v-if="showClose" @click="close">
        <xd-font-icon
          icon="icondanchuangguanbi_xian"
          width="52"
          height="52"
          size="26"
          color="#fff"
        ></xd-font-icon>
      </view>
      <view class="xd-dailog__body-content" >
        <view class="xd-dailog__body-content-box" :style="[contStyleComp]">
          <slot></slot>
        </view>
        <view class="xd-dailog__body-btn" v-if="cancel || confirm">
          <slot name="btn">
            <view v-if="cancel">
              <xd-button
                @click="handleConfirm('cancel')"
                :type="cancelColorType"
                size="medium"
                :radius="btnRadius  + 'rpx'"
              >{{cancelText}}</xd-button>
            </view>
            <view v-if="confirm">
              <xd-button
                @click="handleConfirm('confirm')"
                :type="confirmColorType"
                size="medium"
                :radius="btnRadius + 'rpx'"
              >{{confirmText}}</xd-button>
            </view>
          </slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import XdButton from "@/components/XdButton/XdButton";
  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
  import {mapState,  mapMutations} from 'vuex';
  import Color from "color"
  import {
    getParentsStyle, //获取页面风格单个键值值
    getParentsStyles //获取页面风格列表
  } from '@/utils/xd.base';

  export default {
    name: "XdDailog",
    components: {
      XdButton,
      XdFontIcon
    },
    props:{
      disabled:{
        type: Boolean,
        default: false,
      },
      width:{
        type: Number | String,
        default: '680rpx',
      },
      showTitle:{
        type: Boolean,
        default: true,
      },
      title:{
        type: String,
        default: '操作',
      },

      maskBackgroundColor:{
        type: String,
        default: 'rgba(0,0,0,.5)',
      },

      showClose: {
        type: Boolean,
        default: true,
      },

      background: {
        type: String,
        default: '#fff',
      },

      maskAutoClose:{
        type: Boolean,
        default: false,
      },
      show:{
        type: Boolean,
        default: true,
      },
      zIndex: {
        type: Number,
        default: 4000,
      },
      cancel: {
        type: Boolean,
        default: true,
      },
      cancelText: {
        type: String,
        default: '取消',
      },
      cancelColorType: {
        type: String,
        default: 'info',
      },
      confirm: {
        type: Boolean,
        default: true,
      },
      confirmText: {
        type: String,
        default: '打招呼',
      },
      confirmColorType: {
        type: String,
        default: 'primary',
      },
      radius:{
        type: Number, //rpx
        default: 10,
      },
      btnRadius:{
        type: Number, //rpx
        default: 10,
      },

      isAuto:{
        type: Boolean,
        default: false,
      },

    },

    data(){
      return {
        isPreview: false,
        uiShow: false,
        uiRadius: 11.2,
        uiDisabled: false,
        uiStyle: {}
      }
    },

    computed:{
      ...mapState([
        'brandInfo'
      ]),
      showTitleComp(){
        let temp = true;
        // #ifdef MP-WEIXIN
        if(this.showTitle === false) temp = false;
        // #endif
        // #ifdef H5
        if(this.showTitle === false) temp = false;
        if(this.title === '' || this.title === null ||  this.title === undefined) temp = false;
        // #endif
        return temp;
      },
      bodyCoverBoxStyle(){
        let type = this.brandInfo.base_style;
        let style = {};
        if(type === 'bgColorGradient'){
          let color1 = Color(this.uiStyle.$mainColor).alpha(0.25).toString();
          style.background = `linear-gradient(180deg, ${color1} 0%, rgba(255,255,255,0) 100%)`
        }
        return style;
      },
      boxStyleComp(){
        return {
          borderRadius: (this.uiRadius +  'rpx'),
          width: this.width,
          background: this.background,
          top: this.isPreview ? '200rpx': '50%',
          transform: this.isPreview ? 'translate(-50%, 0)': 'translate(-50%, calc(-50% - 64rpx))'
        }
      },
      contStyleComp(){
        let maxHeight = '65vh';
        if(this.$root && this.$root.layoutInfo) {
          let {bottom,top} = this.$root.layoutInfo;
          maxHeight = `calc(58vh - ${bottom + top}rpx)`;
        }
        return {
          maxHeight: maxHeight,
        }
      },
    },

    watch:{
      show(value){
        this.uiShow = value;
      },
      disabled(value) {
        this.uiDisabled = value;
      },
    },
    async created(){
      let pageStyle = this.systemStyle || {};
      let style = await getParentsStyles();
      style = Object.assign({}, JSON.parse(JSON.stringify(style)) , pageStyle);
      this.uiStyle = style;

      this.uiShow = this.show;
      this.uiDisabled = this.disabled;
      this.uiRadius = this.radius;
      if(this.$configProject && this.$configProject.isPreview) {
        this.isPreview = !this.isAuto && this.$configProject.isPreview
      }
      console.log(this.$root.layoutInfo);

    },
    methods: {

      handleConfirm(status){
        console.log(status)
        let params = {};
        params[status] = true;
        this.$emit('onBtn', params);
        if(status === 'cancel') {
          this.close();
        }
      },

      bodyClose(){
        if(this.maskAutoClose) {
          this.close();
        }
      },

      close(){
        if (this.uiDisabled) {
          return
        }
        this.uiShow = false;
        this.$emit('update:show', this.uiShow);
        this.$emit('close');
      },
    }
  }
</script>

<style scoped lang="less">
  .xd-dailog {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2000;

    &__mask {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    &__body {
      position: absolute;
      left: 50%;

      &-cover{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100rpx;
      }

      &-close {
        position: absolute;
        width:unit(52/@scale, rpx);
        height: unit(52/@scale, rpx);
        left: 50%;
        transform: translateX(-50%);
        bottom: unit(-100/@scale, rpx);
        border:unit(5, rpx) solid #fff;
        border-radius: 50%;
        overflow: hidden;
      }

      &-title{
        height: unit(118/@scale, rpx);
        line-height: unit(118/@scale, rpx);
        font-size: unit(40, rpx);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      &-content {
        padding: unit(0/@scale,rpx) unit(40, rpx) unit(60/@scale, rpx);
        text-align: center;
        &-box {
          max-height: 58vh;
          overflow-y: auto;
          padding: 0 unit(20, rpx);
          overflow-x: hidden;
        }
      }

      &-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: unit(30, rpx);
        & > view {
          padding: 0 unit(30/@scale,rpx);
        }
      }
    }
  }
</style>
