<template>
  <a-modal
    centered
    class="promotion-basicInfo-modal"
    :footer="null"
    :maskClosable="false"
    title="详情"
    v-model="isShow"
    @cancel="isShow=false"
    width="60%">
    <a-spin :spinning="spinning" tip="Loading...">
      <div class="detailModal-con">
        <a-form-model
          id="promotion-basicInfo-form"
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol" >
          <a-form-model-item label="轮播图名称" prop="bannerName">
            {{ form.bannerName }}
          </a-form-model-item>
          <a-form-model-item label="轮播时间" prop="time" >
            {{ form.bannerStartDate }}~{{ form.bannerEndDate }}
          </a-form-model-item>
          <a-form-model-item label="轮播图排序" prop="sort">
            {{ form.sort }}
          </a-form-model-item>
          <a-form-model-item label="参与经销商" prop="allDealerFlag">
            <span>{{ form.allDealerFlag=='1'?'全部经销商':'部分经销商' }}</span>
            <div class="buyerBox" v-if="form.dealerList&&form.dealerList.length>0">
              <a-tag v-for="con in form.dealerList" id="promotionList-dealerSn" :key="con.dealerSn" @close="delBuyerName(con)">
                {{ con.dealerName }}
              </a-tag>
            </div>
          </a-form-model-item>
          <a-form-model-item label="封面图片" prop="imageUrl">
            <img
              :src="form.imageUrl"
              alt="图片走丢了"
              width="750px"
              height="300px"
              style="margin-right:10px;object-fit: cover;"/>
            <div class="upload-desc">说明：单张大小小于10Mb；建议尺寸：宽（750px）*高（300px）</div>
          </a-form-model-item>
          <a-form-model-item label="内容类型" prop="contentType">
            {{ form.contentType==='IMAGE_CONTENT'?'图文展示':form.contentType==='VIDEO'?'视频展示':form.contentType==='LINK'?'跳转链接':'促销活动' }}
          </a-form-model-item>
          <a-form-model-item label="内容" prop="content" v-if="form.contentType!='PROMO_LINK'">
            <div style="border:1px solid #efefef;border-radius:8px;padding:10px 20px;" v-if="form.contentType==='IMAGE_CONTENT'" v-html="form.content"></div>
            <div v-else-if="form.contentType==='VIDEO'">
              <video
                ref="videoPlayer"
                width="230"
                height="150"
                controls
                loop
                controlsList="nodownload">
                <source :src="form.content" type="video/mp4">
              </video>
            </div>
            <div v-else>{{ form.content }}</div>
          </a-form-model-item>
        </a-form-model>
        <div class="btn-cont">
          <a-button id="promotion-basicInfo-modal-close" @click="isShow = false">关闭</a-button>
        </div>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
// 组件
import { STable } from '@/components'
// 接口
import { shopBannerDetail } from '@/api/shopBanner'

export default {
  name: 'DetailModal',
  mixins: [commonMixin],
  components: { STable },
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemSn: {// 活动sn
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      spinning: false,
      // form表单label布局
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 }
      },
      productTypeList: [], // 产品范围数据
      productRangeList: [], // 已选产品范围
      chooseDealerList: [{}, {}],
      form: {
        bannerSn: undefined, // 轮播图sn
        bannerName: '', // 轮播图名称
        time: [], // 轮播时间
        bannerStartDate: undefined,
        bannerEndDate: undefined,
        sort: undefined, // 排序
        allDealerFlag: '1', // 参与经销商 0 部分 1全部
        dealerSnList: [], // 已选经销商sn列表
        imageUrl: '', // 图片
        contentType: 'IMAGE_CONTENT', // 内容类型
        content: '' // 内容
      },
      // 表单验证规则
      rules: {
        bannerName: [{ required: true, message: '请输入轮播图名称', trigger: 'blur' }],
        time: [{ required: true, message: '请选择轮播时间', trigger: 'change' }],
        sort: [{ required: true, message: '请输入排序数字', trigger: 'blur' }],
        allDealerFlag: [{ required: true, message: '请选择参与经销商', trigger: 'change' }],
        imageUrl: [{ required: true, message: '请选择要上传的封面图片', trigger: 'change' }],
        contentType: [{ required: true, message: '请选择内容类型', trigger: 'change' }],
        content: [{ required: true, message: '请输入对应内容', trigger: ['blur', 'change'] }]
      }
    }
  },
  methods: {
    // 重置
    resetSearchForm () {
      this.form = {
        promoActiveSn: undefined, // 促销活动sn
        title: '', // 标题
        imageSet: '', // 图片
        contentType: 'IMAGE_CONTENT', // 内容类型
        content: '', // 内容
        contentLink: '', // 链接内容
        sort: undefined, // 排序
        ruleEnableFlag: '1', // 参数配置 1勾选配置  0不能配置
        publishFlag: '0',
        dealerEditFlag: '0', // 加盟商编辑 1是 0否
        promoRule: {
          ruleType: 'ticket', // 基本规则类型
          productRangeFlag: '', // 产品范围标记 0无  1有产品范围
          productRangeList: [], // 产品范围列表
          ruleName: '', // 券名称
          ruleTitle: '', // 副标题
          ruleBaseType: 'category', // 券生成方式
          ruleExplain: '', // 使用说明
          validType: undefined, // 券有效期类型
          validStartDate: undefined, // 券生效时间
          validEndDate: undefined, // 券失效时间
          validDays: undefined, // 券有效期天数
          range: '1'
        }
      }
      this.imageSet = []
    },
    // 获取列表详情
    getDetail () {
      shopBannerDetail({ bannerSn: this.itemSn }).then(res => {
        if (res.status == 200) {
          this.form = res.data
        }
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.resetSearchForm()
      }
    },
    itemSn (newValue, oldValue) { // 查看详情
      if (this.isShow && newValue) {
        this.getDetail()
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .promotion-basicInfo-modal{
    .detailModal-con{
      max-height: 600px;
      overflow-y: scroll;
    }
    .timeBox{
      color:#ed1c24;
      opacity: .7;
    }
    .ant-modal-body {
      padding: 40px 40px 24px;
    }
    .promotion-basicInfo-con{
      margin-top:10px;
    }
    .ant-form-item{
      margin-bottom:0 !important;
    }
    .buyerBox{
      border:1px solid #d9d9d9;
      margin:10px 0 20px;
      border-radius:4px;
      padding:4px 10px;
      background:#f2f2f2;
      max-height:130px;
      overflow-y:scroll;
    }
    .btn-cont {
      text-align: center;
      margin: 35px 0 10px;
    }
    //处理滚动条不显示
    .tabBox{
       max-height:100px;
       overflow-y:scroll;
    }
   .tabBox::-webkit-scrollbar {
       width: 0px;
    }
    .tabBox::-webkit-scrollbar-track {
      background: transparent;
    }

    .tabBox::-webkit-scrollbar-thumb {
      background: transparent;
    }

    .tabBox::-webkit-scrollbar-button {
      display: none;
    }
    // 设置input  禁用颜色
    .ant-form-item-control .ant-input[disabled]{
      color:#333333;
      background:#ffffff;
    }
   .ant-radio-button-wrapper-disabled{
     color:#333333;
     padding:0 16px;
   }
   .ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked{
       background-color: #ed1c24 !important;
       color:#ffffff;
       padding:0 16px;
   }
   /deep/.ant-select-disabled .ant-select-selection, .ant-cascader-picker-disabled{
      color:#333 !important;
      background:#fff;
   }
   .productTable{
     width:100%;
   }
   /deep/.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice{
     color:#333;
   }
  }

</style>
