<template>
  <div class="project-design-mgr">
    <el-table border :data="dataList" style="width: 100%;margin-bottom: 60px;" v-loading="loading">
      <el-table-column prop="nodeText" label="任务内容" width="200">
        <template slot-scope="scope">
          <div :class="'node-text-' + scope.row.nodeLvl.length">{{ scope.row.nodeText }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="负责人" width="120">
        <template slot-scope="scope">
          <el-select v-if="scope.row.showOwner" v-model="scope.row.ownerName" filterable placeholder="请选择" 
          popper-class="sel-design-users">
            <el-option v-for="(item,idx) in users"
            :key="idx" :value="item.name">
            <div class="user-item">
            <span class="user-name">{{ item.name }}</span>
            <span class="user-dept">{{ item.deptName }}</span>
          </div>
          </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="计划开始时间" width="135">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.planStartDate" type="date" @change="doUpdateRow(scope.row)" placeholder="选择日期"></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="计划结束时间" width="135">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.planEndDate" type="date" @change="doUpdateRow(scope.row)"  placeholder="选择日期"></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="实际开始时间" width="135">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.startDate" type="date" @change="doUpdateRow(scope.row)"  placeholder="选择日期"></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="实际结束时间" width="135">
        <template slot-scope="scope">
          <el-date-picker v-model="scope.row.endDate" type="date" @change="doUpdateRow(scope.row)"  placeholder="选择日期"></el-date-picker>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="工期" width="80" align="center">
        <template slot-scope="scope">
          <span :class="scope.row.duration<0?'sp-red':''"> {{ scope.row.duration }}</span>
          <span v-if="scope.row.duration">天</span>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="剩余天数" width="80" align="center">
        <template slot-scope="scope">
          <span :class="scope.row.remainingDays<0?'sp-red':''">{{ scope.row.remainingDays }}</span>
          <span v-if="scope.row.remainingDays">天</span>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="状态" width="80" align="center">
        <template slot-scope="scope">
          <span class="sp-orange" v-if="scope.row.status=='进行中'">进行中</span>
          <span class="sp-green" v-if="scope.row.status=='完成'">完成</span>
          <span class="sp-red" v-if="scope.row.status=='延迟'">延迟</span>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="本周工作">
        <template slot-scope="scope">
          <el-input type="textarea" :maxlength="500" :rows="2" placeholder="请输入内容" v-model="scope.row.work"> </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="下周计划">
        <template slot-scope="scope">
          <el-input type="textarea" :maxlength="500" :rows="2" placeholder="请输入内容" v-model="scope.row.nextWeekWork"> </el-input>
        </template>
      </el-table-column>
      <el-table-column prop="owner" label="存在问题">
        <template slot-scope="scope">
          <el-input type="textarea" :maxlength="500" :rows="2" placeholder="请输入内容" v-model="scope.row.problem"> </el-input>
        </template>
      </el-table-column>
    </el-table>
    <div class="footer">
      <el-button @click="doSave" type="primary">保存</el-button>
      <el-button @click="doCancel">取消</el-button>
    </div>
  </div>
</template>

  <script>
  import { listByProject, updateList} from "@/api/project/projectDesign";
  import {findDesignUsers} from "@/api/project/surProjectUserInfo";
  export default {
    name: 'RuoyiUiProjectDesignMgr',

    data() {
      return {
        project: null,
        dataList: [],
        loading:false,
        users:[]
      };
    },

    mounted() {
      findDesignUsers().then(d=>{
        this.users=(d.data||[]).map(it=>{
          return {
            name:`${it.nickName}-${it.phonenumber}`,
            phone:it.phonenumber,
            userName:it.userName,
            deptName:it.remark,
            showName:it.nickName+" - "+it.remark
          }
        })
      });
    },
    methods: {
      doSave(){
        let postData= this.dataList.map(item=>{
          let it=JSON.parse(JSON.stringify(item));
         
          if(it.ownerName){
            let tmps=it.ownerName.split("-").filter(d=>d);
            it.ownerName=tmps.length>0?tmps[0]:"";
            it.ownerPhone=tmps.length>1?tmps[1]:"";
          }
          let chg=[]; 
          let old=it.old;
          if(it.ownerName!=old.ownerName){
            chg.push("负责人")
          }
          if(it.planStartDate!=old.planStartDate){
            chg.push("计划开始日期")
          }
          if(it.planEndDate!=old.planEndDate){
            chg.push("计划结束日期")
          }
          if(it.startDate!=old.startDate){
            chg.push("实际开始日期");
          }
          if(it.endDate!=old.endDate){
            chg.push("实际结束日期");
          }
          if(it.work!=old.work){
            chg.push("本周工作");
          }
          if(it.nextWeekWork!=old.nextWeekWork){
            chg.push("下周计划");
          }
          if(it.problem!=old.problem){
            chg.push("存在问题");
          }
          if(chg.length>0){
            let chgInfo=`${this.$store.state.user?.nickname} ${this.$dt(new Date()).format("YYYY-MM-DD HH:mm:ss")} 修改了[${chg.join(",")}]`
            if(it.updateInfo){
              it.updateInfo+="\n"+chgInfo;
            }else{
              it.updateInfo=chgInfo;
            }
          }
          delete it.old
          return it;

        });
        updateList(postData).then(d=>{
          this.$modal.msgSuccess("保存成功");
          this.$emit("success");
        });
      },
      timeSpan(dt1,dt2){
        let t1=+this.$dt(dt1).$d;
          let t2=+this.$dt(dt2).$d;
          let ts=(t2-t1)/1000.0/3600.0/24.0;
          let ts2=Math.floor(ts);
          if(ts==ts2){
            return ts;
          }
          return ts2+1;
      },
      doUpdateRow(row){debugger
        if(row.planStartDate && row.planEndDate){
          row.duration=this.timeSpan(row.planStartDate,row.planEndDate);
        }else{
          row.duration="";
        }
        if(row.startDate && !row.endDate && row.planEndDate){
          let n=this.timeSpan(row.startDate,row.planEndDate);
          row.remainingDays=n>0?n:0;
        }else{
          row.remainingDays="";
        }
        row.status="";
        if(row.planStartDate && row.planEndDate){
          if(row.startDate){
            if(row.endDate){
              row.status="完成";              
            }else{
              let t1=+this.$dt(row.planEndDate).$d;
              let t2=+this.$dt(new Date()).$d;
              if(t1>t2){
                row.status="进行中";
              }else{
                row.status="延迟";
              }
            }
          }
        }
      },
      doCancel(){
        this.$emit("cancel");
      },
      init(project) {
        this.project = project;
        this.loading=true;
        listByProject({ projectId: this.project.id }).then(d => {
          this.loading=false;
          this.dataList = (d.data || []).map(it => {            
            it.nodeText = it.baseBuildNode?.nodeText || "";
            it.nodeLvl = it.baseBuildNode?.nodeLvl || "";
            it.showOwner = it.nodeLvl != '0301' && it.nodeLvl != '0302';
            let oldData=JSON.parse(JSON.stringify(it));
            it.old=oldData;
            if(it.ownerName){
              it.ownerName+=(it.ownerPhone?"-"+it.ownerPhone:"");
            }else{
              it.ownerName="";
            }
            return it;
          });
        });
      }
    },
  };
</script>
  <style lang="scss">
  .project-design-mgr {
    font-size: 12px;

    .el-table__cell {
       padding:2px;
      .cell {
        padding: 0px 2px;
        font-size: 12px;
        .el-input__inner{
          font-size: 12px;
        }
        .node-text-4 {
          font-weight: bold;
        }

        .node-text-6 {
          margin-left: 20px;
        }

        .el-date-editor.el-input {
          width: 100% !important;
          font-size: 12px;
        }
      }
      .sp-red{
        color: red;
      }
      .sp-green{
        color: green;
      }
      .sp-orange{
        color: orange;
      }
    }

    .footer {
      position: fixed;
      bottom: 0px;
      width: 100%;
      text-align: center;
      background: #fff;
      box-shadow: 3px -2px 5px 5px rgba(0, 0, 0, 0.2);
      padding: 8px;
    }

  }
  .sel-design-users{
    width: 300px;
    .user-item{
      font-size:12px;
      position: relative;
      .user-name{
        display: inline-block;        
      }
      .user-dept{
        display:inline-block;
        color: #aaa;
        position: absolute;
        right: 4px;
      }
    }
  }
</style>