<template>
  <div class="auditMsg">
    <div>
      <div class="head_boxtwo" v-show="this.$route.query.isTitle != 0">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/indexPage'}">首页</el-breadcrumb-item>
          <el-breadcrumb-item>待办事件</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="myBox">
          <div class="headLeft"><h4>待办事件</h4></div>
          <div class="headRight">
            <el-row>
              <el-button class="addButton" type="text" @click="rejectMsg" v-if="rejectShow">驳回</el-button>
              <el-button class="addButton a" type="primary" @click="handleBtnChange($event)">{{appro}}</el-button>
            </el-row>
          </div>
        </div>
        <div class="myMsg">
          <div class="msgLift">
            <div class="msgliftl">
              <div class="mymsgTOP">&nbsp;&nbsp;<span class="myColor">创建人：</span><span>{{myName}}</span></div>
              <div><span class="myColor">创建时间：</span><span>{{craetionTime | formatDate}}</span></div>
            </div>
            <div class="msgliftr">
              <div class="mymsgTOP">&nbsp;&nbsp;<span class="myColor">修改人：</span><span>{{hisName}}</span></div>
              <div><span class="myColor">修改时间：</span><span>{{modifiTime | formatDate}}</span></div>
            </div>
          </div>
          <div class="msgRight">
            <div>状态</div>
            <div class="msgRight_top">{{stateNow}}</div>
          </div>
        </div>
      </div>
      <div class="head_boxtwo" v-show="this.$route.query.isTitle == 0">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>内容管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/serviceGuidePage'}">业务服务指南</el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="headLeft"><h4>详情</h4></div>
        <div class="myMsg">
          <div class="msgLift">
            <div class="msgliftl">
              <div class="mymsgTOP">&nbsp;&nbsp;<span class="myColor">创建人：</span><span>{{myName}}</span></div>
              <div><span class="myColor">创建时间：</span><span>{{craetionTime | formatDate}}</span></div>
            </div>
            <div class="msgliftr">
              <div class="mymsgTOP">&nbsp;&nbsp;<span class="myColor">修改人：</span><span>{{hisName}}</span></div>
              <div><span class="myColor">修改时间：</span><span>{{modifiTime | formatDate}}</span></div>
            </div>
          </div>
        </div>
      </div>
      <div class="content_boxtwo">
        <div class="form_box">
          <div class="myWord">信息</div>
          <div class="myOnly">
            <el-row style="width: 100%">
              <el-col :span="8">
                <div class="myonlyFirst">
                  <div><span class="myColor">业务名称：</span><span>{{activity}}</span></div>
                  <div class="myfirstOne">
                    <div class="myColor">业务icon：</div>
                    <img class="myImg" :src=icon alt="">
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="myonlySecond" style="padding-right: 75px;">
                  <div><span class="myColor">归属银行：</span><span>{{bankName}}</span></div>
                  <div class="myfirstOneoo" style="position: relative;left: -56px"><span class="myColor">是否支持在线填单：</span><span>{{howChoose}}</span></div>
                  <div v-if="!rejectShow" class="myfirstOneoo">
                    <span class="myColor">驳回原因：</span><span>{{rejectReason}}</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="myonlyThird">
                  <div v-show="this.$route.query.isTitle != 0"><span class="myColor">类别：</span><span>{{category}}</span></div>
                  <div class="myonlyThirdone" v-if="howChoose == '是'" style="position: relative;left: -56px">
                    <span class="myColor">在线填单链接：</span><span class="myColoro">{{myLink}}</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <div class="line"></div>
          <div class="myWord">内容详细</div>
          <div class="myContent">
            <div class="myCenter" v-html="process">
              {{process}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        status: '',
        appro: "",
        myName: '',
        hisName: '',
        craetionTime: '',
        modifiTime: '',
        stateNow: '',
        activity: '',
        bankName: '',
        myLink: '',
        category: '',
        howChoose: '',
        icon: '',
        process: '',
        rejectReason: '',
        rejectShow: true
      }
    },
    filters: {
      formatDate: function (value) {
        let date = new Date(value);
        let y = date.getFullYear();
        let MM = date.getMonth() + 1;
        MM = MM < 10 ? ('0' + MM) : MM;
        let d = date.getDate();
        d = d < 10 ? ('0' + d) : d;
        let h = date.getHours();
        h = h < 10 ? ('0' + h) : h;
        let m = date.getMinutes();
        m = m < 10 ? ('0' + m) : m;
        let s = date.getSeconds();
        s = s < 10 ? ('0' + s) : s;
        return y + '-' + MM + '-' + d;
      }
    },
    computed: {},
    mounted() {
      this.auditEdit();
    },
    components: {},
    methods: {
      rejectMsg() {
        this.$prompt('', '驳回', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPlaceholder: '请输入驳回原因',
          showInput: true
        }).then(({value}) => {
          let _this = this;
          if (!value || value == " ") {
            _this.$message({
              type: 'error',
              message: "驳回理由不能为空！"
            });
          } else {
            if (value.length >= 100) {
              _this.$message({
                type: 'error',
                message: "驳回理由不超过100个字符！"
              });
            } else {
              let param = {
                id: _this.$route.query.id,
                rejectReason: value,
                status: _this.status,
              };
              _this.$https({
                method: 'put',
                url: 'businessInfo/reject',
                authType: this.backToken
              }, _this.$qs.stringify(param)).then((res) => {
                  if (res.data.status == 201) {
                    _this.$message({
                      type: 'success',
                      message: res.data.message
                    });
                    _this.$router.push('/indexPage');
                  } else {
                    _this.$message({
                      type: 'error',
                      message: res.data.message
                    });
                  }
                }, (error) => {
                  console.log(error)
                }
              )
            }

          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      handleBtnChange(ev) {
        let btnName = ev.currentTarget.innerText;
        switch (btnName) {
          case '通过(上线)':
            this.passMsg();
            break;
          case '通过(下线)':
            this.passMsg();
            break;
          case '重新编辑':
            this.$router.push({
              path: '/newServiceGuide',
              query: {id: this.$route.query.id}
            });
            break;
          case '再次申请下线':
            this.handleLine();
            break;
          default:
            break;
        }
      },
      handleLine() {
        let _this = this;
        _this.$confirm('是否再次申请下线?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          _this.$https({
            method: 'put',
            url: 'businessInfo/disable?id=' + _this.$route.query.id,
            authType: this.backToken
          }).then((res) => {
              _this.onSearch();
              if (res.data.status == 201) {
                this.$message({
                  type: 'success',
                  message: res.data.message
                });
                _this.$router.push('/indexPage');
              }
            }, (error) => {
              this.$message({
                type: 'fail',
                message: "下线失败!" + error.response.data
              });
            }
          )
        })
      },
      passMsg() {
        let _this = this;
        let param = {
          id: _this.$route.query.id,
          status: _this.status,
        };
        _this.$https({
          method: 'put',
          url: 'businessInfo/approved',
          authType: this.backToken
        }, _this.$qs.stringify(param)).then((res) => {
            if (res.data.status == 201) {
              _this.$message({
                type: 'success',
                message: res.data.message
              });
              _this.$router.push('/indexPage');
            } else {
              _this.$message({
                type: 'error',
                message: res.data.message
              });
            }
          }, (error) => {
            console.log(error)
          }
        )
      },
      auditEdit() {
        this.category = this.$route.query.typeName;
        let _this = this;
        let param = {id: _this.$route.query.id};
        _this.$https({
          method: 'get',
          url: 'businessInfo/getById',
          authType: this.backToken
        }, param).then((res) => {
            if (res.data.status == 2) {
              _this.appro = "通过(上线)";
              _this.stateNow = "审批上线";
            } else if (res.data.status == 3) {
              _this.appro = "通过(下线)";
              _this.stateNow = "审批下线";
            } else if (res.data.status == 1) {
              _this.appro = "重新编辑";
              _this.stateNow = "上线被驳回";
              _this.rejectShow = false;
            } else if (res.data.status == 6) {
              _this.appro = "再次申请下线";
              _this.stateNow = "下线被驳回";
              _this.rejectShow = false;
            }
            _this.status = res.data.status;
            _this.activity = res.data.name;
            _this.bankName = res.data.bankName;
            _this.craetionTime = res.data.createTime;
            _this.modifiTime = res.data.updateTime;
            _this.myName = res.data.createEmployee;
            _this.hisName = res.data.modifyEmployee;
            _this.myLink = res.data.skipLink;
            _this.icon = res.data.icon;
            _this.process = res.data.process;
            _this.rejectReason = res.data.rejectReason;
            if (res.data.isSkip == '1') {
              _this.howChoose = '是';
            } else {
              _this.howChoose = '否';
            }


          }, (error) => {
            console.log(error)
          }
        )
      }
    },
  }
