<template>
  <div class="public-work">
    <m-card mode="border2">
      <div class="convnient"><Convenient /></div>
      <div class="beauty"><BeautyHomeInStation /></div>
    </m-card>
    <m-card mode="border2">
      <div class="duty"><Duty /></div>
      <div class="task">
        <KeyTask
          mode="4"
          :show="showTask"
          :color="taskColor"
          height="1rem"
          :bg="null"
        />
      </div>
    </m-card>
    <m-card mode="border2">
      <div class="analysis"><DutyAnalysis /></div>
      <div class="entry"><BussinessEntry mode="4" /></div>
    </m-card>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import Convenient from './convenient.vue'
import BeautyHomeInStation from './beauty-home-in-station.vue'
import Duty from './duty.vue'
import DutyAnalysis from './duty-analysis.vue'
import KeyTask from './key-task.vue'
import BussinessEntry from './business-entry.vue'
import store from '@/store'

export default defineComponent({
  name: 'PublicWork',
  components: {
    Convenient,
    BeautyHomeInStation,
    Duty,
    DutyAnalysis,
    KeyTask,
    BussinessEntry,
  },
  setup() {
    const showTask = computed(() => store.state.curView.type !== 'street')
    return {
      showTask,
      taskColor: [
        '#fff',
        '#eee',
        '#ddd',
        '#ccc',
        '#bbb',
        '#aaa',
        '#999',
        '#888',
        '#777',
      ],
    }
  },
})
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl';

.public-work
  $full()
  display flex
  justify-content space-between

  >div
    height 100%
    width 33%

// .convenient,
// .beauty,
// .duty,
// .analysis
//   flex: 1
.entry
.task
  flex 1
  // height 1.28rem
</style>
