<template>
  <div class="patolPlan">
    <div class="patolContent">
      <div class="patolDivOne">
        <el-radio-group
          v-model="listTabPosition"
          @change="listTabsChange(listTabPosition)"
          style="display: flex"
        >
          <el-radio-button label="planSelect">按计划查看</el-radio-button>
          <el-radio-button label="siteSelect">按站点查看</el-radio-button>
        </el-radio-group>
      </div>
      <div class="patolDivTwo">
        <plan-Select v-if="inspeBoll"></plan-Select>
        <site-Select v-if="!inspeBoll"></site-Select>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import planSelect from './tables/planSelect.vue'
import siteSelect from './tables/siteSelect.vue'

export default defineComponent({
  name: 'patolPlan',
  components: { planSelect, siteSelect },
  props: {},
  setup() {
    const inspeBoll = ref(true)

    const listTabsChange = (value) => {
      value == 'planSelect'
        ? (inspeBoll.value = true)
        : (inspeBoll.value = false)

      console.log(value)
    }

    return {
      inspeBoll,
      listTabPosition: ref('planSelect'),
      listTabsChange,
    }
  },
})
</script>

<style lang="scss" scoped>
.patolPlan {
  display: flex;
  height: calc(100vh - 130px);
  .patolContent {
    background-color: #fff;
    width: 100%;
    min-width: 845px;
    height: 100%;
    .patolDivOne {
      margin: 15px 0px 15px 15px;
    }
  }
}
</style>