<template >
  <div class="comment-logs" v-show="isComment">
    <div class="approval-operat" v-show="isApploval">
      <div class="title">
        <span>审批留言</span>
      </div>
      <div v-show="taskShow.isStar">
        <span class="start">项目星级</span>
        <div v-if="processForm.star" style="display: flex;align-items: center;">
          <my-star  v-model="processForm.star" :disabled="taskShow.flagStar"></my-star>
          <div style="margin-left: 20px;display: flex;align-items: center;">
            <el-tooltip placement="top">
              <i class="el-icon-question" style="font-size: 18px;color: #357FB9;cursor: pointer;"></i>
              <div slot="content">
                5星项目为公司级客户项目，涉及跨部门配合，会分配专属FAE、CPM等人员并报送COO审批。<br/>
                4星及以下的项目按事业部项目定位填写。
              </div>
            </el-tooltip>
            <span style="font-size: 12px;margin-left: 5px;">星级评判标准</span>
          </div>
        </div>
      </div>
      <div v-show="taskShow.isRepeat">
        <span class="start">复评星级</span>
        <my-star v-model="processForm.repeatStar" :disabled="taskShow.flagRepeat"></my-star>
      </div>
      <div  v-show="taskShow.isVp" v-for="(item,index) in membersList" :key="index" >
        <span class="begin" style="margin: 0;">分配项目人员</span>
        <div  style="flex: 1;display: flex;" >
          <div  style="margin: 0 12px;">
            <common-select v-model="item.role"  dictType="Crm_Member_Role"
                           placeholder="请选择角色"
                           size="small">
            </common-select>
          </div>
          <div style="margin-right: 12px;">
            <el-select v-model="item.productLine"  placeholder="请选择产品线"
                       size="small" filterable  clearable >
              <el-option
                v-for="item in productLineList"
                :key="item.productLineName"
                :label="item.productLineName"
                :value="item.productLineName">
              </el-option>
            </el-select>
          </div>
          <div style="flex: 1;">
            <aws-org  v-model="item.users" :sid="sid"></aws-org>
          </div>
          <el-button v-show="index===0" style="margin-left: 12px;"
                     @click="addRow"
                     type="text"
                     size="small"
                     icon="el-icon-plus">添加行</el-button>
          <el-button v-show="index !==0"
                     @click="deleteRow(index)"
                     type="text"
                     size="small"
                     icon="el-icon-delete">删除行</el-button>
        </div>
      </div>  <!-- v-for-->
      <div v-show="taskShow.isPm">
        <span class="begin">协助人员</span>
        <div style="flex: 1;padding-right: 72px;">
          <aws-org  v-model="assistUsers" ref="awsorgRef" :sid="sid"></aws-org>
        </div>
      </div>
      <div>
        <el-input
          v-model="msg"
          type="textarea"
          placeholder="请输入处理说明"
          maxlength="300"
          show-word-limit
        />
      </div>
    </div>
    <div v-show="isLog">
      <div class="title">
        <span>审批记录</span>
      </div>
      <div>
         <el-table :data="list" ref="tableRef" highlight-current-row size="small" v-loading="loading" stripe border >

           <el-table-column type="index" label="序号" width="80" show-overflow-tooltip>
           </el-table-column>

           <el-table-column v-for="(item, index) in colunms" :key="index"
                 :prop="item.prop"
                 :label="item.label"
                 :class-name="item.prop =='msg'?'align-left':'' "
                 :fixed="item.fixed"
                 :align="item.align"
                 :formatter="formatter"
                 :show-overflow-tooltip="item.tooltip"
                 :min-width="item.width">
           </el-table-column>

         </el-table>
      </div>
    </div>
  </div>
