<template>
  <div class="public-manage">
    <m-card mode="border2">
      <Complain />
    </m-card>
    <m-card mode="border2">
      <Demand />
    </m-card>
    <m-card mode="border2">
      <div class="first-child"><CaseAnalysis /></div>
      <div class="second-child">
        <KeyTask mode="4" :show="showKeyTask" :bg="null" />
      </div>
      <div class="third-child"><BussinessEntry /></div>
    </m-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import Complain from './complain.vue'
import Demand from './demand.vue'
import CaseAnalysis from './case-analysis.vue'
import KeyTask from './key-task.vue'
import BussinessEntry from './business-entry.vue'
import store from '@/store'

export default defineComponent({
  name: 'PublicMange',
  components: { Complain, Demand, CaseAnalysis, KeyTask, BussinessEntry },
  setup() {
    const showKeyTask = computed(() => store.state.curTheme === 'manage')
    return {
      showKeyTask,
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'
.public-manage
  $full()
  display flex
  justify-content space-between
  >div
    height 100%
    width 33%
    .first-child
      flex 1
    .second-child
      flex 1
    .third-child
      height 1.4rem
</style>
