<template>
  <div style="height: 100%;">
    <div class="task-nav">
      <div class="task-nav-item task-nav-left" style="display: flex;align-items: baseline;">
        <a-button class="return-btn" @click="goBack">返回</a-button>
        <div slot="taskTemplateName" name="taskTemplateName" class="task-template-name"><span v-if="flagName">{{ testName }}</span><el-col v-else :span="12"><el-input size="mini" v-model="testName" placeholder="请输入项目名"></el-input></el-col><a-icon type="edit" @click="flagName = !flagName"/>
        </div>
      </div>
      <ul class="task-setting-title task-nav-item">
        <div class="ghost-bar" :style="{transform: `translateX(${150*(processIndex-1)}px)`}"></div>
        <li class="task-setting-title-item" :class="processIndex === 1 ? 'isActive' : ''">
        </li>
        <li class="task-setting-title-item" @click="goTitle(2)" :class="processIndex === 2 ? 'isActive' : ''"> 任务页面设置
        </li>
        <li class="task-setting-title-item" @click="goTitle(3)" :class="processIndex === 3 ? 'isActive' : ''"> 任务流程设置
        </li>
        <li class="task-setting-title-item" :class="processIndex === 4 ? 'isActive' : ''">
        </li>
      </ul>
      <div class="task-nav-item" style="text-align: right">
        <a-button class="save-btn" @click="saveAll">保存</a-button>
        <!--<a-button class="save-btn" @click="preview" v-if="processIndex == 2">预览</a-button>-->
      </div>
    </div>
    <slot>
      <router-view/>
    </slot>
  </div>
</template>

<script>
  import { mapActions } from 'vuex';

  export default {
    name: 'TaskDesignView',
    props: {
      processIndex: {
        type: Number,
        default: 1
      },
      taskTemplateName: {
        type: String,
        default: ''
      },
      taskTemplateId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        flagName: true,
        testName: this.taskTemplateName,
        templateName: ''
      };
    },
    methods: {
      ...mapActions(['saveWorkTemplate', 'saveTaskTemplate']),
      goBack() {
        this.$router.push('/taskGrouping');
      },
      /**
       * 保存模板
       */
      saveAll() {
        this.$emit('saveData', {}, (val) => {
          this.saveTaskTemplate({ templateName: this.testName }).then((res) => {
            if (res.code === 'M0000') {
              this.$router.push('/taskGrouping');
            } else {
              this.$notification['warn']({
                message: res.msg
              });
            }
          });
        });
      },
      // 预览
      preview() {
        this.$emit('preview');
      },
      /**
       * 点击导航条的跳转事件
       * @param index
       */
      goTitle(index) {
        this.$emit('saveData', {}, (val) => {
          const query = { templateId: this.$route.query.templateId, templateName: this.testName };
          const pathList = ['/taskSetting', '/taskNewForm', '/taskFlow', '/taskOtherSetting'];
          const path = pathList[index - 1];
          this.$router.push({ path, query });
        });
      }
    },
    mounted() {
      this.templateName = this.$route.query.templateName;
    },
    watch: {
      taskTemplateName(newValue, oldValue) {
        this.templateName = newValue;
      }
    }

  };
</script>

<style lang="less" scoped>
  @import url('../components/global.less');

  .task-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 997;
    width: 100%;
    height: 60px;
    font-size: 14px;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0;
    background-color: #1a1b20 !important;

    .return-btn {
      color: #999999;
      margin-left: 20px;
    }

    .save-btn {
      margin-right: 20px;
      color: #999999;
    }

    .task-template-name {
      font-weight: bolder;
      color: @white;
      padding-left: 50px;
    }

    & > .task-nav-item {
      /*display: flex;*/
      /*justify-content: flex-start;*/
      /*align-items: center;*/
      flex: 1;
    }

    & > .task-nav-left {
      display: flex;
      align-items: center;
    }

    ul li {
      list-style: none;
    }

    .task-setting-title {
      margin: 0;
      padding: 0;
      width: 600px;
      flex: none;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      position: relative;

      .task-setting-title-item {
        /*padding: 0 20px;*/
        color: rgba(255, 255, 255, 0.647058823529412);
        position: relative;
        cursor: pointer;
        display: inline-block;
        line-height: 60px;
        width: 150px;
        text-align: center;
        white-space: nowrap;
      }

      .isActive {
        /*font-weight: bold;*/
        color: @white;
      }

      .ghost-bar {
        position: absolute;
        width: 150px;
        height: 100%;
        left: 0;
        // background: #1583f2;
        -webkit-transition: all .3s cubic-bezier(.645, .045, .355, 1);
        transition: all .3s cubic-bezier(.645, .045, .355, 1);
      }

      .ghost-bar:after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -5px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 5px 6px;
        border-color: transparent transparent #f6f6f6
      }
    }
  }
</style>
