<template>
  <div class="home">
      <div class="convert-type-container">
          <div class="convert-type-item" @click="modelConvertFn">
              <el-image style="width: 80px; height: 80px" :src="epcToFlowChart" />
              <div>EPC转FlowChart</div>
          </div>
          <div class="convert-type-item" @click="modelConvertFn">
              <el-image style="width: 80px; height: 80px" :src="epcToBpmn" />
              <div style="justify-items: center">EPC转BPMN</div>
          </div>
          <div class="convert-type-item" @click="modelConvertFn">
              <el-image style="width: 80px; height: 80px" :src="flowChartToBpmn" />
              <div>FlowChart转BPMN</div>
          </div>
      </div>
      <div class="convert-history-container" @click="toHistoryPageFn">
          <el-tooltip
                  effect="dark"
                  content="历史转换记录"
                  placement="left-end"
          >
              <el-image style="width: 80px; height: 80px" :src="his" />
          </el-tooltip>
      </div>
  </div>
</template>

<script lang="ts">
import { defineComponent,ref,getCurrentInstance } from 'vue';
import history from '@/assets/history.png';
import epc_bpmn from '@/assets/epc_bpmn.png';
import epc_flowchart from '@/assets/epc_flowchart.png';
import flowchart_bpmn from '@/assets/flowchart_bpmn.png';

export default defineComponent({
  name: 'Home',
  setup() {
    const { proxy: $this } = getCurrentInstance();
    const his = ref(history);
    const epcToBpmn = ref(epc_bpmn);
    const epcToFlowChart = ref(epc_flowchart);
    const flowChartToBpmn = ref(flowchart_bpmn);

    // 对应模型转换入口
    const modelConvertFn = (convertType: any) => {
      $this.$message({message: '敬请期待',type: 'warning'});
    }

    // 跳转历史记录页面
    const toHistoryPageFn = () => {
      $this.$router.push('/history');
    }

    return {
      his,
      epcToBpmn,
      epcToFlowChart,
      flowChartToBpmn,
      modelConvertFn,
      toHistoryPageFn
    }
  }
});
</script>

<style lang="less">
    .home {
        width: 100%;
        height: 100%;
        background-color: rgb(241,241,241);
    }
    .convert-type-container {
        overflow: auto;
        height: 70%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        column-gap: 50px;
        row-gap: 50px;
        padding: 70px;
        align-items: center;
        justify-items: center;
        .convert-type-item {
            width: 80%;
            height: 80%;
            background-color: rgb(255,255,255);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
            div {
                margin-top: 10px;
            }
        }
    }
    .convert-history-container {
        /*height: 30%;*/
        float: right;
        margin: 20px 30px;
        cursor: pointer;
    }
</style>