<template>
  <el-select
    v-model="drugsId"
    @change="handleDrugsId($event)"
    filterable
    remote
    size="mini"
    reserve-keyword
    :disabled="disabled"
    placeholder="药品名称"
    :remote-method="remoteMethod"
    :loading="loading">
    <el-option disabled value="-1">
      <table class="select-table select-table-head">
        <tr>
          <td>名称</td>
          <td>规格</td>
          <td>产地</td>
          <td>零售价</td>
        </tr>
      </table>
    </el-option>
    <el-option
      v-for="(item,index) in options"
      :key="index"
      :value="index"
      :label="item.drugsName"
    >
      <table class="select-table">
        <tr>
          <td>{{ item.drugsName }}</td>
          <td>{{item.drugsSpecsName}}</td>
          <td>{{item.placeName}}</td>
          <td>{{item.retail||item.retailPrice}}</td>
        </tr>
      </table>
    </el-option>
  </el-select>
</template>


<script>
import { listAll } from "@/api/drugs/drugs";
import { listSpecs } from "@/api/drugs/specs";
import { getDrugs, getOneGroup } from "@/api/inventory/inventory";
export default {
	props: {
    info: {
      type: Object,
      default: () => {}
    },
		index: {},
		pharmacyId: {},
		disableDetails: {
			type: Boolean,
			default: false
		},
    disabled: {
    	type: Boolean,
    	default: false
    }
	},
	data () {
		return {
      loading: false,
			drugsId: '',
			drugsType: '',
      drugsArr: [],
			options: [],
			selectOne: '',
			name: ''
		}
	},
  watch: {
    drugsId (val) {
      ////console.log('this.selectOne', this.selectOne)
      //this.selectOne.drugsId = this.selectOne.drugsId
      getOneGroup({
        pharmacyId: localStorage.getItem('pharmacyId'),
        drugsId: this.selectOne.drugsId,
        specsId: this.selectOne.specsId,
        priceId: this.selectOne.priceId
      }).then(res => {
        if (res.code == 200) {
          this.selectOne.inventory = res.data ? res.data.stock : 0
          this.selectOne.site = res.data ? res.data.site : ''
          this.selectOne.oldRetailPrice = this.info?.oldRetailPrice
          this.$emit('selectChange', {
            //val: this.drugsId,
            //drugsType: this.drugsType,
            index: this.index,
            data: this.selectOne
          })
        }
      })
    }
  },
	mounted () {
		//获取药品名称
    this.getDataList()
	},
	methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        listAll({
          name: query
        }).then((res) => {
          this.loading = false
          this.options = res.data
        })
      } else {
        this.options = [...this.drugsArr]
      }
    },
		getDataList () {
    	listAll({
				name: this.name
			}).then((res) => {
	      this.drugsArr = res.data;
        this.options = [...this.drugsArr]
        if (this.info&&this.info.drugsId) {
          this.selectOne =  this.drugsArr.find(v => v.drugsId == this.info.drugsId && v.specsId == this.info.specsId && v.placeName == this.info.priceName)
          this.drugsId = this.drugsArr.findIndex(v => v.drugsId == this.info.drugsId && v.specsId == this.info.specsId && v.placeName == this.info.priceName)
        }
	    })
		},
		filterFn (val) {
			this.name = val
			//this.drugsId = val
			this.getDataList()
		},
		async handleDrugsId(e) {
      this.selectOne = this.options[e]
      this.drugsId = e
      // let newArr = this.drugsArr.filter((item) => {
      //   return item.drugsId === e;
      // });
      // this.drugsId = e;
      // //console.log('newArr', newArr)
      // this.drugsType = newArr[0].drugsType
      //this.getListSpecs();
    },
    //获取药品规格
    /*getListSpecs() {
    	var drugsId = this.selectOne.drugsId
      listSpecs({ drugsId }).then((res) => {
	      
      });
    },*/
	}
}
</script>

<style scoped>
.select-table-head { background-color: #17C7B1; color: #fff; }
</style>