<!--
  @description: 项目驱动-二级步骤菜单
  @Modifier：肖文龙
  @routerPath:
  @date：  2019-12-27 17:13
-->
<template>
  <div v-if="list.length&&list.length>0" class="driveStep p0-16">
    <el-row>
      <!--================================后审阶段================================-->
      <el-col>
        <ul>
          <!--已完成节点-->
          <li
            v-for="(item,index) in list"
            v-if="item[driveData.childStatusKey]!==driveData.childStatusNoOpenVal&&acitvePath!==item[driveData.childUrlKey]"
            :key="index"
            class="accomplish"
          >
            <span class="pointer" @click="driveClick(item)">
              <!-- icon-图标 -->
              <span v-if="driveData.childIconType==='00'||driveData.childIconType==='01'" :class="'state iconfont '+ (driveData.childIconType==='00'?'icon-pass':item.icon)" />
              <!-- icon-序列号 -->
              <span v-if="driveData.childIconType==='02'" class="state_num">{{ index+1 }}</span>
              <span class="task_name"> {{ item[driveData.childName] }}</span>
            </span>
            <span class="arrows iconfont icon-gongyongdanjiantouyoubian" />
          </li>
          <!--当前节点-->
          <li
            v-else-if="item[driveData.childStatusKey]!==driveData.childStatusNoOpenVal&&acitvePath===item[driveData.childUrlKey]"
            class="active"
            @click="driveClick(item)"
          >
            <span class="pointer">
              <!-- icon-图标 -->
              <span class="state iconfont icon-doing" />
              <span class="task_name">{{ item[driveData.childName] }}</span>
            </span>
            <span class="arrows iconfont icon-gongyongdanjiantouyoubian" />
          </li>
          <!--未开启节点-->
          <li v-else-if="item[driveData.childStatusKey]===driveData.childStatusNoOpenVal" class="disable">
            <!-- icon-图标 -->
            <span v-if="driveData.childIconType==='00'||driveData.childIconType==='01'" :class="'state iconfont '+ (driveData.childIconType==='00'?'icon-pass':item.icon)" />
            <!-- icon-序列号 -->
            <span v-if="driveData.childIconType==='02'" class="state_num">{{ index+1 }}</span>
            <span class="task_name"> {{ item[driveData.childName] }}</span>
            <span class="arrows iconfont icon-gongyongdanjiantouyoubian" />
          </li>
        </ul>
        <!--================================资审阶段================================-->
        <div v-if="zsList.length>0" class="fr">
          <div class="Information_btn fl">
            资审阶段
          </div>
          <ul class="fl p0-16">
            <!--已完成节点-->
            <li
              v-for="(item,index) in zsList"
              v-if="item[driveData.childStatusKey]!==driveData.childStatusNoOpenVal&&acitvePath!==item[driveData.childUrlKey]"
              :key="index"
              class="accomplish"
            >
              <span class="pointer" @click="driveClick(item)">
                <!-- icon-图标 -->
                <span v-if="driveData.childIconType==='00'||driveData.childIconType==='01'" :class="'state iconfont '+ (driveData.childIconType==='00'?'icon-pass':item.icon)" />
                <!-- icon-序列号 -->
                <span v-if="driveData.childIconType==='02'" class="state_num ">{{ index+1 }}</span>
                <span class="task_name"> {{ item[driveData.childName] }}</span>
              </span>
              <span class="arrows iconfont icon-gongyongdanjiantouyoubian" />
            </li>
            <!--当前节点-->
            <li
              v-else-if="item[driveData.childStatusKey]!==driveData.childStatusNoOpenVal&&acitvePath===item[driveData.childUrlKey]"
              class="active"
              @click="driveClick(item)"
            >
              <span class="pointer">
                <!-- icon-图标 -->
                <span class="state iconfont icon-doing" />
                <span class="task_name">{{ item[driveData.childName] }}</span>
              </span>
              <span class="arrows iconfont icon-gongyongdanjiantouyoubian" />
            </li>
          </ul>
        </div>
        <!--================================其他操作-插槽================================-->
        <slot name="stepRight" />
      </el-col>
    </el-row>
  </div>
</template>
<script>
/**
   * {
   *  requestUrl:"", 路由
   *  taskName:"",节点名称
   *  icon:"",// icon-font
   *  processStatus:"" 进程状态 00未开始 01进行中 02已完成 03待启动（可以启动但是没有点启动）
   * }
   */
