/*
 *@description:首页
 *@author: hudw
 *@date: 2022-06-07 09:44:01
*/
<template>
  <div class="pages">
    <div class="pages" v-show="!addressAnalysisShow">
      <t-details v-show="st > 0" :st="st" :approvalType="approvalType" :tabKey="tabKey" :record="currentMainData" :formItems="formItems" :options="options" @back="onBack" @showMap="onShowMap" />
      <a-row v-show="st < 1" :gutter="10">
        <a-col :span="4" class="home-col">
          <div class="home-amount-card" @click="$router.push({ path: '/TMS/order/orderManage' })">
            <img src="./img/home_1.svg" />
            <div class="home-amount-text">
              <div>待提交运单</div>
              <div class="home-amount-number">{{ waitSubmitNum }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="4" class="home-col">
          <div class="home-amount-card" @click="$router.push({ path: '/TMS/scheduling/pendingReview' })">
            <img src="./img/home_2.svg" />
            <div class="home-amount-text">
              <div>待审核运单</div>
              <div class="home-amount-number">{{ pendingReviewNum }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="4" class="home-col">
          <div class="home-amount-card" @click="$router.push({ path: '/TMS/scheduling/pendingScheduled' })">
            <img src="./img/home_3.svg" />
            <div class="home-amount-text">
              <div>待调度运单</div>
              <div class="home-amount-number">{{ pendingDispatchNum }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="4" class="home-col">
          <div class="home-amount-card" @click="$router.push({ path: '/TMS/scheduling/dispatched' })">
            <img src="./img/home_4.svg" />
            <div class="home-amount-text">
              <div>待调度审核</div>
              <div class="home-amount-number">{{ pendingDispatchReviewNum }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="4" class="home-col">
          <div class="home-amount-card" @click="$router.push({ path: '/transportation/toPickUpGoods' })">
            <img src="./img/home_5.svg" />
            <div class="home-amount-text">
              <div>待提货运单</div>
              <div class="home-amount-number">{{ waitPickUpNum }}</div>
            </div>
          </div>
        </a-col>
        <a-col :span="4" class="home-col">
          <div class="home-amount-card" @click="$router.push({ path: '/transportation/toDelivery' })">
            <img src="./img/home_6.svg" />
            <div class="home-amount-text">
              <div>待送达</div>
              <div class="home-amount-number">{{ waitDeliveredNum }}</div>
            </div>
          </div>
        </a-col>
        <!-- <a-col :span="24" class="home-col">
          <div class="home-amount-flowChart">
            <img src="./img/flow_chart.svg" style="width: 100%" />
          </div>
        </a-col> -->
        <a-col :span="24" class="home-col">
          <div id="mountNode"></div>
        </a-col>
        <a-col :span="12">
          <a-card :bordered="false" class="full-card-panel" title="流程审批" style="height: 360px">
            <a-tabs type="card" v-model="tabKey">
              <a-tab-pane key="1" tab="我发起的"></a-tab-pane>
              <a-tab-pane key="2" tab="待我审批的"></a-tab-pane>
              <a-tab-pane key="3" tab="我已处理的"></a-tab-pane>
            </a-tabs>
            <mainTable ref="mainTable" @details="handelDetails" :mainId="mainId" :tabKey="tabKey" />
          </a-card>
        </a-col>
        <a-col :span="12" class="home-col">
          <a-card :bordered="false" style="height: 360px"></a-card>
        </a-col>
      </a-row>
    </div>
    <addressAnalysis :showType="addressAnalysisShow" :type="addressType" :searchParams="addressSearchData" :addressData="addressData" @back="addressBack" @returnData="onMapReturnData" />
  </div>
</template>
<script>
import mainTable from './model/mainTable/index.mainTable.vue' /**主表 */
import tDetails from './model/details/index.details.vue' /**详情 */
import { setFormItems } from './config.js'
import { statistical } from './api.js'
import addressMixin from './mixins/addressMixin.js'
import dictionary from './mixins/dictionary.js' //字典

import G6 from '@antv/g6'

function findComponent(context, componentName) {
  const childrens = context.$children
  let children = null
  if (childrens.length) {
    for (const child of childrens) {
      let name = child.$options.name

      if (name === componentName) {
        children = child
        break
      } else {
        children = findComponent(child, componentName)
        if (children) break
      }
    }
  }
  return children
}
export default {
  mixins: [dictionary, addressMixin],
  components: { mainTable, tDetails },
  data() {
    return {
      tabKey: '1',
      approvalType: '',
      formItems: [],
      st: 0 /**0=不显示,1=查看,2=新建,3=修改,4=复制 */,
      currentMainData: null,
      mainId: '',

      pendingDispatchNum: 0,
      pendingDispatchReviewNum: 0,
      pendingReviewNum: 0,
      waitDeliveredNum: 0,
      waitPickUpNum: 0,
      waitSubmitNum: 0,
    }
  },
  mounted() {
    this.onBack(null, true)
    this.statistical()

    this.flowChartInit()
  },
  methods: {
    return_view(record) {
      if (record) {
        const { nextApproverNodeId } = record
        const { status } = record
        if (status === 3) return false
        if (status === 2 && !nextApproverNodeId) return false
        return true
      }
      return true
    },
    handelDetails(data) {
      this.approvalType = data.approvalFlowType
      let state = this.return_view(data)
      if (this.tabKey === '1' && !state) {
        this.st = 3
      } else {
        this.st = 1 //查看
      }
      this.formItems = setFormItems(this, data.approvalFlowType)

      this.currentMainData = data
    },
    onBack(id, isReload = false) {
      this.st = 0
      isReload &&
        this.$nextTick(() => {
          this.$refs.mainTable.reload().then(() => {
            if (id) {
              this.mainId = id
            }
          })
        })
    },
    statistical() {
      statistical().then((res) => {
        if (res.success&&res.data) {
          this.pendingDispatchNum = res.data?.pendingDispatchNum??0
          this.pendingDispatchReviewNum = res.data?.pendingDispatchReviewNum??0
          this.pendingReviewNum = res.data?.pendingReviewNum??0
          this.waitDeliveredNum = res.data?.waitDeliveredNum??0
          this.waitPickUpNum = res.data?.waitPickUpNum??0
          this.waitSubmitNum = res.data?.waitSubmitNum??0
        }

      })
    },

    // 流程图
    flowChartInit() {
      const width = document.getElementById('mountNode').scrollWidth
      const NodeWidth = parseInt(width / 22)

      const data = {
        // 点集
        nodes: [
          {
            id: 'node1',
            label: '开单',
            x: 0,
            y: 200,
            type: 'rect',
            path: '/TMS/order/orderManage',
            // type: 'image',
            // size: 70,
            // img: 'https://yyb.gtimg.com/aiplat/page/product/visionimgidy/img/demo6-16a47e5d31.jpg?max_age=31536000',
          },
          {
            id: 'node2',
            label: '提交',
            x: NodeWidth * 2,
            y: 200,
            type: 'rect',
            path: '/TMS/order/orderManage',
          },
          {
            id: 'node3',
            label: '审核',
            x: NodeWidth * 4,
            y: 200,
            type: 'rect',
            path: '/TMS/scheduling/pendingReview',
          },
          {
            id: 'node4',
            label: '调度',
            x: NodeWidth * 6,
            y: 200,
            type: 'rect',
            path: '/TMS/scheduling/pendingScheduled',
          },
          {
            id: 'node5',
            label: '派车审核',
            x: NodeWidth * 8,
            y: 100,
            type: 'rect',
            path: '/TMS/scheduling/dispatched',
          },
          {
            id: 'node6',
            label: '托运审核',
            x: NodeWidth * 8,
            y: 300,
            type: 'rect',
            path: '/TMS/scheduling/consigned',
          },
          {
            id: 'node7',
            label: '提货',
            x: NodeWidth * 10,
            y: 100,
            type: 'rect',
            path: '/transportation/toPickUpGoods',
          },
          {
            id: 'node8',
            label: '托运交接',
            x: NodeWidth * 10,
            y: 300,
            type: 'rect',
            path: '/transportation/outsourcingTracking',
          },
          {
            id: 'node9',
            label: '送达',
            x: NodeWidth * 12,
            y: 100,
            type: 'rect',
            path: '/transportation/toDelivery',
          },
          {
            id: 'node10',
            label: '是否需要电子回单',
            x: NodeWidth * 14,
            y: 200,
            type: 'diamond',
            anchorPoints: [
              [0, 0.5],
              [0.5, 0],
              [0.5, 1],
            ],
          },
          {
            id: 'node11',
            label: '电子回单',
            x: NodeWidth * 16,
            y: 300,
            type: 'rect',
            path: '/transportation/toRceipt',
          },
          {
            id: 'node12',
            label: '是否需要纸质回单',
            x: NodeWidth * 18,
            y: 200,
            type: 'diamond',
            anchorPoints: [
              [0.5, 0],
              [0.5, 1],
              [1, 0.5],
            ],
          },
          {
            id: 'node13',
            label: '正本回单',
            x: NodeWidth * 20,
            y: 300,
            type: 'rect',
            anchorPoints: [
              [0, 0.5],
              [0.5, 0],
            ],
            path: '/transportation/toRceiptNote',
          },
          {
            id: 'node14',
            label: '完成',
            x: NodeWidth * 20,
            y: 100,
            type: 'rect',
            anchorPoints: [
              [0.5, 0],
              [0, 0.5],
              [0.5, 1],
            ],
            path: '/transportation/complete',
          },
        ],
        // 边集
        edges: [
          {
            source: 'node1',
            target: 'node2',
          },
          {
            source: 'node2',
            target: 'node3',
          },
          {
            source: 'node3',
            target: 'node4',
          },
          {
            source: 'node4',
            target: 'node5',
            label: '派车',
          },
          {
            source: 'node4',
            target: 'node6',
            label: '外包',
          },
          {
            source: 'node5',
            target: 'node7',
          },
          {
            source: 'node6',
            target: 'node8',
          },
          {
            source: 'node7',
            target: 'node9',
          },
          {
            source: 'node9',
            target: 'node10',
          },
          {
            source: 'node8',
            target: 'node10',
          },
          {
            source: 'node10',
            target: 'node11',
            label: '是',
          },
          {
            source: 'node11',
            target: 'node12',
          },
          {
            source: 'node10',
            target: 'node14',
            targetAnchor: 0,
          },
          {
            source: 'node12',
            target: 'node13',
            label: '是',
          },
          {
            source: 'node12',
            target: 'node14',
            label: '否',
            sourceAnchor: 0,
            targetAnchor: 1,
          },
          {
            source: 'node13',
            target: 'node14',
            sourceAnchor: 1,
            targetAnchor: 2,
          },
        ],
      }
      const graph = new G6.Graph({
        container: 'mountNode', // String | HTMLElement，必须，在 Step 1 中创建的容器 id 或容器本身
        width, // Number，必须，图的宽度
        height: 400, // Number，必须，图的高度
        fitCenter: true,
        // modes: {
        //   default: ['drag-canvas', 'drag-node'],
        // },
        defaultNode: {
          size: [NodeWidth, NodeWidth],
          labelCfg: {
            position: 'center',
          },
        },
        defaultEdge: {
          type: 'polyline',
          style: {
            endArrow: {
              path: G6.Arrow.triangle(5, 10, 0), // 使用内置箭头路径函数，参数为箭头的 宽度、长度、偏移量（默认为 0，与 d 对应）
              // d: 25,
            },
          },
        },
      })
      graph.data(data)
      graph.render()

      graph.on('node:click', (ev) => {
        const path = ev.item._cfg.model.path
        if (path) {
          this.$router.push({ path })
        }
      })
    },
  },
}
</script>

<style lang="less">
.home-col {
  margin-bottom: 10px;
}
.home-amount-card {
  height: 110px;
  background-color: #fff;
  padding: 33px 24px;
  display: flex;
  justify-content: center;
  cursor: pointer;

  .ant-card-body {
    height: 100%;
  }

  .home-amount-text {
    padding-left: 16px;

    .home-amount-number {
      font-size: 26px;
      font-weight: 500;
      height: 26px;
      line-height: 26px;
    }
  }
}

.home-amount-flowChart {
  background-color: #fff;
  padding: 20px;
}

#mountNode {
  width: 100%;
  background-color: #fff;
}
</style>
