<template>
  <div>
    <!-- <a-input-search v-if="kind === 'material'"  v-model="names" placeholder="请选择" @search="onSearch"></a-input-search> -->
    <a-select
      :value="value"
      v-if="kind === 'material'"
      placeholder="编码 名称"
      show-search
      style="width: 100px"
      dropdownClassName="drop-down-Style"
      option-label-prop="value"
      :dropdownMatchSelectWidth="false"
      :default-active-first-option="false"
      :show-arrow="false"
      :filter-option="false"
      :not-found-content="fetching ? undefined : null"
      @search="fetchUser"
      @change="handleChange"
      @focus="loadData()"
    >
      <div slot="notFoundContent">
        <a-spin v-if="fetching" size="small" />
      </div>
      <div slot="dropdownRender" slot-scope="menu">
        <v-nodes :vnodes="menu" />
        <a-divider style="margin: 4px 0" />
        <div
          @mousedown="(e) => e.preventDefault()"
          style="display: flex; justify-content: space-between; margin: 0 5px"
        >
          <a-pagination
            :default-current="6"
            :current.sync="queryParam.current"
            :pageSize.sync="queryParam.pageSize"
            @change="changeCurrent"
            :total="queryParam.total"
            style="margin-bottom: 4px"
          />
          <a-button type="primary" @click="confirmSelected">确定</a-button>
        </div>
      </div>
      <a-select-opt-group v-if="materailList.length">
        <span slot="label">
          <div class="select-option">
            <a-checkbox style="margin-right:5px"  :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">             
            </a-checkbox>
            <span class="mr10" style="width: 100px; font-size: 16px">物料编码</span>
            <span class="mr10" style="width: 400px; font-size: 16px;">名称</span>
            <span class="mr10" style="width: 100px; font-size: 16px">类别</span>
            <span class="mr10" style="width: 100px; font-size: 16px">单位</span>
            <span class="mr10" style="width: 100px; font-size: 16px">多属性</span>
            <span class="mr10" style="width: 100px; font-size: 16px">库存</span>
            <span class="mr10" style="width: 100px; font-size: 16px">扩展信息</span>
          </div>
        </span>

        <a-select-option
          style="width: 400px"
          :value="item.mBarCode"
          v-for="(item, index) in materailList"
          :key="item.id"
        >
          <div class="select-option">
            <div style="margin-left: -8px;">
              <a-checkbox
                style="margin-right:5px"
                :id="item.mBarCode"
                :key="index"
                :checked="checkedList.indexOf(item.mBarCode) !== -1"
                @change="(e) => onchange(e, item)"
                @click.stop.native="() => {}"
              >
              </a-checkbox>
            </div>
            <span class="mr10" style="width: 100px">{{ item.mBarCode }}</span>
            <span class="mr10" style="width: 400px;width-space:nowrap;text-overflow:ellipsis;overflow: hidden;white-space:nowrap;">{{ item.name }}</span>
            <span class="mr10" style="width: 100px">{{ item.categoryName }}</span>
            <span class="mr10" style="width: 100px">{{ item.unit }}</span>
            <span class="mr10" style="width: 100px">{{ item.sku }}</span>
            <span class="mr10" style="width: 100px">{{ item.stock }}</span>
            <span class="mr10" style="width: 100px">{{ item.expand }}</span>
          </div>
        </a-select-option>
      </a-select-opt-group>
    </a-select>
    <a-input-search
      v-if="kind === 'batch' || kind === 'sn'"
      v-model="names"
      placeholder="请选择"
      readOnly
      @search="onSearch"
    ></a-input-search>
    <j-select-material-modal
      v-if="kind === 'material'"
      ref="selectModal"
      :modal-width="modalWidth"
      :rows="rows"
      :multi="multi"
      :bar-code="value"
      @ok="selectOK"
      @initComp="initComp"
    />
    <j-select-batch-modal
      v-if="kind === 'batch'"
      ref="selectModal"
      :modal-width="modalWidth"
      :rows="rows"
      :multi="multi"
      :bar-code="value"
      @ok="selectOK"
      @initComp="initComp"
    />
    <j-select-sn-modal
      v-if="kind === 'sn'"
      ref="selectModal"
      :modal-width="modalWidth"
      :rows="rows"
      :multi="multi"
      :bar-code="value"
      @ok="selectOK"
      @initComp="initComp"
    />
  </div>
</template>

