<template>
  <div class="app-container">
    <el-drawer
      title="配置数据权限"
      :visible.sync="visible"
      direction="rtl"
      size="43%"
    >
      <el-tabs stretch @tab-click="tabClick">
        <el-tab-pane label="收费路段">
          <org-section ref="orgSection" :tenant-id="item.tenantId" :toll-section-data="item.sectionList" @save="sectionSave" />
        </el-tab-pane>
        <el-tab-pane label="收费站">
          <org-station ref="orgStation" :toll-station-data="item.stationList" :tenant-id="item.tenantId" :toll-section-data="item.allSections" @save="stationSave" />
        </el-tab-pane>
        <el-tab-pane label="收费门架">
          <org-gantry ref="ganTry" :toll-section-data="item.allSections" :tenant-id="item.tenantId" :gantry-list="item.gantryList" />
        </el-tab-pane>
      </el-tabs>
      <div class="drawer-footer">
        <el-button type="primary" @click="save">确 定</el-button>
        <el-button @click="cancelDrawer">取 消</el-button>
      </div>
    </el-drawer>

  </div>
</template>

<script>
import mixin from 'ecip-web/utils/common-mixin'
import OrgSection from './orgSection'
import OrgStation from './orgStation'
import OrgGantry from './orgGantry'
import { listTenantSection } from 'ecip-web/api/vue/mapping/baseTenantSectionApi'

export default {
  name: 'DataView',
  components: {
    OrgSection,
    OrgStation,
    OrgGantry
  },
  mixins: [...mixin],
  data() {
    return {
      visible: false,
      item: {
        sectionList: [],
        stationList: [],
        gantryList: [],
        allSections: [],
        tenantId: ''
      }
    }
  },
  methods: {
    tabClick(e) {
      const o = {
        '0': 'orgSection',
        '1': 'orgStation',
        '2': 'ganTry'
      }
      this.$refs[o[e.index]].init()
    },
    async init(tenantId, sectionList, stationList, gantryList) {
      this.visible = true
      this.item.sectionList = Object.assign([], sectionList)
      this.item.stationList = Object.assign([], stationList)
      this.item.gantryList = Object.assign([], gantryList)
      this.item.tenantId = tenantId
      let allSection = []
      await listTenantSection(tenantId, {}).then(function(result) {
        allSection = result.data
      })
      this.item.allSections = allSection
    },
    sectionSave(sectionIds) {
      console.log(sectionIds)
    },
    stationSave(stationIds) {
      console.log(stationIds)
    },
    cancelDrawer() {
      this.visible = false
    },
    save() {
      this.$emit('getData', {
        type: 'sectionList',
        data: this.$refs.orgSection.getChooseData()
      })

      this.$emit('getData', {
        type: 'stationList',
        data: this.$refs.orgStation.getChooseData()
      })

      this.$emit('getData', {
        type: 'gantryList',
        data: this.$refs.ganTry.getChooseData()
      })
      this.visible = false
    }
  }
}
</script>

<style  lang="scss" scoped>
  .drawer-footer {
    margin-top: 10px;
    text-align: center;
  }
  .app-container{
    padding-top:5px;
    ::v-deep .el-tabs__header{
      margin-bottom: 0;
    }
  }
</style>
