<style>
  .diy-notice {
    width: 100%;
    height: 80px;
    padding: 0 24px;
    justify-content: space-between;
  }

  .diy-notice .content {
    flex-grow: 1;
  }

  .diy-notice .content div {
    white-space: nowrap;
    overflow-x: hidden;
  }

  .diy-notice-dialog {
    min-width: 900px;
  }

  .diy-notice-dialog .left .phone {
    width: 750px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 80px;
    zoom: 0.5;
    font-size: 28px;
    position: relative;
  }

  .diy-notice-dialog .left .notice-dialog {
    width: 100%;
    max-height: 800px;
    background-color: #FFFFFF;
    padding: 24px;
  }

  .notice-gallery-item {
    width: 100px;
    height: 100px;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
  }

  .diy-notice-dialog .left .phone {
    width: 750px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 80px;
    zoom: 0.5;
    font-size: 28px;
    position: relative;
  }

</style>
<template>
  <div :class="{'active':noticeData.isCked}">
    <div class="diy-component-options" v-if="noticeData.isCked">
      <el-button type="primary" icon="el-icon-delete" style="left: -25px; top: 0px;" @click="delPlugin()"></el-button>
      <el-button type="primary" icon="el-icon-document-copy" style="left: -25px; top: 30px;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-up" v-if="index>0" @click="resetSord(0)"
        style="right: -25px; top: 0;"></el-button>
      <el-button type="primary" icon="el-icon-arrow-down" v-if="index!=dataLeng-1" @click="resetSord(1)"
        style="right: -25px; top: 30px;"></el-button>
    </div>
    <div class="diy-component-preview">
      <div class="diy-notice" :style="cStyle" flex="dir:left cross:center">
        <img :src="getIconLink(data.icon)" style="width: 36px;height: 36px;margin-right: 24px;">
        <div class="content" flex="dir:left box:first">
          <div style="min-width: 2rem;max-width: 7rem;">{{data.name}}</div>
          <div style="margin: 0 12px;">{{data.content}}</div>
        </div>
        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/icon-left-arrow.png"
          style="width: 10px;height: 18px;">
      </div>
    </div>
    <div class="diy-component-edit" v-if="noticeData.isCked">
      <el-form label-width="100px" @submit.native.prevent>
        <el-form-item label="公告名称">
          <el-input v-model="data.name" max="8"></el-input>
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input type="textarea" :rows="3" v-model="data.content"></el-input>
        </el-form-item>
        <el-form-item label="公告图标">
          <el-tooltip class="item" effect="dark" content="建议尺寸36*36" placement="top">
            <el-button size="mini" @click="choicImg=true,checkIndex=1">选择图片</el-button>
          </el-tooltip>
          <div flex="main:center cross:center" class="notice-gallery-item">
            <img :src="getIconLink(data.icon)" style="width:100%;height:100%;" class="app-gallery-img"
              draggable="false">
          </div>
        </el-form-item>
        <el-form-item label="文字颜色">
          <el-color-picker size="small" v-model="data.textColor"></el-color-picker>
          <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.textColor"></el-input>
        </el-form-item>
        <el-form-item label="背景颜色">
          <el-color-picker size="small" v-model="data.background"></el-color-picker>
          <el-input size="small" style="width: 80px;margin-right: 25px;" v-model="data.background"></el-input>
        </el-form-item>
        <el-form-item label="弹窗设置">
          <el-button @click="dialogVisible = !dialogVisible" size="small">弹窗设置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 选择图片文件 -->
    <el-dialog title="选择文件" :visible.sync="choicImg" width="1240px">
      <ChooseImg @SelectId="SelectId"></ChooseImg>
    </el-dialog>
    <!-- 公告弹窗 -->
    <el-dialog title="弹窗设置" :visible.sync="dialogVisible" width="956px" custom-class="diy-notice-dialog">
      <div flex="dir:left box:mean">
        <div class="left" flex="main:center cross:center">
          <div class="phone" flex="main:center cross:center">
            <div style="width: 600px">
              <img :src="getIconLink(data.headerUrl)" style="width: 600px;height: 150px;display: block">
              <div class="notice-dialog">
                <div style="margin-bottom: 24px;max-height: 600px;overflow-y: auto;">{{data.content}}</div>
                <div flex="dir:left main:center">
                  <div :style="btnStyle" style="text-align: center;">{{data.btnText}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <el-form label-width="100px" @submit.native.prevent>
            <el-form-item label="头部图片">
              <el-tooltip class="item" effect="dark" content="建议尺寸600*150" placement="top">
                <el-button size="mini" @click="choicImg=true,checkIndex=2">选择图片</el-button>
              </el-tooltip>
              <div flex="main:center cross:center" class="notice-gallery-item">
                <img style="max-width:100%;max-height: 100%;" :src="getIconLink(data.headerUrl)" />
              </div>
            </el-form-item>
            <el-form-item label="按钮颜色">
              <el-color-picker v-model="data.btnColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="按钮宽度">
              <label slot="label">按钮宽度
                <el-tooltip class="item" effect="dark" content="最大宽度500px" placement="top">
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </label>
              <el-input v-model.number="data.btnWidth" type="number" max="500">
                <template slot="append">
                  <span>px</span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="按钮高度">
              <label slot="label">按钮高度
                <el-tooltip class="item" effect="dark" content="最大高度80px" placement="top">
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </label>
              <el-input v-model.number="data.btnHeight" type="number" max="80">
                <template slot="append">
                  <span>px</span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="按钮圆角">
              <label slot="label">按钮圆角
                <el-tooltip class="item" effect="dark" content="最大圆角40px" placement="top">
                  <i class="el-icon-info"></i>
                </el-tooltip>
              </label>
              <el-input v-model.number="data.btnRadius" type="number" max="40">
                <template slot="append">
                  <span>px</span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item label="按钮文本内容">
              <el-input v-model="data.btnText"></el-input>
            </el-form-item>
            <el-form-item label="按钮文本颜色">
              <el-color-picker v-model="data.btnTextColor"></el-color-picker>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="dialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
  import ChooseImg from "@/components/global/ChooseImg.vue";
  export default {
    props: ["noticeData", "index", "dataLeng"],
    components: {
      ChooseImg
    },
    data() {
      return {
        choicImg: false,
        dialogVisible: false,
        data: this.noticeData.data,
        checkIndex: 0,

      };
    },
    created() {

    },
    methods: {
      //向父组件传值 并调用排序
      resetSord(IsUp) {
        this.$emit('getSord', this.index, IsUp);
      },
      //点击触发父组件删除
      delPlugin() {
        this.$emit('comDelPlugin', this.index);
      },
      //选择图片
      SelectId(msg) {
        if (this.checkIndex == 1) {
          this.data.icon = msg.url;
        } else if (this.checkIndex == 2) {
          this.data.headerUrl = msg.url;
        }
        this.choicImg = false;
      },
      //判断是否包含http
      getIconLink(url) {
        let str = ''
        if (url.indexOf('http') != -1) {
          str = url
        } else {
          str = 'http://viitto-1301420277.cos.ap-chengdu.myqcloud.com' + url
        }
        return str;
      }
    },
    computed: {
      cStyle() {
        if (this.data.background) {
          return `background: ${this.data.background};` +
            `color: ${this.data.textColor};`
        } else {
          return `color: ${this.data.textColor};`
        }
      },
      btnStyle() {
        return `background: ${this.data.btnColor};` +
          `color: ${this.data.btnTextColor};` +
          `border-radius: ${this.data.btnRadius}px;` +
          `width: ${this.data.btnWidth}px;` +
          `height: ${this.data.btnHeight}px;` +
          `line-height: ${this.data.btnHeight}px;`
      }

    },
    mounted() {

    }
  };

</script>
