<template>
  <div>
    <van-field
      readonly
      clickable
      :name="item.props[0].label"
      :required="item.props[0].required"
      :value="item.props[0].valueName"
      :label="item.props[0].label"
      right-icon="arrow"
      :placeholder="`点击选择${item.props[0].label}`"
      :rules="[{ required: item.props[0].required, message: `请选择${item.props[0].label}` }]"
      @click="clickEngineer"
    />
    <van-field
      v-model="item.props[1].value"
      :required="item.props[1].required"
      rows="2"
      autosize
      :name="item.props[1].label"
      :label="item.props[1].label"
      type="textarea"
      :placeholder="`请输入${item.props[1].label}`"
      show-word-limit
      :rules="[{ required: item.props[1].required, message: `请输入${item.props[1].label}` }]"
    />
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div class="search-box">
        <div class="search-header">
          <van-search
            v-model="searchValue"
            show-action
            placeholder="请输入工程师姓名"
            @search="onSearch"
          >
            <template #action>
              <van-button
                type="primary"
                style="height: 32px;"
                @click="onSearch(1)"
              >搜索</van-button>
            </template>
          </van-search>
        </div>
        <div class="search-content">
          <div style="height: 1.7rem;" />
          <van-pull-refresh
            v-model="refreshing"
            success-text="刷新成功"
            @refresh="onRefresh"
          >
            <van-list
              v-model="finishedLoading"
              :immediate-check="false"
              :finished="finishedOver"
              :offset="10"
              finished-text="没有更多了 "
              @load="onLoad"
            >
              <van-cell
                v-for="(listItem, index) in apporvalList"
                :key="index"
                :title="`${listItem.userCode}-${listItem.personName}${listItem.officePhone ? '-' + listItem.officePhone : ''}`"
                @click="onClick(listItem)"
              />
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { listEngineer } from './../../api/EngineerAssigner'
export default {
  name: 'EngineerAssigner',
  props: {
    item: {
      default: () => { },
      type: Object
    }
  },
  data () {
    return {
      show: false,
      searchValue: '',
      apporvalList: [],
      finishedLoading: false,
      finishedOver: false, // 上拉加载完毕
      refreshing: false,
      pageNum: 1,
      pageSize: 10
    }
  },
  watch: {
    'item.props': {
      handler () {
        this.item.componentFeedback[0].value = this.item.props[0].multiple ? this.item.props[0].value.map(val => {
          return {
            EngineerCode: val
          }
        }) : [{
          EngineerCode: this.item.props[0].value
        }]
        this.item.componentFeedback[1].value = this.item.props[1].value ? [{
          RemarkItem: this.item.props[1].value
        }] : []
      },
      deep: true
    }
  },
  methods: {
    onClick (item) {
      this.show = false
      this.item.props[0].value = item.personCode
      this.item.props[0].valueName = item.personName
    },
    clickEngineer () {
      this.show = true
      this.apporvalList = []
      this.searchValue = ''
      this.onSearch(1)
    },
    onSearch (status) {
      if (status) {
        this.pageNum = 1
        this.finishedLoading = false
        this.apporvalList = []
      }
      this.finishedOver = false
      const query = {
        isDesc: true,
        orderByCol: '',
        personStatus: 1,
        pageIndex: this.pageNum,
        pageSize: this.pageSize,
        personName: this.searchValue,
        projectNO: this.$store.state.app.projectNo,
        vendorCode: this.$store.state.app.vendorCode
      }
      listEngineer(query).then(res => {
        const rows = res.rows
        this.finishedLoading = false
        if (this.refreshing) {
          this.refreshing = false
        }
        if (this.pageNum === 1) {
          this.apporvalList = rows
        } else {
          this.apporvalList = this.apporvalList.concat(rows)
        }
        if (this.apporvalList.length === res.total) {
          this.finishedOver = true
        }
      })
    },
    onLoad () {
      this.pageNum++
      this.onSearch()
    },
    onRefresh () {
      this.apporvalList = []
      this.pageNum = 1
      // 清空列表数据
      this.finishedOver = false
      // 重新加载数据
      this.refreshing = true
      this.onSearch()
    }
  }
}
</script>
<style lang="scss" scoped>
.search-box {
  .search-header {
    position: fixed;
    z-index: 2222;
    width: 100%;
    height: 60px;
  }
}

</style>
