<template>
  <div style="width: 100%">
    <el-input  placeholder="请选择" :size="size" :disabled="disabled"  :readonly="true" style="line-hight:40px;width: 100%" v-model="name" class="input-with-select">
      <template #append>
		  <el-button :disabled="disabled"  :readonly="readonly" @click="openClient">查询</el-button>
	  </template>
    </el-input>
    <work-client-info-select-dialog ref="workClientInfoSelect" @doSubmit="selectClientToInput"></work-client-info-select-dialog>
  </div>
</template>
<script>
  import WorkClientInfoSelectDialog from './WorkClientInfoSelectDialog'
  import WorkClientService from '@/api/sys/WorkClientService'
  export default {
    data () {
      return {
        name: '',
        labelValue: '',
        selectData: [],
        rosterData: []
      }
    },
    props: {
      limit: Number,
      value: String,
      size: {
        type: String,
        default: () => { return 'small' }
      },
      readonly: {
        type: Boolean,
        default: () => { return false }
      },
      disabled: {
        type: Boolean,
        default: () => { return false }
      }
    },
    components: {
      WorkClientInfoSelectDialog
    },
    workClientService: null,
    beforeCreate () {
      this.workClientService = new WorkClientService()
    },
    watch: {
      value: {
        handler (newVal) {
          if (newVal) {
			  this.workClientService.componentById(newVal).then((data) => {
				  if (data && data.id !== '') {
					  this.name = data.name
				  }
			  })
          }
        },
        immediate: true,
        deep: false
      }
      // selectData: {
      //   handler (newVal) {
      //     this.name = newVal.map(client => { return client.name }).join(',')
      //   },
      //   immediate: false,
      //   deep: false
      // }
    },
    methods: {
      selectClientToInput (clientList) {
        this.selectData = clientList
        this.labelValue = clientList.map(client => { return client.id }).join(',')
        this.name = clientList.map(client => { return client.name }).join(',')
        this.$emit('getValue', this.labelValue, this.name)
      },
      openClient () {
        this.$refs.workClientInfoSelect.init()
      }
    }
  }
</script>
<style>
  .el-form-item__content .el-input-group {
    vertical-align: middle;
  }
  .el-tag + .el-tag {
    margin-left: 5px;
    margin-bottom: 5px;
  }
</style>


