<template>
  <el-dialog class="viewDialog" :close-on-click-modal="false" title="弹窗广告详情" width="800px" :visible.sync="visible">
    <el-descriptions class="margin-top" :column="1" border>
      <el-descriptions-item>
        <template #label>
          广告名称
        </template>
        {{ form.name }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          上线时间
        </template>
        {{ form.startTime }} - {{ form.endTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          弹窗图片
        </template>
        <a :href="form.popupImg" style="color: #42b983" target="_blank">
          <img :src="form.popupImg" alt="点击打开" class="img-ad">
        </a>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          关闭按钮
        </template>
        <a :href="form.closeImg" style="color: #42b983" target="_blank">
          <img :src="form.closeImg" alt="点击打开" class="el-avatar">
        </a>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          跳转类型
        </template>
        <span v-if="form.jumpType === 0">不跳转</span>
        <span v-if="form.jumpType === 1">商品</span>
        <span v-if="form.jumpType === 2">分类</span>
        <span v-if="form.jumpType === 3">平台券</span>
        <span v-if="form.jumpType === 4">跳转小程序</span>
        <span v-if="form.jumpType === 5">公众号文章</span>
      </el-descriptions-item>
      <el-descriptions-item v-if="form.jumpType !== 0">
        <template #label>
          链接配置
        </template>
        <div v-if="form.jumpType === 1">
          {{ jumpContent.name }}
        </div>
        <div v-if="form.jumpType === 2">
          {{ jumpContent.name }}
        </div>
        <div v-if="form.linkType === 3">
          <span v-for="(item, index) in jumpContent.items" :key="index">
            <i v-if="index !== 0">,</i> {{ item.name }}
          </span>
        </div>
        <div v-if="form.linkType === 4">
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item>
              <template #label>
                小程序app id
              </template>
              {{ jumpContent.appId }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                页面路径
              </template>
              {{ jumpContent.link }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div v-if="form.linkType === 5">
          <el-descriptions class="margin-top" :column="1" border>
            <el-descriptions-item>
              <template #label>
                页面路径
              </template>
              {{ jumpContent.link }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          触发条件
        </template>
        <span v-if="form.triggerCondition === 1">每天进入商城首页</span>
        <span v-if="form.triggerCondition === 2">支付成功后</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          针对会员
        </template>
        <span v-if="form.applyGroup === 1">全体成员</span>
        <span v-if="form.applyGroup === 2">会员</span>
      </el-descriptions-item>
    </el-descriptions>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="visible = false">确实</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'AdDetail',
  data() {
    return {
      visible: false,
      form: {},
      jumpContent: {}
    }
  },
  methods: {
    show(row) {
      this.form = JSON.parse(JSON.stringify(row))
      this.jumpContent = row.jumpContent ? JSON.parse(row.jumpContent) : {}
      this.visible = true
    }
  }
}
</script>

<style scoped lang="scss">
.viewDialog {
	.img-ad {
		height: 200px;
	}

	::v-deep .el-descriptions-item__label {
		width: 130px;
	}
}
</style>
