<template>
  <el-dialog
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="1000px"
    @close="close"
  >
    <el-scrollbar style="height: 550px">
      <el-form ref="form" label-width="80px" :model="form" :rules="rules">
        <el-form-item :label="__('会员编号')" prop="user_id">
          <el-input v-model="form.user_id" :placeholder="__('会员编号')" />
        </el-form-item>
        <el-form-item :label="__('搜索索引')" prop="story_index">
          <el-input v-model="form.story_index" :placeholder="__('搜索索引')" />
        </el-form-item>
        <el-form-item :label="__('标题')" prop="story_title">
          <el-input v-model="form.story_title" :placeholder="__('标题')" />
        </el-form-item>

        <el-form-item :label="__('版块图标')" prop="story_file">
          <upload
            height="100px"
            :image="form.story_file"
            width="100px"
            @upImage="
              (image) => {
                form.story_file = image
              }
            "
          />
        </el-form-item>
        <el-form-item :label="__('视频地址')" prop="story_video">
          <el-input v-model="form.story_video" :placeholder="__('视频地址')" />
        </el-form-item>
        <el-form-item :label="__('类型')" prop="story_type">
          <el-radio-group v-model="form.story_type">
            <el-radio :label="1">{{ __('文字') }}</el-radio>
            <el-radio :label="2">{{ __('图片') }}</el-radio>
            <el-radio :label="3">{{ __('音乐') }}</el-radio>
            <el-radio :label="4">{{ __('视频') }}</el-radio>
            <el-radio :label="5">{{ __('商品') }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item :label="__('添加时间')" prop="story_time">
          <el-date-picker
            v-model="form.story_time"
            :placeholder="__('选择日期时间')"
            type="datetime"
          />
          <!--        <el-input v-model="form.story_time" :placeholder="__('添加时间')" />-->
        </el-form-item>

        <el-form-item prop="story_status">
          <el-switch
            v-model="form.story_status"

            active-text="草稿"
            :active-value="1"

            inactive-text="发布"
            :inactive-value="0"
            style="display: block"
          />
        </el-form-item>

        <el-form-item :label="__('')" prop="story_enable">
          <el-switch
            v-model="form.story_enable"

            active-text="有效"
            :active-value="1"

            inactive-text="删除"
            :inactive-value="0"
            style="display: block"
          />
        </el-form-item>

        <el-form-item :label="__('')" prop="story_is_top">
          <el-switch
            v-model="form.story_is_top"

            active-text="正常"
            :active-value="1"

            inactive-text="置顶"
            :inactive-value="0"
            style="display: block"
          />
        </el-form-item>

        <el-form-item :label="__('商品编码')" prop="item_id">
          <el-input v-model="form.item_id" :placeholder="__('商品编码')" />
        </el-form-item>
        <el-form-item :label="__('分类编码')" prop="story_category_id">
          <el-input
            v-model="form.story_category_id"
            :placeholder="__('分类编码')"
          />
        </el-form-item>
        <el-form-item :label="__('标签')" prop="story_tags">
          <el-input v-model="form.story_tags" :placeholder="__('标签')" />
        </el-form-item>
        <el-form-item :label="__('帖子内容')" prop="story_content">
          <quill-editor
            ref="vab-quill"
            v-model="form.story_content"
            style="width: 90%"
          />
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{ __('取消') }}</el-button>
      <el-button type="primary" @click="save">{{ __('确定') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { translateTitle as __ } from '@/utils/i18n'
  import { doEdit } from '@/api/story/base'
  import { URL } from '@/config'
  import upload from '@/components/upload'
  import quillEditor from '@/components/quill/quillEditor.vue'

  export default {
    name: 'StoryBaseEdit',
    components: { quillEditor, upload },
    data() {
      return {
        action: URL.action,
        form: {
          story_file: '',
          story_type: 5,
          story_source: 3,
          story_content: '',
          story_enable: 1,
          story_status: 1,
          story_forward: 1,
          story_is_top: 1,
        },
        rules: {},
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    mounted() {
      this.placeholder = ''
      this.rules = {
        user_id: [
          { required: true, trigger: 'blur', message: this.__('会员编号') },
        ],
        // story_index: [
        //   { required: true, trigger: 'blur', message: this.__('搜索索引') },
        // ],
        story_title: [
          { required: true, trigger: 'blur', message: this.__('标题') },
        ],
        story_content: [
          { required: true, trigger: 'blur', message: this.__('内容') },
        ],
        story_file: [
          { required: true, trigger: 'blur', message: this.__('图片') },
        ],
        // story_video: [
        //   { required: true, trigger: 'blur', message: this.__('视频地址') },
        // ],
        story_type: [
          { required: true, trigger: 'change', message: this.__('类型') },
        ],
        story_time: [
          { required: true, trigger: 'change', message: this.__('添加时间') },
        ],
        story_status: [
          { required: true, trigger: 'blur', message: this.__('状态') },
        ],
        // item_id: [
        //   { required: true, trigger: 'blur', message: this.__('商品编号') },
        // ],
        story_category_id: [
          { required: true, trigger: 'blur', message: this.__('分类编号') },
        ],
        // story_tags: [
        //   { required: true, trigger: 'blur', message: this.__('标签') },
        // ],
        // story_source: [
        //   { required: true, trigger: 'blur', message: this.__('数据源') },
        // ],
        product_id: [
          { required: true, trigger: 'blur', message: this.__('商品编号') },
        ],
      }

      this.$forceUpdate()
    },
    methods: {
      handleAvatarSuccess(name, res) {
        this.form[name] = res.data
      },
      BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 2
        if (!isRightSize) {
          this.$message.error('文件大小超过 2MB')
        }
        return isRightSize
      },
      showEdit(row) {
        if (!row) {
          this.title = this.__('添加')
        } else {
          this.title = this.__('编辑')
          this.form = Object.assign({}, row)
        }
        this.dialogFormVisible = true
      },
      close() {
        this.form.story_content = ''
        this.$refs['form'].resetFields()
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            const { msg, status } = await doEdit(this.getParams())
            if (200 == status) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
      getParams() {
        let params = Object.assign({}, this.form)
        let story_time = params.story_time
        if (story_time instanceof Date) {
          params.story_time = story_time.getTime()
        }
        return params
      },
    },
  }
</script>
