<template>
  <div
    :class="[center ? 'dof-noticebar-center' : 'dof-noticebar']"
    v-if="show"
    @click="noticeBarClicked"
    :accessible="true"
    :style="noticebarStyle"
    :aria-label="notice"
  >
    <image class="type-ICON" :src="typeIcon" style="margin-right:16px"></image>
    <!-- <dof-iconfont v-else-if="_theme == 'colmo'" :code="'\u4724'" :color="colmoIconColor" size="32"></dof-iconfont> -->
    <text :class="[center ? 'noticebar-content-center' : 'noticebar-content']" :style="contentStyle">{{ notice }}</text>
    <div class="more-click-content" v-if="mode" :mode="mode">
      <text
        v-if="(this.mode == 'btn' && btnText) || this.mode == 'all'"
        :class="['btnText', activeBtnText]"
        @click="noticeIconClicked"
        :style="btnTextStyle"
        >{{ btnText }}</text
      >
      <div v-if="this.mode == 'all'" style="width:8px"></div>
      <div class="closeImg">
        <image
          :style="{ opacity: _isDiablo ? 0.85 : 1 }"
          v-if="_theme !== 'colmo' && ((modeIcon && this.mode == 'closable') || this.mode == 'all')"
          class="mode-ICON"
          @click="closeIconClicked"
          :src="modeIcon"
        >
        </image>
        <dof-iconfont
          v-else-if="_theme == 'colmo' && ((modeIcon && this.mode == 'closable') || this.mode == 'all')"
          :code="'\u4725'"
          color="rgba(255,255,255,0.80)"
          size="50"
        ></dof-iconfont>
        <div
          class="closeBox"
          @click="closeIconClicked"
          v-if="(modeIcon && this.mode == 'closable') || this.mode == 'all'"
        ></div>
      </div>
      <div class="linkBox">
        <image v-if="_theme !== 'colmo' && linkIcon && this.mode == 'link'" class="mode-ICON" :src="linkIcon"> </image>
        <dof-iconfont
          v-else-if="_theme === 'colmo' && linkIcon && this.mode == 'link'"
          :code="'\u4713'"
          color="rgba(255,255,255,0.80)"
          size="50"
        ></dof-iconfont>
      </div>
    </div>
  </div>
