<template>
  <a-modal
    :visible="value"
    width="70%"
    destroyOnClose
    title="编辑节目信息"
    ok-text="确定并发布"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="loading">
      <a-form
        :form="form"
        v-if="formData"
      >
        <div class="block-title">
          基本信息
        </div>
        <a-form-item
          label="节目名称"
          v-bind="formItemLayout"
        >
          <a-input
            :disabled="true"
            v-decorator="[
              'name',
              {
                initialValue:formData.name,
                rules: [{ required: true, message: '请输入节目名称' }]
              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="节目副标题"
          v-bind="formItemLayout"
        >
          <a-input
            v-decorator="[
              'introduction_title',
              {
                initialValue:formData.introduction_title,
                rules: [{ required: true, message: '请输入节目副标题' }]

              }
            ]"
          ></a-input>
        </a-form-item>
        <a-form-item
          label="节目海报"
          v-bind="formItemLayout"
        >
          <a-upload
            list-type="picture-card"
            :before-upload="beforeImageUpload"
            @preview="handleImagePreview"
            @change="handleImageChange"
            :customRequest="()=>{}"
            :file-list="imageList"
            v-decorator="[
              'pictures',
              {
                initialValue:imageList,
                rules: [{ required: true, message: '请上传节目海报' }]
              }
            ]"
          >
            <div v-if="imageList.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                上传
              </div>
            </div>
          </a-upload>

          <a-modal
            :visible="previewImageVisible"
            :footer="null"
            @cancel="handleImageCancel"
          >
            <img
              alt="example"
              style="width: 100%"
              :src="previewImage"
            >
          </a-modal>

          <div class="clearfix"></div>
          <a-alert
            banner
            type="warning"
            message="图片格式支持 JPG/PNG，大小不超过1MB，最多可上传1张图片。推荐分辨率640*360（px）"
          ></a-alert>
        </a-form-item>

        <div class="block-title">
          图文介绍<span style="font-size:13px;color:red"> （上传图片后，请将图片宽高设置为100%）</span>
        </div>
        <a-form-item
          label="节目简介"
          v-bind="formItemLayout"
        >
          <a-input
            type="textarea"
            :rows="3"
            v-decorator="[
              'description',
              {
                initialValue:formData.description,
                rules: [{ required: true, message: '请输入节目简介' }]
              }
            ]">
          </a-input>
        </a-form-item>
        <a-form-item
          label="节目详情"
          v-bind="formItemLayout"
        >
          <a-input
            v-show="false"
            v-decorator="[
              'introduction_content',
              {
                initialValue:formData.introduction_content,
                rules: [{ required: true, message: '请输入详情内容' }]
              }
            ]"
          ></a-input>
          <Editor ref="editor" v-model="formData.introduction_content"></Editor>
        </a-form-item>
      </a-form>
    </a-spin>

    <ImageCropper
      ref="cropper"
      :info="fileInfo"
      @success="handleCropper"
    ></ImageCropper>
  </a-modal>
</template>

<script>
import Editor from '@/components/Editor/index.vue'
import ImageCropper from '@/components/ImageCropper/index_theatrePost'
import { getperformById, updatePerform } from '@/api/ticketSetting/perform'
import performMixin from './performMixin.js'

export default {
  mixins: [performMixin],
  components: {
    Editor,
    ImageCropper
  },
  data () {
    return {
      formData: null,
      imageList: [],
      loading: false
    }
  },
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  methods: {
    handleOk (e) {
      e.preventDefault()
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.pictures = this.imageList.map(item => {
            return {
              size: item.size,
              url: item.url
            }
          })
          console.log('values', values)
          updatePerform(this.id, values).then(res => {
            this.$message.success('修改成功')
            this.form.resetFields()
            this.$emit('input', false)
            this.$emit('update')
          })
        }
      })
    },
    // show (e) {
    //   this.editVisible = true
    //   console.log(this.editVisible)
    //   this.performId = e.id
    //   this.getperformById(this.performId)
    // },
    getperformById () {
      this.loading = true
      getperformById(this.performId).then(res => {
        console.log('res', res)
        this.performList = res.extraInfo
        this.loading = false
      })
    }

  },
  watch: {
    value (val) {
      this.loading = true
      val && getperformById(this.id).then(res => {
        this.formData = res.extraInfo
        this.loading = false
        this.imageList = this.formData.pictures.map((i, index) => {
          return {
            uid: index + '',
            name: '图' + index,
            url: i.url,
            thumbUrl: i.url,
            size: i.size,
            percent: 100
          }
        })
      })
    }
  }
}
</script>

<style>
</style>
