<template>
  <div class="container">
    <div class="tab" style="margin-top: 0;">
      <Tabs :list="tab" :value="tabval" @changeVal="(val) => tabval = val"/>
    </div>
    <DemandSwiperList v-if="tabval === 1" :list="list"/>
    <DemandCharts v-else/>
    <div class="tab">
      <Tabs :list="tab2" :value="tabval2"  @changeVal="(val) => tabval2 = val"/>
    </div>
    <DemandSwiperList v-if="tabval2 === 1" :list="list"/>
    <DemandCharts v-else/>
    <ServiceDetails ref="ServiceDetails"/>
  </div>
</template>

<script>
import Tabs from "@/views/dataBoard/cpts/Tabs.vue";
import DemandSwiperList from "@/views/dataBoard/overview/components/DemandSwiperList.vue";
import DemandCharts from "@/views/dataBoard/overview/components/DemandCharts.vue";
import ServiceDetails from "@/views/dataBoard/overview/components/ServiceDetails.vue";

export default {
  name: "RequirementList",
  components: {
    Tabs,
    DemandCharts,
    DemandSwiperList,
    ServiceDetails
  },
  data() {
    return {
      tabval: 1,
      tabval2: 1,
      list: [{
        createdTime: '今天',
        eventContent: '失能老人基础护理服务',
      }, {
        createdTime: '昨天',
        eventContent: '失能老人基础护理服务',
      }, {
        createdTime: '5-20',
        eventContent: '失能老人基础护理服务',
      }, {
        createdTime: '5-19',
        eventContent: '失能老人基础护理服务',
      }],
      tab: [{
        label: '个性需求未完成清单',
        value: 1
      }, {
        label: '个性需求分类统计',
        value: 2
      }],
      tab2: [{
        label: '共性需求未承接清单',
        value: 1
      }, {
        label: '共性需求分类统计',
        value: 2
      }]
    }
  },
  mounted() {
    this.$refs.ServiceDetails.open();
  },
  methods: {}
}
</script>


<style lang="scss" scoped>
.container {
  padding: 19px 16px;
}

.tab {
  margin: 10px 0;
}

</style>