<template>
  <div>
    <el-steps v-if="stageList" :active="calcIndex + 1" align-center>
      <el-step v-for="(item,index) in stageList" :key="item.sa_projstagetemp_stageid">
        <div slot="description" class="item" @click="stageClick(index,item)">
          <div :class="[
          'content',
          {'enterStatus':item.active == 1},
          {'active':clickCurrent == index}
          ]">
            <span class="title">{{item.stagename}}</span>
            <span>{{calcTaskNumber(item)}}/{{item.work.length}}</span>
          </div>
        </div>
      </el-step>  
    </el-steps>
    <el-card class="box-card" v-if="stageList">
      <div slot="header" class="clearfix">
        <span style="font-weight:bold">阶段任务</span>
        <el-button 
          style="border:1px solid #3874F6;color:#3874F6" 
          :disabled="currentData.active != 0" 
          size="mini"
          @click="enterStage"
        >进入当前阶段</el-button>
      </div>
      <div class="task" v-for="(item,index) in currentData.work" :key="index">
        <div class="task-header">
          <span class="task-header-title">任务{{index+1}}</span>
          <span class="task-header-status" v-if="item.finished" style="color:#3874F6">已完成</span>
          <span class="task-header-status" style="color:#52C41A" v-else-if="item.isfollow">跟进中</span>
          <span class="task-header-status" v-else>未开始</span>
        </div>
        <div class="content">
          <el-descriptions :column="2">
            <el-descriptions-item label="任务名称">{{ item.workname ? item.workname:'' }}</el-descriptions-item>
            <el-descriptions-item label="任务分值">{{ item.score ? item.score:'' }}</el-descriptions-item>
            <el-descriptions-item label="任务描述">{{ item.remarks ? item.remarks:'' }}</el-descriptions-item>
            <el-descriptions-item label="用户提交内容">{{ item.notes ? item.notes:'' }}</el-descriptions-item>
          </el-descriptions>
          <div class="file">
            <file-item :isDownLoad="true" :isDelete="false" :itemStyle="itemDrawerStyle" :fileData="fileType.fileList(item.attinfos)"></file-item>
          </div>
        </div>
        <div class="task-footer">
          <div class="btn">
            <el-button size="mini" :disabled="!currentData.active || item.finished != 0" @click="editBtn(item)">编辑</el-button>
            <el-button size="mini" type="primary" v-if="item.finished == 0" :disabled="!currentData.active" @click="taskSuccess(item)">完成</el-button>
            <el-button size="mini" type="info" v-else disabled>已完成</el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-empty v-else description="暂无数据" size="small"></el-empty>

    <el-drawer
      title="我是标题"
      :visible.sync="dialogFormVisible"
      direction="rtl"
      :modal="true"
      :show-close="false"
      :withHeader="false"
      size="30%">
      <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="saveEditInfo(dialogFormVisible = false)" size="small">提 交</el-button>
        </div>
      </div>
      <div class="container">
        <el-descriptions title="任务信息" :column="1">
          <el-descriptions-item label="任务名称">{{ editData.workname }}</el-descriptions-item>
          <el-descriptions-item label="任务分值">{{ editData.score }}</el-descriptions-item>
          <el-descriptions-item label="任务描述">{{ editData.remarks }}</el-descriptions-item>
        </el-descriptions>
        <el-divider></el-divider>
        <el-descriptions title="提交内容" />
        <el-input type="textarea" v-model="param.content.notes" placeholder="请填写完成的具体情况"></el-input>
        <Editor :data="editData" @deleteSuccess="deleteSuccess" @onSuccess="upLoad"/>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import Editor from './components/Editor'
