<template>
<div class="list-panel">
  <div>
    <div class="title-header">
      <h2 class="name">报价审批</h2>
    </div>
    <!--search-->
    <div style="position: relative;">
      <div id="search-container" style="padding-top: 40px">
        <div v-if="listData[0]" class="step" style="position: relative;width: 240px;float: left;">
          <strong>{{listData[0].author}}</strong>
          <div class="submissionTime">{{listData[0].date}}</div>
          <p><span>{{listData[0].action}}</span><em></em><strong>{{listData[0].comment}}</strong></p>
          <div class="statuss"><span @click="showList" class="clickList">...</span><em></em><span>.</span><i>处理中</i></div>
        </div>
        <ul class="btnLists" v-show="this.params.stateFlage!='his'">
          <li v-for="item in btnLists">
            <el-button type="primary" @click="clickButton(item.key)">{{item.value}}</el-button>
          </li>
        </ul>
      </div>
      <div class="statusLists" v-show="isHiddenList" style="background: #fff">
        <ul>
          <li v-for="(item,index) in listData">
            <div><em>{{index+1}}</em><span>{{item.author}}</span><strong>{{item.date}}</strong></div>
            <p><em style="opacity: 0"></em><span>{{item.action}}</span><strong>{{item.comment}}</strong></p>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <div style="background: #fff;height: 100%;margin-top: 10px;">
    <!-- 嵌入iframe -->
    <iframe style="width:100%" :src=this.approveUrl v-if="isifr"></iframe>
    <!-- 嵌入vue片段 -->
    <component :is="linkIframe" v-if="!isifr"></component>
  </div>
  <div>
    <el-dialog :title="defaultMap[this.action]" v-model="dialogFormVisible" size="tiny">
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
      <template v-if="action === 'rejectAble'">
        <el-form>
          <el-form-item label="审批意见:" :label-width="formLabelWidth">
            <el-input type="textarea" v-model="opinion" :rows="2" placeholder="请输入审批意见"></el-input>
          </el-form-item>
          <el-form-item label="驳回到:" :label-width="formLabelWidth">
            <el-select v-model='rejectTo' placeholder="请选择节点">
              <el-option
              v-for="node in nodeList"
              :key="node.value"
              :label="node.key"
              :value="node.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        </template>
      <template v-else-if="action === 'assignAble'">
          <el-form>
            <el-form-item label="审批意见:" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="opinion" :rows="2" placeholder="请输入审批意见"></el-input>
            </el-form-item>
            <el-form-item label="人员:" :label-width="formLabelWidth">
              <el-select v-model='rejectTo' placeholder="请选择人员">
                <el-option
                v-for="node in nodeList"
                :key="node.value"
                :label="node.key"
                :value="node.value"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </template>
      <template v-else-if="action === 'aggreeAble' || action === 'refuseAble'">
          <el-form>
            <el-form-item label="审批意见:" :label-width="formLabelWidth">
              <el-input type="textarea" v-model="opinion" :rows="2" placeholder="请输入审批意见"></el-input>
            </el-form-item>
          </el-form>
        </template>
      <template v-else-if="action === 'addsignAble'||action === 'delegateAble'" class="addsign">
          <el-form>
            <el-form-item label="人员:" :label-width="formLabelWidth">
              <el-select v-model='userId' placeholder="请选择人员">
                <el-option
                v-for="person in personList"
                :key="person.value"
                :label="person.key"
                :value="person.value"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </template>
    </el-dialog>
  </div>