</template>
<script>
  import starRating from 'vue-star-rating'
  import commonSelect from '@/common/commonSelectList.js'
  export default {
    name: 'comment-logs',
    components: {
      starRating
    },
    mounted: function () {
      debugger;
      if (this.processId) {
        this.lineId=this.$common.getUrlParams('lineId');
        this.refresh();
        this.setTaskShow();

      }
    },
    created: function(){
      this.getSelectList();

    },
    methods: {
      getCollectList(sign,callback){
        let param={
          moduleId: '3105',
          ext1:sign
        };
        this.$ajax.post({
          domain: 'crmUrl',
          url: 'collect.findCollect',
          data: param,
          requestType: 'body',
          showLoad: false,
          success: function (res) {
            if (res.errorCode === 200) {
              callback(res.data);
            }
          }.bind(this)
        })
      },
      setStar(star){
        debugger;
        this.processForm.star=star||0.5;
      },
      formatter(row, column, cellValue, index){
        if(column.property == 'createUserName'){
          return row.createUserName+"/"+row.departmentName+"/"+row.createUserRoleName;
        }else {
          return cellValue;
        }
      },
      valid(param){
        var th=this;
        if(param.actionName!=null && param.actionName=='驳回' && !this.msg){
          this.$message({type: 'warning', message: '请填写处理意见'});
          return false;
        }
        if(this.taskShow.isStar && param.actionName!='驳回'){
          if(this.processForm.star <=1){
            this.$message({type: 'warning', message: '项目星级必填'});
            return false;
          }
        }
        if(this.taskShow.isRepeat && param.actionName!='驳回'){
          if(this.processForm.repeatStar <=1){
            this.$message({type: 'warning', message: '复评项目星级必填'});
            return false;
          }
        }
        if(this.taskShow.isPm && param.actionName!='驳回'){
          if(this.assistUsers) {
            this.processForm.assistUsers=JSON.stringify(this.assistUsers);
          }
        }
        if(this.taskShow.isVp && param.actionName!='驳回'){
            return this.membersList.every((item, index)=>{
              if (!item.role || !item.users.length) {
                 this.$message({type: 'error', message: '分配项目人员的第'+(index+1)+'行，数据未填写完整'});
                return false;
              } else {
                let member= {
                  role: item.role, //角色
                  productLines: item.productLine
                };
                debugger;
                item.users.forEach(function (user,i) {
                  member.memberId=user.uid;
                  member.email=user.email;
                  member.name=user.name;
                  member.contactNumber=user.mobile;
                  member.job=user.role;
                  debugger;
                  th.processForm.membersList.push(member);
                });

                return true;
              }
          });
        }else{
          this.processForm.membersList=[];
        }
        return true;
      },
      async getSelectList(){
        this.productLineList = await commonSelect.initProductLinePost(this);
      },
      //添加行
      addRow(){
        this.membersList.push({
          role: '',
          users: [],
          productLine: '',
        });
      },
      deleteRow(index){
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            this.membersList.splice(index, 1);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
        }).catch(() => {

        });
      },
      setRating (rating) {
        this.rating= rating;
      },
      setTaskShow(){
        //项目申请，销售主管
        debugger;
        let th=this;
        if(this.taskDefId=='obj_c98557c805500001c6321e10619eaab0'){
            this.taskShow.isPm=true;
            if(this.lineId && this.processForm.star>1){
              this.taskShow.isStar=false;
            }else{
              this.taskShow.isStar=true;
              this.taskShow.isRepeat=false;
              this.taskShow.flagStar=false;
              this.taskShow.flagRepeat=true;
            }
            this.getCollectList('assistUsers',function(data){
              if(data!=null && data.length>0){
                let assistUser=JSON.parse(data[0].collectData);
                th.$refs.awsorgRef.reset(assistUser);
              }
            });
            //this.processForm.star=this.star;
        }else if(this.taskDefId=='obj_c985b8e0bd0000016c3260901620198a'){
          if(this.lineId && this.processForm.star>1){
            this.taskShow.isRepeat=false;
          }else{
            this.taskShow.isStar=true;
            this.taskShow.isRepeat=true;
            this.taskShow.flagStar=true;
            this.taskShow.flagRepeat=false;
          }

        }else if(this.taskDefId=='obj_c985b8e39eb000011e131b006a506e30'){
          if(this.lineId && this.processForm.star>1){
            this.taskShow.isStar=false;
          }else{
            this.taskShow.isStar=true;
            this.taskShow.flagStar=false;
          }
        }else if(this.taskDefId=='obj_c985b8e207200001f3448eb29a2019b0'
              || this.taskDefId=='obj_c985b8e376b00001dd2814f0169012bf'
              || this.taskDefId=='obj_c985b90742400001ab7618206ff08250'){
            this.taskShow.isVp=true;
          this.getCollectList('members',function(data){
            if(data!=null && data.length>0){
              let memberList=[];
              let members=JSON.parse(data[0].collectData);
                  members.forEach(function (m,i) {
                     let users={uid:m.memberId,email:m.email,name:m.name,mobile:m.contactNumber,role:m.job};
                     let member={
                       role:m.role,
                       productLine:m.productLines,
                       users:[]
                     };
                     th.groupBy(member,users);
                  });
            }else{
              th.membersList.push({
                role: '', //角色
                users: [],
                productLine: '',
              });
            }
          });
        }
      },
      unique(arr) {
        const res = new Map();
        return arr.filter((arr) => !res.has(arr.name) && res.set(arr.name, 1))
      },
      groupBy(member,users){
        if(this.membersList!=null && this.membersList.length==0){
          member.users.push(users);
          this.membersList.push(member);
        }else{
          let flag=false;
          for(var i=0;i<this.membersList.length;i++){
            let m1=this.membersList[i];
            let tUser=this.membersList[i].users;
            if(m1.role==member.role && m1.productLine==member.productLine){
              tUser.push(users);
              this.membersList[i].users=this.unique(tUser);
              flag=true;
            }
          }
          if(!flag){
            member.users.push(users);
            this.membersList.push(member);
          }
        }
      },
      //获取下拉框数据
      async getSelectList(){
        this.productLineList = await commonSelect.initProductLinePost(this);
      },
      refresh: function () {
        //loading
        debugger;
        var params = {
          'processId': this.processId
        }
        this.loading = true;

        this.$ajax.post({
          domain: 'crmUrl',
          url: 'process.getCommentList',
          data: params,
          requestType: 'body',
          showLoad: true,
          success: function (res) {
            debugger;
            if (res.success) {
              this.list = res.data;
            } else {
              this.$message({
                type: 'error',
                message: res.msg
              });
            }
            this.loading = false;
          }.bind(this),
          error: function (res) {
            this.$message({
              type: 'error',
              message: res.msg || res.msg
            });
          }.bind(this)
        });
      },
      indexMethod: function (index) {
        // return this.list.length - index;
        return index + 1;
      },
      setParentValue: function (id, value) {
        try {
          if (parent) {
            parent.$('#' + id).val(value);
          }
        } catch (err) { }
      }
    },
    computed: {
      sid: function () {
        return this.$store.state.sid
      },
    },
    data: function () {
      return {
        loading: false,
        list: [],
        lineId:"",
        taskShow:{
          isPm:false,
          isVp:false,
          isStar:false,
          flagStar:true,
          isRepeat:false,
          flagRepeat:true
        },
        assistUsers:[],
        membersList:[],
        msg:'',
        productLineList:[],
        processForm: {
          assistUsers: '', //协助人员，JSON格式
          // 项目成员,CPM、FAE
          membersList: [],
          moduleId: 3101, //所属模块
          star: 0,
          repeatStar: 0
        },
        //表格列
        colunms: [
           { prop: 'activityName', label: '节点名称',   width: 100, fixed: false,  tooltip: true },
           { prop: 'createUserName', label: '电子签名',   width: 120,  fixed: false,  tooltip: true },
           { prop: 'createDate', label: '签名日期',   width: 100, fixed: false,  tooltip: true },
           { prop: 'actionName', label: '操作',   width: 70,fixed: false,  tooltip: true },
           { prop: 'msg', label: '留言',width: 300, fixed: false,  tooltip: false }
        ]
      }
    },
    props:{
      isComment:{  //是否显示审核意见
        type: Boolean,
        default: true,
        required: false,
      },
      isLog:{  //是否显示审核意见
        type: Boolean,
        default: true,
        required: false,
      },
      isApploval:{
        type: Boolean,
        default: false,
        required: false,
      },
      processId: {
        type: String,
        default: '',
        required: false
      },
      star:{
        type: Number,
        default: 0,
        required: false
      },
      taskDefId:{
        type: String,
        default: '',
        required: false
      }
    },
    watch: {
      star:{
        handler:function(val,oldval){
          if(val){
           this.processForm.star=val;
          }
        }
      },
      msg:{
        handler:function(val,oldval){
          if(val){
            this.setParentValue('msg',val);
          }
        }
      },
    }
  }
</script>
<style type="text/css"   lang="scss">
  .comment-logs{
    >.title{
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
      color: #0077FA;
    }
    .el-table .el-table__empty-block {
        min-height: unset;
    }
  }
  .title {
      margin-bottom: 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;

    >span {
      color: #0077FA;
      font-size: 14px;
      font-weight: bold;
    }
    }
  .approval-operat {

    margin: 20px 0;
    padding: 20px;
    background: #F8F8F8;
    border-radius: 5px;
    >div:not(.title){
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      span.start{
        margin-right: 40px;
        &::before{
          content: '*';
          color: #FF0000;
          margin-right: 2px;
        }
      }
      span.begin{
        margin-right: 40px;
      &::before{
         /*content: '*';*/
         /*color: #FF0000;*/
         margin-right: 2px;
       }
      }
    }
  }
  .opacity0{ opacity: 0; }
</style>
