<template>
  <div>
    <el-button type="text" size="small" @click="onShow">设置项目阶段</el-button>
    <el-drawer
      title="我是标题"
      :visible.sync="dialogStageVisible"
      direction="rtl"
      :modal="true"
      :show-close="false"
      :withHeader="false"
      size="50%">
      <div class="flex-align-center flex-between container" style="border-bottom:1px solid #f1f2f3">
        <div style="font-size:20px">模板</div>
        <div>
          <el-button type="primary" @click="dialogStageVisible = false" size="small">保 存</el-button>
          <!-- <el-button @click="dialogStageVisible = false" size="small">取 消</el-button> -->
        </div>
      </div>
      <div class="container">
        <div class="container">
          <div class="flex-align-stretch">
            <div v-for="(stage,index) in stageData.sa_projstagetempStages" :key="index" @click="(act_stageIndex = index,showEidtWork = 'hide',act_workIndex = null)">
              <div class="stage__panel" :class="act_stageIndex === index?'active__stage':''">
                <!-- <div>
                  {{stage.stagename}}
                </div> -->
                <div>
                  <el-input
                    style="width:100px"
                    class="input-new-tag"
                    v-if="act_stageIndex === index && inputVisible"
                    v-model="stage.stagename"
                    ref="editTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                  >
                  </el-input>
                  <p v-else class="button-new-tag" size="small" @click="showEditInput">{{stage.stagename}}</p>
                </div>
              </div>
            </div>
            <div class="stage__panel">
              <div>
                <el-input
                  style="width:100px"
                  class="input-new-tag"
                  v-if="inputVisible && !act_stageIndex"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"
                >
                </el-input>
                <p v-else class="button-new-tag" size="small" @click="showInput">+ 新阶段</p>
              </div>
            </div>
          </div>
          <div class="work__panel" 
          :class="act_workIndex === windex?'active__work':''" 
          v-for="(work,windex) in stageData.sa_projstagetempStages[act_stageIndex].sa_projstagetempWorks" 
          :key="windex"
          @click="(act_workIndex = windex,showEidtWork = 'show')">
            <div :class="act_workIndex === windex?showEidtWork==='hide'?'show':'hide':''">
              <!-- <p><b>{{work.workname}}</b></p> -->
              <el-divider content-position="left">{{work.workname}}</el-divider>
              <p>{{work.remarks}}</p>
            </div>
            <div class="work__panel__operation">
              <i class="el-icon-s-claim"></i>&emsp;
              <i class="el-icon-delete" @click="deleteWork(windex)"></i>
            </div>
            <div v-if="act_workIndex === windex"  :class="showEidtWork" style="margin-top:20px">
              <el-input class="normal-margin" v-model="work.workname" size="small"></el-input>
              <el-input v-model="work.remarks" type="textarea" size="mini" :rows="3"></el-input>
            </div>
          </div>
          <div class="work__panel_add" @click="addNewWork()">
            + 添加新工作内容
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props:['data'],
  data () {
    return {
      dialogStageVisible:false,
      inputVisible:false,
      act_stageIndex:0,
      act_workIndex:null,
      showEidtWork:'hide',
      stageData: {
        "sa_projstagetempid": this.data.sa_projstagetempid,
        "stagetempname": this.data.stagetempname,
        "remarks":this.data.remarks,
        "projecttype": this.data.projecttype,
        "isused": this.data.isused,
        "locked":  this.data.locked,
        "sa_projstagetempStages":[
          {
            "sa_projstagetemp_stageid": 0,
            "stagename": "阶段一",
            "remarks": "",
            "sequence": 1,
            "sa_projstagetempWorks": [
              {
                  "workname": "工作一",
                  "remarks": "本的 CSS 变形平行四边形其实是矩形的超集:它的各条边是两两平行的,但各个角则不一定都是直角。",
                  "sequence": 1,
                  "score": 1
              },
              {
                  "workname": "工作二",
                  "remarks": "yos23",
                  "sequence": 1,
                  "score": 1
              }
            ]
          },
          {
            "sa_projstagetemp_stageid": 0,
            "stagename": "阶段二",
            "remarks": "",
            "sequence": 1,
            "sa_projstagetempWorks": [
              {
                  "workname": "yos23",
                  "remarks": "yos23",
                  "sequence": 1,
                  "score": 1
              }
            ]
          }
        ]
      },
      inputValue:''
    }
  },
  methods:{
    async getStageData() {
      const res = await this.$api.requested({
        "id": "20221019085904",
        "content": {
          "sa_projstagetempid":this.data.sa_projstagetempid
        }
      })
    },
    onShow () {
      this.dialogStageVisible = true
      this.getStageData()
    },
    editWork () {
      this.showEidtWork = 'show'
    },
    addNewWork () {
      let stage = this.stageData.sa_projstagetempStages[this.act_stageIndex].sa_projstagetempWorks
      stage.push({
        "workname": "新工作",
        "remarks": "新工作内容",
        "sequence": 1,
        "score": 1
      })
      this.act_workIndex = stage.length - 1
      this.showEidtWork = 'show'
    },
    deleteWork (windex) {
      let stage = this.stageData.sa_projstagetempStages[this.act_stageIndex].sa_projstagetempWorks
      stage = stage.filter((e,index)=>{
        if (index !== windex) {
          return e
        }
        
      })
      this.stageData.sa_projstagetempStages[this.act_stageIndex].sa_projstagetempWorks = stage
      console.log(stage)
    },
    showInput() {
      this.act_stageIndex = null
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    showEditInput () {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.editTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.stageData.sa_projstagetempStages.push({
          "sa_projstagetemp_stageid": 0,
          "stagename": this.inputValue,
          "remarks": "yos",
          "sequence": 1,
          "sa_projstagetempWorks": []
        });
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  },
  create () {
    
  }
}

</script>
<style>
</style>
<style scoped>
.stage__panel{
  height: 42px;
  line-height: 42px;
  width:150px;
  transform: skewX(-45deg);
  margin-left:15px;
  text-align: center;
  cursor: pointer;
  background: #f1f2f3;
}
.stage__panel > div {
    transform: skewX(45deg);
  }
.work__panel{
  position: relative;
  width:400px;
  margin: 16px 0 0px 0;
  padding:10px;
  border:2px solid #fff;
  font-size:14px;
  border-radius: 4px;
  cursor: pointer;
}
.work__panel:hover{
  border:2px dashed #3874f6;
}
.active__work{
  border:2px dashed #3874f6;
}
.work__panel__operation{
  display: none;
  position: absolute;
  right:0px;
  top:0px;
  padding:2px 10px;
  background: #3874f6;
  color:#fff;
  z-index: 999;
}
.active__work > .work__panel__operation {
  display: block;
}
.hide{
  display: none;
}
.show{
  display: block;
}
.work__panel_add{
  width:400px;
  margin: 16px 0 0px 0;
  padding:10px;
  font-size:14px;
  color:#666;
  border-radius: 4px;
  cursor: pointer;
  border:2px dashed #ccc;
}
</style>