<template>
  <el-select v-model="partSelected" ref="selectTable" clearable :style="'width: ' + selectWidth" @blur="$emit('input-blur', $event)">
    <el-option style="display: none" v-for="part in partList" :key="part.id" :label="part.name" :value="part.id"/>
    <el-table :data="partList" style="width: 100%" v-loading="loading" @row-click="handleSelectionChange">
      <el-table-column label="序号" align="center" width="80">
        <template scope="scope">
          <span>{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="商品名称" prop="name" width="120"/>-->
      <el-table-column
        width="180"
        align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="queryParams.name"
            size="mini"
            @keyup.enter.native="listPart"
            placeholder="输入关键字搜索"/>
        </template>
        <template slot-scope="scope">
          {{scope.row.name}}
        </template>
      </el-table-column>
      <el-table-column label="规格" prop="model" width="120"/>
      <el-table-column label="商品编码" prop="code" width="120"/>
      <el-table-column label="可用库存" prop="stock" width="80"/>
      <el-table-column label="成本" prop="price" width="80"/>
    </el-table>
    <pagination @pagination="listPart" v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
    />
  </el-select>
</template>

<script>

import {getWaresPage} from "@/api/repair/wares";

export default {
  name: "PartChoose",
  props: {
    selectWidth: {
      type: String,
      default: "45rem"
    }
  },
  data() {
    return {
      partSelected: null,
      partList: [
        {
          id: 1,
          tenantId: 1,
          barCode: "12344564632463",
          code: "12312312",
          name: "测试1",
          model: "12321",
          price: "100",
          type: "不知道",
          unit: "双",
          warehouse: "6335b519fde3cabf298e763bc1c38df1",
          miniStock: 100,
          maxStock: 100,
          stock: 20,
          img: '',
          attribute: "123213123",
          corpId: 1,
          coverImage: '',
          carModel: "大车",
          remark: "没有",
        },
        {
          id: 2,
          tenantId: 1,
          barCode: "12344564632463",
          code: "12312312",
          name: "测试2",
          model: "12321",
          price: "10",
          type: "不知道",
          unit: "个",
          warehouse: "6335b519fde3cabf298e763bc1c38df1",
          miniStock: 10,
          maxStock: 10,
          stock: 5,
          img: '',
          attribute: "123213123",
          corpId: 1,
          coverImage: '',
          carModel: "大车",
          remark: "没有",
        }
      ],
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        name:undefined
      },
      total: 2,
      loading: true
    }
  },
  mounted() {
    this.queryParams={
      pageNo: 1,
      pageSize: 10,
      name:undefined
    }
    this.listPart()
  },
  methods: {
    // TODO 获取商品信息
    async listPart() {
      try{
        this.loading = true
        const res = await getWaresPage(this.queryParams)
        this.partList = res.data.records
        this.total = res.data.total
      }finally {
        this.loading = false
      }
    },
    handleSelectionChange(data) {
      data = {
        ...data,
        wareId: data.warehouse
      }
      this.$emit("input", data)
      this.$emit("selected", data)
      this.$refs.selectTable.blur()
    }
  }
}
</script>

<style scoped lang="scss">
.pagination-container {
  margin: 0 auto !important;
  padding: 0 !important;
}
</style>
