<template>
  <div class="layout-no-flex">
    <el-toolbar>
      <el-button @click="$router.back()" type="primary" size="medium" round class="shadow-primary"><i class="fa fa-chevron-left"></i> 返回上页</el-button>
      <span class="button-separator"></span>
      <el-button type="button" class="el-button el-button--default save" @click="confirm" :priv="'AdvertiseManage.Edit.'+positionID" :loading="confirmLoading"><span><i class="fa fa-save"></i>保存</span></el-button>
    </el-toolbar>

    <div>
      <div class="detail-panel" v-loading="dataLoading">
        <el-form :model="tmpAdvertiseData" :rules="createAdvertiseDataRules" ref="createAdvertiseDataForm" label-width="150px" v-loading="dialogLoading">
          <div class="title-div">基本信息</div>
          <el-form-item label="广告标题：" prop="adName">
            <el-input class="form-item" v-model="tmpAdvertiseData.adName"></el-input>
          </el-form-item>

          <el-form-item label="所属版位：">
            <span id="position-span">{{tmpAdvertiseData.positionName}}</span>&nbsp;[{{tmpAdvertiseData.positionTypeName}}]
          </el-form-item>

          <el-form-item label="广告类型：" prop="adType">
            <el-select v-model="tmpAdvertiseData.adType" class="form-item" @change="adTypeChange">
              <el-option v-for="str in advertiseTypeOptions" :key="str.key" :label="str.value" :value="str.key">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="上线日期：" prop="startTime">
            <el-date-picker id="ad-date-picker1" v-model="tmpAdvertiseData.startTime" value-format="timestamp" type="datetime" class="form-item">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="下线日期：" prop="endTime">
            <el-date-picker id="ad-date-picker2" v-model="tmpAdvertiseData.endTime" value-format="timestamp" type="datetime" class="form-item">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="权重：" prop="weight">
            <el-slider id="weight-slider" v-model="tmpAdvertiseData.weight" show-input>
            </el-slider>
          </el-form-item>

          <el-form-item label="关键词：" prop="keywords">
            <el-input class="form-item" v-model="tmpAdvertiseData.keywords"></el-input>
          </el-form-item>
          <div class="title-div">内容设置--{{adTypeName}}</div>
          <!-- 内容设置-图片/多图 -->
          <div class="contentset-div" v-if="tmpAdvertiseData.adType === 'image' && tmpAdvertiseData.positionType =='couplet'">

            <el-row>
              <el-col :span="14">
                <el-form-item label="链接地址：" prop="cName">

                  <el-popover placement="bottom-start" :disabled="!tmpAdvertiseData.cName || !tmpAdvertiseData.contentID" title="" trigger="hover" @show="loadArticleData">
                    <div v-loading="popoverLoading">
                      <div class="content-tip">
                        <span>ID: </span>{{chooseContentData.ID}}
                      </div>
                      <div class="content-tip">
                        <span>文章标题: </span>{{chooseContentData.title}}
                      </div>
                      <div class="content-tip">
                        <span>内容类型: </span>{{chooseContentData.contentTypeName}}
                      </div>
                      <div class="content-tip">
                        <span>所属栏目: </span>{{chooseContentData.catalogName}}
                      </div>
                    </div>
                    <el-input slot="reference" v-model="tmpAdvertiseData.cName" class="form-item" readonly disabled></el-input>
                  </el-popover>
                  <el-button v-if="tmpAdvertiseData.cName && tmpAdvertiseData.contentID" type="primary" icon="edit" title="编辑文章" @click="editArticle"></el-button>

                  <!-- <el-input v-model="tmpAdvertiseData.cName" class="form-item" readonly></el-input> -->
                  <input type="hidden" v-model="tmpAdvertiseData.imgADLinkURL" /><br/>
                  <el-button size="mini" class="cname-button" @click="linkToContent">链接到内容</el-button>
                  <el-button size="mini" class="cname-button" @click="linkToCatalog">链接到栏目</el-button>
                  <el-button size="mini" class="cname-button" @click="linkToHttpAddress">外部地址</el-button>
                </el-form-item>

                <el-form-item label="文字提示：" prop="imgADAlt">
                  <el-input v-model="tmpAdvertiseData.imgADAlt" class="form-item"></el-input>
                  <input type="hidden" v-model="tmpAdvertiseData.imgPath" />
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <!-- 图片上传 -->
                <logo-path
                  :path.sync="tmpAdvertiseData.img_0"
                  :resource-dialog-props="imgResourceDialogProps"
                  style="padding:20px 0 0 10px;"
                  fixed
                ></logo-path>
              </el-col>
              <el-col :span="5">
                <!-- 图片上传 -->
                <logo-path
                  :path.sync="tmpAdvertiseData.img_1"
                  :resource-dialog-props="imgResourceDialogProps"
                  style="padding:20px 0 0 5px;"
                  fixed
                ></logo-path>
              </el-col>
            </el-row>
            <div id="linkTarget-div">链接目标：
              <el-radio-group v-model="tmpAdvertiseData.imgADLinkTarget">
                <el-radio class="radio" label="New">新窗口</el-radio>
                <el-radio class="radio" label="Old">原窗口</el-radio>
              </el-radio-group>
              <el-checkbox id="linkTarget-checkbox" v-if="tmpAdvertiseData.positionType === 'imagechange'" v-model="tmpAdvertiseData.showImgADAlt">显示文字提示</el-checkbox>
            </div>
          </div>
          <div class="contentset-div" v-else-if="tmpAdvertiseData.adType === 'image' || tmpAdvertiseData.adType === 'images'">

            <el-row>
              <el-col :span="18">
                <el-form-item label="链接地址：" prop="cName">

                  <el-popover placement="bottom-start" :disabled="!tmpAdvertiseData.cName || !tmpAdvertiseData.contentID" title="" trigger="hover" @show="loadArticleData">
                    <div v-loading="popoverLoading">
                      <div class="content-tip">
                        <span>ID: </span>{{chooseContentData.ID}}
                      </div>
                      <div class="content-tip">
                        <span>文章标题: </span>{{chooseContentData.title}}
                      </div>
                      <div class="content-tip">
                        <span>内容类型: </span>{{chooseContentData.contentTypeName}}
                      </div>
                      <div class="content-tip">
                        <span>所属栏目: </span>{{chooseContentData.catalogName}}
                      </div>
                    </div>
                    <el-input slot="reference" v-model="tmpAdvertiseData.cName" class="form-item" readonly disabled></el-input>
                  </el-popover>
                  <el-button v-if="tmpAdvertiseData.cName && tmpAdvertiseData.contentID" type="primary" icon="edit" title="编辑文章" @click="editArticle"></el-button>

                  <!-- <el-input v-model="tmpAdvertiseData.cName" class="form-item" readonly></el-input> -->
                  <input type="hidden" v-model="tmpAdvertiseData.imgADLinkURL" />
                  <br/>
                  <el-button size="mini" class="cname-button" @click="linkToContent">链接到内容</el-button>
                  <el-button size="mini" class="cname-button" @click="linkToCatalog">链接到栏目</el-button>
                  <el-button size="mini" class="cname-button" @click="linkToHttpAddress">外部地址</el-button>
                </el-form-item>

                <el-form-item label="文字提示：" prop="imgADAlt">
                  <el-input v-model="tmpAdvertiseData.imgADAlt" class="form-item"></el-input>
                  <input type="hidden" v-model="tmpAdvertiseData.imgPath" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <!-- 图片上传 -->
                <logo-path
                  :path.sync="tmpAdvertiseData.img_0"
                  :resource-dialog-props="imgResourceDialogProps"
                  style="padding-top:20px;"
                  fixed
                ></logo-path>
              </el-col>
            </el-row>
            <div id="linkTarget-div">链接目标：
              <el-radio-group v-model="tmpAdvertiseData.imgADLinkTarget">
                <el-radio class="radio" label="New">新窗口</el-radio>
                <el-radio class="radio" label="Old">原窗口</el-radio>
              </el-radio-group>
              <el-checkbox id="linkTarget-checkbox" v-if="tmpAdvertiseData.positionType === 'imagechange'" v-model="tmpAdvertiseData.showImgADAlt">显示文字提示</el-checkbox>
            </div>
          </div>
          <!-- 内容设置-动画 -->
          <div v-if="tmpAdvertiseData.adType === 'flash'" class="contentset-div">
            <br/>
            <el-form-item label="Flash文件：" prop="flash">
              <!-- 文件上传 -->
              <el-button @click="upload('swfBrowse')" style="width:80px;">
                <i class="fa fa-cloud-upload"></i>上&nbsp;传</el-button>
              <input type="hidden" v-model="tmpAdvertiseData.swfFilePath" />
            </el-form-item>
            <el-form-item label="">
              <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
                codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
                width="400" height="260" align="center" v-if="tmpAdvertiseData.swfFilePath" style="margin-left:115px;">
                <param name="movie" value="images/move.swf">
                <param name="quality" value="high">
                <param name="wmode" value="transparent"> <!--这里代码可使Flash背景透明 -->
                <embed :src="tmpAdvertiseData.previewPath+tmpAdvertiseData.swfFilePath" width="400" height="260"
                align="center" quality="high"
                pluginspage="http://www.macromedia.com/go/getflashplayer"
                type="application/x-shockwave-flash"/>
              </object>
            </el-form-item>
          </div>
          <!-- 内容设置-文本 -->
          <div v-if="tmpAdvertiseData.adType === 'text'" class="contentset-div">
            <el-form-item label="文本：" prop="textContent">
              <div class="el-input ad-color-title form-item" style="color: rgb(0, 0, 0);">
                <input class="el-input__inner" v-model="tmpAdvertiseData.textContent" :style="{color: tmpAdvertiseData.textColor}">
              </div>
              <el-color-picker v-model="tmpAdvertiseData.textColor" size="small" class="color-picker"  @active-change="setTitleColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="链接：" prop="textLinkURL">
              <el-input v-model="tmpAdvertiseData.textLinkURL" class="form-item"></el-input>
            </el-form-item>
          </div>
          <!-- 内容设置-视频 -->
          <div v-if="tmpAdvertiseData.adType === 'video'" class="contentset-div">
            <el-form-item label="播放方式：">
              <el-radio-group v-model="tmpAdvertiseData.videoPlayType" @change="videoPlayTypeChange">
                <el-radio label="frontvideo">前置视频</el-radio>
                <el-radio label="frontswf">前置Flash</el-radio>
                <el-radio label="pause">暂停</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="广告尺寸：">
              <el-form-item label="宽度：" prop="videoWidth">
                <el-input-number v-model="tmpAdvertiseData.videoWidth" :min="0" :max="99999" class="form-item"></el-input-number>&nbsp;px
              </el-form-item>
              <el-form-item label="高度：" prop="videoHeight">
                <el-input-number v-model="tmpAdvertiseData.videoHeight" :min="0" :max="99999" class="form-item"></el-input-number>&nbsp;px
              </el-form-item>
            </el-form-item>

            <el-form-item label="上传：" prop="upload">
              <!-- 文件上传 -->
              <el-button @click="upload('videoBrowse')" style="width:80px;">
                <i class="fa fa-cloud-upload"></i>上&nbsp;传</el-button>
            </el-form-item>

            <el-form-item label="">
              <video-player :src="(tmpAdvertiseData.resourceID ? tmpAdvertiseData.previewPath : '')+tmpAdvertiseData.videoFilePath" :poster="(tmpAdvertiseData.resourceID ? tmpAdvertiseData.previewPath : '')+tmpAdvertiseData.videoFilePath" v-if="tmpAdvertiseData.videoFilePath && tmpAdvertiseData.videoPlayType === 'frontvideo'" width="600px" height="400px" style="margin-left:15px;"></video-player>
              <object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000"
                codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
                width="400" height="260" align="center" v-if="tmpAdvertiseData.videoFilePath && tmpAdvertiseData.videoPlayType !== 'frontvideo'" style="margin-left:115px;">
                <param name="movie" value="images/move.swf">
                <param name="quality" value="high">
                <param name="wmode" value="transparent"> <!--这里代码可使Flash背景透明 -->
                <embed :src="(tmpAdvertiseData.resourceID ? tmpAdvertiseData.previewPath : '')+tmpAdvertiseData.videoFilePath" width="400" height="260"
                align="center" quality="high"
                pluginspage="http://www.macromedia.com/go/getflashplayer"
                type="application/x-shockwave-flash"/>
              </object>
            </el-form-item>
            <el-form-item label="链接地址：" prop="vName">
              <el-input v-model="tmpAdvertiseData.videoLinkURL" class="form-item"></el-input>
            </el-form-item>
          </div>
          <!-- 内容设置-代码 -->
          <div v-if="tmpAdvertiseData.adType === 'code'|| tmpAdvertiseData.adType === 'html'" class="contentset-div">

            <el-form-item label="代码内容：" prop="codeContent">
              <el-input type="textarea" v-model="tmpAdvertiseData.codeContent" class="form-item"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </div>

    <!-- 链接到内容弹框 -->
    <content-selector title="选择内容记录" :show.sync="linkToContentModal" @callback="contentSelectorCallback"></content-selector>

    <!-- 链接到栏目弹框 -->
    <catalog-selector :show.sync="linkToCatalogModal" input-type="radio" title="选择栏目" @callback="catalogSelectorCallback"></catalog-selector>

    <!-- 链接到外部地址弹框 -->
    <el-dialog title="外部地址" :visible.sync="linkToHttpAddressModal" class="link-address-dialog">
      <el-form label-width="55px">
        <el-form-item label="地址：" id="address-item" prop="address">
          <el-input v-model="address" class="form-item"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部确认按钮 -->
      <div slot="footer">
        <el-button @click="linkToHttpAddressModal = false">取 消</el-button>
        <el-button type="primary" @click="confirmLinkToHttpAddressClickHandler">确 定</el-button>
      </div>
    </el-dialog>

    <resource-dialog :title="resourceDialogTitle" :show.sync="showResourceDialog" :resource-dialog-props="resourceDialogProps"
      @callback="fileSelectCallback">
    </resource-dialog>

  </div>
