<template>
  <div class="patolPlan">
    <div class="patolContent" v-if="selectBool">
      <div class="patolDivOne">
        <el-button
          style="float: right; margin-right: 15px"
          icon="el-icon-plus"
          type="success"
          @click="addPlan()"
        >
          新建巡检计划
        </el-button>
        <el-radio-group
          v-model="listTabPosition"
          @change="listTabsChange(listTabPosition)"
          style="display: flex"
        >
          <el-radio-button label="inspePlan">巡检计划</el-radio-button>
          <el-radio-button label="inspeCalendar">计划日历</el-radio-button>
          <el-radio-button label="inspeSite">站点巡检日历</el-radio-button>
        </el-radio-group>
      </div>
      <div class="patolDivTwo">
        <inspe-Plan v-if="inspeBoll" @selectBool="selectBool1"></inspe-Plan>
        <calendar v-if="!inspeBoll"></calendar>
      </div>
    </div>
    <div class="patolContent" v-if="!selectBool">
      <planDetails @modle="selectBool1"></planDetails>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import inspePlan from './tables/inspePlan.vue'
import calendar from './calendar/index.vue'
import planDetails from './inspePlanDetails.vue'

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

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

      console.log(value)
    }

    const addPlan = () => {
      console.log()
    }

    const selectBool = ref(true)
    const selectBool1 = (value) => {
      selectBool.value = value
    }

    return {
      selectBool,
      selectBool1,
      addPlan,
      inspeBoll,
      listTabPosition: ref('inspePlan'),
      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>