<template>
  <div class="dashboard-editor-container">
    <div v-if="ifSupplier === 1" class="srmSystem">
      <SrmPanel />
      <el-row :gutter="20" style="margin-bottom: 23px">
        <el-col :span="16">
          <SrmFactoryNotice />
        </el-col>
        <el-col :span="8">
          <SystemNoticeMessage />
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="chart-wrapper">
            <SrmQuotation />
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-else class="wmsSystem">
      <panel-group />

      <el-row :gutter="20" style="margin-bottom: 23px">
        <el-col :span="16">
          <FactoryNoticeCard />
        </el-col>
        <el-col :span="8">
          <FeedingProgress />
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="chart-wrapper">
            <PurchaseOrderProgress />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chart-wrapper">
            <SalesOrderProgress />
          </div>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
// WMS
import PanelGroup from './dashboard/PanelGroup'
import FactoryNoticeCard from './dashboard/FactoryNoticeCard.vue'
import FeedingProgress from './dashboard/FeedingProgress.vue'
import SalesOrderProgress from './dashboard/SalesOrderProgress.vue'
import PurchaseOrderProgress from './dashboard/PurchaseOrderProgress.vue'

// SRM
import SrmPanel from './dashboard/SrmPanel.vue'
import SrmFactoryNotice from './dashboard/SrmFactoryNotice.vue'
import SystemNoticeMessage from './dashboard/SystemNoticeMessage.vue'
import SrmQuotation from './dashboard/SrmQuotation.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  components: {
    // WMS
    PanelGroup,
    SalesOrderProgress,
    PurchaseOrderProgress,
    FactoryNoticeCard,
    FeedingProgress,

    // SRM
    SrmPanel,
    SrmFactoryNotice,
    SystemNoticeMessage,
    SrmQuotation
  },
  data() {
    return {
      // isSupplier: ''
    }
  },
  computed: {
    ...mapGetters([
      'ifSupplier'
    ])
  }
  // created() {
  // this.isSupplier = this.ifSupplier
  // }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    margin-bottom: 32px;
  }
}

@media screen and  (max-width:990px) {
  .el-col-16{
    width: 100%;
    margin-bottom: 20px;
  }
  .el-col-8 {
    width: 100%;
  }
  .el-col-12 {
    width: 100%;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
