<template>
  <el-dialog title="新增门店" :visible.sync="show" width="600px" :before-close="handleClose">
    <el-form :model="form" ref="form">
      <el-form-item label="门店范围：">
        <dm-store-selector ref="se" :options="[5]" @saving="saving" :uuid.sync="uuid"></dm-store-selector>
      </el-form-item>
    </el-form>
    <span slot="footer">
      <el-button @click="handleClose" :loading="loadings">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="loadings">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addStore } from '@/service/api/cardApi.js';
export default {
  name: 'addStoreDialog',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loadings: false,
      form: {},
      storedata: [],
      uuid: ''
    };
  },
  methods: {
    handleClose() {
      this.uuid = '';
      this.$nextTick(_ => {
        this.$emit('update:show', false);
        this.$emit('refresh');
      });
    },
    async saving() {
      this.storedata = await this.$refs.se.getList();
    },
    submit() {
      this.loadings = true;
      if (!this.storedata) {
        this.$tips({ type: 'waring', message: '请选择门店' });
        return;
      }
      this.$refs.form.validate(async valid => {
        if (valid) {
          let res = this.storedata.map(item => {
            let para = {
              storeId: item.id,
              storeName: item.name
            };
            return para;
          });
          await addStore({ storeList: res })
            .then(res => {
              this.loadings = false;
              this.handleClose();
            })
            .catch(err => {
              this.$tips({ type: 'error', message: err.message || '操作失败' });
              this.loadings = false;
            });
        } else {
          this.loadings = false;
          this.$tips({ type: 'waring', message: '请完善表单' });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.el-dialog__footer {
  border-top: none;
  padding: 20px 20px 20px 0;
}
</style>
