<!-- @desc:审批流程图组件  @auth:张潇木  @time:2022-4-27 11:19 -->
<template>
  <div>
<!--    {{currentPageItemList}}-->
    <div class="fd-nav-content">
      <section class="dingflow-design">
        <div class="zoom">
          <div :class="'zoom-out'+ (nowVal==50?' disabled':'')" @click="zoomSize(1)"></div>
          <span>{{ nowVal }}%</span>
          <div :class="'zoom-in'+ (nowVal==300?' disabled':'')" @click="zoomSize(2)"></div>
        </div>
        <div class="box-scale" id="box-scale"
             :style="'transform: scale('+nowVal/100+'); transform-origin: 50% 0px 0px;'">
          <nodeWrap :nodeConfig.sync="processDataOuter" :flowPermission.sync="flowPermission" :docCode="docCode"></nodeWrap>
          <div class="end-node">
            <div class="end-node-circle"></div>
            <div class="end-node-text">流程结束</div>
          </div>
        </div>
      </section>
    </div>
    <errorDialog
      :visible.sync="tipVisible"
      :list="tipList"
    />
    <approverDrawer :directorMaxLevel="directorMaxLevel"/>
    <copyerDrawer/>
    <conditionDrawer :data-fields="currentPageItemList"/>
  </div>
</template>

<script>
import errorDialog from '_c/base/dk-approval-flow/dialog/errorDialog'
import promoterDrawer from '_c/base/dk-approval-flow/drawer/promoterDrawer'
import approverDrawer from '_c/base/dk-approval-flow/drawer/approverDrawer'
import copyerDrawer from '_c/base/dk-approval-flow/drawer/copyerDrawer'
import conditionDrawer from '_c/base/dk-approval-flow/drawer/conditionDrawer'
import {mapMutations} from 'vuex'

export default {
  name: 'DkApprovalFlow',
  model: {
    prop: "processDataOuter", // 这个字段，是指父组件设置 v-model 时，将变量值传给子组件
    event: "update" // 这个字段，是指父组件监听 parent-event 事件
  },
  props: {
    processDataOuter: {//数据源
      type: Object,
      default: () => {
      },
    },
    docCode: {
      type: String,
      default: undefined,
    },

    tipVisible: {
      type: Boolean,
      default:false,
    }
  },
  watch: {
    // 监听processData变化
    processDataInner(n, o) {
      this.$emit("update", this.processDataInner);
      // console.log('内部watch', n, o);

    },
    processDataOuter(n, o) {
      // console.log('watch-processDataOuter')
      this.processDataInner = this.processDataOuter;
    },
    docCode(){
      // console.log('docCode',this.docCode)
      // debugger
      // this.getDocAppItem().then(res=>{
      //   this.currentPageItemList = this.pageItemList.filter(it => it.docCode == this.docCode)
      // })
    }
  },
  components: {
    errorDialog,
    promoterDrawer,
    approverDrawer,
    copyerDrawer,
    conditionDrawer
  },
  data() {
    return {
      pageItemList: [],//全部页面项目
      currentPageItemList: [],//当前页面项目
      tipList: [],
      nowVal: 100,
      flowPermission: [],
      directorMaxLevel: 0,
      processDataInner: {},
    }
  },
  created() {
    this.getDocAppItem();//获取单据类型支持审批的列
    this.flowPermission = []//发起人
    this.directorMaxLevel = 4//审批主管最大层级
    this.setTableId(1)
  },
  mounted(){
    // this.getDocAppItem().then(res=>{
    //   this.currentPageItemList = this.pageItemList.filter(it => it.docCode == this.docCode)
    // })
  },
  methods: {
    ...mapMutations(['setTableId', 'setIsTried']),

    /**
     * @desc   : 获取单据类型支持审批的列
     * @author : 张潇木
     * @date   : 2022-6-27 11:51
     */
    getDocAppItem() {
      // return new Promise((resolve, reject) => {
      //   pageItemService.selectByCond({flgApproval: true, flgValid: true, itemType:2,lan: 'zh_CN'}).then(res => {
      //     if (res.code === 200) {
      //       this.pageItemList = res.data.list
      //       this.pageItemList.forEach(it=>{
      //         if(it.groupType==1){
      //           it.itemName='[总单]'+it.itemName
      //         }
      //         if(it.groupType==2){
      //           it.itemName='[明细]'+it.itemName
      //         }
      //         if(it.groupType==3){
      //           it.itemName='[其他]'+it.itemName
      //         }
      //       })
      //       resolve(res.data.list)
      //     } else {
      //       this.$Message.warning(res.message)
      //       reject(res.message);
      //     }
      //   })
      // })
    },
    zoomSize(type) {
      if (type == 1) {
        if (this.nowVal == 50) {
          return
        }
        this.nowVal -= 10
      } else {
        if (this.nowVal == 300) {
          return
        }
        this.nowVal += 10
      }
    }
  }
}
</script>
<style scoped>
/*@import "css/workflow.css";*/
.error-modal-list {
  width: 455px;
}
</style>
<style scoped src="./css/workflow.css"/>
