<template>
  <a-modal
    centered
    class="promotionEdit-modal"
    :footer="null"
    :maskClosable="false"
    :title="modalTit"
    v-model="isShow"
    @cancel="isShow=false"
    width="76%">
    <!-- 表单 -->
    <div>
      <a-spin :spinning="spinning" tip="Loading..." class="promotionEdit-content">
        <a-form-model
          id="promotionEdit-form"
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-form-model-item label="标题名称" prop="title">
            <a-input
              id="promotionEdit-title"
              :maxLength="100"
              v-model.trim="form.title"
              placeholder="请输入标题名称(最多100个字符)"
              :disabled="pageType === 'edit'"
              allowClear/>
          </a-form-model-item>
          <a-form-model-item label="封面图片" prop="imageSet">
            <Upload
              v-if="pageType==='add'"
              class="upload"
              id="promotionEdit-imageSet"
              v-model="form.imageSet"
              ref="imageSet"
              :fileSize="10"
              :maxNums="10"
              @change="changeImage"
              listType="picture-card"></Upload>
            <div v-else>
              <img
                :src="con"
                alt="图片走丢了"
                width="80"
                height="80"
                v-for="(con,i) in images"
                style="margin-right:10px;"
                :key="i" />
            </div>
            <span class="upload-desc">说明：单张大小小于10Mb，最多10张；建议尺寸：宽（420px）*高（230px）</span>
          </a-form-model-item>
          <a-form-model-item label="排序" prop="sort">
            <a-input
              id="promotionEdit-sort"
              type="number"
              v-model.trim="form.sort"
              placeholder="请输入排序数字(数字越大越靠后)"
              :disabled="pageType === 'edit'"
              allowClear />
          </a-form-model-item>
          <a-form-model-item label="内容类型" prop="contentType">
            <v-select
              v-model="form.contentType"
              ref="saleStatus"
              id="promotion-saleStatus"
              code="PROMO_CONTENT_TYPE"
              showType="radio"
              :disabled="pageType === 'edit'"
              allowClear></v-select>
          </a-form-model-item>
          <a-form-model-item label="内容" prop="content" v-show="form.contentType =='IMAGE_CONTENT'">
            <editor
              v-show="pageType === 'add'"
              id="promotionEdit-editor"
              ref="editor"
              class="promotionEdit-editor"
              @on-change="editorChange"
              :cache="false"></editor>
            <div v-show="pageType === 'edit'" class="box" v-html="form.content"></div>
          </a-form-model-item>
          <a-form-model-item label="上传视频" prop="content" v-show="form.contentType =='VIDEO'">
            <Upload
              v-if="pageType==='add'"
              class="upload"
              id="promotionEdit-imageSet"
              v-model="videoPath"
              fileType="video/mp4"
              ref="imageSet"
              :fileSize="10"
              :maxNums="1"
              @change="changeVideo"
              listType="picture-card"></Upload>
            <div v-else>
              <video width="100" height="100">
                <source :src="videoPath" type="video/mp4"></source>
              </video>
            </div>
            <span class="upload-desc">说明：文件最大1G；视频：mp4.avi.flv</span>
          </a-form-model-item>
          <a-form-model-item label="跳转链接" prop="content" v-show="form.contentType =='LINK'">
            <a-input
              :disabled="pageType === 'edit'"
              id="promotionEdit-title"
              :maxLength="100"
              v-model.trim="form.content"
              placeholder="请输入跳转链接"
              allowClear />
          </a-form-model-item>
          <a-form-model-item label="是否发布" prop="enabledFlag">
            <a-radio-group button-style="solid" v-model="form.enabledFlag">
              <a-radio-button value="1">
                是
              </a-radio-button>
              <a-radio-button value="0">
                否
              </a-radio-button>
            </a-radio-group>
          </a-form-model-item>
          <a-form-model-item label="是否显示" prop="showFlag" v-show="form.enabledFlag == 1">
            <a-radio-group button-style="solid" v-model="form.showFlag">
              <a-radio-button value="1">
                显示
              </a-radio-button>
              <a-radio-button value="0">
                隐藏
              </a-radio-button>
            </a-radio-group>
          </a-form-model-item>
        </a-form-model>
      </a-spin>
      <div class="btn-cont">
        <a-button id="product-brand-edit-modal-back" @click="isShow = false" style="margin-right:15px;">取消</a-button>
        <a-button
          style="margin-right:15px;color: #fff;background-color: #39f;border-color: #39f;"
          @click="handleSee" v-if="form.contentType !='LINK'">预览</a-button>
        <a-button type="primary" id="product-brand-edit-modal-save" @click="handleSave">确定</a-button>
      </div>
    </div>
    <!-- 预览 -->
    <promotion-show-modal ref="showModal" :openModal="openShowModal" @close="openShowModal = false"></promotion-show-modal>
  </a-modal>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
