<template>
  <!--仓库-->
  <Modal v-model="showModal" width="1000">
    <p slot="header">选择车辆</p>
    <Form :label-width="50" onsubmit="return false" inline>
      <Form-item label="车牌号">
        <Input v-model="license" @on-enter="_search" placeholder="请输入车牌号,回车查询"
               icon="ios-search-strong"/>
      </Form-item>
      <Form-item class="search-btn" style="margin-left: -10px">
        <Button @click="_search" type="primary">搜索</Button>
      </Form-item>
    </Form>
    <Row>
      <Col span="24">
        <PTVXETable ref="pageTable" :tableHeight="tableHeight"
                    @on-result-change="_tableResultChange" :getPage="getPage" select-data>
          <vxe-table-column
            :field="item.key"
            :title="item.title"
            :min-width="item.width?item.width:200"
            :fixed="item.fixed?item.fixed:undefined"
            v-for="item in pageColumns"
            :key="item.key" sortable>
            <template slot-scope="scope">
              <div v-if="item.date">{{$dateformat(scope.row[item.key],'yyyy-mm-dd')}}</div>
              <div v-else>{{scope.row[item.key]}}</div>
            </template>
          </vxe-table-column>
        </PTVXETable>
      </Col>
    </Row>
    <div slot="footer">
      <ModalFooter ref="footerModal" @on-result-change="_footerResult" :footer="footerList"></ModalFooter>
    </div>
  </Modal>
</template>
<script>
/**
 * 选择车辆
 */
import ModalFooter from '../../../components/base/modalFooter'
import { meterSample } from '../../../api'
export default {
  components: {
    ModalFooter
  },
  data() {
    return {
      showModal: false,
      license: '',
      selectNames: '',
      selectIds: '',
      getPage: {},
      tableHeight: '300',
      pageColumns: [
        { title: '车牌号', key: 'license' },
        { title: '品牌', key: 'brand' },
        { title: '所属类型', key: 'type' },
        { title: '购买/租用时间', key: 'buyDate' },
        { title: '备注', key: 'remark' }
      ],
      footerList: [
        { id: '', name: '取消', type: '' },
        { id: '', name: '确定', type: 'primary' }
      ]
    }
  },
  methods: {
    _footerResult(name) {
      switch (name) {
        case '取消':
          this._cancel()
          break
        case '确定':
          this._ok()
          break
      }
    },
    _hideLoading() {
      this.$refs.footerModal._hideLoading()
    },
    _open() {
      this.showModal = true
      this.license = ''
      this._page()
    },
    _page: async function() {
      const data = {}
      if (this.license) {
        data.license = this.license
      }
      // this.$refs.pageTable._page('search-form-car', 'LmsCarInfo/page', data)
      const result = await meterSample.pageCarManage(data)
      const result2 = await meterSample.pageCarList(data)
      console.log('result', result)
      console.log('result2', result2)
      if (result) {
        this.getPage = result
      }
    },
    _tableResultChange(msg, data) {
      switch (msg) {
        case 'page':
          this.selectIds = []
          this.selectNames = []
          this.getPage = this.$store.state.LmsCarInfo.page
          break
        case 'selectData':
          const nameList = []
          const idList = []
          for (let i = 0; i < data.length; i++) {
            nameList.push(data[i].license)
            idList.push(data[i].id)
          }
          this.selectIds = idList
          this.selectNames = nameList
          break
        case 'changeSize':
          this._page()
          break
      }
    },
    _ok() {
      this.$emit('on-result-change', {
        ids: this.selectIds,
        names: this.selectNames
      })
      this.showModal = false
      this._hideLoading()
    },
    _cancel() {
      this.showModal = false
      this._hideLoading()
    },
    _search() {
      // tree查询
      this._page()
    }
  }
}
</script>
