<template>
  <el-dialog
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
  >
    <el-scrollbar style="height: 600px">
      <el-form ref="form" label-width="80px" :model="form" :rules="rules">
        <el-form-item :label="__('店铺编号')" prop="store_id">
          <el-input v-model="form.store_id" :placeholder="__('店铺编号')" />
        </el-form-item>
        <el-form-item :label="__('注册所在地')" prop="store_register_region">
          <el-input
            v-model="form.store_register_region"
            :placeholder="__('注册所在地')"
          />
        </el-form-item>
        <el-form-item :label="__('配送区域')" prop="store_deliver_region">
          <el-input
            v-model="form.store_deliver_region"
            :placeholder="__('配送区域')"
          />
        </el-form-item>
        <el-form-item :label="__('结算周期')" prop="store_settlement_cycle">
          <el-input
            v-model="form.store_settlement_cycle"
            :placeholder="__('结算周期')"
          />
        </el-form-item>
        <el-form-item :label="__('店铺banner')" prop="store_banner">
          <el-input v-model="form.store_banner" :placeholder="__('店铺banner')" />
        </el-form-item>
        <el-form-item :label="__('店铺幻灯片及幻灯片链接')" prop="store_slide">
          <el-input
            v-model="form.store_slide"
            :placeholder="__('店铺幻灯片及幻灯片链接')"
          />
        </el-form-item>
        <el-form-item :label="__('详细地址')" prop="store_address">
          <el-input v-model="form.store_address" :placeholder="__('详细地址')" />
        </el-form-item>
        <el-form-item :label="__('工作时间')" prop="store_workingtime">
          <el-input
            v-model="form.store_workingtime"
            :placeholder="__('工作时间')"
          />
        </el-form-item>
        <el-form-item :label="__('卖家电话')" prop="store_tel">
          <el-input v-model="form.store_tel" :placeholder="__('卖家电话')" />
        </el-form-item>
        <el-form-item :label="__('qq')" prop="store_qq">
          <el-input v-model="form.store_qq" :placeholder="__('qq')" />
        </el-form-item>
        <el-form-item :label="__('旺旺')" prop="store_ww">
          <el-input v-model="form.store_ww" :placeholder="__('旺旺')" />
        </el-form-item>
        <el-form-item :label="__('是否开启装修')" prop="store_is_renovation">
          <el-input
            v-model="form.store_is_renovation"
            :placeholder="__('是否开启装修')"
          />
        </el-form-item>
        <el-form-item :label="__('店铺印章')" prop="store_stamp">
          <el-input v-model="form.store_stamp" :placeholder="__('店铺印章')" />
        </el-form-item>
        <el-form-item :label="__('免运费额度')" prop="store_free_shipping">
          <el-input
            v-model="form.store_free_shipping"
            :placeholder="__('免运费额度')"
          />
        </el-form-item>
        <el-form-item :label="__('店铺绑定模板')" prop="store_template">
          <el-input
            v-model="form.store_template"
            :placeholder="__('店铺绑定模板')"
          />
        </el-form-item>
        <el-form-item
          :label="__('打印订单页面下方说明文字')"
          prop="store_print_desc"
        >
          <el-input
            v-model="form.store_print_desc"
            :placeholder="__('打印订单页面下方说明文字')"
          />
        </el-form-item>
        <el-form-item :label="__('店铺资料信息状态')" prop="store_state_id">
          <el-input
            v-model="form.store_state_id"
            :placeholder="__('店铺资料信息状态')"
          />
        </el-form-item>
        <el-form-item :label="__('付款状态')" prop="store_payment_state">
          <el-input
            v-model="form.store_payment_state"
            :placeholder="__('付款状态')"
          />
        </el-form-item>
        <el-form-item :label="__('本次开始时间')" prop="store_start_time">
          <el-input
            v-model="form.store_start_time"
            :placeholder="__('本次开始时间')"
          />
        </el-form-item>
        <el-form-item :label="__('有效期至')" prop="store_end_time">
          <el-input
            v-model="form.store_end_time"
            :placeholder="__('有效期至')"
          />
        </el-form-item>
        <el-form-item :label="__('关闭原因')" prop="store_close_reason">
          <el-input
            v-model="form.store_close_reason"
            :placeholder="__('关闭原因')"
          />
        </el-form-item>
        <el-form-item :label="__('积分')" prop="store_points">
          <el-input v-model="form.store_points" :placeholder="__('积分')" />
        </el-form-item>
        <el-form-item :label="__('购买须知')" prop="store_notice">
          <el-input v-model="form.store_notice" :placeholder="__('购买须知')" />
        </el-form-item>
        <el-form-item :label="__('营业时间')" prop="store_opening_hours">
          <el-input
            v-model="form.store_opening_hours"
            :placeholder="__('营业时间')"
          />
        </el-form-item>
        <el-form-item :label="__('打烊时间')" prop="store_close_hours">
          <el-input
            v-model="form.store_close_hours"
            :placeholder="__('打烊时间')"
          />
        </el-form-item>
        <el-form-item
          :label="__('消费送积分比率')"
          prop="store_points_consume_rate"
        >
          <el-input
            v-model="form.store_points_consume_rate"
            :placeholder="__('消费送积分比率')"
          />
        </el-form-item>
        <el-form-item :label="__('所属商圈')" prop="store_circle">
          <el-input v-model="form.store_circle" :placeholder="__('所属商圈')" />
        </el-form-item>
        <el-form-item :label="__('线下买单折扣')" prop="store_discount">
          <el-input
            v-model="form.store_discount"
            :placeholder="__('线下买单折扣')"
          />
        </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 { mapActions, mapGetters } from 'vuex'
  import { translateTitle as __ } from '@/utils/i18n'
  import { doEdit } from '@/api/store/info'
  import { isPhone } from '@/utils/validate'

  export default {
    name: 'StoreInfoEdit',
    data() {
      return {
        tableConfig: {
          height: window.innerHeight - 220 - 90,
        },
        form: {},
        rules: {},
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    mounted() {
      this.form = {
        unit_name: '',
      }

      this.rules = {
        store_id: [
          { required: true, trigger: 'blur', message: this.__('店铺编号') },
        ],
        store_register_region: [
          { required: true, trigger: 'blur', message: this.__('注册所在地') },
        ],
        store_deliver_region: [
          { required: true, trigger: 'blur', message: this.__('配送区域') },
        ],
        store_settlement_cycle: [
          { required: true, trigger: 'blur', message: this.__('结算周期') },
        ],
        store_banner: [
          { required: true, trigger: 'blur', message: this.__('店铺banner') },
        ],
        store_slide: [
          {
            required: true,
            trigger: 'blur',
            message: this.__('店铺幻灯片及幻灯片链接'),
          },
        ],
        store_address: [
          { required: true, trigger: 'blur', message: this.__('详细地址') },
        ],
        store_workingtime: [
          { required: true, trigger: 'blur', message: this.__('工作时间') },
        ],
        store_tel: [
          { required: true, trigger: 'blur', message: this.__('卖家电话') },
        ],
        store_qq: [{ required: true, trigger: 'blur', message: this.__('qq') }],
        store_ww: [
          { required: true, trigger: 'blur', message: this.__('旺旺') },
        ],
        store_is_renovation: [
          { required: true, trigger: 'blur', message: this.__('是否开启装修') },
        ],
        store_stamp: [
          { required: true, trigger: 'blur', message: this.__('店铺印章') },
        ],
        store_free_shipping: [
          { required: true, trigger: 'blur', message: this.__('免运费额度') },
        ],
        store_template: [
          { required: true, trigger: 'blur', message: this.__('店铺绑定模板') },
        ],
        store_print_desc: [
          {
            required: true,
            trigger: 'blur',
            message: this.__('打印订单页面下方说明文字'),
          },
        ],
        store_state_id: [
          {
            required: true,
            trigger: 'blur',
            message: this.__('店铺资料信息状态'),
          },
        ],
        store_payment_state: [
          { required: true, trigger: 'blur', message: this.__('付款状态') },
        ],
        store_start_time: [
          { required: true, trigger: 'blur', message: this.__('本次开始时间') },
        ],
        store_end_time: [
          {
            required: true,
            trigger: 'blur',
            message: this.__('有效期至'),
          },
        ],
        store_close_reason: [
          { required: true, trigger: 'blur', message: this.__('关闭原因') },
        ],
        store_points: [
          { required: true, trigger: 'blur', message: this.__('积分') },
        ],
        store_notice: [
          { required: true, trigger: 'blur', message: this.__('购买须知') },
        ],
        store_opening_hours: [
          { required: true, trigger: 'blur', message: this.__('营业时间') },
        ],
        store_close_hours: [
          { required: true, trigger: 'blur', message: this.__('打烊时间') },
        ],
        store_points_consume_rate: [
          {
            required: true,
            trigger: 'blur',
            message: this.__('消费送积分比率'),
          },
        ],
        store_circle: [
          { required: true, trigger: 'blur', message: this.__('所属商圈') },
        ],
        store_discount: [
          { required: true, trigger: 'blur', message: this.__('线下买单折扣') },
        ],
      }

      this.$forceUpdate()
    },
    methods: {
      __,
      showEdit(row) {
        if (!row) {
          this.title = this.__('添加')
        } else {
          this.title = this.__('编辑')
          this.form = Object.assign({}, row)
        }
        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) {
            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>
