<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="700px"
    @close="close"
  >
    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
      <el-form-item :label="__('版块名称')" prop="story_category_name">
        <el-input
          v-model="form.story_category_name"
          :placeholder="__('版块名称')"
        />
      </el-form-item>

      <el-form-item :label="__('版块图标')" prop="story_category_logo">
        <upload
          height="100px"
          :image="form.story_category_logo"
          width="100px"
          @upImage="
            (image) => {
              form.story_category_logo = image
            }
          "
        />
      </el-form-item>
      <el-form-item :label="__('版块背景')" prop="story_category_bg">
        <upload
          height="100px"
          :image="form.story_category_bg"
          width="100px"
          @upImage="
            (image) => {
              form.story_category_bg = image
            }
          "
        />
      </el-form-item>

      <el-form-item :label="__('关键词')" prop="story_category_keywords">
        <el-input
          v-model="form.story_category_keywords"
          :placeholder="__('关键词')"
        />
      </el-form-item>
      <el-form-item :label="__('版块描述')" prop="story_category_desc">
        <el-input
          v-model="form.story_category_desc"
          :placeholder="__('版块描述')"
        />
      </el-form-item>

      <el-form-item :label="__('版块排序')" prop="story_category_order">
        <el-input
          v-model="form.story_category_order"
          :placeholder="__('版块排序')"
        />
      </el-form-item>
      <el-form-item :label="__('板块链接')" prop="story_category_link">
        <el-input
          v-model="form.story_category_link"
          :placeholder="__('板块链接')"
        />
      </el-form-item>

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

          active-text="弹出打开"
          :active-value="1"

          inactive-text="窗内打开"
          :inactive-value="0"
        />
      </el-form-item>

      <el-form-item :label="__('是否内置')" prop="story_category_buildin">
        <el-radio-group v-model="form.story_category_buildin" size="medium">
          <el-radio
            v-for="(item, index) in store_o2o_flagOptions"
            :key="index"
            :disabled="item.disabled"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <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/category'

  import { URL } from '@/config'
  import upload from '@/components/upload'
  export default {
    name: 'StoryCategoryEdit',
    components: { upload },
    data() {
      return {
        store_o2o_flagOptions: [
          {
            label: '非内置',
            value: 0,
          },
          {
            label: '内置',
            value: 1,
          },
        ],

        action: URL.action,
        imageUrl: '',
        form: {
          story_open_mode: 1,
          story_category_logo: '',
          article_status: 1,
          story_category_buildin: 0,
        },
        rules: {},
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    mounted() {
      this.rules = {
        story_category_name: [
          { required: true, trigger: 'blur', message: this.__('版块名称') },
        ],

        story_category_keywords: [
          { required: true, trigger: 'blur', message: this.__('版块关键词') },
        ],
        story_category_desc: [
          { required: true, trigger: 'blur', message: this.__('版块描述') },
        ],

        story_category_order: [
          { required: true, trigger: 'blur', message: this.__('版块排序') },
        ],

        story_open_mode: [
          { required: true, trigger: 'blur', message: this.__('打开方式') },
        ],
      }

      this.$forceUpdate()
    },
    methods: {
      __,
      showEdit(row, story_category_id) {
        if (!row) {
          this.title = this.__('添加')
          if (story_category_id != null) {
            this.form.story_category_parent_id = story_category_id
          }
        } else {
          this.title = this.__('编辑')
          const obj = Object.assign({}, row)
          this.form = {
            story_category_id: obj.story_category_id,
            story_category_keywords: obj.story_category_keywords,
            story_category_name: obj.story_category_name,
            story_category_link: obj.story_category_link,
            story_category_logo: obj.story_category_logo,
            story_category_desc: obj.story_category_desc,
            article_status: obj.article_status,
            story_open_mode: obj.story_open_mode,
            story_category_buildin: obj.story_category_buildin,
            story_category_order: obj.story_category_order,
          }
        }
        this.dialogFormVisible = true
      },
      close() {
        this.form = this.$options.data().form
        this.$refs['form'].resetFields()
        this.dialogFormVisible = false
      },
      async save() {
        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()
      },
    },
  }
</script>
