<template>
  <div class="notice-box">
    <u-notice-bar
      :volume-icon="true"
      :left-icon="defaultIcon"
      :bg-color="notice.background"
      @click="clickNoticeHandler"
      :list="list"
      :more-icon="true"
      :color="notice.textColor"
    />
    <u-popup
      v-model="showDialog"
      mode="center"
      custom-style="padding:0;width:80vw;background:none;"
    >
      <div style="width: 80vw;">
        <div class="popup-notice-head">
          <image :src="notice.headerUrl" mode="widthFix" />
        </div>
        <div class="popup-notice-context">{{ notice.content }}</div>
        <div class="popup-notice-footer">
          <u-button
            type="primary"
            :custom-style="buttonStyle"
            @click="clickNoticeHandler"
            >{{ notice.btnText }}</u-button
          >
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
export default {
  props: ["notice"],
  data() {
    return {
      defaultIcon:
        "http://imgfile.oytour.com/New/Upload/Cloud/2020-04/20200429053823742.png",
      showDialog: false,
      buttonStyle: "",
      list: [],
    };
  },
  created() {
    if (this.notice.icon && this.notice.icon != "") {
      this.defaultIcon = this.notice.icon;
    }
    this.list.push(this.notice.name+'：'+this.notice.content);
    this.buttonStyle = {
      background:this.notice.btnColor,
      width:this.notice.btnWidth,
      height:this.notice.btnHeight,
      borderRadius:this.notice.btnRadius,
      color:this.notice.btnTextColor,
      borderColor:this.notice.btnColor
    }
  },
  methods: {
    clickNoticeHandler() {
      this.showDialog = !this.showDialog;
      console.log(this.showDialog);
    },
  },
};
</script>

<style>
.notice-box .u-mode-center-box {
  background: none;
}
.popup-notice-head image {
  width: 100%;
}
.popup-notice-context {
  background: #fff;
  padding: 12px;
  min-height: 30px;
  font-size: 14px;
  margin-top: -12px;
}
.popup-notice-footer {
  text-align: center;
  background: #fff;
  padding: 12px;
}
</style>
