<template>
  <div>
    <el-select ref="projectSelect" v-model="projectSelected" clearable @blur="$emit('input-blur', $event)">
      <el-option v-for="project in projectList" :key="project.id" :label="project.name" :value="project.id" v-show="false"/>
      <el-table v-loading="loading" :data="projectList" :stripe="true" :show-overflow-tooltip="true" @row-click="rowClick">
        <el-table-column label="序号" align="center">
          <template scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name" :show-overflow-tooltip="true" width="180" />
        <el-table-column label="规格" prop="spec" :show-overflow-tooltip="true" width="180"/>
        <el-table-column label="商品编码" prop="code" :show-overflow-tooltip="true" width="180"/>
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
      />
    </el-select>
  </div>
</template>

<script>

import {getRepairProjectPage} from "@/api/repair/project";

export default {
  name: "ProjectChoose",
  data() {
    return {
      projectSelected: null,
      projectList: [],
      loading: false,
      total: 0,
      queryParams:{
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  mounted() {
    this.listPage()
  },
  methods: {
    async listPage(){
      try {
        this.loading = true
        const res = await getRepairProjectPage(this.queryParams)
        this.projectList = res.data.records
        this.total = res.data.total
      }finally {
        this.loading = false
      }
    },
    rowClick(row){
      this.$emit("selected", row)
      this.$refs.projectSelect.blur()
    }
  }
}
</script>

<style scoped lang="scss">

</style>
