<template>
  <a-modal
    centered
    class="promotion-basicInfo-modal"
    :footer="null"
    :maskClosable="false"
    title="详情"
    v-model="isShow"
    @cancel="isShow=false"
    width="70%">
    <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="title">
            {{ form.title }}
          </a-form-model-item>
          <a-form-model-item label="排序" prop="sort">
            {{ form.sort }}
          </a-form-model-item>
          <a-form-model-item label="封面图片" prop="imageSet">
            <img
              :src="con"
              alt="图片走丢了"
              width="80"
              height="80"
              v-for="(con,i) in imageSet"
              style="margin-right:10px;object-fit: cover;"
              :key="i"/>
            <div class="upload-desc">说明：单张大小小于10Mb；建议尺寸：宽（420px）*高（230px）</div>
          </a-form-model-item>
          <a-form-model-item label="内容类型" prop="contentType">
            {{ form.contentType==='IMAGE_CONTENT'?'图文展示':form.contentType==='VIDEO'?'视频展示':'跳转链接' }}
          </a-form-model-item>
          <div v-if="form.contentType==='IMAGE_CONTENT'">
            <a-form-model-item label="内容" prop="content" >
              <div class="box" v-html="form.content"></div>
            </a-form-model-item>
            <a-form-model-item label="是否发布" prop="publishFlag" >
              {{ form.publishFlag?form.publishFlag==='1'?'是':'否':'--' }}
            </a-form-model-item>
          </div>
          <div v-if="form.contentType==='VIDEO'">
            <a-form-model-item label="内容" prop="content" >
              <video
                ref="videoPlayer"
                width="230"
                height="150"
                controls
                loop
                controlsList="nodownload">
                <source :src="form.content" type="video/mp4">
              </video>
            </a-form-model-item>
            <a-form-model-item label="是否发布" prop="publishFlag" >
              {{ form.publishFlag?form.publishFlag==='1'?'是':'否':'--' }}
            </a-form-model-item>
          </div>
          <div v-if="form.contentType==='LINK'">
            <a-form-model-item label="内容" prop="ruleType">
              {{ form.content }}
            </a-form-model-item>
          </div>
          <div v-show="form.contentType==='LINK'&&form.content === '/pagesB/promoDetail'">
            <a-form-model-item label="基本规则" prop="ruleType">
              {{ form.promoRule&&form.promoRule.ruleType?form.promoRule.ruleType==='ticket'?'指定产品返代金券':'--':'--' }}
            </a-form-model-item>
            <a-form-model-item label="券名称" prop="ruleName">
              {{ form.promoRule&&form.promoRule.ruleName?form.promoRule.ruleName:'--' }}
            </a-form-model-item>
            <a-form-model-item label="券副标题" prop="ruleTitle">
              {{ form.promoRule&&form.promoRule.ruleTitle?form.promoRule.ruleTitle:'--' }}
            </a-form-model-item>
            <a-form-model-item label="生成方式" prop="ruleBaseType">
              {{ form.promoRule&&form.promoRule.ruleBaseType?form.promoRule.ruleBaseType==='bill'?'按订单生成券':'按订单产品款数生成券':'--' }}
            </a-form-model-item>
            <a-form-model-item label="券有效期" prop="validType" >
              <span>
                {{ form.promoRule&&form.promoRule.validType?form.promoRule.validType==='FIXED'?'固定日期':'领取后，立即生效，':'--' }}
              </span>
              <span class="timeBox" v-if="form.promoRule&&form.promoRule.validType&&form.promoRule.validType==='FIXED'">{{ form.promoRule.validStartDate }}~{{ form.promoRule.validEndDate }}</span>
              <span class="timeBox" v-else>有效期{{ form.promoRule&&form.promoRule.validDays?form.promoRule.validDays:'--' }}天</span>
            </a-form-model-item>
            <a-form-model-item label="券适用范围" prop="range" >
              全部产品
            </a-form-model-item>
            <a-form-model-item label="使用说明" prop="ruleExplain" >
              {{ form.promoRule&&form.promoRule.ruleExplain?form.promoRule.ruleExplain:'--' }}
            </a-form-model-item>
            <a-form-model-item label="加盟商编辑" prop="dealerEditFlag" >
              {{ form.dealerEditFlag?form.dealerEditFlag==='1'?'是':'否':'--' }}
            </a-form-model-item>
            <a-form-model-item label="是否发布" prop="publishFlag" >
              {{ form.publishFlag?form.publishFlag==='1'?'是':'否':'--' }}
            </a-form-model-item>
            <a-form-model-item label="产品范围" prop="productRangeList" >
              <div v-if="productRangeList&&productRangeList.length>0" style="margin-bottom:10px;">
                <a-tree-select
                  v-model="productRangeList"
                  :tree-data="productTypeList"
                  tree-checkable
                  :disabled="true"
                  :getPopupContainer="triggerNode => triggerNode.parentNode"
                  :replaceFields="{children:'children',title: 'productTypeName',key: 'productTypeSn',value: 'productTypeSn'}"
                  placeholder="请选择产品范围" />
              </div>
              <div v-else>--</div>
            </a-form-model-item>
            <a-form-model-item label="返券产品" prop="publishFlag" >
              <div class="productTable">
                <s-table
                  class="sTable"
                  ref="table"
                  size="small"
                  :rowKey="(record) => record.id"
                  :columns="columns"
                  :data="loadData"
                  :defaultLoadData="false"
                  :style="{ maxHeight: 300+'px' }"
                  :scroll="{ y:230 }"
                  bordered>
                </s-table>
              </div>
            </a-form-model-item>
          </div>
        </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 { productTypeQuery } from '@/api/productType'