import moment from 'moment'
import { VSelect, Upload } from '@/components'
import Editor from '@/components/WEeditor'
import { saveActive, promoTerminalDetail } from '@/api/promoTerminal'
import promotionShowModal from './promotionShowModal'
export default {
  name: 'ProductBrandEditModal',
  mixins: [commonMixin],
  components: { VSelect, Upload, Editor ,promotionShowModal},
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemId: {
      type: [Number, String],
      default: ''
    },
    pageType: {
      type: String,
      default: 'add'
    }
  },
  computed: {
    modalTit () {
      return this.pageType != 'add' ? '发布修改' : '促销发布'
    }
  },
  data () {
    return {
      isShow: this.openModal, //  是否打开弹框
      spinning: false,
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 18 }
      },
      form: {
        promoActiveSn: undefined,
        title: '',
        contentType: 'IMAGE_CONTENT',
        imageSet: '',
        showFlag: undefined,
        content: '',
        enabledFlag: '1',
        sort: undefined
      },
      images: [],
      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'] }
        ],
        enabledFlag: [
          { required: true, message: '请选择是否发布', trigger: 'change' }
        ],
        showFlag: [
          { required: true, message: '请选择是否显示', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    // 预览
    handleSee () {
      this.$refs.showModal.pageInit({type:this.form.contentType,con:this.form.content})
    },
    onChange (e) {
      console.log('radio checked', e.target.value)
    },
    //  详情
    getDetail () {
      promoTerminalDetail({ sn: this.itemId }).then(res => {
        if (res.status == 200) {
          this.form.promoActiveSn = res.data.promoActiveSn
          this.form.title = res.data.title
          this.form.contentType = res.data.contentType
          this.form.showFlag = res.data.showFlag
          this.form.enabledFlag = res.data.enabledFlag
          this.form.sort = res.data.sort
          this.images = res.data.imageSet
          this.form.imageSet = res.data.imageSet
          this.form.content = res.data.content
          if (res.data.contentType == 'IMAGE_CONTENT') {
            this.$refs.editor.setHtml(res.data.content)
          } else if (res.data.contentType == 'VIDEO') {
            this.videoPath = res.data.content
          }
        }
      })
    },
    //  确定
    handleSave () {
      const _this = this
      _this.$refs.ruleForm.validate(valid => {
        if (valid) {
          _this.form.promoActiveSn = this.itemId
          const formData = JSON.parse(JSON.stringify(_this.form))
          formData.imageSet = formData.imageSet ? formData.imageSet.split(',') : []
          _this.spinning = true
          saveActive(formData).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              _this.$emit('ok')
              _this.isShow = false
              _this.spinning = false
            } else {
              _this.spinning = false
            }
          })
        } else {
          return false
        }
      })
    },
    //  图片上传
    changeImage (file) {
      this.form.imageSet = file
    },
    // 视频上传
    changeVideo (file) {
      this.form.content = file
    },
    //  文本编辑器
    editorChange (html, text) {
      this.form.content = html
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
        this.$refs.imageSet.setFileList('')
        this.$refs.editor.setHtml('')
        this.form = {
          promoActiveSn: undefined,
          title: '',
          contentType: 'IMAGE_CONTENT',
          imageSet: '',
          showFlag: undefined,
          content: '',
          enabledFlag: '1',
          sort: undefined
        }
        this.images = []
        this.$refs.ruleForm.resetFields()
      } else {
        if (this.pageType === 'edit') {
          this.getDetail()
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .promotionEdit-modal{
    .promotionEdit-content{
      max-height:60vh;
      overflow-y: scroll;
  }
    .ant-modal-body {
      padding: 40px 40px 24px;
    }
    .upload{
      width: 100%!important;
    }
    /deep/.upload-file .ant-upload-list-item-info{
      padding:2px !important;
    }
    //  商品图片描述
    .upload-desc{
      font-size: 12px;
      color: #808695;
    }
    //  文本编辑器  工具栏样式换行
    .promotionEdit-editor{
      .w-e-toolbar{
        flex-wrap: wrap;
      }
    }
    .btn-cont {
      text-align: center;
      margin: 35px 0 10px;
    }
    #promotionEdit-attachList{
      height: auto;
    }
    a{
      color: inherit;
    }
    .box{
      border:1px solid #d9d9d9;
      border-radius:4px;
      padding:4px 11px;
      color:rgba(0, 0, 0, 0.25);
      cursor: not-allowed;
      background:#fdfdfd;
    }
  }
</style>