import { log } from '@antv/g2plot/lib/utils';
import FileItem from '@/components/file-block/index'
export default {
  components:{Editor,FileItem},
  props:['rowData'],
  name: '',
  data() {
    return {
      stageList:'',
      clickCurrent: 0,
      currentData:'',
      dialogFormVisible:false,
      editData:'',
      param: {
        "id": 20221024160202,
        "content": {
            "sa_project_stageworkid": "",
            "notes":""
        }
      },
      itemDrawerStyle: {
        itemWidth:300,
        margin:10,
        img: {
          width: 40,
          height: 40
        },
        title: 12,
        descript: 10
      },
    };
  },
  computed:{
    /* 计算当前进入阶段的index */
    calcIndex () {
      return this.stageList.indexOf(this.stageList.find(item => item.active == 1))
    },
    /* 计算当前阶段完成的任务个数 */
    calcTaskNumber () {
      return function (data) {
        let num = 0
        data.work.filter(item => {
          if(item.finished != 0) {
            num ++
          }
        })
        return num
      }
      
    }
  },
  watch:{
    rowData () {
      this.getStageList(true)
    }
  },
  created () {
  },
  methods: {
    deleteSuccess (data) {
      let num = this.editData.attinfos.find( item => item.attachmentid == data.attachmentid)
      this.editData.attinfos.splice(this.editData.attinfos.indexOf(num),1)
    },
    upLoad (data) {
      this.editData.attinfos.push(data)
    },
    editBtn (data) {
      this.dialogFormVisible = true
      this.editData = data
    },
    /* 保存编辑编辑信息 */
    async saveEditInfo () {
      this.param.content.sa_project_stageworkid = this.editData.sa_project_stageworkid
      let res = await this.$api.requested(this.param)
      this.tool.showMessage(res, () => {
        this.dialogFormVisible = false
        this.getStageList()
      })
    },
    /* 获取阶段数据 */
    async getStageList (no) {
      let res = await this.$api.requested({
        "id": 20221024102402,
        "content": {
            "sa_projectid": this.rowData.sa_projectid,
            "sa_projstagetempid": this.rowData.sa_projstagetempid
        }
      })
      this.stageList = res.data
      console.log(this.stageList);
      
      /* 如果已有阶段 默认id释放 */
      if(this.calcIndex != -1) {
        this.clickCurrent = null
        this.currentData = this.stageList[this.calcIndex]
      } else {
        this.currentData = this.stageList[0]
      }
    },
    /* 单击阶段 */
    stageClick (val,item) {
      this.clickCurrent = val == this.calcIndex ? null : val
      console.log(this.clickCurrent);
      
      this.currentData = item
    },
    /* 进入阶段 */
    async enterStage () {
      this.$alert('确定进入当前阶段吗?', '提示', {
        confirmButtonText: '确定',
        callback: async action => {
          if (action == 'confirm') {
            let res = await this.$api.requested({
              "id": 20221024160102,
              "content": {
                  "sa_projectid": this.currentData.sa_projectid,
                  "sa_projstagetempid": this.currentData.sa_projstagetempid,
                  "sa_project_stageid": this.currentData.sa_project_stageid
              }
            })
            console.log(res);
            this.tool.showMessage(res,() => {
              this.getStageList(false)
            })
          }
        }
      });
    },
    /* 任务完成 */
    async taskSuccess (data) {
      this.$alert('确定完成当前任务吗?无法撤销', '提示', {
        confirmButtonText: '确定',
        callback: async action => {
          if (action == 'confirm') {
            let res = await this.$api.requested({
              "id": 20221024160302,
              "content": {
                  "sa_project_stageworkid": data.sa_project_stageworkid
              }
            })
            console.log(res);
            this.tool.showMessage(res,() => {
              this.getStageList(false)
            })
          }
        }
      })
    } 
  },
};
</script>

<style scoped>
  .item {
    cursor: pointer;
  }
  .item .content {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    transform: skew(-20deg);
    padding: 5px 10px;
    background: #EEEEEE;
    color: #000000;
    border-radius: 5px;
  }
  .item .content span:first-child {
    transform: skew(20deg);
  }
  .item .content span:last-child {
    display: inline;
    background: #ffffff;
    padding: 1px 10px;
    border-radius: 30%;
    color: #000000;
    transform: skew(20deg);
  }
  .enterStatus {
    background: #3874F6 !important;
    color: #ffffff !important;
  }
  .active {
    background: #F2F5FF !important;
    color: #3874F6 !important;
  }
  .box-card {
    margin-top: 20px;
    font-size: 12px;
  }
  .box-card .clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .box-card .clearfix .enter-stage {
    padding: 4px 10px;
    color: #3874F6;
    border-radius: 5px;
    border: 1px solid #3874F6;
    cursor: pointer;
  }
  .box-card .clearfix .enter-stage:hover {
    background: #3874F6;
    color: #ffffff;
  }
  /deep/.el-card__body {
    padding: 0px 0px;
  }
  .box-card .task { 
    border-bottom: 15px solid #F5F5F5;
  }
  .box-card .task:last-child {
    border-bottom: none;
  }
  .box-card .task:first-child {
    border-top: 15px solid #F5F5F5;
  }
  .box-card .task .task-header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #cccccc;
    padding: 0 20px;
    line-height: 35px;
    margin-bottom: 15px;
  }
  .box-card .task .content {
    padding: 0 20px;
  }
  .box-card .task .task-footer {
    display: flex;
    flex-direction: row-reverse;
  }
  .box-card .task .task-footer .btn {
    margin:0 10px 10px 0;
  }
  .box-card .task .content p {
    margin-bottom: 10px;
  }
  /deep/.el-step__head {
    max-width: 400px;
  }
  /deep/.el-step__main {
    max-width: 400px;
  }
  /deep/.el-step__description {
    padding:0 20% !important;
  }
</style>
