<!--
  @description: 项目驱动步骤菜单
  @Modifier: 肖文龙
  @routerPath:
  @date: 2019/12/27-14:23
-->
<template>
  <div class="driveSideBar">
    <ul>
      <!--已完成节点-->
      <li
        v-for="(item,index) in list"
        v-if="item[driveData.driveIsOpenKey]!==driveData.driveNoOpenVal&&driveTaskActivePath!==item[driveData.driveUrlKey]"
        :key="index"
        class="pointer accomplish"
        @click="driveClick(item)"
      >
        <!-- icon-图标 -->
        <span v-if="driveData.driveIconType==='00'||driveData.driveIconType==='01'" :class="'state iconfont '+ (driveData.driveIconType==='00'?'icon-pass':item.icon)" />
        <!-- icon-序列号 -->
        <span v-if="driveData.driveIconType==='02'" class="state_num ">{{ index+1 }}</span>
        <span :class="{'task_name_space':item[driveData.driveName].length<3}" class="task_name">{{ item[driveData.driveName] }}</span>
      </li>
      <!--当前节点-->
      <li
        v-else-if="item[driveData.driveIsOpenKey]!==driveData.driveNoOpenVal&&driveTaskActivePath===item[driveData.driveUrlKey]"
        class="pointer active"
        @click="driveClick(item)"
      >
        <span>
          <!-- icon-图标 -->
          <span v-if="driveData.driveIconType==='00'||driveData.driveIconType==='01'" :class="'state iconfont '+ (driveData.driveIconType==='00'?'icon-doing':item.icon)" />
          <!-- icon-序列号 -->
          <span v-if="driveData.driveIconType==='02'" class="state_num ">{{ index+1 }}</span>
          <span :class="{'task_name_space':item[driveData.driveName].length<3}" class="task_name">{{ item[driveData.driveName] }}</span>
        </span>
      </li>
      <!--未开启节点-->
      <li v-else-if="item[driveData.driveIsOpenKey]===driveData.driveNoOpenVal" class="disable">
        <!-- icon-图标 -->
        <span v-if="driveData.driveIconType==='00'||driveData.driveIconType==='01'" :class="'state iconfont '+ (driveData.driveIconType==='00'?'icon-pass':item.icon)" />
        <!-- icon-序列号 -->
        <span v-if="driveData.driveIconType==='02'" class="state_num ">{{ index+1 }}</span>
        <span :class="{'task_name_space':item[driveData.driveName].length<3}" class="task_name">{{ item[driveData.driveName] }}</span>
      </li>
    </ul>
  </div>
</template>

<script>

/**
   * {
   *  requestUrl:"", 路由
   *  taskName:"",节点名称
   *  isOpen:"" 是否开启 00:未开启 01:开启
   *  isOpen:"" 00:未开启 01:正在进行 02已完成
   *  icon:"" icon-font
   * }
   */
