<template>
  <div class="ls-vertical">
    <navbar icon="back" title="任务详情" :buttons="btns" :back-func="backCallBack" @clickbutton="clickbtn"></navbar>
    <div class="ls-container">
      <div class="title">
        <div class="left">
           <span>基础信息</span>
           <div class="status" :class="essentialData.emergencyDegree">{{essentialData.emergencyDegreeKey}}</div>
        </div>
      </div>

       <!-- 任务详情new样式-->
     <div v-show="essentialData.ext3!='adjust'">
      <el-row :gutter="20" class="row-form">
        <el-col :span="8">
          <label>任务 ID</label>
          <div class="grid-content">{{essentialData.taskId}}</div>
        </el-col>
        <el-col :span="8">
          <label>客户名称</label>
          <div class="grid-content">{{essentialData.customerName }}</div>
        </el-col>
        <el-col :span="8">
          <label>状态</label>
          <div class="grid-content">{{essentialData.statusKey}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="row-form">
        <el-col :span="8">
          <label>责任人</label>
          <div class="grid-content">{{essentialData.taskUser}}</div>
        </el-col>
        <el-col :span="8">
          <label>协同人员</label>
          <div class="grid-content">{{essentialData.userNamesStr }}</div>
        </el-col>
        <el-col :span="8">
          <label>事项类型</label>
          <div class="grid-content">{{essentialData.itemTypeKey}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="row-form">
        <el-col :span="8">
          <label>发起时间</label>
          <div class="grid-content">{{essentialData.createTimeFormat}}</div>
        </el-col>
        <el-col :span="8">
          <label>截止时间</label>
          <div class="grid-content">{{essentialData.taskRequestDateFormat }}</div>
        </el-col>
        <el-col :span="8">
          <label>关联项目</label>
          <div class="grid-content" style="color:black;cursor:pointer;color:#0077FA;text-decoration:underline;"
          @click="ProjectdetailsJump(essentialData.relatedProjectsNumber)">{{essentialData.projectCode}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="row-form">
        <el-col :span="24">
          <label>关联拜访报告</label>
          <div class="grid-content" style="color:black;cursor:pointer;color:#0077FA;text-decoration:underline;"
          @click="visitdetailsJump(essentialData)">{{essentialData.visitReportCode}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="row-form">
        <el-col :span="24">
          <label>任务描述</label>
          <div class="grid-content" style="word-break:break-all;padding: 6px;line-height: 26px;">
          {{essentialData.taskContent}}</div>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="row-form">
        <el-col :span="24">
          <label>处理信息</label>
          <div class="grid-content" style="word-break:break-all;padding: 6px;line-height: 26px;">
          {{essentialData.reviewerInfoStr}}</div>
        </el-col>
      </el-row>
        </div>

     <!-- <div class="upload-box">
        <p>附件上传</p>
        <ls-upload v-model="fileList" ref="uploadRef" :showuploadbtn="uploadFile" :showdeletebtn="deleteFile"></ls-upload>
      </div> -->

      <task-form ref="taskForm" :preservationData="false" v-show="essentialData.ext3=='adjust'"></task-form>
      <!--  处理动作组件封装-->
      <operation-reviewer v-show="button" ref="operReviewer" :operate-param.sync="operateParam" @send="getChildParam"></operation-reviewer>
      <!-- 评论 浏览记录 评论列表组件 -->
      <div style="padding-top:5px;">
         <ls-remark :detailStatus="detailStatus"  ref="lsRemark" @refreshPage="refreshPage" :button="button"> </ls-remark>
      </div>
      <dialog-log ref="dialogLogRef" :bus-id="detailStatus.busId"></dialog-log>
      <!-- <task-dynamic :reviewerParamList="reviewerParamList"></task-dynamic> -->

    </div>
  </div>
</template>

<script>
  import lsUpload from '../../../../components/ls-upload.vue';
  import taskProcessInformationtab from './task-process-informationtab.vue';
  import taskProcessInformation from './task-process-information.vue';
  import taskDynamic from './task-dynamic.vue';
  import commonSelectList from '../../../../common/commonSelectList.js';
  import operationReviewer from '../../../../components/operation-reviewer.vue';
  import taskForm from '../../../../components/task-form';

  export default {
    name: 'taskDetail',
    components: {
      taskProcessInformationtab,
      taskProcessInformation,
      taskDynamic,
      operationReviewer,
      taskForm,
      lsUpload
    },
    created() {
      this.taskDetails();
      this.projectId = this.$route.query.projectId || '';
      this.getHeadUrl();
      this.getHeadProjectUrl();
    },
    mounted() {

    },
    methods: {
      // 接收子组件的参数
      getChildParam(param) {
        this.button = param.buttion;
        if (this.button) {
          this.btns[0].show = true;
        } else {
          this.btns[0].show = false;
        }
      },
      checkShow(){
        this.$refs.lsRemark.isBrow(true)
      },
      refreshPage() {
        this.taskDetails()
      },
      viewLog(){
        this.$refs.dialogLogRef.visible = true;
      },
      // 导航栏按钮操作
      clickbtn(type) {
        let that = this
        switch (type) {
          case 'log':
            this.viewLog();
            break;
          case 'refresh':
            this.pager.curPage = 1;
            this.pager.pageSize = 10;
            this.doQuery();
            break;
          case 'submit':
            let operReviewer = this.$refs['operReviewer'].param;
            operReviewer.reviewerType = 3104;
            if (operReviewer.result == '' || operReviewer.result == undefined) {
              this.$message('请选择审批操作');
               return;
            }
            if ((operReviewer.result == 'adjust_cancel' || operReviewer.result == 'cancel' || operReviewer.result == 'change' || operReviewer.result == 'unpass'
              || operReviewer.result == 'adjust' || operReviewer.result == 'recall') && (operReviewer.content == '' || operReviewer.content == undefined)) {
              this.$message('审批意见不能为空,请填写!');
              return;
            }
            if(this.essentialData.ext3=='adjust'){
              let paramForm=this.$refs.taskForm.setParamForm();

              //添加附件
              // paramForm.attachFileInfoList = this.fileInfo();

              this.$ajax.post({
                domain: 'crmUrl',
                url: "task.saveTask",
                data: JSON.stringify(paramForm),
                success: function(res) {
                  if (res.errorCode === 200) {
                    this.save(operReviewer);
                  } else {
                    this.$message.error(res.msg)
                  }
                }.bind(this),
                error: function(res) {
                  this.$message.error(res.msg)
                }.bind(this)
              });
            }else{
              this.save(operReviewer);
            }
            break;
        }
      },
      save(operReviewer){
        operReviewer.reviewerType =3104
        //添加附件
        // operReviewer.attachFileInfoList = this.fileInfo();
        console.log("operReviewer====>",operReviewer)
        this.$ajax.post({
          domain: 'crmUrl',
          url: 'reviewer.saveReviewer',
          data: JSON.stringify(operReviewer),
          success: function(res) {
            if (res.errorCode == 200) {
              this.$message({
                message: '处理成功',
                type: 'success'
              });
              if(this.$route.query.taskId){
                window.close();
              }else if(this.projectId){
                this.$router.push({ name: 'projectDetail', params: { projectId: this.projectId, activeTab: 'productTask' } });
              } else {
                this.$router.back(-1);
              }
            } else {
              this.$message.error(res.msg);
            }
          }.bind(this),
          error: function(res) {
            this.$message.error(res.msg);
          }.bind(this)
        });
      },
     //返回跳转方法
      backCallBack(data) {
           if (this.projectId) {
             this.$router.push({
               name: 'projectDetail',
               params: { projectId: this.projectId, activeTab: 'productTask'  } ,
             });
           } else {
              this.$router.push('taskList');
           }
        // }).catch(() => { });
      },

      //文件信息
      // fileInfo(){
      //    let arr = [];
      //    if(this.fileList!=null){
      //     for (var i = 0; i < this.fileList.length; i++) {
      //       arr.push({
      //         fileId: this.fileList[i].response.data.fileId,
      //         fileName: this.fileList[i].response.data.fileName,
      //         fileSize: this.fileList[i].response.data.fileSize,
      //       });
      //     }
      //    }
      //    return arr;
      // },

      //点击跳转项目详情
      ProjectdetailsJump(id){
        if(id==null){
          return;
        }
        // this.$router.push({name: 'projectDetail',params: {projectId: id ,backRouteParam: this.taskRowid,backRouteUrl: 'taskDetail'}});
        let projectId = "&projectId="+id;
        let backRouteParam = "backRouteParam="+ this.taskRowid;
        let backRouteUrl = "&backRouteUrl=taskDetail";
        let route = "projectDetail?"
        let param = route+backRouteParam+backRouteUrl;
        let url = this.projectUrl+projectId+"#/";
        window.open(url+param);
      },

      //跳转到拜访详情
      visitdetailsJump(row){
        if(row.visitReportNumber == null){
          return;
        }
       //this.$router.push({ name: 'detailsVisit', query: { visitId: row.visitReportNumber,taskId:row.id} });
       let visitId = "visitId="+row.visitReportNumber;
       let taskId = "&taskId="+ row.id;
       let route = "detailsVisit?"
       let param = route+visitId+taskId;
       window.open(this.url+param);
      },

      getHeadUrl(){
         let headUrl = location.href;
         let index = headUrl .lastIndexOf("/");
         this.url =  headUrl .substring(0, index+1);
      },
      getHeadProjectUrl(){
         let headUrl = location.href;
         let index = headUrl .lastIndexOf("/");
         this.projectUrl =  headUrl .substring(0, index-1);
      },
      //获取详情接口
      taskDetails() {
        this.processStatus = [];
        var param={};
        if(this.$route.query.taskId){
           param = {
            id: this.$route.query.taskId
           };
        }else{
          this.taskRowid = this.$route.query.rowData;
           param = {
            id: this.taskRowid
           };
        }

        console.log(this.taskRowid, `传来的数据`);
        this.$ajax.post({
          domain: 'crmUrl',
          url: 'task.getTaskDetails',
          data: JSON.stringify(param),
          success: function(res) {
            if (res.errorCode == 200) {
              this.essentialData = res.data;
              // this.deleteFile = false;
              // if(this.essentialData.status=='finish'){
              //    this.uploadFile = false;
              // }
              this.infoStatus = res.data.status;
              this.operateParam.busId = res.data.id;
              //附件信息回显
              // let arrfile = [];
              // for (var i = 0; i < this.essentialData.attachFileInfoList.length; i++) {
              //   arrfile.push({
              //     name: this.essentialData.attachFileInfoList[i].fileName,
              //     size: this.essentialData.attachFileInfoList[i].fileSize,
              //     response: {
              //       data: {
              //         fileSize: this.essentialData.attachFileInfoList[i].fileSize,
              //         fileName: this.essentialData.attachFileInfoList[i].fileName,
              //         fileId: this.essentialData.attachFileInfoList[i].fileId,
              //       },
              //     },
              //   });
              // }
              // this.fileList = arrfile;
              // this.$refs.uploadRef.reset(this.fileList);

              this.detailStatus = {
                status: res.data.status,
                busId: res.data.id,
                moduleId:3104,
                superiorUid:res.data.ext2,
                status:res.data.status,
              }
              if(this.essentialData.ext3=='adjust'){
                this.$refs.taskForm.editDetail(this.essentialData);
              }
            } else {
              this.$message.error(res.msg);
            }
          }.bind(this),
          error: function(res) {
            this.$message.error(res.msg);
          }.bind(this)
        });
      }
    },



    data() {
      return {
        // uploadFile:true,
        // deleteFile:true,
        button: false,
        state: 1,
        url :'',
        projectUrl:'',
        paramForm:{},
        attachFileInfoList: [],
        operateParam: {
          busId: '',
          moduleId: '3104',
        },
        reviewerParamList: [{
          updater: '暂无数据',
          content: '暂无数据'
        }],
        taskRowid: '',
        detailStatus: {},
        currentStatus: '',
        essentialData: {},
        taskTypeName: '',
        submitStatus: [],
        btns: [
          {
            title: '提交',
            size: 'mini',
            circle: false,
            type: 'primary',
            isplain: false,
            btnEvent: 'submit',
            show: true,
            icon: 'el-icon-upload2'
          },
          {
            title: '日志',
            btnEvent: 'log',
            size: 'mini',
            circle: false,
            type: 'primary',
            isplain: false,
            show: true,
            icon: ''
          }
        ],
        processStatus: [],
        infoStatus: '',
        projectId: ''
      };
    },
    props: {
      rowList: {
        type: Object,
        default: () => {},
        required: false
      }
    }
  };
</script>

<style scoped lang="scss">

  .ls-container {
    margin: 0;
    border-top: 1px solid #f4f4f4;
    padding: 20px 20px 22px;
    overflow-y: auto;

    >.title {
      margin-bottom: 20px;
      border-bottom: 1px solid #DCDFE6;
      padding-bottom: 5px;

      .left {
        display: flex;
        align-items: center;
        >span {
          color: #0077FA;
          font-size: 14px;
          font-weight: bold;
        }
        .status {
          display: flex;
          justify-content: center;
          padding: 3px 19px;
          border-radius: 5px;
          margin: 0 20px;
        }
        .common{
          color: #409eff;
          background: #ecf5ff ;
        }
        .harry{
          color: #e8a849 ;
          background: #fdf6ec;
        }
        .import{
          color:  #f56c6c;
          background: #fef0f0;
        }
        .veryimport{
          color: #fff ;
          background: #f56c6c ;
        }
      }

    }

    .demo-ruleForm {
      .el-radio-group {
        margin-right: 16px;
      }

      .el-radio__label {
        padding-left: 5px;
      }
    }
  }

  .el-radio-group {
    margin-left: 10px;
  }


.upload-box {
  border-top: 4px solid #F0F0F0;
  margin: 10px -20px 0;
  padding: 20px;

  > p {
    margin-bottom: 15px;
    font-weight: bold;
  }
}
</style>
