<template>
  <div class="app-container">
    <div class="search-form">
      <el-form ref="searchForm" :model="queryParams" inline :label-width="'70px'">
        <el-form-item label="路段编号" prop="id">
          <el-input v-model="queryParams.id" size="mini" type="text" placeholder="路段编号" />
        </el-form-item>
        <el-form-item label="路段名称" prop="name">
          <el-input v-model="queryParams.name" size="mini" type="text" placeholder="路段名称" />
        </el-form-item>
        <el-form-item class="searchItem">
          <el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
          <el-button type="default" size="mini" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <vxe-grid
      ref="tollSectionTable"
      highlight-hover-row
      border
      resizable
      sync-resize
      auto-resize
      height="500px"
      :loading="loading"
      :columns="columns"
      :data="dataList"
      @checkbox-change="checkFn"
      @checkbox-all="checkAll"
    />
  </div>
</template>

<script>

import { listTenantSection } from 'ecip-web/api/vue/mapping/baseTenantSectionApi'

export default {
  name: 'OrgSection',
  props: {
    tollSectionData: [],
    tenantId: ''
  },
  data() {
    return {
      loading: false,
      queryParams: {
        id: null,
        name: null
      },
      dataList: [],
      columns: [
        { type: 'checkbox', width: 40, fixed: 'left', field: 'id', align: 'center' },
        { title: '收费路段名称', key: 'name', field: 'name' },
        { title: '收费路段编号', key: 'id', field: 'id' }
      ]
    }
  },
  mounted() {
    this.searchData()
  },
  methods: {
    checkAll(all) {
      if (all.checked) {
        all.selection.forEach((item) => {
          const idx = this.tollSectionData.findIndex(d => d.id === item.id)
          idx === -1 && (this.tollSectionData.push(item))
        })
      } else {
        this.dataList.forEach((item) => {
          const idx = this.tollSectionData.findIndex(d => d.id === item.id)
          idx !== -1 && (this.tollSectionData.splice(idx, 1))
        })
      }
    },
    checkFn(item) {
      if (item.checked) {
        this.tollSectionData.push(item.row)
      } else {
        const idx = this.tollSectionData.findIndex(d => d.id === item.row.id)
        idx !== -1 && (this.tollSectionData.splice(idx, 1))
      }

    },
    init() {
      this.searchData()
    },
    async searchData() {
      const { data } = await listTenantSection(this.tenantId, this.queryParams)
      this.dataList = data
      this.$nextTick(() => {
        this.setCheckFn()
      })
    },
    getChooseData() {
      return this.tollSectionData
    },
    handleSearch() {
      this.searchData()
    },
    setCheckFn() {
      const array = []
      this.tollSectionData.forEach((item) => {
        const checkItem = this.dataList.filter(vxe => vxe.id === item.id)
        array.push(checkItem[0])
      })
      this.$refs.tollSectionTable.setCheckboxRow(array, true)
    },
    handleReset() {
      this.$refs['searchForm'].resetFields()
      this.searchData()
    }
  }
}
</script>

<style scoped>
  .drawer-footer {
    margin-top: 10px;
    text-align: center;
  }
  .el-select{ display: block; }
</style>