<script>
import JSelectMaterialModal from './modal/JSelectMaterialModal'
import JSelectBatchModal from './modal/JSelectBatchModal'
import JSelectSnModal from './modal/JSelectSnModal'
import { filterObj, getMpListShort } from '@/utils/util'
import { getMaterialByBarCode, getMaterialBySelect } from '@/api/api'
import Vue from 'vue'

export default {
  name: 'JSelectList',
  components: {
    JSelectMaterialModal,
    JSelectBatchModal,
    JSelectSnModal,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes,
    },
  },
  props: {
    modalWidth: {
      type: Number,
      default: 1300,
      required: false,
    },
    value: {
      type: String,
      required: false,
    },
    disabled: {
      type: Boolean,
      required: false,
      default: false,
    },
    rows: {
      type: String,
      required: false,
    },
    kind: {
      type: String,
      required: false,
    },
    multi: {
      type: Boolean,
      default: true,
      required: false,
    },
  },
  data() {
    return {
      ids: '',
      names: '',
      materailList: [],
      fetching: false,
      queryParam: {
        q: '',
        current: 1,
        pageSize: 10,
        total: 0,
      },
      checkedList: [],
      checkAll: false,
      indeterminate: false,
    }
  },
  mounted() {
    this.ids = this.value
    // this.loadData()
  },
  watch: {
    value(val) {
      this.ids = val
    },
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  methods: {
    onCheckAllChange(e) {
      Object.assign(this, {
        checkedList: e.target.checked ? this.materailList.map((item) => item.mBarCode) : [],
        indeterminate: false,
        checkAll: e.target.checked,
      })
    },
    onchange(event, item) {
      let index = this.checkedList.indexOf(item.mBarCode)
      if (index !== -1) {
        this.checkedList.splice(index, 1)
      } else {
        this.checkedList.push(item.mBarCode)
      }
      this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.materailList.length
      this.checkAll = this.checkedList.length === this.materailList.length
    },
    confirmSelected() {
      let ids = this.checkedList.join(',')
      this.$emit('change', ids)
      this.open = false
      this.loadData()
    },
    changeCurrent(current) {
      this.queryParam.current = current
      this.loadData()
    },
    fetchUser(value) {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.queryParam.q = value
        this.loadData(1)
      }, 800)
    },
    getQueryParams() {
      let param = {}
      param.mpList = getMpListShort(Vue.ls.get('materialPropertyList')) //扩展属性
      param.page = this.queryParam.current
      param.rows = this.queryParam.pageSize
      param.q = this.queryParam.q
      return filterObj(param)
    },
    async loadData(arg) {
      if (arg === 1) {
        this.queryParam.current = 1
      }
      this.fetching = true
      let params = this.getQueryParams() //查询条件
      await getMaterialBySelect(params)
        .then((res) => {
          if (res) {
            this.checkedList = []
            this.materailList = res.rows
            this.queryParam.total = res.total || 0
          }
        })
        .finally(() => {
          this.fetching = false
        })
    },
    initComp(name) {
      this.names = name
    },
    onSearch() {
      if (this.kind === 'material') {
        let param = {
          barCode: this.names,
          mpList: getMpListShort(Vue.ls.get('materialPropertyList')), //扩展属性
          prefixNo: this.prefixNo,
        }
        getMaterialByBarCode(param).then((res) => {
          if (res && res.code === 200) {
            let mList = res.data
            if (mList && mList.length === 1) {
              //如果条码可以查到商品，则直接加载，不用弹窗再选择
              this.$emit('change', this.names)
            } else {
              this.$refs.selectModal.showModal(this.names)
            }
          }
        })
      } else {
        this.$refs.selectModal.showModal()
      }
    },
    selectOK(rows, idstr) {
      console.log('选中id', idstr)
      if (!rows) {
        this.ids = ''
      } else {
        this.names = idstr
        this.ids = idstr
      }
      this.$emit('change', this.ids)
    },
    handleChange(value) {
      this.names = value
      this.$emit('change', value)
    },
    focus() {
      if (this.names) {
        this.queryParam.q = ''
        this.loadData()
      }
    },
  },
}
</script>

<style  lang="less"  scoped>
/deep/ .drop-down-Style {
  width: auto;
}
.select-option {
  display: flex;
  justify-content: space-between;
  padding-top: 5px;
  width: 1000px;
}
.mr10 {
  margin-right: 10px;
}
</style>