<template>
  <div class="container">
    <dof-overlay :show="show" :hasAnimation="false" v-if="show"></dof-overlay>
    <div v-if="show" class="dofModalWrapper" @click="layoutClick">
      <div class="modal-box" @click="() => {}" :style="_modalStyle">
        <div class="modal-content" :style="modalContentStyle">
          <slot name="title">
            <text v-if="title" class="content-title">{{ title }}</text>
          </slot>
          <slot name="image">
            <image v-if="image" class="content-image" resize="cover" :src="image" :style="imgStyle"></image>
          </slot>
          <slot name="content">
            <text
              v-if="content"
              class="content-subtext"
              :style="{
                fontFamily: _isColmo ? 'PingFangSC-Regular' : title ? 'PingFangSC-Regular' : 'PingFangSC-Medium',
                color: _subTextColor
              }"
              >{{ content }}</text
            >
          </slot>
          <slot name="input">
            <input
              v-if="hasInput"
              :placeholder="placeholder"
              v-model="inputContent"
              class="search-bar-input"
              :upriseOffset="inputUpriseOffset"
            />
          </slot>
        </div>

        <div
          v-if="btnGroup && btnGroup.length == 0"
          class="modal-footer"
          :style="{ borderTopColor: _modalFooterBorderColor }"
        >
          <div class="footer-btn cancel" v-if="!single" :style="{ borderRightColor: _modalFooterBorderColor }">
            <text class="btn-text" :style="{ color: _secondBtnColor }">{{ cancelText }}</text>
            <div class="mask" @click="cancelClicked"></div>
          </div>
          <div class="footer-btn confirm">
            <text
              class="btn-text"
              :style="{
                color: mainBtnColor ? mainBtnColor : _isColmo ? '#B35336' : _isDiablo ? '#0490d3' : '#00A4F2',
                fontFamily: _isColmo ? 'PingFangSC-Regular' : 'PingFangSC-Medium'
              }"
              >{{ confirmText }}</text
            >
            <div class="mask" @click="primaryClicked"></div>
          </div>
        </div>

        <div v-if="btnGroup && btnGroup.length > 0" class="more-btn">
          <div
            class="footer-more-btn"
            :key="index"
            v-for="(item, index) in btnGroup"
            :style="{ borderTopColor: _modalFooterBorderColor }"
          >
            <text class="btn-text" :style="{ color: item.color ? item.color : _secondBtnColor }">{{
              item.text || item
            }}</text>
            <div class="mask" @click="moreBtnClicked(index, item)"></div>
          </div>
        </div>
        <div class="closeIconBox" v-if="closeIcon || isShowCloseIcon" @click="closeIconClick">
          <image v-if="closeIcon" :src="closeIcon" class="closeIcon"></image>
          <dof-iconfont
            v-else
            class="closeIconFont"
            :code="'\u4725'"
            :size="48"
            :color="_isColmo ? 'rgba(255,255,255,0.80)' : '#333'"
            @dofIconFontClicked="closeIconClick"
          ></dof-iconfont>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  /* width: 750px; */
  align-items: center;
  justify-content: center;
}