</div>
</template>
<script>
export default {
  data() {
    return {
      isifr:false,
      action: "",
      linkIframe:'',
      opinion: '',
      rejectTo: '',
      userId: '',
      nodeList: [],
      personList: [],
      isHiddenList: false,
      approveUrl:'',
      listData: [{
          author: '张三',
          date: '2017年10月12日 12:20:10',
          action: '提交',
          comment: ""
        },
        {
          author: '李四',
          date: '2017年10月12日 12:20:10',
          action: '驳回',
          comment: "就是不想让你通过"
        },
        {
          author: '王五',
          date: '2017年10月12日 12:20:10',
          action: '批准',
          comment: "同意"
        },
        {
          author: '王二',
          date: '2017年10月12日 12:20:10',
          action: '批准',
          comment: "同意"
        }
      ],
      btnLists: [{
          value: "同意",
          key: "agree"
        },
        {
          value: "驳回",
          key: "reject"
        },
        {
          value: "委派",
          key: "weipai"
        },
        {
          value: "不同意",
          key: "disagree"
        }
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      defaultMap: {
        assignAble: '指派',
        rejectAble: '驳回',
        delegateAble: '改派',
        addsignAble: '加签',
        aggreeAble: '同意',
        refuseAble: '拒绝'
      },
      formLabelWidth: '120px'
    };
  },
  created() {
    this.getParams();
    // alert(JSON.stringify(this.params));
    this.getIframe();
    this.requestHistory();
    this.requestAction();
    this.requestPerson();
    // alert(this.approveUrl);
  },
  methods: {
    getIframe(){
      // alert(this.approveUrl)
      var approveUrl=this.approveUrl;
      var path = "/staff";
      var params="/ifr/busilog$index.html";
      if(approveUrl){
        // var flag=approveUrl.split('/')[1];
        this.isifr=true;
        // if(flag==="ifr"){
        //   this.isifr=true;
        // }else{
        //   this.linkIframe = this.$router.getMatchedComponents(this.approveUrl)[0];
        // }       
      }else{
        this.$message.error('嵌入面板的路由或url为空');
        // this.linkIframe = this.$router.getMatchedComponents(path)[0];
      }
    },
    requestPerson() {
      this.$http({
        url: '/ifbp-bpm-service/identity/users'
      }).then((res) => {
        var newList = res.data.data;
        // 将取到的值处理一下
        var curList = [];
        newList.forEach((item) => {
          // console.log(item)
          var obj = {
            key: item.name,
            value: item.userid
          };
          curList.push(obj);
        });
        this.personList = curList;
      });
    },
    requestAction() {
      this.$http({
        url: '/ifbp-bpm-service/task/operation?processDefinitionId=' + this.params.processDefinitionId + '&activityId=' + this.params.activityId,
        method: 'post'
      }).then((res) => {
        var curArr = res.data.data;
        var btnOrder = {
          aggreeAble: 1,
          rejectAble: 2,
          refuseAble: 3,
          assignAble: 4,
          delegateAble: 5,
          addsignAble: 6
        };
        var curList = [];
        curArr.forEach((action) => {
          curList.push({
            key: action.op,
            value: action.text ? action.text : this.defaultMap[action.op]
          });
        });
        curList.sort((a, b) => btnOrder[a.key] > btnOrder[b.key]);
        console.log('传完的值');
        console.log(curList);
        //alert(JSON.stringify(curList));
        this.btnLists = curList;
      });
    },
    getParams() {
      var data = {};
      var tmp;
      var paramStr = location.href.split('?')[1];
      if (paramStr) {
        var paramsArr = paramStr.split('&');
        paramsArr.forEach((v) => {
          tmp = v.split('=');
          data[tmp[0]] = decodeURIComponent(tmp[1]);
        });
      }
      // alert(JSON.stringify(data));
      this.approveUrl=data.approveUrl;
      this.params = data;
      // alert(this.params.stateFlage)
    },
    requestHistory() {
      this.$http({
        url: '/ifbp-bpm-service/proc/approval-detail',
        params: {
          processInstanceId: this.params.processInstanceId
        }
      }).then((res) => {
        console.log(res);
        if (res.data.status === 1) {
          var data = [];
          res.data.data.forEach((item) => {
            data.push({
              date: item.endTime.substr(5, 5) + ' ' + item.endTime.substr(11, 5),
              author: item.author,
              action: item.action,
              comment: item.comment
            });
          });
          this.listData = res.data.data;
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(() => {
        this.$message.error('请求失败');
      });
    },
    showList() {
      this.isHiddenList = !this.isHiddenList;
    },
    clickButton(action) {
      // console.log(action)
      var data = this.params;
      this.action = action;
      if (this.action === 'aggreeAble') {
        this.dialogFormVisible = true;
      } else if (this.action === 'refuseAble') {
        this.dialogFormVisible = true;
      } else if (this.action === 'rejectAble') {
        this.$http.get('/ifbp-bpm-service/task/reject-check', {
            params: {
              taskId: data.task_id
            }
          }).then((response) => {
            // 获取驳回下拉列表
            console.log('驳回列表');
            console.log(response);
            if (response.data.status === 0) {
              this.nodeList = [{
                key: '制单人',
                value: 'REJECTTOINIT'
              }];
              this.dialogFormVisible = true;
            } else {
              var newList = response.data.data;
              // 将取到的值处理一下
              var curList = [];
              curList.push({
                key: '制单人',
                value: 'REJECTTOINIT'
              });
              newList.forEach((item) => {
                // console.log(item)
                var obj = {
                  key: item.name,
                  value: item.activityId
                };
                curList.push(obj);
              });
              this.nodeList = curList;
              this.dialogFormVisible = true;
            }
          }).catch((error) => {
            console.log(error);
          });
      } else if (this.action === 'assignAble') {
        this.$http.get('/ifbp-bpm-service/task/assign-check', {
            params: {
              taskId: data.task_id
            }
          }).then((response) => {
            // 获取驳回下拉列表
            if (response.data.status === 0) {
              this.$message.error('response.data.msg');
            } else {
              var newList = response.data.data;
              // 将取到的值处理一下
              var curList = [];
              newList.forEach((item) => {
                // console.log(item)
                var obj = {
                  key: item.name,
                  value: item.localUserId
                };
                curList.push(obj);
              });
              this.nodeList = curList;
              this.dialogFormVisible = true;
            }
          }).catch((error) => {
            console.log(error);
          });
      } else if (this.action === 'addsignAble') {
        this.dialogFormVisible = true;
      } else if (this.action === 'delegateAble') {
        this.dialogFormVisible = true;
      } else if (this.action === 'assignAble') {
        this.dialogFormVisible = true;
      }
    },
    confirm() {
      this.data = this.curdata;
      if (this.action === 'aggreeAble') {
        this.$http({
            url: '/ifbp-bpm-service/approval/action',
            method: 'post',
            data: {
              taskId: this.params.task_id,
              action: 'agree',
              comment: this.opinion,
              processInstanceId: this.params.processInstanceId,
              processDefinitionId: this.params.processDefinitionId,
              processKey: this.params.processKey,
              businessKey: this.params.businessKey
            }
          }).then((response) => {
            this.dialogFormVisible = false;
            if (response && response.data && (response.data.status === 1)) {
              this.dialogFormVisible = false;
              this.$message({
                type: 'success',
                message: '已审批同意'
              });
            } else if (response && response.data && (response.data.status === 0)) {
              this.$message({
                type: 'error',
                message: response.data.msg
              });
            }
          }).catch((error) => {
            this.dialogFormVisible = false;
            console.log(error);
          });
      } else if (this.action === 'refuseAble') {
        this.$http({
            url: '/ifbp-bpm-service/task/refuse',
            method: 'get',
            params: {
              taskId: this.params.task_id,
              auditComment: this.opinion,
              processInstanceId: this.params.processInstanceId,
              processDefinitionId: this.params.processDefinitionId,
              processKey: this.params.processKey,
              businessKey: this.params.businessKey
            }
          }).then((response) => {
            this.dialogFormVisible = false;
            if (response && response.data && (response.data.status === 1)) {
              this.dialogFormVisible = false;
              this.$message({
                type: 'success',
                message: '已拒绝流程'
              });
            } else if (response && response.data && (response.data.status === 0)) {
              this.$message({
                type: 'error',
                message: response.data.msg
              });
            }
          }).catch((error) => {
            this.dialogFormVisible = false;
            this.$message({
              type: 'error',
              message: '请求失败'
            });
            console.log(error);
          });
      } else if (this.action === 'rejectAble') {
        // 驳回
        var params;
        if (this.rejectTo === 'REJECTTOINIT') {
          params = {
            rejectToInit: 'true',
            action: 'reject',
            rejectReason: this.opinion,
            processInstanceId: this.params.processInstanceId,
            processDefinitionId: this.params.processDefinitionId,
            processKey: this.params.processKey,
            businessKey: this.params.businessKey
          };
        } else {
          params = {
            taskId: this.params.task_id,
            action: 'reject',
            comment: this.opinion,
            processInstanceId: this.params.processInstanceId,
            processDefinitionId: this.params.processDefinitionId,
            activityId: this.rejectTo,
            processKey: this.params.processKey,
            businessKey: this.params.businessKey
          };
          if (this.rejectTo === '') {
            this.$message({
              type: 'error',
              message: '请选择有效的节点'
            });
            return;
          }
        }
        this.$http({
            url: '/ifbp-bpm-service/approval/action',
            method: 'post',
            data: params
          }).then((response) => {
            // 1代表成功 0代表失败
            this.dialogFormVisible = false;
            if (response && response.data && (response.data.status === 1)) {
              this.$message({
                type: 'success',
                message: '驳回成功'
              });
            } else if (response && response.data && (response.data.status === 0)) {
              this.$message({
                type: 'error',
                message: response.data.msg
              });
            }
          }).catch((error) => {
            this.dialogFormVisible = false;
            console.log(error);
          });
      } else if (this.action === 'delegateAble') {
        this.$http({
            url: '/ifbp-bpm-service/task/delegate',
            method: 'post',
            data: {
              taskId: this.params.task_id,
              assign: this.userId,
              processDefinitionId: this.params.processDefinitionId,
              processKey: this.params.processKey,
              businessKey: this.params.businessKey
            }
          }).then((response) => {
            this.dialogFormVisible = false;
            if (response && response.data && (response.data.status === 1)) {
              this.$message({
                type: 'success',
                message: '改派成功'
              });
            } else if (response && response.data && (response.data.status === 0)) {
              this.$message({
                type: 'error',
                message: response.data.msg
              });
            }
          }).catch((error) => {
            this.dialogFormVisible = false;
            console.log(error);
          });
      } else if (this.action === 'addsignAble') {
        var arrIds = [];
        arrIds.push(this.userId);
        this.$http({
            url: '/ifbp-bpm-service/task/signAdd',
            method: 'post',
            data: {
              taskId: this.params.task_id,
              assigns: arrIds,
              processDefinitionId: this.params.processDefinitionId,
              processKey: this.params.processKey,
              businessKey: this.params.businessKey
            }
          }).then((response) => {
            this.dialogFormVisible = false;
            if (response && response.data && (response.data.status === 1)) {
              this.$message({
                type: 'success',
                message: '加签成功'
              });
            } else if (response && response.data && (response.data.status === 0)) {
              this.$message({
                type: 'error',
                message: response.data.msg
              });
            }
          }).catch((error) => {
            this.dialogFormVisible = false;
            console.log(error);
          });
      }
      this.rejectTo = '';
      this.opinion = '';
      this.userId = '';
    },
    cancel() {
      this.dialogFormVisible = false;
      this.rejectTo = '';
      this.opinion = '';
      this.userId = '';
    }
  },
  components: {

  },
};
</script>
<style scoped>
#search-container {
  height: 100px;
  padding: 10px 20px;
  background-color: #ffffff;
  border-bottom: 1px solid #e3e3e3;
}

.step .statuss {
  overflow: hidden;
}

.step .statuss span {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #25c8ff;
  vertical-align: middle;
  text-align: center;
  line-height: 20px;
  color: #ddd;
}

.step .statuss em {
  display: inline-block;
  height: 3px;
  width: 200px;
  background: #25c8ff;
}

.step .statuss i {
  position: absolute;
  right: -10px;
  top: 30px;
  font-style: normal;
}

.step strong {
  text-align: center;
  width: 200px;
  position: absolute;
  left: 50%;
  top: -30px;
  margin-left: -100px;
  font-weight: normal;
}

.step .submissionTime {
  position: absolute;
  left: 50%;
  top: -7px;
  margin-left: -71px;
}

.step p {
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
  top: 20px;
  text-align: center;
}

.step p em {
  font-style: normal;
}

.btnLists {
  display: inline-block;
  overflow: hidden;
  margin-left: 50px;
}

.btnLists li {
  float: left;
  margin-left: 5px;
}

.btnLists li button {
  /*width: 60px;*/
}

.statusLists {
  position: absolute;
  left: 0px;
  top: 100px;
  border: 1px solid #eee;
}

.statusLists ul {
  /*margin-top: 5px;*/
  height: 420px;
  overflow-x: hidden;
}

.statusLists li {
  background: #fff;
  width: 250px;
}

.statusLists li em {
  font-style: normal;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #25c8ff;
  vertical-align: middle;
  text-align: center;
  line-height: 20px;
  color: #ddd;
}

.statusLists li span {
  margin-left: 10px;
}

.statusLists li strong {
  font-weight: normal;
  margin-left: 10px;
}

.statusLists li {
  padding: 10px;
  padding-left: 20px;
}

.statusLists li div {
  /*padding-top: 10px;*/
}

.statusLists li p {
  padding-top: 10px;
}

.clickList {
  cursor: pointer;
}
</style>
