import { Component, OnInit } from '@angular/core';
import { Propertiy } from 'src/app/interface/propertiy-interface';
import { Others } from 'src/app/interface/ohters-interface';

@Component({
  selector: 'app-progress-step-demo',
  templateUrl: './progress-step-demo.component.html',
  styleUrls: ['./progress-step-demo.component.scss']
})
export class ProgressStepDemoComponent implements OnInit {

  properties: Array<Propertiy> = [
    {
      name: 'stepData',
      value: '{activeIndex:number,stepMessages:[{id:string,title:string,icon?string,hidden?boolean}]}',
      type: '@Input()',
      description: '步骤条数据'
    },
    {
      name: 'direction',
      value: 'horizontal || vertical',
      type: '@Input()',
      description: '步骤条排列方式'
    },
    {
      name: 'fill',
      value: 'false || true',
      type: '@Input()',
      description: '是否平铺'
    },
    {
      name: 'enableClick',
      value: 'false || true',
      type: '@Input()',
      description: '步骤条是否支持点击'
    },
    {
      name: 'fHeight',
      value: 'number',
      type: '@Input()',
      description: '竖向步骤条，fill时需要传递的高度'
    },
    {
      name: 'stepClick',
      value: ``,
      type: '@Output()',
      description: `步骤条点击后监听函数`
    }
  ];
  others: Array<Others> = [
    {
      name: 'nextStep',
      description: '下一步'
    },
    {
      name: 'prevStep',
      description: '上一步'
    },
    {
      name: 'getCurrentStepIndex',
      description: '获得当前active索引'
    },
    {
      name: 'goStep',
      description: '跳转到某一步，参数为跳转步骤索引'
    }
  ];

  codePath = {
    all: 'assets/codes/progress-step/all',
    baseDemo: 'assets/codes/progress-step/basedemo',
    stepbaseDemo: 'assets/codes/progress-step/stepbasedemo',
    verticalDemo: 'assets/codes/progress-step/verticaldemo',
    fillDemo: 'assets/codes/progress-step/filldemo',
    verticalfillDemo: 'assets/codes/progress-step/verticalfilldemo',
    customDemo: 'assets/codes/progress-step/customdemo',
    customDemo2: 'assets/codes/progress-step/customdemo2',
    clickableDemo: 'assets/codes/progress-step/clickabledemo'
  };


  progressDatatest = [
    {
      "id": "data1",
      "title": "项目A",
      "state": "done",
      "arrow": "next",
      "description": "正在审批"
    },
    {
      "id": "data2",
      "title": "预算",
      "state": "done",
      "arrow": "next",
      "description": "正在审正在审批正在审批正在审批正在审批正在审批正在审批正在审批正在审批正在审批批"
    },
    {
      "id": "data3",
      "title": "商务",
      "state": "done",
      "subData": [
        {
          "id": "subdata1",
          "title": "商务立项",
          "state": "done",
          "arrow": "next",
          "description": "正在审批"
        },
        {
          "id": "subdata2",
          "title": "商务立项2",
          "state": "done",
          "arrow": "next",
          "description": "正在审批"
        },
        {
          "id": "subdata3",
          "title": "商务立项3",
          "state": "done",
          "arrow": "next",
          "description": "正在审批"
        }
      ]
    },
    {
      "id": "data4",
      "title": "采购申请",
      "state": "doing",
      "subData": [
        {
          "id": "purchase",
          "title": "采购申请",
          "state": "doing",
          "arrow": "next",
          "description": "正在审批"
        },
        {
          "id": "purchase2",
          "title": "采购申请2",
          "state": "doing",
          "arrow": "next",
          "description": "正在审批"
        },
        {
          "id": "purchase3",
          "title": "采购申请3",
          "state": "doing",
          "arrow": "next",
          "description": "正在审批"
        }
      ]
    },
    {
      "id": "data5",
      "title": "合同申请",
      "state": "initial",
      "subData": [
        {
          "id": "apply",
          "title": "合同申请",
          "state": "initial",
          "arrow": "next",
          "description": "正在审批"
        },
        {
          "id": "apply2",
          "title": "合同申请2",
          "state": "initial",
          "arrow": "next",
          "description": "正在审批"
        },
        {
          "id": "apply3",
          "title": "合同申请3",
          "state": "initial",
          "arrow": "next",
          "description": "正在审批"
        }
      ]
    },
    {
      "id": "data6",
      "title": "付款申请",
      "state": "initial",
      "subData": [
        {
          "id": "pay",
          "title": "付款申请",
          "state": "initial",
          "arrow": "none",
          "description": "正在审批"
        },
        {
          "id": "pay2",
          "title": "付款申请2",
          "state": "initial",
          "arrow": "next",
          "description": "正在审批"
        },
        {
          "id": "pay3",
          "title": "付款申请3",
          "state": "initial",
          "arrow": "none",
          "description": "正在审批"
        },
      ]
    },
    {
      "id": "data7",
      "title": "完成",
      "state": "initial"
    }
  ]
  progressData3 = [
    {
      "id": "1",
      "title": "审批中",
      "description": "正在审批",
      "icon": "",
      "state": "done"
    },
    {
      "id": "2",
      "title": "待复核",
      "description": "等待复核",
      "icon": "",
      "state": "doing",
      "visible": false
    },
    {
      "id": "3",
      "title": "允许发送银行",
      "description": "允许发送银行的描述文字",
      "icon": "",
      "state": "initial"
    }
  ]

