<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"
      append-to-body
      size="50%">
      <div class="flex-align-center flex-between container" style="border-bottom:1px solid #f1f2f3">
        <div style="font-size:20px">{{data.stagetempname}}</div>
        <div>
          <el-button type="primary" @click="saveStageData(dialogStageVisible = false)" size="small">确 定</el-button>
          <el-button @click="dialogStageVisible = false" size="small">取 消</el-button>
        </div>
      </div>
      <div class="container" style="font-size:14px">
        <el-row :gutter="20">
          <el-col :span="9">
            <div>
              <div class="flex-align-center flex-between normal-margin">
                <p>项目阶段</p>
                <div>
                  <el-button size="mini" type="default" @click="addStage">添加阶段</el-button>
                  <el-button size="mini" :disabled="stageData.sa_projstagetempStages.length === 1" type="default" @click="deleteStage">删除阶段</el-button>
                </div>
              </div>
              <div 
                v-for="(stage,index) in stageData.sa_projstagetempStages" 
                :key="index" 
                @click="(act_stageIndex = index,act_workIndex = null)"
                @dragenter="dragenter($event, index,dragover,1000)"
                @dragover="debounce($event, index)"
                @dragstart="dragstart(index)"
                draggable
                >
                <div class="stage__panel" :class="act_stageIndex === index?'active__stage':''">
                  <!-- <div>
                    {{stage.stagename}}
                  </div> -->
                  <div style="padding:0 10px;">
                    <el-input
                      class="input-new-tag"
                      v-if="act_stageIndex === index && inputVisible"
                      v-model="stage.stagename"
                      ref="editTagInput"
                      size="small"
                      @keyup.enter.native="updateStage(stage)"
                    >
                    </el-input>
                    <div v-else class="flex-align-center flex-between">
                      <p class="button-new-tag" size="small" @click="(inputVisible = false)">{{stage.stagename}}</p>
                      <i class="el-icon-edit" @click.stop="editStage(index)">编 辑</i>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="15">
            <div class="flex-align-center flex-between normal-margin">
              <p>设置阶段任务</p>
              <div>
                <el-button size="mini" type="default" @click="addNewWork">添加工作</el-button>
              </div>
            </div>
            <div style="height:calc(100vh - 141px);overflow-y:scroll">
              <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)">
                  <div class="work__panel__operation">
                    <i class="el-icon-s-claim" @click="updateWork(work)"></i>&emsp;
                    <i class="el-icon-delete" @click="deleteWork(work)"></i>
                  </div>
                  <div style="margin-top:20px">
                    <el-form class="demo-form-inline" label-position="right" label-width="80px">
                      <el-form-item label="工作内容">
                        <el-input v-model="work.workname" type="textarea" size="mini" :rows="3"></el-input>
                      </el-form-item>
                      <el-form-item label="分值">
                        <el-input style="width:100px" class="normal-margin" v-model="work.score" size="small"></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
              </div>
            </div>
            <!-- <div class="work__panel_add" @click="addNewWork()">
              + 添加新工作内容
            </div> -->
          </el-col>
        </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props:['data'],
  data () {
    return {
      dialogStageVisible:false,
      inputVisible:false,
      act_stageIndex:0,
      act_workIndex:null,
      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": 0,
            "sa_projstagetempWorks": [
              {   
                "sa_projstagetemp_workid":0,
                "workname": "工作一",
                "remarks": "",
                "sequence": 0,
                "score": 1
              }
            ]
          },

        ]
      },
      inputValue:'',
      dragIndex: '',
      enterIndex: '',
    }
  },
  methods:{
    // 查询阶段数据
    async getStageData() {
      const res = await this.$api.requested({
        "id": "20221019085904",
        "content": {
          "sa_projstagetempid":this.data.sa_projstagetempid
        }
      })
      if (res.data.sa_projstagetempStages.length === 0) {
        this.saveStageData()
      } else {
        res.data.sa_projstagetempStages.forEach((e,index) => {
          e.sequence = index
        });
        this.stageData = Object.assign({},this.stageData,res.data)
      }
    },
    onShow () {
      this.dialogStageVisible = true
      this.getStageData()
    },
    
    // 保存完整数据
    async saveStageData () {
      const res = await this.$api.requested({
        "id": "20221020084204",
        "content":this.stageData
      })
      this.stageData = Object.assign({},this.stageData,res.data)
    },
    // 显示编辑阶段输入框
    editStage (index) {
      this.act_stageIndex = index
      this.inputVisible = true
    },
    // 新增阶段
    async addStage() {
      let obj = {
        "sa_projstagetempid":this.data.sa_projstagetempid,
        "sa_projstagetemp_stageid": 0,
        "stagename": '新阶段',
        "remarks": "",
        "sequence": this.stageData.sa_projstagetempStages.length,
        "sa_projstagetempWorks": []
      }
      const res = await this.$api.requested({
        "id": "20221019090104",
        "content": obj
      })
      this.getStageData()
    },
    // 删除阶段
    async deleteStage () {
      let id = this.stageData.sa_projstagetempStages[this.act_stageIndex].sa_projstagetemp_stageid
      const res = await this.$api.requested({
        "id":"20221019090204",
        "content": {
            "sa_projstagetemp_stageids":[id]
        }
      })
      this.act_stageIndex = 0
      this.tool.showMessage(res,()=>{
        this.getStageData()
      })
    },
    // 更新阶段请求
    async updateStage (stage) {
      this.inputVisible = false
      const res = await this.$api.requested({
        "id": "20221019090104",
        "content": stage
      })
      this.stageData = Object.assign({},this.stageData,res.data)
    },
    // 新增工作内容
    addNewWork () {
      let stage = this.stageData.sa_projstagetempStages[this.act_stageIndex].sa_projstagetempWorks
      let obj = {
        "workname": "新工作",
        "remarks": "新工作内容",
        "sequence": 1,
        "score": 1,
        "sa_projstagetemp_workid":0,
        "sa_projstagetemp_stageid": this.stageData.sa_projstagetempStages[this.act_stageIndex].sa_projstagetemp_stageid,
        "sa_projstagetempid":this.data.sa_projstagetempid,
      }
      stage.push(obj)
      this.updateWork(obj)
    },
    // 更新工作内容
    async updateWork (work) {
      const res = await this.$api.requested({
        "id": "20221019090504",
        "content": work
      })
      this.stageData = Object.assign({},this.stageData,res.data)
      this.tool.showMessage(res,()=>{
      })
      this.getStageData()
    },
    // 删除工作内容
    async deleteWork (work) {
      console.log(work)
      let id = work.sa_projstagetemp_workid
      const res = await this.$api.requested({
        "id":"20221019090604",
        "content": {
          "sa_projstagetemp_workids":[id]
        }
      })
      this.tool.showMessage(res,()=>{
        this.getStageData()
      })
    },

    dragstart(index) {
      this.dragIndex = index;
    },
    dragenter(e, index) {
      e.preventDefault();
      // 避免源对象触发自身的dragenter事件
      if (this.dragIndex !== index) {
        const source = this.stageData.sa_projstagetempStages[this.dragIndex];
        this.stageData.sa_projstagetempStages.splice(this.dragIndex, 1);
        this.stageData.sa_projstagetempStages.splice(index, 0, source);
        // 排序变化后目标对象的索引变成源对象的索引
        this.dragIndex = index;
        this.stageData.sa_projstagetempStages.forEach((e,idx)=>{
          e.sequence = idx
        })
        this.saveStageData()
      }
    },
    debounce (event,index,fn,delay) {
      let timerid
      return function () {
        clearTimeout(timerid)
        timerid = setTimeout(fn(event,index),delay)
      }
    },
    dragover(e, index) {
      e.preventDefault();
      console.log('end')
    },

  },
  create () {
    
  }
}

</script>
<style>
</style>
<style scoped>
.stage__panel{
  height: 42px;
  line-height: 42px;
  margin-bottom:10px;
  text-align: center;
  cursor: pointer;
  background: #f1f2f3;
  
}
.active__stage {
  background: #3874f6;
  color:#fff
}
.work__panel{
  position: relative;
  /* width:400px; */
  padding:10px;
  margin-bottom:10px;
  border:2px solid #f1f2f3;
  font-size:14px;
  border-radius: 4px;
  cursor: pointer;
}
.work__panel:hover{
  border:2px dashed #3874f6;
}
.active__work{
  margin-bottom:10px;
  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;
}
.button-new-tag{
  flex:1;
  text-align: left;
}
.sort-move {
  transition: transform 0.3s;
}
</style>