<template>
  <el-dialog
    :title="title"
    top="5%"
    :visible.sync="dialogFormVisible"
    width="60%"
    @close="close"
  >
    <div style="height: 650px">
      <el-scrollbar style="height: 100%">
        <el-form
          ref="form"
          label-position="left"
          label-width="100px"
          :model="form"
          :rules="rules"
          size="medium"
        >
          <el-col :span="24">
            <el-form-item
              :label="__('活动名称')"
              label-width="120px"
              prop="activity_title"
            >
              <el-input
                v-model="form.activity_title"
                clearable
                :placeholder="__('请输入活动名称')"
                :style="{ width: '95%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              :label="__('活动开始时间')"
              label-width="120px"
              prop="activity_starttime"
            >
              <el-date-picker
                v-model="form.activity_starttime"
                clearable
                format="yyyy-MM-dd HH:mm:ss"
                :placeholder="__('请选择活动开始时间')"
                :readonly="isReadOnly"
                :style="{ width: '95%' }"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              :label="__('活动结束时间')"
              label-width="120px"
              prop="activity_endtime"
            >
              <el-date-picker
                v-model="form.activity_endtime"
                clearable
                format="yyyy-MM-dd HH:mm:ss"
                :placeholder="__('请选择活动结束时间')"
                :readonly="isReadOnly"
                :style="{ width: '95%' }"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="11">
                <el-form-item
                  :label="__('活动海报')"
                  label-width="120px"
                  prop="activity_image"
                  required
                >
                  <upload
                    height="64px"
                    :image="form.activity_image"
                    width="64px"
                    @upImage="upActivityImage"
                  />
                  <div>{{ __('尺寸 64 * 64') }}</div>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item
                  :label="__('参加开始时间')"
                  label-width="120px"
                  prop="start_join_time"
                >
                  <el-date-picker
                    v-model="form.start_join_time"
                    clearable
                    format="yyyy-MM-dd"
                    :placeholder="__('请选择参加开始时间')"
                    :readonly="isReadOnly"
                    :style="{ width: '90%' }"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item
                  :label="__('参加截止时间')"
                  label-width="120px"
                  prop="end_join_time"
                >
                  <el-date-picker
                    v-model="form.end_join_time"
                    clearable
                    format="yyyy-MM-dd"
                    :placeholder="__('请选择参加截止时间')"
                    :readonly="isReadOnly"
                    :style="{ width: '90%' }"
                    value-format="yyyy-MM-dd"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <el-row>
              <el-col :span="12">
                <el-form-item
                  :label="__('主办方')"
                  label-width="120px"
                  prop="activity_sponsor"
                >
                  <el-input
                    v-model="form.activity_sponsor"
                    clearable
                    :placeholder="__('请输入主办方')"
                    :style="{ width: '95%' }"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  :label="__('协办方')"
                  label-width="85px"
                  prop="activity_co_sponsor"
                >
                  <el-input
                    v-model="form.activity_co_sponsor"
                    clearable
                    :placeholder="__('请输入协办方')"
                    :style="{ width: '90%' }"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  :label="__('活动举办地址')"
                  label-width="120px"
                  prop="activity_address"
                >
                  <el-input
                    v-model="form.activity_address"
                    clearable
                    :placeholder="__('请输入活动举办地址')"
                    :style="{ width: '95%' }"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  :label="__('联系人')"
                  label-width="85px"
                  prop="contact_organizer"
                >
                  <el-input
                    v-model="form.contact_organizer"
                    clearable
                    :placeholder="__('请输入联系人')"
                    :style="{ width: '90%' }"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="12">
            <el-form-item
              :label="__('联系电话')"
              label-width="120px"
              prop="contact_phone"
            >
              <el-input
                v-model="form.contact_phone"
                clearable
                :placeholder="__('请输入联系电话')"
                :style="{ width: '95%' }"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              :label="__('活动规则')"
              label-width="120px"
              prop="activity_intro"
            >
              <el-input
                v-model="form.activity_intro"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :placeholder="__('请输入活动规则')"
                :style="{ width: '95%' }"
                type="textarea"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              :label="__('嘉宾介绍')"
              label-width="120px"
              prop="guest_image"
              required
            >
              <upload
                height="64px"
                :image="form.guest_image"
                width="64px"
                @upImage="upGuestImage"
              />
              <div>{{ __('尺寸 64 * 64') }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              :label="__('活动详细介绍')"
              label-width="120px"
              prop="activity_detail_intro"
            >
              <el-row class="quill">
                <vab-quill
                  ref="vab-quill"
                  v-model="form.activity_detail_intro"
                  :options="options"
                  style="height: 400px"
                />
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item
              :label="__('相关议程')"
              label-width="120px"
              prop="activity_process"
            >
              <el-row class="quill">
                <vab-quill
                  ref="vab-quill"
                  v-model="form.activity_process"
                  :options="options"
                  style="height: 400px"
                />
              </el-row>
            </el-form-item>
          </el-col>
        </el-form>
      </el-scrollbar>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{ __('取消') }}</el-button>
      <el-button type="primary" @click="save">{{ __('确定') }}</el-button>
    </div>
    <media ref="media" :append-to-body="true" @media-event="handleAddImg" />
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import VabQuill from '@/extra/VabQuill'
  import Media from '@/components/quill/media'
  import Upload from '@/components/upload'
  import { doEdit, Update } from '@/api/store/activity/base'
  import { URL } from '@/config'
  import { renderTime } from '@/utils/date'

  export default {
    name: 'StoreActivityBaseEdit',
    components: { VabQuill, Media, Upload },
    data() {
      return {
        action: URL.action,
        form: {
          activity_type_id: 1131,

          activity_title: undefined,
          activity_starttime: '',
          activity_endtime: '',
          activity_image: '',
          start_join_time: '',
          end_join_time: '',
          activity_sponsor: undefined,
          activity_co_sponsor: undefined,
          activity_address: undefined,
          contact_organizer: undefined,
          contact_phone: undefined,
          activity_intro: undefined,
          guest_image: '',
          activity_detail_intro: '',
          activity_process: '',
        },
        rules: {
          activity_title: [
            {
              required: true,
              message: '请输入活动名称',
              trigger: 'blur',
            },
          ],
          activity_starttime: [
            {
              required: true,
              message: '请选择活动开始时间',
              trigger: 'change',
            },
          ],
          activity_endtime: [
            {
              required: true,
              message: '请选择活动结束时间',
              trigger: 'change',
            },
          ],
          activity_image: [
            {
              required: true,
              message: '请选择海报图片',
              trigger: 'change',
            },
          ],
          guest_image: [
            {
              required: true,
              message: '请选择图片',
              trigger: 'change',
            },
          ],
          start_join_time: [
            {
              required: true,
              message: '请选择参加开始时间',
              trigger: 'change',
            },
          ],
          end_join_time: [
            {
              required: true,
              message: '请选择参加截止时间',
              trigger: 'change',
            },
          ],
          activity_sponsor: [
            {
              required: true,
              message: '请输入主办方',
              trigger: 'blur',
            },
          ],
          activity_co_sponsor: [
            {
              required: true,
              message: '请输入协办方',
              trigger: 'blur',
            },
          ],
          activity_address: [
            {
              required: true,
              message: '请输入活动举办地址',
              trigger: 'blur',
            },
          ],
          contact_organizer: [
            {
              required: true,
              message: '请输入联系人',
              trigger: 'blur',
            },
          ],
          contact_phone: [
            {
              required: true,
              message: '请输入联系电话',
              trigger: 'blur',
            },
          ],
          activity_intro: [
            {
              required: true,
              message: '请输入活动规则',
              trigger: 'blur',
            },
          ],
          activity_detail_intro: [
            {
              required: true,
              message: '请输入活动详细介绍',
              trigger: 'blur',
            },
          ],
          activity_process: [
            {
              required: true,
              message: '请输入相关议程',
              trigger: 'blur',
            },
          ],
        },
        title: '',
        dialogFormVisible: false,
        options: {
          theme: 'snow',
          bounds: document.body,
          debug: 'warn',
          modules: {
            toolbar: {
              container: [
                ['bold', 'italic', 'underline', 'strike'],
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [{ size: ['small', false, 'large', 'huge'] }],
                [{ color: [] }, { background: [] }],
                ['blockquote', 'code-block'],
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ script: 'sub' }, { script: 'super' }],
                [{ indent: '-1' }, { indent: '+1' }],
                [{ align: [] }],
                [{ direction: 'rtl' }],
                [{ font: [] }],
                ['clean'],
                ['link', 'image', 'vab-upload-image'],
              ],
              handlers: {
                'vab-upload-image': () => {
                  this.quillRef = 'service-quill'
                  this.$refs['media'].showEdit()
                },
              },
            },
          },
          placeholder: '',
          readOnly: false,
        },
      }
    },
    computed: {
      isReadOnly() {
        return this.form.activity_id !== undefined
      },
    },
    created() {},
    methods: {
      handleAddImg(imageArr) {
        let quillRef = this.quillRef
        let quill = this.$refs[quillRef].Quill
        // 获取光标所在位置
        let length = quill.getSelection().index
        // 插入图片 res.info为服务器返回的图片地址
        imageArr.forEach((url) => {
          quill.insertEmbed(length, 'image', url)
          length = quill.getSelection().index
        })
        // 调整光标到最后
        quill.setSelection(length + 1)
      },
      __,
      upActivityImage(image) {
        this.form.activity_image = image
      },
      upGuestImage(image) {
        this.form.guest_image = image
      },
      showEdit(row) {
        if (!row) {
          this.title = this.__('添加')
        } else {
          this.title = this.__('编辑')
          this.form = {
            activity_type_id: 1131,
            activity_id: row.activity_id,
            activity_title: row.activity_title,
            activity_starttime: renderTime(row.activity_starttime),
            activity_endtime: renderTime(row.activity_endtime),
            activity_image: row.activity_rule.activity_image,
            start_join_time: renderTime(row.activity_rule.start_join_time),
            end_join_time: renderTime(row.activity_rule.end_join_time),
            activity_sponsor: row.activity_rule.activity_sponsor,
            activity_co_sponsor: row.activity_rule.activity_co_sponsor,
            activity_address: row.activity_rule.activity_address,
            contact_organizer: row.activity_rule.contact_organizer,
            contact_phone: row.activity_rule.contact_phone,
            activity_intro: row.activity_rule.activity_intro,
            guest_image: row.activity_rule.guest_image,
            activity_detail_intro: row.activity_rule.activity_detail_intro,
            activity_process: row.activity_rule.activity_process,
          }
        }
        this.dialogFormVisible = true
      },
      close() {
        this.form = this.$options.data().form
        this.$refs['form'].resetFields()
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.form.activity_id && this.form.activity_id != undefined) {
              const { msg, status } = await Update(this.form)
              if (200 == status) {
                this.$baseMessage(msg, 'success')
              } else {
                this.$baseMessage(msg, 'error')
              }
              this.$emit('fetch-data')
              this.close()
            } else {
              const { msg, status } = await doEdit(this.form)
              if (200 == status) {
                this.$baseMessage(msg, 'success')
              } else {
                this.$baseMessage(msg, 'error')
              }
              this.$emit('fetch-data')
              this.close()
            }
          } else {
            return false
          }
        })
      },
    },
  }
</script>
<style>
  .quill {
    padding-bottom: 100px;
  }

  .vab-quill .ql-vab-upload-image {
    font-family: 'remixicon' !important;
    font-size: 16px;
    font-weight: 580;
  }

  .vab-quill .ql-vab-upload-image:before {
    content: '\ee46';
  }
</style>