/* .mask {
    top: 0;
    width: 750px;
    justify-content: center;
    align-items: center;
} */
.dofModalWrapper {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  /* width: 750px; */
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-box {
  /* background-color: #ffffff; */
  width: 540px;
  /* border-radius: 26px; */
  z-index: 100;
  position: relative;
}

.modal-content {
  padding-top: 36px;
  padding-bottom: 32px;
  padding-left: 32px;
  padding-right: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content-title {
  font-family: PingFangSC-Medium;
  color: #1e2e37;
  font-size: 32px;
  text-align: center;
  /* margin-bottom: 24px; */
  line-height: 48px;

  lines: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.content-image {
  width: 476px;
  height: 476px;
}

.content-subtext {
  font-family: PingFangSC-Regular;
  /* color: #111111; */
  font-size: 26px;
  line-height: 32px;
  margin-top: 16px;
  text-align: center;
}

.search-bar-input {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 10px;
  padding-left: 10px;
  margin-top: 40px;
  font-size: 28px;
  width: 476px;
  /* height: 48px; */
  height: 72px;
  line-height: 72px;
  background-color: #F6F7F9;
  placeholder-color: #8c8c8c;
  /* border: 2px solid #9F9F9F;  无效 */
  /* border-color: #9f9f9f;
  border-width: 1px;
  border-style: solid; */
}

/* weex-native中无效 */
/* input::-webkit-input-placeholder{
    color: #8C8C8C;
  } */

.search-bar-input:active {
  border: 1px solid #9f9f9f !important;
}

.modal-footer {
  flex-direction: row;
  align-items: center;
  /* border-top-color: #c8c7cc; */
  border-top-width: 1px;
  /*H5处理兼容*/
}

.footer-btn {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 90px;
  position: relative;
}

.cancel {
  /* border-right-color: #c8c7cc; */
  border-right-width: 1px;
  /*H5处理兼容*/
  /* border-right: 1px solid #f3f3f3; */
}

.btn-text {
  font-family: PingFangSC-Regular;
  font-size: 36px;
  color: #616c73;
}

.more-btn {
  flex-direction: column;
}

.footer-more-btn {
  flex-direction: columns;
  align-items: center;
  justify-content: center;
  /* flex: 1; */
  height: 90px;
  /* border-top-color: #c8c7cc; */
  border-top-width: 1px;
  position: relative;
}
.closeIconBox {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 25px;
  right: 0;
}
.closeIcon {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: 0px;
  left: 0px;
}
.closeIconFont {
  position: absolute;
  left: 0;
  bottom: 0;
}
.mask {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}
</style>
<style scoped src="./colmo.css"></style>
<style scoped src="./diablo.css"></style>

<script>
import DofOverlay from '../dof-overlay'
import DofIconfont from '../dof-iconfont'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'

export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: { DofOverlay, DofIconfont },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    single: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    mainBtnColor: {
      type: String,
      default: ''
    },
    secondBtnColor: {
      type: String,
      default: ''
    },
    // add by lau
    hasInput: {
      type: [Boolean, String],
      default: false
    },
    placeholder: {
      type: String,
      default: ''
    },
    inputContent: {
      type: String,
      default: ''
    },
    btnGroup: {
      type: Array,
      // default: ['确定','更多','取消']
      default: () => []
    },
    // modal样式自定义
    modalStyle: {
      type: Object,
      default: () => ({})
    },
    // modal-content样式自定义，适用于修改内部padding等需求
    modalContentStyle: {
      type: Object,
      default: () => ({})
    },
    // 底部按钮边框颜色
    modalFooterBorderColor: {
      type: String,
      default: ''
    },
    // subText 颜色
    subTextColor: {
      type: String,
      default: ''
    },
    //是否展示图片
    image: {
      type: String,
      default: ''
    },
    // 图片样式
    imgStyle: {
      type: Object,
      default: () => ({})
    },
    // 右上角close图标
    isShowCloseIcon: {
      type: Boolean,
      default: false
    },
    closeIcon: {
      type: String,
      default: ''
    },
    // input弹窗遮挡后偏移量
    inputUpriseOffset: {
      type: [Number, String],
      default: 60
    }
  },
  computed: {
    _modalStyle() {
      return {
        borderRadius: this._isColmo ? '0px' : '26px',
        backgroundColor: this._isColmo ? '#1c1e21' : this._isDiablo ? '#1e2326' : '#ffffff',
        ...this.modalStyle
      }
    },
    _modalFooterBorderColor() {
      if (this.modalFooterBorderColor) return this.modalFooterBorderColor
      return this._isColmo ? 'rgba(255,255,255,0.1)' : this._isDiablo ? '#303538' : '#dddddd'
    },
    _secondBtnColor() {
      if (this.secondBtnColor) return this.secondBtnColor
      return this._isColmo ? 'rgba(255,255,255,0.40)' : this._isDiablo ? '#0490d3' : '#00A4F2'
    },
    _subTextColor() {
      if (this.subTextColor) return this.subTextColor
      return this._isColmo ? 'rgba(255,255,255,0.60)' : this._isDiablo ? '#cfcfd0' : '#111111'
    }
  },
  data: () => ({}),
  created() {
    var env = weex.config.env
    this.pageHeight = (env.deviceHeight / env.deviceWidth) * 750
  },
  methods: {
    cancelClicked() {
      this.$emit('dofModalCancelBtnClicked', {
        type: 'cancel',
        content: this.inputContent
      })
    },
    primaryClicked() {
      this.$emit('dofModalConfirmBtnClicked', {
        type: 'confirm',
        content: this.inputContent
      })
    },
    layoutClick() {
      this.$emit('close', {})
    },
    closeIconClick() {
      this.$emit('closeIconClicked', {})
    },
    // add by lau
    moreBtnClicked(index, text) {
      this.$emit('btnItemClicked', {
        index,
        text
      })
    }
  }
}
</script>