  progressData = {
    "activeIndex": 3,
    "stepMessages": [
      {
        "id": "1",
        "title": "审批中",
        "description": "正在审批",
        "state": "success"
      },
      {
        "id": "2",
        "title": "待复核",
        "description": "等待复核",
        "hidden": true
      },
      {
        "id": "3",
        "title": "允许发送银行",
        "description": "允许发送银行的描述文字"
      },
      {
        "id": "4",
        "title": "网银发送待确认",
        "description": "网银发送待确认描述文字"
      },
      {
        "id": "5",
        "title": "等待发送银行",
        "description": "等待发送银行描述文字"
      },
      {
        "id": "6",
        "title": "银行正在处理",
        "description": "银行正在处理描述文字"
      }, {
        "id": "7",
        "title": "银行付款成功",
        "description": "银行付款成功描述文字"
      }
    ]
  }

  progressData2 = {
    "activeIndex": 1,
    "stepMessages": [
      {
        "id": "1",
        "title": "审批中",
        "description": "正在审批",
        "icon": ""
      },
      {
        "id": "2",
        "title": "待复核",
        "description": "等待复核",
        "icon": ""
      },
      {
        "id": "3",
        "title": "允许发送银行",
        "description": "允许发送银行的描述文字",
        "icon": ""
      }
    ]
  }

  currentSubIndex = 1;
  subStepData = {
    'data3':this.currentSubIndex,
    'data4':2
  }
  progressDatatest2 ={
    "activeIndex": 3,
    "stepMessages": [
      {
        "id": "data1",
        "title": "项目A",
        "description": "正在审批"
      },
      {
        "id": "data2",
        "title": "预算",
        "description": "正在审正在审批正在审批正在审批正在审批正在审批正在审批正在审批正在审批正在审批批"
      },
      {
        "id": "data3",
        "title": "商务",
        "subSteps": [
          {
            "id": "subdata1",
            "title": "商务立项",
            "description": "正在审批"
          },
          {
            "id": "subdata2",
            "title": "商务立项2",
            "description": "正在审批"
          },
          {
            "id": "subdata3",
            "title": "商务立项3",
            "description": "正在审批"
          }
        ]
      },
      {
        "id": "data4",
        "title": "采购申请",
        "subSteps": [
          {
            "id": "purchase",
            "title": "采购申请",
            "description": "正在审批"
          },
          {
            "id": "purchase2",
            "title": "采购申请2",
            "description": "正在审批"
          },
          {
            "id": "purchase3",
            "title": "采购申请3",
            "description": "正在审批"
          }
        ]
      },
      {
        "id": "data7",
        "title": "完成",
        "state": "initial"
      }
    ]
  };

  useIcon: boolean = false;
  stepValue;
  constructor() { }

  ngOnInit() {
  }

  stepClick(data) {
    //console.log(data);
    this.stepValue = data.step;
  }

  stepHandler(item, index, data) {
    console.log(item);
    console.log(index),
      console.log(data);
  }


  changesubstep(){
    this.currentSubIndex = 0;
    this.subStepData = {
      'data3':this.currentSubIndex,
      'data4':2
    };
    console.log(this.subStepData);
  }

}