</script>

<style lang="less">
  @import '../../style/common';

  .auditMsg {
    width: 100%;
    height: calc(100% - 0px);
    overflow-x: hidden;
    overflow-y: scroll;
    .head_boxtwo {
      padding: 20px 30px 20px 20px !important;
      h6 {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.65);
        padding: 5px 0px 13px;
      }
      h4 {
        font-size: 20px;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.85);
      }
      .myBox {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .headLeft {
          width: 10%;
        }
        .headRight {
          .el-button--text {
            color: rgba(0, 0, 0, 0.6);
            border: 1px solid #dcdfe6;
          }
          .addButton {
            width: 47px;
            height: 26px;
            padding: 0;
            text-align: center;
            line-height: 26px;
            font-size: 23px;
          }
          .addButton.a {
            width: 85px;
          }
          .el-button {
            text-align: center;
            font-size: 12px;
            line-height: 20px;
          }
          .el-button span {
            font-size: 12px;
          }
        }
      }
      .myMsg {
        width: 100%;
        margin-top: 18px;
        display: flex;
        justify-content: space-between;
        .msgLift {
          width: 30%;
          display: flex;
          justify-content: space-between;
          .msgliftl {
            margin-right: 10px;
          }
          .myColor {
            display: inline-block;
            color: black;
            width: 70px;
            text-align: right;
          }
          .mymsgTOP {
            margin-bottom: 10px;
            span.myColor {
              width: 63px;
            }
          }
        }
        .msgRight {
          text-align: right;
          div {
            font-size: 14px;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.45);
          }
          div.msgRight_top {
            margin-top: 5px;
            font-size: 16px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.85);
          }
        }
      }
    }
    .content_boxtwo {
      width: 100%;
      height: 100%;
      background: #F0F2F5;
      padding: 24px 24px 0;
      border: 1px solid transparent;
      .form_box {
        padding: 32px 24px;
        background: #fff;
        .myWord {
          font-weight: 600;
          font-size: 18px;
        }
        .myOnly {
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          .myColor {
            color: black;
          }
          .myonlyFirst {
            word-break: break-all;
            word-wrap: break-word;
            .myfirstOne {
              margin-top: 20px;
              display: flex;
              align-items: center;
              .myImg {
                width: 100px;
                height: 100px;
              }
            }
          }
          .myonlySecond {
            word-break: break-all;
            word-wrap: break-word;
            .myfirstOneoo {
              margin-top: 15px;
              word-break: break-all;
              word-wrap: break-word;
            }
          }
          .myonlyThird {
            word-break: break-all;
            word-wrap: break-word;
            .myonlyThirdone {
              word-break: break-all;
              word-wrap: break-word;
              margin-top: 20px;
              .myColoro {
                color: #0000cc;
              }
            }
          }
        }
        .line {
          width: 100%;
          height: 1.5px;
          background: #eeeeee;
          margin-top: 10px;
          margin-bottom: 20px;
        }
        .myContent {
          padding-top: 5px;
          .myCenter {
            width: 600px;
            min-height: 379px;
            margin-left: 15%;
            overflow-x: hidden;
            overflow-y: auto;
            img{
              width: 100%;
            }
          }
          .myCenter::-webkit-scrollbar {
            display: none;
          }
        }
      }

    }
    table {
      border-left: #ddd solid 1px;
      border-top:#ddd solid 1px;
      border-collapse:collapse;
    }
    table td{
      padding: 2px;
      border-right: #ddd solid 1px;
      border-bottom: #ddd solid 1px;
    }
  }


</style>

