<template>
  <div class="workspace-visual">
    <!-- <el-button type="primary" class="workspace-visual-back" @click="handleBack" icon="el-icon-back">返回</el-button> -->
    <div class="workspace-visual-header" v-if="!show">
      <img class="workspace-visual-header-logo" src="@/assets/logo-3.png" alt="">
      <img class="workspace-visual-header-title" src="@/assets/visual/7780.png" alt="">
      <img class="workspace-visual-header-subtitle" src="@/assets/visual/7782(1).png" alt="">
    </div>
    <div class="workspace-visual-container">
      <div class="workspace-visual-container-scenario workspace-visual-container-scenario-theme-1">
        <visual-content
            :total="total.专利培育布局"
            :status-total="statusTotal.专利培育布局"
            title="专利培育布局"
            header-icon="7155.png"
            content-icon="8.png"
            @click="handleClick"
        />
      </div>
      <div class="workspace-visual-container-scenario workspace-visual-container-scenario-theme-2">
        <visual-content
            :total="total['产品上市/出口风险控制']"
            :status-total="statusTotal['产品上市/出口风险控制']"
            title="产品上市/出口风险控制"
            header-icon="7160.png"
            content-icon="7159.png"
            @click="handleClick"
        />
      </div>
      <div class="workspace-visual-container-scenario workspace-visual-container-scenario-2">
        <div class="workspace-visual-container-scenario-theme-2">
          <visual-content
              :total="total.侵权纠纷"
              :status-total="statusTotal.侵权纠纷"
              title="侵权纠纷"
              header-icon="7161.png"
              content-icon="7162.png"
              @click="handleClick"
          />
        </div>
        <div class="workspace-visual-container-scenario-theme-1">
          <visual-content
              :total="total.专利盘点与运维"
              :status-total="statusTotal.专利盘点与运维"
              title="专利盘点与运维"
              header-icon="7172.png"
              content-icon="4884.png"
              @click="handleClick"
          />
        </div>
      </div>
      <div class="workspace-visual-container-scenario workspace-visual-container-scenario-2">
        <div class="workspace-visual-container-scenario-theme-1">
          <visual-content
              :total="total.专利维权"
              :status-total="statusTotal.专利维权"
              title="专利维权"
              header-icon="7163.png"
              content-icon="7164.png"
              @click="handleClick"
          />
        </div>
        <div class="workspace-visual-container-scenario-theme-2">
          <visual-content
              :total="total.科技与重大立项专利导航"
              :status-total="statusTotal.科技与重大立项专利导航"
              title="科技与重大立项专利导航"
              header-icon="7167.png"
              content-icon="9.png"
              @click="handleClick"
          />
        </div>
      </div>
      <div class="workspace-visual-container-scenario workspace-visual-container-scenario-2" style="margin-right: 0">
        <div class="workspace-visual-container-scenario-theme-2">
          <visual-content
              :total="total.IPO上市"
              :status-total="statusTotal.IPO上市"
              title="IPO上市"
              header-icon="7165.png"
              content-icon="7166.png"
              @click="handleClick"
          />
        </div>
        <div class="workspace-visual-container-scenario-theme-1">
          <visual-content
              :total="total.竞争对手威胁应对"
              :status-total="statusTotal.竞争对手威胁应对"
              title="竞争对手威胁应对"
              header-icon="7173.png"
              content-icon="7174.png"
              @click="handleClick"
          />
        </div>
      </div>
    </div>
    <about-dialog ref="aboutDialog" />
    <project-drawer ref="projectDrawer" />
  </div>
</template>

<script>
import VisualContent from './components/VisualContent'
import AboutDialog from "./components/AboutDialog";
// import ProjectDrawer from "./components/ProjectDrawer";
import ProjectDrawer from "./components/drawer/index2.vue";

export default {
  name:'visual',
  components: {
    VisualContent,
    AboutDialog,
    ProjectDrawer
  },
  props:{
    show:{}
  },
  data() {
    return {
      total: {},
      statusTotal: {}
    }
  },
  async mounted() {
    await this.getUserinfo()
    await this.getPermissions()
    await this.getPermissionList()
    this.getScenarioTotal()
    this.getProjectStatusTotal()
    if(!this.show){
      this.$refs.aboutDialog.open()
    }
    
  },
  methods: {
    async getPermissionList(){
      var code = "6a8d3f4d1d5f11eda41c00163e2f0200;5051395c24e311eda41c00163e2f0200;a97c468b924111ed905500163e2f0200"
      await this.$api.getPermissionList({code:code}).then(response=>{
        this.$store.commit('SET_ADMIN_PERMISSION', response.data)
      })
    },
    async getUserinfo() {
      const response = await this.$api.getUserinfo()
      this.$store.commit('SET_USERINFO', response.data)
    },
    async getPermissions() {
      const response = await this.$api.getPermissions()
      this.$store.commit('SET_PERMISSIONS', response.data)
    },
    getScenarioTotal() {
      this.$api.getScenarioAndTypeTotal().then(response => {
        this.total = response.data.scenario
      })
    },
    getProjectStatusTotal() {
      this.$api.getProjectStatusTotal().then(response => {
        this.statusTotal = response.data
      })
    },
    handleClick(data) {
      const { title, type } = data
      switch (type) {
        case 0:
          this.$router.push({
            path: `/visual/${encodeURIComponent(title)}`
          })
          break
        case 1:
          this.$refs.projectDrawer.open(title, null)
          break
      }
    },
    handleBack() {
      // this.$router.push({ path: '/workspace' })
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
.workspace-visual {
  transform: scale(0.95);
  .workspace-visual-back {
    position: absolute;
  }
  .workspace-visual-header {
    img {
      display: block;
      margin: 0 auto;
    }
    .workspace-visual-header-logo {
      height: 50px;
      // width: 50px;
    }
    .workspace-visual-header-title {
      width: 512px;
      height: 39px;
      padding-top: 17px;
    }
    .workspace-visual-header-subtitle {
      width: 433px;
      height: 12px;
      padding-top: 25px;
    }
  }
  .workspace-visual-container {
    width: 1240px;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 10px;
    background: #ffffff;
    height: 710px;
    // padding: 20px;
    .workspace-visual-container-scenario {
      width: 240px;
      height: 100%;
      border-radius: 10px;
      float: left;
      margin-right: 10px;
      span {
        color: #ffffff;
      }
      .workspace-visual-container-scenario-content-icon {
        margin-top: 250px;
      }
      .workspace-visual-container-scenario-content-total {
        margin-top: 170px;
      }
    }
    .workspace-visual-container-scenario-theme-1 {
      background: #3084e5;
      .workspace-visual-container-scenario-content-footer div:first-child {
        background: #65A4ED;
      }
      .workspace-visual-container-scenario-content-footer div:last-child span {
        color: #3084E5 !important;
      }
    }
    .workspace-visual-container-scenario-theme-2 {
      background: #11acaf;
      .workspace-visual-container-scenario-content-footer div:first-child {
        background: #52C3C4;
      }
      .workspace-visual-container-scenario-content-footer div:last-child span {
        color: #11ACAF !important;
      }
    }
    .workspace-visual-container-scenario-2 {
      .workspace-visual-container-scenario-theme-1, .workspace-visual-container-scenario-theme-2 {
        height: 350px !important;
        border-radius: 10px;
      }
      div:first-child {
        margin-bottom: 10px;
      }
      .workspace-visual-container-scenario-content-icon {
        margin-top: 40px;
        background: transparent !important;
      }
      .workspace-visual-container-scenario-content-total {
        margin-top: 20px;
      }
    }
  }
}
</style>