<template>
  <el-dialog
    custom-class="center-dialog"
    :title="title"
    top="0vh"
    :visible.sync="dialogFormVisible"
    @close="close"
  >
    <el-form ref="form" label-width="150px" :model="form" :rules="rules">
      <el-form-item :label="__('管理员账号')" prop="user_account">
        <el-input
          v-model="form.user_account"
          clearable
          :placeholder="__('管理员信息账号')"
          :readonly="isReadOnly"
          :style="{ width: '48%' }"
        />
        <el-input
          v-model="form.user_password"
          clearable
          :placeholder="__('密码为空，则使用已经存在的用户，否则新创建。')"
          style="margin-left: 10px"
          :style="{ width: '48%' }"
        />
      </el-form-item>
      <el-form-item :label="__('店铺信息')" prop="store_name">
        <el-input
          v-model="form.store_name"
          clearable
          :placeholder="__('请输入店铺名称')"
          :style="{ width: '100%' }"
        />
      </el-form-item>
      <el-form-item :label="__('店铺等级')" prop="store_grade_id">
        <el-select
          v-model.trim="form.store_grade_id"
          clearable
          :placeholder="__('店铺等级')"
          :style="{ width: '48%' }"
        >
          <el-option
            v-for="item in options"
            :key="item.store_grade_id"
            :label="item.store_grade_name"
            :value="item.store_grade_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="__('经营分类')" prop="store_category_id">
        <el-select
          v-model.trim="form.store_category_id"
          clearable
          :placeholder="__('经营分类')"
          :style="{ width: '48%' }"
        >
          <el-option
            v-for="item in classifyData"
            :key="item.store_category_id"
            :label="item.store_category_name"
            :value="item.store_category_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="__('所属分站')" prop="subsite_id">
        <el-select
          v-model.trim="form.subsite_id"
          clearable
          :placeholder="__('所属分站')"
          :style="{ width: '48%' }"
        >
          <el-option
            v-for="item in siteOptions"
            :key="item.subsite_id"
            :label="item.subsite_name"
            :value="item.subsite_id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否自营" prop="store_is_selfsupport">
        <el-radio-group v-model="form.store_is_selfsupport" size="medium">
          <el-radio
            v-for="(item, index) in store_is_selfsupportOptions"
            :key="index"
            :disabled="item.disabled"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否零售" prop="store_type">
        <el-radio-group v-model="form.store_type" size="medium">
          <el-radio
            v-for="(item, index) in store_typeOptions"
            :key="index"
            :disabled="item.disabled"
            :label="item.value"
          >
            {{ item.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="线上线下" prop="store_o2o_flag">
        <el-radio-group v-model="form.store_o2o_flag" 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-item
        v-if="false"
        :label="__('商户线下编号')"
        prop="store_o2o_merchant_id"
      >
        <el-input
          v-model="form.store_o2o_merchant_id"
          clearable
          :placeholder="__('请输入商户线下编号')"
          :style="{ width: '100%' }"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{ __('取消') }}</el-button>
      <el-button :loading="saveLoading" type="primary" @click="save">
        {{ __('确定') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
// 商户-砍价
import { translateTitle as __ } from '@/utils/i18n'
import { doEdit, FindStoreLevel, storeSetUp } from '@/api/store/base'
import { GetStoreClassify } from '@/api/base/store/category'
import { getList as getSubsite } from '@/api/plantform/subsite'

export default {
  name: 'StoreBaseEdit',

  data() {
    return {
      options: [],
      classifyData: [],
      siteOptions: [],
      form: {
        store_is_open: 0,
        store_is_selfsupport: 1,
        store_type: 1,
        store_o2o_flag: 0,
        subsite_id: 0,
      },
      rules: {
        user_password: [
          {
            required: true,
            message: '请输入店铺管理员密码',
            trigger: 'blur',
          },
        ],
        store_name: [
          {
            required: true,
            message: '请输入店铺名称',
            trigger: 'blur',
          },
        ],
        user_account: [
          {
            required: true,
            message: '请输入管理员账号',
            trigger: 'blur',
          },
        ],
        store_grade_id: [
          {
            required: true,
            message: '请选择店铺等级',
            trigger: 'change',
          },
        ],
        store_category_id: [
          {
            required: true,
            message: '请选择经营分类',
            trigger: 'change',
          },
        ],
        store_is_selfsupport: [
          {
            required: true,
            message: '不能为空',
            trigger: 'change',
          },
        ],
        store_type: [
          {
            required: true,
            message: '不能为空',
            trigger: 'change',
          },
        ],
        store_o2o_flag: [
          {
            required: true,
            message: '不能为空',
            trigger: 'change',
          },
        ],
        subsite_id: [
          {
            required: true,
            message: '请选择所属分站',
            trigger: 'change',
          },
        ],
      },
      store_is_selfsupportOptions: [
        {
          label: this.__('平台自营'),
          value: 1,
        },
        {
          label: this.__('加盟商家'),
          value: 0,
        },
      ],
      store_typeOptions: [
        {
          label: this.__('零售店铺'),
          value: 1,
        },
        {
          label: this.__('供应商店铺'),
          value: 2,
        },
      ],
      store_o2o_flagOptions: [
        {
          label: this.__('线上店铺'),
          value: 0,
        },
        {
          label: this.__('线下门店'),
          value: 1,
        },
      ],
      title: '',
      dialogFormVisible: false,
      saveLoading: false,
    }
  },
  computed: {
    isReadOnly() {
      return this.form.store_id !== undefined
    },
  },
  created() {
    this.fetchdataFindStoreLevel()
    this.fetchdataGetStoreClassify()
    this.getSubsiteList()
  },
  methods: {
    __,
    async fetchdataFindStoreLevel() {
      await FindStoreLevel().then((res) => {
        this.options = res.data
      })
    },
    async fetchdataGetStoreClassify() {
      await GetStoreClassify().then((res) => {
        this.classifyData = res.data
      })
    },
    async getSubsiteList() {
      let param = {
        pageNum: 1,
        pageSize: 9999,
      }
      const { data } = await getSubsite(param)
      if (data) {
        this.siteOptions = data.items
      } else {
        this.siteOptions = []
      }
    },
    showEdit(row) {
      if (!row) {
        this.title = this.__('新增')
      } else {
        this.title = this.__('编辑')
        this.form = Object.assign({}, row)
      }
      this.dialogFormVisible = true
    },
    close() {
      this.form = {
        store_is_selfsupport: 1,
        store_type: 1,
        store_o2o_flag: 0,
        store_is_open: 0,
      }
      this.$refs['form'].resetFields()
      this.dialogFormVisible = false
    },
    save() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          if (this.form.store_id == undefined) {
            this.saveLoading = true
            const { msg, status } = await doEdit(this.form)
            this.saveLoading = false
            if (200 == status) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
            this.$emit('fetch-data')
          } else {
            this.saveLoading = true
            const { msg, status } = await storeSetUp(this.form)
            this.saveLoading = false
            if (200 == status) {
              this.$baseMessage(msg, 'success')
            } else {
              this.$baseMessage(msg, 'error')
            }
            this.$emit('fetch-data')
          }
          this.close()
        }
      })
    },
  },
}
</script>
