<template>
  <div>
    <el-button size="mini" type="text" @click="onShow(dialogFormVisible = true)">详 情</el-button>
    <el-drawer
        :visible.sync="dialogFormVisible"
        size="35%"
        direction="rtl"
        :withHeader="false"
        append-to-body
        @close="dialogFormVisible = false">
      <div class="flex-align-center flex-between" style="padding:10px">
        <div style="font-size:20px">{{titleName}}</div>
        <div>
          <el-button class="inline-16" size="mini" @click="onEdit" v-if="edit">编 辑</el-button>
          <!--          <el-button  size="small">作 废</el-button>-->
          <to_void class="inline-16" v-if="edit" :data="stageData" @onSuccess="toVoidSuccess"></to_void>
          <is_used class="inline-16" v-if="edit" :data="stageData" @onSuccess="onSuccess"></is_used>
        </div>
      </div>
      <div class="drawer__panel" >
        <el-row :gutter="20" style="border-bottom:1px solid #f1f2f3">
          <el-form :model="stageData" :rules="rules" ref="stageData" label-width="110px" label-position="right" size="mini" :disabled="edit">
            <el-col :span="12">
              <el-form-item label="项目模板名称:" prop="stagetempname">
                <el-input v-model="stageData.stagetempname" placeholder="请输入项目模板名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="项目类型:">
                <el-select v-model="stageData.projecttype" style="width:100%" placeholder="请选择项目类型">
                  <el-option v-for="item in sys_options"  :key="item.index" :value="item.value" :label="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item>
                <div style="display:flex">
                  <el-checkbox :true-label="1" :false-label="0" v-model="stageData.isused" checked="checked">启用</el-checkbox>
                  <!--                  <el-checkbox :true-label="1" :false-label="0" v-model="form.locked">锁定</el-checkbox>-->
                </div>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <!-- <el-button size="mini" @click="onSet" v-show="setEvent" style="margin-top: 10px">设置项目阶段</el-button> -->
        <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" :disabled="edit">添加阶段</el-button>
                    <el-button size="mini"  type="default" @click="deleteStage" :disabled="stageData.sa_projstagetempStages.length === 1 || edit ">删除阶段</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"
                          :disabled="edit"
                      >
                      </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" :disabled="edit">添加工作</el-button>
                  <el-button size="mini"  type="default" @click="deleteWork" :disabled="stageData.sa_projstagetempStages[act_stageIndex].sa_projstagetempWorks.length === 1 || edit">删除工作</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"
                     @dragenter="wdragenter($event, windex,dragover,1000)"
                     @dragover="debounce($event, windex)"
                     @dragstart="dragstart(windex)"
                     @click="(act_workIndex = windex)"
                     draggable>
                  <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" :disabled="edit"></el-input>
                      </el-form-item>
                      <el-form-item label="分值:">
                        <el-input style="width:100px" class="normal-margin" v-model="work.score" size="small" :disabled="edit"></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="fixed__btn__panel" v-if="save">
        <el-button size="small" @click="onCancel" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="saveStageData" class="normal-btn-width">保 存</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import to_void from '../modules/toVoid';
import is_used from '../modules/isUsed'
export default {
  name: "detail",
  props:["data"],
  components:{to_void,is_used},
  data(){
    return {
      dialogFormVisible:false,
      edit:true,
      save:false,
      titleName:'',
      isordercheck:true,
      isusedcheck:false,
      rules:{
        stagetempname:[
          { required: true, message: '请输入模板名称', trigger: 'blur'},
        ],
        projecttype:[
          { required: true, message: '请输入项目类型', trigger: 'blur'}
        ]
      },
      inputVisible:false,
      act_stageIndex:0,
      act_workIndex:null,
      stageData: {
        "sa_projstagetempid": 0,
        "stagetempname": '',
        "remarks":'',
        "projecttype": '',
        "isused": '',
        "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: '',
    }
  },
  computed:{
    ...mapGetters({
      sys_options:'sys_options'
    })
  },
  methods:{
    /*查询模板数据*/
    async templateData(){
      console.log("输出")
      const res = await this.$api.requested({
        "id": "20221019085904",
        "content": {
          "sa_projstagetempid":this.data.sa_projstagetempid
        }
      })
      console.log("模板数据")
      console.log(res)
      this.stageData = res.data
      this.titleName = this.stageData.stagetempname
    },
    onSuccess(){
      this.templateData()
      this.$emit('onSuccess')
    },
    toVoidSuccess(){
      this.dialogStageVisible = false
      this.$emit('onSuccess')
    },
    onShow () {
      this.$store.dispatch('optiontypeselect','projecttype')
      this.edit = true
      this.save = false
      this.templateData()
      /*this.getStageData()*/
    },
    // 保存完整数据
    saveStageData () {
      console.log(this.stageData)
      this.$refs['stageData'].validate(async (valid) => {
        if (!valid) return false
        const res = await this.$api.requested({
          "id": "20221020084204",
          "content":this.stageData
        })
        console.log(res)
        this.tool.showMessage(res,()=>{
          this.dialogFormVisible = false
          this.$emit('onSuccess')
        })
      })

    },
    onEdit(){
      this.titleName = '编辑模板'
      this.save = true
      this.edit = false
    },
    onCancel(){
      this.titleName = this.stageData.stagetempname
      this.save = false
      this.edit = true
    },
    // 显示编辑阶段输入框
    editStage (index) {
      this.act_stageIndex = index
      this.inputVisible = true
    },
    // 新增阶段
    async addStage(data) {
      this.stageData.sa_projstagetempStages.push(
          {
            "sa_projstagetemp_stageid": 0,
            "stagename": "阶段一",
            "remarks": "",
            "sequence": 0,
            "sa_projstagetempWorks": [
              {
                "sa_projstagetemp_workid":0,
                "workname": "工作一",
                "remarks": "",
                "sequence": 0,
                "score": 1
              }
            ]
          },
      )
    },
    // 删除阶段
    async deleteStage () {
      console.log(this.act_stageIndex)

      console.log(this.act_stageIndex)
      this.stageData.sa_projstagetempStages.splice(this.act_stageIndex,1)
      this.act_stageIndex = 0
    },
    // 新增工作内容
    addNewWork (data) {
      data = this.form
      let stage = this.stageData.sa_projstagetempStages[this.act_stageIndex].sa_projstagetempWorks
      let obj = {
        "workname": "新工作",
        "remarks": "新工作内容",
        "sequence": 1,
        "score": 1,
        "sa_projstagetemp_workid":0,

      }
      stage.push(obj)
      // this.updateWork(obj)
    },
    // 删除工作内容
    async deleteWork () {
      console.log(this.act_stageIndex)
      console.log(this.act_workIndex)
      console.log(this.stageData.sa_projstagetempStages[this.act_stageIndex].sa_projstagetempWorks)
      this.stageData.sa_projstagetempStages[this.act_stageIndex].sa_projstagetempWorks.splice(this.act_workIndex,1)
      this.act_workIndex = 0
    },

    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')
    },
  }
}
</script>

<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>