<!--version: 4, 店铺选择器-->
<!--版本更新内容：添加prop属性，修复多选-->

<template>
  <div>
    <el-input
      v-if="multiple"
      rows="1"
      type="textarea"
      :value="inputBindValue"
      @focus="openDialog"
      :size="size"
      :disabled="disabled"
      readonly
      :placeholder="placeholder"/>
    <el-input
      v-else
      :value="inputBindValue"
      @focus="openDialog"
      :size="size"
      :disabled="disabled"
      readonly
      :placeholder="placeholder">
      <template #suffix>
        <div class="input-suffix"></div>
        <i class="el-icon-arrow-right"/>
      </template>
    </el-input>

    <store-dialog
      :show.sync="dialogShow"
      :query="query"
      :multiple="multiple"
      :init-select="selected"
      @select="onSubmit"
      :prop="prop"
      :title="title"/>
  </div>
</template>

<script>
import {isDeepEqual} from "@/utils";
import StoreDialog from '@/components/Business/Store/StoreDialog.vue'
import { listStoreByIds } from '@/api/ss/store'
import { mapGetters } from 'vuex'
import { UserType } from '@/utils/constants'
import { mchListStoreByIds } from '@/api/mch/store'

export default {
  name: 'StoreInput',
  components: { StoreDialog },
  props:{
    // 标题
    title: {
      type: String,
      default: "选择店铺"
    },
    placeholder: {
      type: String,
      default: "点击选择店铺",
    },
    // 展示值的属性
    showProp: {
      type: String,
      default: 'name'
    },
    // 选择的属性值
    prop: {
      type: String,
      default: 'storeId'
    },
    // 是否多选
    multiple: {
      type: Boolean,
      default: false,
    },
    // 双向绑定的值(为id)
    value: {
      type: [Array, String, Number],
      default: null
    },
    // 查询条件
    query: {
      type: Object,
      default: () => ({})
    },
    // 打开弹窗前
    beforeOpen: {
      type: Function,
      default: () => {
        return true;
      }
    },
    // 关闭弹窗前
    beforeClose: {
      type: Function,
      default: () => {
        return true;
      }
    },
    // 大小
    size: {
      type: String,
      default: "medium"
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 对象处理器，参数类型：对象，返回值类型：字符串
    objectParser: {
      type: Function,
      default: (obj) => {
        return JSON.stringify(obj);
      }
    },
  },
  data() {
    return {
      selected: [], // 当前选中的值
      dialogShow: false,  // 展示对话框
    }
  },
  computed: {
    ...mapGetters(['userType']),
    // 显示绑定的值
    inputBindValue() {
      if (this.selected == null || this.selected.length === 0) {
        return null;
      }
      return this.selected.map(item => item[this.showProp]).join(",");
    }
  },
  watch: {
    value(nv, ov) {
      this.loadSelected(nv);
    }
  },
  created() {
    this.loadSelected(this.value);
  },
  methods: {
    // 加载选中的值
    loadSelected(ids) {
      if (ids == null || ids.length === 0) {
        this.selected = [];
        return;
      }
      if (ids instanceof Array) {
        this.doLoad(ids);
      } else {
        this.doLoad([ids]);
      }
    },
    // 加载选中值
    doLoad(ids) {
      if (this.userType === UserType.APP) {
        mchListStoreByIds(ids).then(res => {
          this.selected = res.data;
        })
      } else {
        listStoreByIds(ids).then(res => {
          this.selected = res.data;
        })
      }
    },
    // 修改值
    inputValue(val){
      this.$emit('input', val);
    },
    // 确定
    onSubmit(selected){
      let value = null;
      if (this.multiple) {
        value = selected.map(item => item[this.prop]);
      } else {
        value = selected[this.prop];
      }
      this.$emit('submit', selected);
      if (!isDeepEqual(this.value, value)) {
        this.$emit('change', selected);
      }
      this.inputValue(value);
      this.closeDialog();
    },
    closeDialog() {
      if (this.beforeClose()) {
        this.dialogShow = false;
      }
    },
    // 打开对话框
    openDialog(){
      if (this.beforeOpen()) {
        this.dialogShow =  true;
      }
    }
  }
}
</script>