</template>
<style src="./colmo.css"></style>
<style scoped>
.closeImg {
  position: relative;
}
.closeBox {
  width: 100px;
  height: 50px;
  position: absolute;
  left: 0;
}
.dof-noticebar {
  width: 750px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 32px;
  padding-right: 32px;
  background-color: rgba(0, 0, 0, 0.1);
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.dof-noticebar-center {
  width: 750px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 32px;
  padding-right: 32px;
  background-color: rgba(0, 0, 0, 0.1);
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.noticebar-content {
  font-family: 'PingFangSC-Regular';
  font-size: 26px;
  line-height: 34px;
  color: #ffffff;
  flex: 1;
  lines: 4;
  text-align: justify;
  word-break: break-all;
  text-overflow: ellipsis;
}

.noticebar-content-center {
  font-family: 'PingFangSC-Regular';
  font-size: 26px;
  line-height: 34px;
  color: #ffffff;
  lines: 1;
  text-overflow: ellipsis;
}

.more-click-content {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-left: 16px;
}

.btnText {
  font-size: 24px;
  color: #ffffff;
  border-style: solid;
  border-width: 2px;
  /* border-color: #FFFFFF;    无效*/
  /* border-top-color: #FFFFFF; */
  border-top-color: rgba(255, 255, 255, 0.5);
  border-bottom-color: rgba(255, 255, 255, 0.5);
  border-left-color: rgba(255, 255, 255, 0.5);
  border-right-color: rgba(255, 255, 255, 0.5);
  border-radius: 48px;
  line-height: 48px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 2px;
}

.mode-ICON,
.type-ICON {
  width: 32px;
  height: 32px;
}
.colmobtn-active-info:active {
  background-color: rgba(255, 255, 255, 0.1);
}
.colmobtn-active-important:active {
  background-color: rgba(255, 255, 255, 0.1);
}
</style>

<script>
import ICON from './type'
import Utils from '../utils'
import DofIconfont from '../dof-iconfont'
import { STYLE_MAP } from './style'
import ColmoMixin from '../../mixins/colmo'
import DiabloMixin from '../../mixins/diablo'
export default {
  mixins: [ColmoMixin, DiabloMixin],
  components: { DofIconfont },
  props: {
    //type value  info, warning, danger,  新增warning-i18n, 'important（colmo）'
    type: {
      type: String,
      default: 'info'
    },
    notice: {
      type: String,
      default: ''
    },
    mode: {
      type: String,
      default: ''
    },
    btnText: {
      type: String,
      default: ''
    },
    //  0.1.14新需求
    center: {
      type: Boolean,
      default: false
    },
    //  0.1.20新需求, 提醒内容两行以上
    lines: {
      type: [Number, String],
      default: 2
    }
  },

  computed: {
    themeStyle() {
      const _theme = this._theme || 'default'
      return STYLE_MAP[_theme] || STYLE_MAP['default']
    },
    colmoIconColor() {
      const map = {
        info: '#B35336',
        important: 'rgba(255,255,255,0.80)'
      }
      return map[this.type]
    },
    activeBtnText() {
      if (this._isColmo && this.type == 'info') {
        return 'colmobtn-active-info'
      } else if (this._isColmo && this.type == 'important') {
        return 'colmobtn-active-important'
      }
      return ''
    },
    noticebarStyle() {
      let style = {}
      const { mode } = this
      switch (this.type) {
        case 'warning':
          style = {
            backgroundColor: this._isDiablo ? '#211E15' : '#FFF6E7'
          }
          break
        case 'warning-i18n':
          style = {
            backgroundColor: 'rgba(245,100,40,0.1)'
          }
          break
        case 'danger':
          style = {
            backgroundColor: this._isDiablo ? '#db5c44' : '#FFEBEA'
          }
          break
        case 'important':
          style = {
            backgroundColor: '#B35336'
          }
          break
        default:
          style = {}
      }
      if (mode == 'btn' || mode == 'all') {
        style = {
          ...style,
          paddingTop: '12px',
          paddingBottom: '12px'
        }
      }
      return style
    },

    contentStyle() {
      let style = {}
      switch (this.type) {
        case 'warning':
          style = {
            color: '#E09916'
          }
          break
        case 'warning-i18n':
          style = {
            color: '#F56428'
          }
          break
        case 'danger':
          style = {
            color: '#F56428'
          }
          break
        case 'important':
          style = {
            color: 'rgba(255,255,255,0.80)'
          }
          break
        default:
          style = {}
      }
      style = {
        lines: this.lines,
        ...style
      }
      return style
    },

    btnTextStyle() {
      let style = {}
      switch (this.type) {
        case 'warning':
          style = {
            color: '#E09916',
            // 'borderColor':'E09916'   // 无效
            //  borderLeftColor: '#E09916', 应设计师新需求，调整透明度
            borderLeftColor: '#E09916',
            borderRightColor: '#E09916',
            borderTopColor: '#E09916',
            borderBottomColor: '#E09916'
          }
          break
        case 'warning-i18n':
          style = {
            color: '#F56428',
            // 'borderColor':'E09916'   // 无效
            //  borderLeftColor: '#E09916', 应设计师新需求，调整透明度
            borderLeftColor: '#F56428',
            borderRightColor: '#F56428',
            borderTopColor: '#F56428',
            borderBottomColor: '#F56428'
          }
          break
        case 'danger':
          style = {
            color: '#F56428',
            // borderLeftColor: '#F56428',应设计师新需求，调整透明度
            borderLeftColor: 'rgba(255,59,48, 0.5)',
            borderRightColor: 'rgba(255,59,48, 0.5)',
            borderTopColor: 'rgba(255,59,48, 0.5)',
            borderBottomColor: 'rgba(255,59,48, 0.5)'
          }
          break
        case 'important':
          style = {
            color: 'rgba(255,255,255,0.8)',
            borderLeftColor: 'rgba(255,255,255,0.8)',
            borderRightColor: 'rgba(255,255,255,0.8)',
            borderTopColor: 'rgba(255,255,255,0.8)',
            borderBottomColor: 'rgba(255,255,255,0.8)'
          }
          break
        default:
          style = {}
      }

      if (this.mode == 'all') {
        style = {
          marginRight: this.themeStyle.modeAllWidth,
          marginLeft: this.themeStyle.modeAllLeft,
          ...style
        }
      }
      return style
    },

    typeIcon() {
      let typeIcon
      //type info, warning, danger,  warning-i18n
      switch (this.type) {
        case 'warning':
          typeIcon = this._isDiablo ? ICON.warnIconDiablo : ICON.warnIcon
          break
        case 'warning-i18n':
          typeIcon = ICON.warnI18nIcon
          break
        case 'danger':
          typeIcon = ICON.dangerIcon
          break
        case 'important':
          typeIcon = ICON.colmoImportantIcon
          break
        default:
          typeIcon = this._theme == 'colmo' ? ICON.colmoInfoIcon : ICON.infoIcon
      }
      return typeIcon
    },

    modeIcon() {
      let modeIcon
      switch (this.type) {
        case 'warning':
          modeIcon = this._isDiablo ? ICON.warnCloseIconDiablo : ICON.warnCloseIcon
          break
        case 'warning-i18n':
          modeIcon = ICON.warnI18nCloseIcon
          break
        case 'danger':
          modeIcon = ICON.dangerCloseIcon
          break
        default:
          modeIcon = ICON.infoCloseIcon
      }
      return modeIcon
    },
    linkIcon() {
      let linkIcon
      switch (this.type) {
        case 'warning':
          linkIcon = ICON.warnLink
          break
        case 'warning-i18n':
          linkIcon = ICON.warnI18nLink
          break
        case 'danger':
          linkIcon = ICON.dangerLink
          break
        default:
          linkIcon = ICON.infoLink
      }
      return linkIcon
    }
  },
  data: () => ({
    show: true
  }),
  methods: {
    // noticebar click
    noticeBarClicked() {
      // console.log('dofNoticebarClicked');
      this.$emit('dofNoticebarClicked', {})
    },

    // notice icon click
    noticeIconClicked() {
      const { mode } = this
      this.$emit('dofNoticebarBtnClicked', {}) //button clicked
    },

    closeIconClicked() {
      this.show = false
      this.$emit('dofNoticebarCloseClicked', {}) //close clicked
    }
  }
}
</script>
