<!--
  @description: 采购管理-采购立项-创建线上项目
  @author: 郝定康
  @routerPath:/contractManagement/contractSigningStep-add
  @date： 2021-03-23 13:30:42
-->
<template>
  <div class="proc-manage-declare-create">
    <div class="step-wrapper">
      <!--页面步骤条-->
      <stepsBar ref="stepsBar" :list="stepsList" :save="save" :no-click="true" />
    </div>
    <div class="content">
      <router-view ref="project" @stepPage="_stepPage" />
    </div>
  </div>
</template>

<script>
/* 公共组件*/
import stepsBar from '@comp/common/stepsBar'
export default {
  name: 'ContractSigningStepAdd',
  components: {
    stepsBar
  },
  data() {
    return {
      stepsList: [
        {
          name: '合同基本信息',
          path: '/contractManagement/contractSigningStepAdd/contractSigning'
        },
        {
          name: '合同供应内容/价格',
          path: '/contractManagement/contractSigningStepAdd/contractContentAndPriceAdd'
        },
        {
          name: '合同付款条款',
          path: '/contractManagement/contractSigningStepAdd/contractPaymentProvisionAdd'
        },
        {
          name: '合同文件列表',
          path: '/contractManagement/contractSigningStepAdd/contractDocumentsAdd'
        }
      ] // 正常执行路由
    }
  },
  created() {
  },
  methods: {
    // 控制上一步 下一步跳转页面 子组件传给父组件
    // prev 上一步 next 下一步 或者是数字直接指定展示第几步的页面
    _stepPage(page, pageData) {
      // 路由携带参数
      const query = {
        ...pageData
      }
      // 调用步骤条-组件方法
      this.$refs.stepsBar.stepPage(page, query)
    },
    // 暂存接口 type参数 draft 点击步骤条切换-进行保存草稿
    save(type) {
      // 调用立项页面的方法-暂存草稿
      if (this.$refs.project.saveData) {
        this.$refs.project.saveData(type)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.proc-manage-declare-create {
  padding: 20px 14px;
}
.content{
  margin-top: 10px;
}
</style>
