<template>
  <el-dialog
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="750px"
    @close="close"
  >
    <el-scrollbar style="height: 550px">
      <el-form ref="form" label-width="120px" :model="form" :rules="rules">
        <el-form-item :label="__('活动标题')" prop="activity_title">
          <el-input
            v-model="form.activity_title"
            :placeholder="__('活动标题')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item
          v-if="false" :label="__('礼包分类')" prop="activity_bag_category">
          <el-input
            v-model="form.activity_bag_category"
            :placeholder="__('礼包分类')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('活动海报')" prop="giftbag_image">
          <picUpload
            :file-list="[form.giftbag_image]"
            :height="75"
            :show-file-list="false"
            :width="75"
            @get-file="
            (value) => {
              form.giftbag_image = value
            }
          "
            @remove-file="(value) => (form.giftbag_image = value)"
          />
        </el-form-item>
        <el-form-item :label="__('活动主图')" prop="giftbag_zu_image">
          <picUpload
            :file-list="[form.giftbag_zu_image]"
            :height="75"
            :show-file-list="false"
            :width="75"
            @get-file="
            (value) => {
              form.giftbag_zu_image = value
            }
          "
            @remove-file="(value) => (form.giftbag_zu_image = value)"
          />
        </el-form-item>
        <el-form-item :label="__('商品介绍')" prop="activity_video">
          <el-input
            v-model="form.activity_video"
            :placeholder="__('商品介绍')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('库存数量')" prop="giftbag_quantity">
          <el-input
            v-model="form.giftbag_quantity"
            :placeholder="__('库存数量')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('售卖金额')" prop="giftbag_amount">
          <el-input
            v-model="form.giftbag_amount"
            :placeholder="__('售卖金额')"
            :style="{ width: '100%' }"
          />
        </el-form-item>
        <el-form-item :label="__('运费设置')" prop="transport_type_id">
          <el-select
            v-model="form.transport_type_id"
            clearable
            :placeholder="__('运费设置')"
          >
            <el-option
              v-for="item in optionTrans"
              :key="item.transport_type_id"
              :label="item.transport_type_name"
              :value="item.transport_type_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="__('活动开始时间')" prop="activity_starttime">
          <el-date-picker
            v-model="form.activity_starttime"
            :disabled="row != undefined"
            :placeholder="__('选择日期')"
            :style="{ width: '100%' }"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item :label="__('活动结束时间')" prop="activity_endtime">
          <el-date-picker
            v-model="form.activity_endtime"
            :disabled="row != undefined"
            :placeholder="__('选择日期')"
            :style="{ width: '100%' }"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item :label="__('会员等级')" prop="activity_use_level">
          <el-select
            v-model="form.activity_use_level"
            multiple
            clearable
            :placeholder="__('会员等级')"
          >
            <el-option
              v-for="item in options"
              :key="item.user_level_id"
              :label="item.user_level_name"
              :value="item.user_level_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="__('活动状态')" prop="activity_state">
          <el-radio-group v-model="form.activity_state">
            <el-radio
              v-for="(item, index) in activity_state_opts"
              :key="index"
              :disabled="item.disabled"
              :label="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="__('活动详细介绍')" prop="activity_detail_intro">
          <quill-editor
            ref="vab-quill"
            v-model="form.activity_detail_intro"
            style="width: 100%"
          />
        </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 quillEditor from '@/components/quill/quillEditor'
  import { doEdit, Update } from '@/api/store/activity/base'
  import picUpload from '@/components/material/PicUpload'
  import { renderTime } from '@/utils/date'
  import {getList as getLists} from "@/api/base/user/level";
  import {transports} from "@/api/store/transport/type";

  export default {
    name: 'StoreActivityBaseEdit',
    components: { quillEditor, picUpload },
    data() {
      return {
        optionTrans: [],
        activity_state_opts: [
          {
            label: this.__('未开启'),
            value: 0,
          },
          {
            label: this.__('正常'),
            value: 1,
          },
        ],
        form: {
          transport_type_id: 1001,
          activity_type_id: 1132,
          activity_starttime: '',
          activity_endtime: '',
          activity_use_level: [],
        },
        row: {},
        title: '',
        dialogFormVisible: false,
        options:[],
        rules: {
          activity_title: [
            { required: true, trigger: 'blur', message: this.__('活动标题') },
          ],
          giftbag_quantity: [
            { required: true, trigger: 'blur', message: this.__('库存数量') },
          ],
          giftbag_amount: [
            { required: true, trigger: 'blur', message: this.__('售卖金额') },
          ],
          activity_starttime: [
            {
              required: true,
              trigger: 'blur',
              message: this.__('活动开始时间'),
            },
          ],
          activity_endtime: [
            {
              required: true,
              trigger: 'blur',
              message: this.__('活动结束时间'),
            },
          ],
        },
      }
    },
    async created() {
      await this.fetchdataFindStoreLevel()
      await this.getTransports()
    },
    methods: {
      __,
      showEdit(row) {
        this.row = row
        if (!row) {
          this.title = this.__('添加')
          this.form.transport_type_id = 1001
          this.form.activity_state = 1
        } else {
          this.title = this.__('编辑')
          this.form = {
            activity_id: row.activity_id,
            activity_type_id: row.activity_type_id,
            activity_bag_category: row.activity_bag_category,
            giftbag_image: row.giftbag_image,
            giftbag_zu_image: row.giftbag_zu_image,
            activity_video: row.activity_video,
            giftbag_quantity: row.giftbag_quantity,
            giftbag_amount: row.giftbag_amount,
            transport_type_id: parseInt(row.transport_type_id),
            activity_state: row.activity_state,
            activity_detail_intro: row.activity_detail_intro,
            activity_starttime: renderTime(row.activity_starttime),
            activity_endtime: renderTime(row.activity_endtime),
            activity_title: row.activity_title,
          }
          //会员等级
          if (row.activity_use_level.trim()) {
            this.form.activity_use_level = row.activity_use_level.split(',').map(Number)
          }
        }

        this.dialogFormVisible = true
      },
      close() {
        this.form = {
          transport_type_id : 1001,
          activity_type_id: 1132,
          activity_starttime: '',
          activity_endtime: '',
          activity_use_level: [],
        }
        this.$refs['form'].resetFields()
        this.dialogFormVisible = false
      },
      async getTransports() {
        const { data } = await transports()
        this.optionTrans = data
      },
      async fetchdataFindStoreLevel() {
        await getLists()
          .then((res) => {
            this.options = res.data.items
          })
          .catch((err) => {
            console.log(err)
          })
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            this.form.activity_use_level = this.form.activity_use_level.toString()

            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>