</template>
<script>

import util from '@src/common/util.js'
import videoPlayer from '@src/components/VideoPlayer.vue'
import resourceDialog from '../contentcore/resourceDialog.vue'
import catalogSelector from '../contentcore/components/CatalogSelector.vue'
import ContentSelector from '@src/components/contentComponent/ContentSelector.vue'
import LogoPath from '../contentcore/components/LogoPath.vue'

export default {
  props: {
    adID: {
      type: [String, Number],
      default: 0
    },
    positionID: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      ID: 0,
      dataLoading: false,
      confirmLoading: false,
      dialogLoading: false,
      uploadType: '',
      siteID: '',
      resourceDialogProps: {},
      imgResourceDialogProps: {},
      resourceDialogTitle: '',
      showResourceDialog: false,
      adTypeName: '', // 广告类型名称
      linkToContentModal: false, // 链接到内容弹框控制
      linkToCatalogModal: false, // 链接到栏目弹框控制
      linkToHttpAddressModal: false, // 链接到外部地址弹框控制
      address: '', // 链接到外部地址的地址值
      fileList: [], // 上传文件列表
      advertiseTypeOptions: [], // 广告类型下拉框数据
      createAdvertiseDataRules: {
        adName: [
          {
            required: true,
            message: '广告标题不能为空',
            trigger: 'blur'
          }
        ],
        cName: [{ required: true, message: '不能为空', trigger: 'blur' }]
      }, // 新建/编辑广告数据匹配规则
      tmpAdvertiseData: {}, // 新建/编辑广告表单数据
      chooseContentData: {},
      popoverLoading: false
    }
  },
  watch: {
    'tmpAdvertiseData.adType': {
      handler: function(val) {
        this.linkAdvertiseType()
      }
    }
  },
  created() {
    this.ID = this.adID === 'new' ? null : this.adID
    this.loadData()
  },
  methods: {
    async loadArticleData() {
      if (!!this.chooseContentData.ID && this.tmpAdvertiseData.contentID === this.chooseContentData.ID) {
        return
      }
      this.popoverLoading = true
      let params = {
        ID: this.tmpAdvertiseData.contentID,
        contentType: this.tmpAdvertiseData.contentType
      }
      let res = await axios.get('/ui/article/datas', { params })
      res = res.data
      if (res.status === 1) {
        Object.assign(this.chooseContentData, res.data)
        this.popoverLoading = false
      }
    },
    async editArticle() {
      if (
        this.chooseContentData.ID !== this.tmpAdvertiseData.contentID ||
        !this.chooseContentData.contentTypeID ||
        !this.chooseContentData.catalogID
      ) {
        await this.loadArticleData()
      }

      let path = ''
      if (this.chooseContentData.contentTypeID === 'Special') {
        path = `/special/${this.chooseContentData.catalogID}/${this.chooseContentData.ID}`
        this.$router.push(path)
      } else {
        path = `/contentEditor/${this.chooseContentData.ID}?type=${this.chooseContentData.contentTypeID}&cid=${
          this.chooseContentData.catalogID
        }`
        window.open('contentEditor.html#' + path)
      }
    },
    setTitleColor(color) {
      this.tmpAdvertiseData.textColor = color
    },
    videoPlayTypeChange(val) {
      this.tmpAdvertiseData.videoFilePath = ''
    },
    contentSelectorCallback(data) {
      this.tmpAdvertiseData.cName = '文章：' + data.title
      this.tmpAdvertiseData.imgADLinkURL = data.link
      this.tmpAdvertiseData.contentID = data.ID

      Object.assign(this.chooseContentData, data)
    },
    catalogSelectorCallback(data) {
      this.tmpAdvertiseData.cName = '栏目：' + data.name
      this.tmpAdvertiseData.imgADLinkURL = data.link
      this.tmpAdvertiseData.contentID = 0
    },
    fileSelectCallback(sPath, path, resourceID) {
      this.tmpAdvertiseData.resourceID = resourceID
      if (this.uploadType === 'swfBrowse') {
        this.tmpAdvertiseData.swfFilePath = path
      }
      if (this.uploadType === 'videoBrowse') {
        this.tmpAdvertiseData.videoFilePath = path
      }
      this.showResourceDialog = false
    },
    linkAdvertiseType() {
      if (this.tmpAdvertiseData.adType === 'image') {
        if (typeof this.tmpAdvertiseData.imgADLinkTarget === 'undefined' || this.tmpAdvertiseData.imgADLinkTarget === null) { Vue.set(this.tmpAdvertiseData, 'imgADLinkTarget', 'New') }
      }
    },
    async loadData() {
      this.dialogLoading = true
      this.confirmLoading = false
      let getAdvertiseType = await axios.get('/ui/atverdise/getadvtype', {
        params: {
          positionID: this.positionID
        }
      })
      this.advertiseTypeOptions = getAdvertiseType.data.data
      let initADDialog = await axios.get('/ui/atverdise/initaddialog', {
        params: {
          ID: this.ID,
          positionID: this.positionID
        }
      })

      this.tmpAdvertiseData = initADDialog.data.data
      if (this.tmpAdvertiseData && !this.tmpAdvertiseData.keywords) {
        this.tmpAdvertiseData.keywords = ''
      }
      this.advertiseTypeOptions.forEach(o => {
        if (o.key === this.tmpAdvertiseData.adType) {
          this.adTypeName = o.value
        }
      })
      this.linkAdvertiseType()
      if (!this.ID) {
        if (this.tmpAdvertiseData.adType === 'video') {
          Vue.set(this.tmpAdvertiseData, 'videoPlayType', 'frontvideo')
          Vue.set(this.tmpAdvertiseData, 'videoWidth', 400)
          Vue.set(this.tmpAdvertiseData, 'videoHeight', 200)
        }
        if (this.tmpAdvertiseData.adType === 'text') {
          Vue.set(this.tmpAdvertiseData, 'textColor', '#000000')
        }
      } else {
        let adContent = JSON.parse(this.tmpAdvertiseData.adContent)
        if (adContent.images) {
          this.tmpAdvertiseData.imgADLinkURL = adContent.images[0].imgADLinkURL
          Vue.set(this.tmpAdvertiseData, 'imgADAlt', adContent.images[0].imgADAlt)
          Vue.set(this.tmpAdvertiseData, 'img_0', adContent.images[0].imgPath)
          Vue.set(this.tmpAdvertiseData, 'linkTarget', adContent.imgADLinkTarget)
          if (this.tmpAdvertiseData.positionType === 'couplet') {
            Vue.set(this.tmpAdvertiseData, 'img_1', adContent.images[1].imgPath)
          }
        } else if (adContent.flashes) {
          Vue.set(this.tmpAdvertiseData, 'swfFilePath', adContent.flashes[0].swfFilePath)
        } else if (adContent.videos) {
          this.tmpAdvertiseData.videoLinkURL = adContent.videoLinkURL
          Vue.set(this.tmpAdvertiseData, 'videoPlayType', adContent.videoPlayType)
          Vue.set(this.tmpAdvertiseData, 'videoWidth', adContent.videoWidth)
          Vue.set(this.tmpAdvertiseData, 'videoHeight', adContent.videoHeight)
          Vue.set(this.tmpAdvertiseData, 'videoFilePath', adContent.videos[0].videoFilePath)
        } else if (adContent.textID) {
          Vue.set(this.tmpAdvertiseData, 'textContent', adContent.textContent)
          Vue.set(this.tmpAdvertiseData, 'textLinkURL', adContent.textLinkURL)
          Vue.set(this.tmpAdvertiseData, 'textColor', adContent.textColor || '#000000')
        } else if (adContent.code) {
          Vue.set(this.tmpAdvertiseData, 'codeContent', adContent.code)
        } else {
          Vue.set(this.tmpAdvertiseData, 'imgADLinkTarget', adContent.imgADLinkTarget)
          Vue.set(this.tmpAdvertiseData, 'showImgADAlt', adContent.showAlt === 'Y')
          Vue.set(this.tmpAdvertiseData, 'imgADAlt', adContent.imgADAlt)
          Vue.set(this.tmpAdvertiseData, 'img_0', adContent.imgPath)
        }
      }
      this.imgResourceDialogProps = {
        dataType: 'Advertisement',
        dataID: this.ID,
        resourceType: 'image',
        catalogID: this.tmpAdvertiseData.catalogID,
        imageWidth: 120,
        imageHeight: 120,
        resourceID: this.tmpAdvertiseData.resourceID,
        inputType: 'radio'
      }
      this.dialogLoading = false
    },
    // 新建/编辑广告确定按钮点击事件
    async confirm() {
      try {
        await util.validateForm(this.$refs['createAdvertiseDataForm'])
      } catch (e) {
        util.showErrorMessageBox(e)
        return
      }
      if (this.tmpAdvertiseData.startTime > this.tmpAdvertiseData.endTime) {
        this.$alert('广告结束时间不能在开始时间之前！', '提示', {
          confirmButtonText: '确定',
          type: 'info'
        })
        return
      }
      if (this.tmpAdvertiseData.endTime && this.tmpAdvertiseData.endTime !== '') {
        let now = new Date().getTime()
        if (this.tmpAdvertiseData.endTime <= now) {
          this.$alert('广告结束时间必须要在今天以后！', '提示', {
            confirmButtonText: '确定',
            type: 'info'
          })
          return
        }
      }
      if (this.tmpAdvertiseData.adType === 'image' && !this.tmpAdvertiseData.img_0) {
        this.$alert('请为图片广告选择图片！', '提示', {
          confirmButtonText: '确定',
          type: 'info'
        })
        return
      }
      if (this.tmpAdvertiseData.positionType === 'couplet' && !this.tmpAdvertiseData.img_1) {
        this.$alert('请为图片广告选择图片！', '提示', {
          confirmButtonText: '确定',
          type: 'info'
        })
        return
      }
      if (this.tmpAdvertiseData.videoPlayType && !this.tmpAdvertiseData.videoFilePath) {
        this.$alert('请为视频广告选择视频！', '提示', {
          confirmButtonText: '确定',
          type: 'info'
        })
        return
      }
      this.confirmLoading = true
      let imgADLinkURL = [this.tmpAdvertiseData.imgADLinkURL === 'http://' ? this.tmpAdvertiseData.cName : this.tmpAdvertiseData.imgADLinkURL]
      let imgADAlt = [this.tmpAdvertiseData.imgADAlt]
      let imgPath = []
      if (this.tmpAdvertiseData.positionType === 'couplet') {
        imgPath = [this.tmpAdvertiseData.img_0, this.tmpAdvertiseData.img_1]
      } else {
        imgPath = [this.tmpAdvertiseData.img_0]
      }
      if (this.tmpAdvertiseData.showImgADAlt) {
        this.tmpAdvertiseData.showAlt = 'Y'
      } else {
        this.tmpAdvertiseData.showAlt = 'N'
      }
      this.tmpAdvertiseData.imgADLinkURL = imgADLinkURL.join('^')
      this.tmpAdvertiseData.imgADAlt = imgADAlt.join('^')
      this.tmpAdvertiseData.imgPath = imgPath.join('^')
      // 判断是新建还是编辑弹框
      if (!this.ID) {
        let addAdvertiseData = await axios.post('/ui/atverdise', this.tmpAdvertiseData)
        this.isShow = false
        util.showResponseMessage(addAdvertiseData.data)
        if (addAdvertiseData.data.status === 1) {
          this.$emit('callback')
        }
      } else {
        let updateAdvertiseData = await axios.put(`/ui/atverdise/${this.positionID}`, this.tmpAdvertiseData)
        this.isShow = false
        util.showResponseMessage(updateAdvertiseData.data)
        if (updateAdvertiseData.data.status === 1) {
          this.$emit('callback', this.tmpAdvertiseData)
        }
      }
      this.confirmLoading = false
    },
    upload(type) {
      this.uploadType = type
      if (type === 'swfBrowse') {
        this.resourceDialogTitle = '上传swf动画'
        this.resourceDialogProps = {
          manualAllowType: 'swf',
          dataType: 'Advertisement',
          dataID: this.ID,
          resourceType: 'file',
          catalogID: this.tmpAdvertiseData.catalogID,
          imageWidth: 120,
          imageHeight: 120,
          resourceID: this.tmpAdvertiseData.resourceID,
          inputType: 'radio',
          suffix: 'swf'
        }
      } else if (type === 'videoBrowse') {
        this.resourceDialogTitle = '上传'
        let allType
        if (this.tmpAdvertiseData.videoPlayType === 'frontvideo') {
          allType = 'mp4,flv'
        } else {
          allType = 'swf'
        }
        this.resourceDialogProps = {
          manualAllowType: allType,
          dataType: 'Advertisement',
          dataID: this.ID,
          resourceType: 'file',
          catalogID: this.tmpAdvertiseData.catalogID,
          imageWidth: 120,
          imageHeight: 120,
          resourceID: this.tmpAdvertiseData.resourceID,
          inputType: 'radio',
          suffix: allType
        }
      }
      this.showResourceDialog = true
    },
    // 链接到内容按钮点击事件
    linkToContent() {
      this.linkToContentModal = true
    },
    // 链接到栏目按钮点击事件
    linkToCatalog() {
      this.address = ''
      this.linkToCatalogModal = true
    },
    // 链接到外部地址按钮点击事件
    linkToHttpAddress() {
      this.address = 'http://'
      this.linkToHttpAddressModal = true
    },
    // 链接到外部地址弹框底部确认按钮点击事件
    confirmLinkToHttpAddressClickHandler() {
      this.tmpAdvertiseData.cName = this.address
      this.tmpAdvertiseData.imgADLinkURL = this.address
      this.tmpAdvertiseData.contentID = 0
      this.linkToHttpAddressModal = false
    },
    // 广告类型改变触发事件
    adTypeChange(val) {
      this.advertiseTypeOptions.forEach(o => {
        if (o.key === val) {
          this.adTypeName = o.value
        }
      })
      this.tmpAdvertiseData.adTypeName = this.adTypeName
    }
  },
  components: {
    'resource-dialog': resourceDialog,
    'content-selector': ContentSelector,
    'catalog-selector': catalogSelector,
    'logo-path': LogoPath,
    'video-player': videoPlayer
  }
}
</script>
<style>
/* 在一般情况下dialog宽为680像素，在逻辑分辨率480像素以下dialog宽为96% */
.ad-color-title {
  color: unset;
}
.adv-dialog .el-dialog {
  width: 700px;
}

@media (max-width: 480px) {
  .adv-dialog .el-dialog {
    width: 96%;
  }
}

.link-address-dialog .el-dialog {
  width: 450px;
}

@media (max-width: 480px) {
  .link-address-dialog .el-dialog {
    width: 90%;
  }
}
</style>

<style scoped>
.avatar-uploader {
  width: 140px;
  height: 140px;
}

.avatar-uploader-icon {
  border: 1px dashed black;
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}

.form-item {
  width: 100%;
  max-width: 330px;
}

#position-span {
  font-weight: blod;
  color: orange;
}

#weight-slider {
  width: 450px;
}

.cname-button {
  width: 80px;
}

#linkTarget-div {
  margin-left: 80px;
  font-weight: bold;
}

#linkTarget-checkbox {
  margin-left: 27px;
}

.contentset-div {
  margin-top: 10px;
  padding-top: 10px;
  padding-left: 10px;
  border: 1px dashed #ccc;
}

#address-item {
  margin: 10px 0px 0 20px;
}

.title-div {
  font-size: 16px;
  font-weight: bold;
}

.color-picker {
  position: relative;
  top: 10px;
}
</style>
