<template>
  <div>
    <el-input
      v-model="inputValue"
      class="input-with-select"
      placeholder="请输入查询关键字"
      @keydown.enter.native="handleQuery"
    >
      <el-select
        slot="prepend"
        v-model="selectedOption"
        :disabled="disabled"
        class="my_select"
        placeholder="请选择"
        @change="select"
      >
        <el-option
          v-for="item in queryOptions"
          :key="item.value"
          :disabled="disabled"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button
        v-if="selectedOption == 'idcard'"
        slot="append"
        icon="el-icon-postcard"
        size="medium"
        @click="readCard"
      ></el-button>
    </el-input>
  </div>
</template>

<script>
import request from '@/utils/request'
import { readCard } from '@/api/client/ReadCard'
import ClipboardJS from 'clipboard'

export default {
  name: 'DynamicQuery',
  props: {
    //页面名称(必填)
    pageName: {
      tyle: String,
      required: true
    },
    defaultOption: {
      tyle: String,
      required: true
    },
    //是否禁用,支持固定查询条件
    disabled: {
      tyle: Boolean,
      required: false
    }
  },
  data() {
    return {
      selectedOption: this.defaultOption,
      inputValue: '',
      queryOptions: [],
      isShowReadCard: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    //通过页面名称获取查询选项
    getData() {
      request({
        url: '/mock/queryOptions',
        method: 'get',
        data: { pageName: this.pageName }
      }).then((res) => {
        //默认传入的选项为lable和value，可以传入disabled禁用某个选项，例{label:'身份证'，value:'1',disable:true}
        if (res && res.length > 0) {
          this.queryOptions = res
        } else {
          this.$message.error('查询病人信息的公共控件对象注册失败')
        }
      })
    },
    getSelect() {
      return { option: this.selectedOption, value: this.inputValue }
    },
    select(value) {
      if (this.queryOptions.length > 0) {
        let option = this.queryOptions.find((v) => v.value === value)
        if (option && option.isShowReadCard != 'undefined') {
          this.isShowReadCard = option.isShowReadCard
          this.$emit('select', value)
        }
      }
    },
    readCard() {
      readCard().then((res) => {
        this.$emit('readCardCallBack', res)
      })
    },
    handleQuery() {
      this.$emit('handleQuery', this.inputValue)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input {
  width: 300px;
}

.my_select {
  width: 100px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
