<!--version: 3, 设备选择器-->

<template>
  <div>
    <template v-if="multiple">
      <el-tag
        v-for="(item,index) of selected"
        :key="item.channelId"
        size="small"
        style="margin-right: 4px"
        disable-transitions
        :closable="!disabled"
        @close="onCloseSelected(index)"
      >{{item.name}}({{typeName(item.type)}})</el-tag>
      <el-tag style="cursor: not-allowed" size="small" type="info" v-if="disabled">+</el-tag>
      <el-tag style="cursor: pointer" size="small" @click="openDialog" type="success" v-else>+</el-tag>
    </template>
    <el-input
      v-else
      :value="inputBindValue"
      @focus="openDialog"
      :size="size"
      :disabled="disabled"
      readonly
      :placeholder="placeholder">
      <template #suffix>
        <i class="el-icon-arrow-right"/>
      </template>
    </el-input>

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

<script>
import { isDeepEqual, isEmpty } from '@/utils'
import AppDialog from '@/components/Business/App/AppDialog.vue'
import { listAppByIds } from '@/api/bst/app'
  
export default {
  name: 'AppInput',
  components: { AppDialog },
  dicts: ['app_type'],
  props:{
    // 标题
    title: {
      type: String,
      default: "选择应用"
    },
    placeholder: {
      type: String,
      default: "点击选择应用",
    },
    // 展示值的属性
    showProp: {
      type: String,
      default: 'name'
    },
    // 选择的属性值
    prop: {
      type: String,
      default: 'id'
    },
    // 是否多选
    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: {
    // 显示绑定的值
    inputBindValue() {
      if (this.selected == null || this.selected.length === 0) {
        return null;
      }
      return this.selected.map(item => item[this.showProp]).join(",");
    },
    typeName() {
      return (type) => {
        return this.dict.type.app_type.find(item => item.value === type).label;
      }
    }
  },
  watch: {
    value(nv, ov) {
      this.loadSelected(nv);
    }
  },
  created() {
    this.loadSelected(this.value);
  },
  methods: {
    isEmpty,
    onCloseSelected(index) {
      this.selected.splice(index, 1);
      this.onSubmit(this.selected);
    },
    // 加载选中的值
    loadSelected(ids) {
      if (ids == null || ids.length === 0) {
        this.selected = [];
        return;
      }
      if (ids instanceof Array) {
        this.doLoad(ids);
      } else {
        this.doLoad([ids]);
      }
    },
    // 加载选中值
    doLoad(ids) {
      listAppByIds(ids).then(res => {
        this.selected = res.data;
      })
    },
    // 修改值
    inputValue(val){
      this.$emit('input', val);
    },
    // 确定
    onSubmit(selected){
      console.log("selected", 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>
