<template>
  <div class="max-big-box">
    <div class="title-box-info">
      <img src="~@/assets/images/xian_1.png">
      <p>任务状态信息</p>
      <img src="~@/assets/images/xian_2.png">
    </div>
    <!--步骤条-->
    <div class="steps-box">
      <div class="steps-for-box" v-for="(item,index) in stepsData" :key="index">
        <div>
          <p class="p-color-B" :class="{'p-color-C':index==0}"></p>
          <img src="~@/assets/images/icon_46.png">
          <p class="p-color-B" :class="{'p-color-C':index==7}"></p>
        </div>
        <input type="text" v-model="item.value" placeholder="请输入内容" maxLength="10" @blur="windowText(item)">
      </div>
    </div>
    <interactive-window
      v-if="windowType"
      :windowData="windowData"
      @windowLeftClick="windowLeftClick"
      @windowRightClick="windowRightClick"
    ></interactive-window>
  </div>
</template>

<script>
  import { statusInfoList,statusInfoAlter } from '@/api/userApi'
  export default {
    name: "taskStatusManagement",//任务状态管理
    components:{
      interactiveWindow: resolve => {require(['@/components/interactiveWindow'], resolve)},//提示弹窗

    },
    data () {
      return {
        stepsData:[],
        stepsDataTwo:[],
        // 弹窗状态
        windowType:false,
        //弹窗组件数据
        windowData:{},
      }
    },

    created(){

    },
    mounted() {
      this.statusInfoList();
    },
    methods: {
      //修改任务状态
      async statusInfoAlter(newData){
        console.log(newData.item);
        let param = new FormData();
        param.append('id',newData.item.id);
        param.append('taskName',newData.item.value);
        let obj = {
          id:newData.item.id,
          taskName:newData.item.value,
        }
        const { data } = await statusInfoAlter(obj);
        if(data.code==200){
          this.windowData = {
            type:"2",
            title:"提示",
            text:"修改成功~",
          };
          this.windowType = true;
        }
      },
      //任务状态列表
      async statusInfoList () {
        let self = this;
        const { data } = await statusInfoList();
        if(data.code==200){
          let list = [];
          for(let i=0;i<data.rows.length;i++){
            let obj ={
              id:data.rows[i].id,
              value:data.rows[i].taskName
            };
            list.push(obj);
          }
          self.stepsDataTwo = JSON.parse(JSON.stringify(list));
          self.stepsData = JSON.parse(JSON.stringify(list));
        }
      },
      //弹窗组件左侧按钮方法-对应取消方法
      windowLeftClick(){
        this.windowType = !this.windowType;
        this.statusInfoList();
      },
      //弹窗组件右侧按钮方法
      windowRightClick(data){
        this.windowType = false;
        this.statusInfoAlter(data);
      },
      //成功提示
      windowText(item){
        let self = this;
        for(let i=0;i<self.stepsDataTwo.length;i++){
          if(item.id==self.stepsDataTwo[i].id){
            console.log(item)
            console.log(self.stepsDataTwo[i])
            if(item.value!=self.stepsDataTwo[i].value){
              self.windowData = {
                type:"1",
                title:"提示",
                text:"确定要修改么?",
                leftButton:"取消",
                rightButton:"确定",
                item:item,
              };
              self.windowType = true;
            }
          }
        }
      },
    }
  }
</script>

<style scoped lang="stylus">
  .max-big-box
    height:100%;
    width:100%;
    .title-box-info
      width:473px;
      display flex
      height:40px;
      margin:53px auto 58px;
      img
        width:170px;
        height:2px;
        margin-top:19px;
      p
        width:133px;
        line-height:40px;
        color:$color_ff
        font-weight:700;
        font-size:$font_16;
    /*步骤条*/
    .steps-box
      width:1840px;
      height:81px;
      margin:31px auto 0;
      display: flex
      .steps-for-box
        div
          display: flex
          img
            height:30px;
            width:30px;
          p
            width:100px;
          .p-color-B
            height:6px;
            background:$color_a1;
            margin-top:13px;
          .p-color-C
            height:6px;
            background:rgba(255,255,255,0);
            margin-top:13px;
        input
          margin-top:10px;
          padding:0 18px;
          border:1px solid $theme;
          width:162px;
          height:38px;
          color:$color_ff;
  ::-webkit-input-placeholder
    color: $border_1;
  ::-moz-placeholder
    color: $border_1;
  ::-ms-input-placeholder
    color: $border_1;
</style>
