<template>
  <div class="app-container">
    <div class="search-form">
      <el-form ref="searchForm" label-width="80px" :model="queryParams">
        <el-form-item prop="name" label="收费门架">
          <el-select
            v-model="queryParams.sectionId"
            filterable
            placeholder="选择收费路段"
            clearable
            @change="getData"
          >
            <el-option
              v-for="item in tollSectionData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <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="tollGantryTable"
      highlight-hover-row
      border
      resizable
      sync-resize
      auto-resize
      max-height="500px"
      :loading="loading"
      :columns="columns"
      :data="dataList"
      @checkbox-change="checkFn"
      @checkbox-all="checkAll"
    />
    <!--    <div class="drawer-footer">-->
    <!--      <el-button type="primary" @click="submit">确 定</el-button>-->
    <!--      <el-button @click="$emit('cancelDrawer')">取 消</el-button>-->
    <!--    </div>-->
  </div>
</template>

<script>
// import { getGantryIdByOrgId } from '@/api/vue/org/saasOrgApi'
import { list } from 'ecip-web/api/vue/base/baseTollgantryApi'
// import { listSection } from '@/api/modules/base/baseTollSectionApi'
export default {
  name: 'OrgGantry',
  props: {
    tollSectionData: [],
    tenantId: '',
    gantryList: []
  },
  data() {
    return {
      loading: false,
      roadSectionList: [],
      tollGantryData: [],
      dataList: [],
      columns: [
        { type: 'checkbox', width: 40, fixed: 'left', field: 'id', align: 'center' },
        { title: '收费门架名称', key: 'name', field: 'name' },
        { title: '收费门架编号', key: 'id', field: 'id' },
        { title: '路段名称', key: 'sectionName', field: 'sectionName' }
      ],
      queryParams: {
        sectionId: null,
        id: null,
        name: null
      }
    }
  },
  watch: {
    orgId(val) {
      if (!val) {
        return
      }
      this.getRoadSection()
      this.getData()
    }
  },
  created() {
    this.getData()
  },
  methods: {
    checkAll(all) {
      if (all.checked) {
        all.selection.forEach((item) => {
          const idx = this.gantryList.findIndex(d => d.id === item.id)
          idx === -1 && (this.gantryList.push(item))
        })
      } else {
        this.dataList.forEach((item) => {
          const idx = this.gantryList.findIndex(d => d.id === item.id)
          idx !== -1 && (this.gantryList.splice(idx, 1))
        })
      }
    },
    checkFn(item) {
      if (item.checked) {
        this.gantryList.push(item.row)
      } else {
        const idx = this.gantryList.findIndex(d => d.id === item.row.id)
        idx !== -1 && (this.gantryList.splice(idx, 1))
      }
    },
    init() {
      this.getData()
    },
    setCheckFn() {
      const array = []
      this.gantryList.forEach((item) => {
        const checkItem = this.dataList.filter(vxe => vxe.id === item.id)
        array.push(checkItem[0])
      })
      this.$refs.tollGantryTable.setCheckboxRow(array, true)
    },
    async getData() {
      this.loading = true
      var idParam = this.queryParams.id
      if (!idParam) {
        idParam = this.queryParams.sectionId
      }
      await list({
        id: idParam,
        tenantId: this.tenantId,
        name: this.queryParams.name
      }).then(res => {
        this.dataList = res.data
        this.loading = false
        this.$nextTick(() => {
          this.setCheckFn()
        })
      }).catch(e => {
        this.loading = false
      })
    },
    getChooseData() {
      return this.gantryList
    },
    handleSearch() {
      this.getData()
    }
  }
}
</script>

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