export default {
  name: 'DriveSideBar',
  props: {
    list: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 设置自定义key
    driveData: {
      type: Object,
      default: function() {
        return {
          driveName: '', // 节点名称-key名称
          driveIsOpenKey: '', // 驱动主节点-状态-key名称
          driveUrlKey: '', // 驱动主节点-路由-key名称
          mainIdKey: '', // 获取子节点id-key名称
          driveIconType: '' // 图标使用状态 00 默认 01 自定义icon 02 序列号
        }
      }
    },
    /*
      * 设置当前节点的二级步骤tab
      * item 一级步骤节点参数
      * */
    setDriveTaskChild: {
      type: Function,
      default: function(item) {
      }
    }
  },
  data() {
    return {
      driveTaskActivePath: ''// 主驱动当前索引
    }
  },
  watch: {
    list: {
      deep: true, // 深度监听设置为 true
      handler: function() {
        this.initActive()// 获取索引
      }
    }
  },
  methods: {
    driveClick(item) {
      this.removeActive()// 清空索引
      this.driveTaskActivePath = item[this.driveData.driveUrlKey]// 主驱动当前节点索引
      // 切换二级步骤节点tab
      this.setDriveTaskChild(item)// 设置当前节点的二级步骤tab
    },
    // 获取索引
    initActive() {
      this.list.map(item => {
        if (item.driveTaskActivePath) {
          this.driveTaskActivePath = item.driveTaskActivePath// 使用路由设置为索引
        }
      })
    },
    // 清空索引
    removeActive() {
      // 清空索引
      this.list.map(child => {
        this.$set(child, 'driveTaskActivePath', '')
      })
    }
  }
}
</script>
<style lang="less" scoped>
  @import '~@assets/style/common/public.less';
  @W:147px;//宽度
  @H:38px;//高度和行高
  @MB:23px;//距下一个按钮的距离
  @P:16px;//按钮左右padding
  @MLMR:8px;//按钮左右两边距离
  @MTMB:18px;//按钮上下边距离
  @default:#606266;//默认值 字体颜色
  @before:#C0C4CC;//默认值-竖线
  @default-bc:#F0EDF1;//默认值-背景色
  @accomplish:#24B761;//已完成节点
  @accomplish-border:#ccc;//已完成节点-边框
  @active:@hyacinthine;//当前节点
  @active-title:@white;//当前节点-字体颜色
  @disable-icon:#C0C4CC;//未开启节点-ico

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

  .driveSideBar {
    padding: 1px 0;/*no*/
    background: @white;
    height: calc(100vh - 56px - 64px - 80px - 32px);
    ul {
      /*初始化布局设置*/
      padding: 0 @MLMR;
      li {
        position: relative;
        height: @H;
        line-height: @H;
        width: @W;
        padding: 0 @P;
        margin-top: @MTMB;
        margin-bottom: @MB;
        color: @white;
        border-radius: 3px;
        z-index: 0;
        /*icon图标-节点状态*/
        .state {
          display: inline-block;
          vertical-align: middle;
          width: 19px;
          height: 19px;
          border-radius: 50%; /*no*/
          line-height: 19px;
          text-align: center;
          font-size: 15px;
        }
        /*icon图标-序列号状态*/
        .state_num{
          margin-left: 2px;
          display: inline-block;
          vertical-align: middle;
          border-radius: 50%;
          width: 16px;
          height: 16px;
          line-height: 16px;
          font-size: 14px;
          text-align: center;
        }
        /*菜单名称样式*/
        .task_name{
          margin-left: 15px;
          color: @default;
        }
        /*菜单名称样式-字体间距*/
        .task_name_space{
          font-weight: 500;
          letter-spacing: 20px;
        }
        /*竖线*/
        &:before {
          content: "";
          display: block;
          position: absolute;
          top: @H;
          left: @P + 9px;
          width: 1px;
          height: @MB;
          z-index: 1;
          border-left: 1px dashed @before;
        }
        /*最后一个步骤竖线隐藏*/
        &:last-of-type:before{
          display: none;
        }
        /*最后一个按钮*/
        &:last-of-type{
          margin-bottom: @MTMB;
        }
      }
      /*已完成节点*/
      .accomplish {
        border: 1px solid @accomplish-border;
        background: @default-bc;
        /*icon图标-节点状态*/
        color: @active;
        .state {
          background: @default-bc;
        }
        /*icon图标-序列号状态*/
        .state_num{
          background: @active;
          color: @default-bc;
        }
      }
      //当前编辑节点
      .active {
        /*icon图标-节点状态*/
        background: @active;
        /*菜单名称样式*/
        .task_name{
          color: @active-title;
        }
        .state {
          background: @active;
        }
        /*icon图标-序列号状态*/
        .state_num{
          background: @white;
          color: @active;
        }
      }
      /*未开启节点*/
      .disable {
        background: @default-bc;
        color: @disable-icon;
        .state {
          background: @default-bc;
        }
        /*icon图标-序列号状态*/
        .state_num{
          background: @disable-icon;
          color: @default-bc;
        }
      }
    }
  }

</style>