export default {
  name: 'DriveStep',
  props: {
    // 当前节点二级项目驱动步骤tab
    list: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 设置自定义key
    driveData: {
      type: Object,
      default: function() {
        return {
          childName: '', // 节点名称-key名称
          childStatusKey: '', // 子驱动-key名称
          childUrlKey: '', // 子驱动-路由-key名称
          childIconType: '' // 图标使用状态 00 默认 01 自定义icon 02 序列号
        }
      }
    },
    // 当前节点二级项目驱动步骤tab（已完成的资审步骤）
    zsList: {
      type: Array,
      default: function() {
        return []
      }
    },
    /*
        * 切换二级步骤节点tab
        * item 二级步骤节点参数
        * */
    driveTaskChildChange: {
      type: Function,
      default: function(item) {
      }
    }
  },
  data() {
    return {
      acitvePath: '', // 当前节点索引
      zsAcitvePath: ''// 资审当前节点索引
    }
  },
  watch: {
    list() {
      this.initActive()// 获取索引
    },
    zsList() {
      this.initActive()// 获取索引
    }
  },
  created() {
    this.initActive()// 获取索引
  },
  methods: {
    driveClick(item) {
      this.removeActive()// 清空索引
      this.acitvePath = item[this.driveData.childUrlKey]// 使用路由设置为索引
      this.zsAcitvePath = ''// 资审当前节点索引
      // 切换二级步骤节点tab
      this.driveTaskChildChange(item)
    },
    zsDriveClick(item) {
      this.removeActive()// 清空索引
      this.zsAcitvePath = item[this.driveData.childUrlKey]// 资审当前节点索引
      this.acitvePath = ''// 使用路由设置为索引
      // 切换二级步骤节点tab
      this.driveTaskChildChange(item)
    },
    // 获取索引
    initActive() {
      this.list.map(item => {
        if (item.activePath) {
          this.acitvePath = item.activePath// 使用路由设置为索引
        }
      })
      this.zsList.map(item => {
        if (item.activePath) {
          this.zsAcitvePath = item.activePath// 使用路由设置为索引
        }
      })
      this.removeActive()// 清空索引
    },
    // 清空索引
    removeActive() {
      // 清空索引
      this.list.map(child => {
        this.$set(child, 'activePath', '')
      })
      this.zsList.map(child => {
        this.$set(child, 'activePath', '')
      })
    }
  }
}
</script>
<style lang="less" scoped>
  @import '~@assets/style/common/public.less';
  @H:40px;//高度和行高
  @before:#B5B5B5;//步骤箭头颜色
  @accomplish:@hyacinthine;//已完成节点-icon
  @accomplish-title:@dark-font;//已完成节点-title
  @active:@hyacinthine;//当前节点
  @disable:@gray;//未开启节点
  @border: @border-gray;//下边框颜色

  /*样式颜色边距修改-在上面的变量修改即可*/

  .driveStep {
    background:@white;
    height:@H;
    line-height: @H;
    border-bottom: 1px solid @border;
    box-sizing: border-box;

    /*资审文字*/
    .Information_btn{
      background: #E9EDFB;color: #606266;
      padding: 0 12px;
    }

    ul {
      /*初始化布局设置*/
      li {
        position: relative;
        float: left;
        /*icon图标-节点状态*/
        .state {
          display: inline-block;
          vertical-align: middle;
          width: 19px;
          height: 19px;
          border-radius: 50%; /*no*/
          line-height: 19px;
          text-align: center;
          font-size: 14px;
        }
        /*icon图标-序列号状态*/
        .state_num{
          display: inline-block;
          vertical-align: middle;
          border-radius: 50%;
          width: 14px;
          height: 14px;
          line-height: 14px;
          font-size: 12px;
          text-align: center;
        }
        /*箭头*/
        .arrows{
          position: absolute;
          top: 0.2px;
          left: 28.5px;
          color: @before;
          font-size: 12px;
        }
        /*横线箭头*/
        &:before {
          float: left;
          content: "";
          display: block;
          margin: 19.5px 8px;
          width: 50px;
          z-index: 1;
          border-bottom: 1px dashed @before;
        }
        /*第一个步骤箭头隐藏*/
        &:first-child:before, &:first-child .arrows {
          display: none;
        }
      }
      /*已完成节点*/
      li.accomplish {
        color: @accomplish;
        /*icon图标-节点状态*/
        .state {
          background: @white;
        }
        /*icon图标-序列号状态*/
        .state_num{
          background: @accomplish;
          color: @white;
        }
        /*菜单名称样式*/
        .task_name{
          color: @accomplish-title;
        }
      }
      //当前编辑节点
      li.active {
        /*icon图标-节点状态*/
        color: @active;
         .state {
           background: @white;
         }
        /*icon图标-序列号状态*/
        .state_num{
          background: @active;
          color: @white;
        }
       }
      /*未开启节点*/
      li.disable {
        color: @disable !important;
        .state {
          background: @white !important;
        }
        /*icon图标-序列号状态*/
        .state_num{
          background: @disable;
          color: @white;
        }
      }
    }
  }

</style>