import { promoActiveDetail, promoRuleProductList } from '@/api/promoActive'

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: [], // 已选产品范围
      form: {
        promoActiveSn: undefined, // 促销活动sn
        title: '', // 标题
        imageSet: '', // 图片
        contentType: 'IMAGE_CONTENT', // 内容类型
        content: '', // 内容
        contentLink: '', // 链接内容
        sort: undefined, // 排序
        ruleEnableFlag: '1', // 参数配置 1勾选配置  0不能配置
        publishFlag: '0', // 是否发布 0 否 1是
        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'
        }
      },
      imageSet: [], // 封面图
      columns: [// 表头
        { title: '序号', dataIndex: 'no', width: '4%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '产品编码', dataIndex: 'productCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
        { title: '产品名称', dataIndex: 'productName', width: '20%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '原厂编码', dataIndex: 'origCode', width: '20%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
        { title: '活动价', dataIndex: 'price', width: '10%', align: 'right', customRender: text => { return ((text || text == 0) ? this.toThousands(text) : '--') } },
        { title: '返券金额', dataIndex: 'ruleValue', width: '10%', align: 'right', customRender: text => { return ((text || text == 0) ? this.toThousands(text) : '--') } },
        { title: '参考终端价', dataIndex: 'terminalPrice', width: '10%', align: 'right', customRender: text => { return ((text || text == 0) ? this.toThousands(text) : '--') } }
      ],
      // 表单验证规则
      rules: {
        title: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
        imageSet: [{ required: true, message: '请选择要上传的封面图片', trigger: 'change' }],
        sort: [{ required: true, message: '请输入排序数字', trigger: 'blur' }],
        contentType: [{ required: true, message: '请选择内容类型', trigger: 'change' }],
        content: [{ required: true, message: '请输入对应内容', trigger: ['blur', 'change'] }],
        contentLink: [{ required: true, message: '请输入对应内容', trigger: 'blur' }],
        publishFlag: [{ required: true, message: '请选择是否发布', trigger: 'change' }],
        range: [{ required: true, message: '请选择券适用范围', trigger: 'change' }],
        ruleType: [{ required: true, message: '请选择基本规则', trigger: 'change' }],
        ruleName: [{ required: true, message: '请输入券名称', trigger: ['change', 'blur'] }],
        ruleBaseType: [{ required: true, message: '请选择生成方式', trigger: 'change' }],
        validType: [{ required: true, message: '请选择券有效期类型', trigger: 'change' }],
        ruleDetailList: [{ type: 'array', required: true, message: '请选择券内容', trigger: 'blur' }]
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        this.disabled = true
        this.spinning = true
        const params = Object.assign(parameter, this.queryParam)
        params.promoActiveSn = this.itemSn
        // 获取详情  已选参与活动产品数据
        return promoRuleProductList(params).then(res => {
          let data
          if (res.status == 200) {
            data = res.data
            // 计算表格序号
            const no = (data.pageNo - 1) * data.pageSize
            for (var i = 0; i < data.list.length; i++) {
              data.list[i].no = no + i + 1
            }
            this.disabled = false
          }
          this.spinning = false
          return data
        })
      }
    }
  },
  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 () {
      promoActiveDetail({ sn: this.itemSn }).then(res => {
        if (res.status == 200) {
          if (res.data.contentType === 'LINK') {
            console.log('加载产品范围')
            this.$nextTick(() => {
              this.getTreeData()
            })
            if (res.data.promoRule && res.data.promoRule.productRangeList && res.data.promoRule.productRangeList.length > 0) {
              this.productRangeList = res.data.promoRule.productRangeList.map(item => { return item.productTypeSn })
            } else {
              this.productRangeList = []
            }
          }
          if (res.data.imageSet) {
            this.form.imageSet = res.data.imageSet.join(',')
            this.imageSet = res.data.imageSet
          }
          this.form = res.data
        }
      })
    },
    // 获取产品范围数据
    getTreeData () {
      productTypeQuery({}).then(res => {
        if (res.status == 200) {
          this.productTypeList = res.data
        } else {
          this.productTypeList = []
        }
      })
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.resetSearchForm()
      } else {
        this.getDetail()
        this.$nextTick(() => {
          this.$refs.table.refresh(true)
        })
      }
    }
  }
}
</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-top:10px;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>
