<template>
  <span class="public-query">
    <!--已有信息超过两条则显示提示框-->
    <el-tooltip v-if="text && text.split(',').length > 1" effect="dark" placement="top">
      <div slot="content">
        <template v-for="(item, index) in text.split(',')">
          <div :key="index">{{item}}</div>
        </template>
      </div>
      <el-input
        :disabled="isDisabled"
        readonly
        v-model="text"
        @focus="toQuery"
      >
        <i slot="suffix" class="el-input__icon el-icon-search" :class="isDisabled ? 'disabled' : ''" @click="toQuery"></i>
      </el-input>
    </el-tooltip>
    <!--未超两条则不显示提示框-->
    <el-input
      v-else
      :disabled="isDisabled"
      readonly
      v-model="text"
      @focus="toQuery"
    >
      <i slot="suffix" class="el-input__icon el-icon-search" :class="isDisabled ? 'disabled' : ''" @click="toQuery"></i>
    </el-input>

    <el-dialog
      width="70%"
      append-to-body
      :visible="visible"
      @close="close"
    >
      <div slot="title">{{title}}</div>
      <div>
        <QueryList
          :baseUrl="baseUrl"
          :cfgKey="cfgKey"
          :selected="selected"
          :single="single"
          :queryParams="queryParams"
          :disabledQueryParams="disabledQueryParams"
          :queryUrl="queryUrl"
          @close="close"
          @confirm="confirm"
        ></QueryList>
      </div>
    </el-dialog>
  </span>

</template>

<script>
import QueryList from './components/QueryList'

export default {
  name: 'PublicQuery',
  // 从 elForm 注入 disabled 属性, 模仿 el-form 对正常表单的 disabled 处理
  inject: {
    elForm: {
      from: 'elForm',
      default: false,
    }
  },
  props: {
    title: String, // 弹窗标题
    baseUrl: String, // 请求模块链接
    cfgKey: String, // 查询类型
    textField: [String, Boolean, undefined], // 文字显示值
    valueField: [String, Number], // 后台逻辑值
    rowData: Object, // 单选状态时的选中数据
    // 是否为单选状态, 默认是查询模式为多选, 新增时传single为单选
    single: {
      type: Boolean,
      default: false,
    },
    // 禁用选项, 禁用时不可弹窗
    disabled: {
      default: () => {
        return false
      },
    },
    // 前置属性
    before: {
      type: Function,
      default: () => false
    },
    // 触发属性
    trigger: {
      type: Boolean,
      default: false
    },
    // 个性请求接口
    queryUrl: String,
    // 确认前属性
    beforeConfirm: {
      type: Function,
      default: () => false
    },
  },
  computed: {
    isDisabled () {
      if (this.elForm.$props) {
        // 可能存在不使用form包裹的情况
        return this.elForm.$props.disabled || this.disabled
      } else {
        return this.disabled
      }
    },
    // 显示文字
    text () {
      if (this.textField !== undefined && this.textField !== false) {
        return this.textField
      } else if (this.field !== '') {
        return this.field
      } else if (this.valueField !== undefined) {
        return this.valueField
      } else {
        return ''
      }
    },
  },
  watch: {
    valueField (val) {
      if (!val) { // reset表单时, val为undefined
        this.field = ''
      }
    },
    trigger (val) {
      val && this.toQuery()
    }
  },
  components: {
    QueryList
  },
  data () {
    return {
      field: '', // 显示文字
      visible: false, // 弹窗显示标识
      selected: [], // 回显列表
      queryParams: {}, // 父组件传查询参数
      disabledQueryParams: {}, // 禁用的查询参数
    }
  },
  methods: {
    toQuery () {
      const before = this.before()
      if (before !== undefined) { // 因 before()在不传参数的时候, 默认返回false, 而有参数时校验失败返回undefined
        if (before.queryParams) {
          this.queryParams = before.queryParams
          this.disabledQueryParams = before.disabledQueryParams
        }
        !this.isDisabled && (this.visible = true)
      }
    },
    // 确定按钮
    async confirm (detail) {
      if (this.queryUrl && this.queryUrl.includes('outboundShippmentService/queryWmsCustomer')) {
        await this.beforeConfirm(detail.selected)
          .then(data => {
            if (data === true) {
              this.submit(detail)
            }
          })
      } else {
        this.submit(detail)
      }
    },
    // 数据提交给父组件
    submit (detail) {
      this.selected = detail.selected // 缓存已选内容, 便于重新进入查询回显
      let valueField, textField
      if (this.single) {
        textField = this.selected[detail.config.textField]
        valueField = this.selected[detail.config.valueField]
        this.$emit('update:rowData', this.selected) // 返回选中的整个对象
      } else {
        textField = this.selected.map(item => item[detail.config.textField]).join(',')
        valueField = this.selected.map(item => item[detail.config.valueField]).join(',')
      }
      this.field = textField
      // ##注意: 此处 'update:valueField' 相当于直接修改了 props 值, 需要父组件 :valueField.sync 才可以, 详见 vue .sync 文档
      // 有时会不传 textField, 会导致父组件报错, TypeError: Cannot use 'in' operator to search for 'undefined' in undefined, 所以需要父组件在没有textField时传false来区分
      ;(this.textField !== false) && this.$emit('update:textField', textField)
      this.$emit('update:valueField', valueField)
      this.$emit('change', this.selected)
      this.close()
    },
    // 关闭
    close () {
      this.visible = false
    }
  }
}
</script>

<style lang="scss">
.public-query {
  input, .el-input__icon {
    &:hover {
      cursor: pointer;
    }
  }
}
</style>
