<template>
  <div class="auditProductActivity">
    <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: '/hotProductsPage'}">{{type == 1 ? "热门产品" : "热门活动"}}</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">{{type == 1 ? "产品名称:" : "活动名称:"}}</span><span> &nbsp;{{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">
                <div><span class="myColor">归属银行：</span><span>{{blank}}</span></div>
                <div class="myfirstOneoo"><span class="myColor">是否支持预约：</span><span>{{howChoose}}</span></div>
                <div style="margin-top: 10px" v-show="type == 1" v-if="howChoose == '是'"><span class="myColor">最大预约金额：</span><span>{{maxMoney}}</span></div>
                <div style="margin-top: 10px" v-show="type == 2" v-if="howChoose == '是'"><span class="myColor">最大预约人数：</span><span>{{maxNumber}}</span></div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="myonlyThird" v-show="this.$route.query.isTitle != 0"><span class="myColor">类别：</span><span>{{category}}</span></div>
            </el-col>
            <el-col :span="8" v-if="!rejectShow" style="word-break: break-all;word-wrap: break-word;padding-right: 10px;">
              <div style="margin-top: 10px"><span class="myColor">驳回原因：</span><span>{{rejectReason}}</span></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: '',
        blank: '',
        maxMoney: '',
        maxNumber: '',
        category: '',
        icon: '',
        process: '',
        rejectReason: '',
        rejectShow: true,
        type: '',
        howChoose: '',

      }
    },
    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 {
            let param = {
              id: _this.$route.query.id,
              rejectReason: value,
              status: _this.status,
            };
            _this.$https({
              method: 'put',
              url: 'hotProductActivity/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 '重新编辑':
            if(this.type == 1){
              this.$router.push({path: '/newHotPro', query:{id: this.$route.query.id}});
            }else{
              this.$router.push({path: '/newPopActivity', 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: 'hotProductActivity/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: 'hotProductActivity/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: 'hotProductActivity/getById',
          authType: this.backToken
        }, param).then((res) => {
          _this.type =res.data.type;
          if (res.data.isShow == 2) {
            _this.appro = "通过(上线)";
            _this.stateNow = "审批上线";
          } else if (res.data.isShow == 3) {
            _this.appro = "通过(下线)";
            _this.stateNow = "审批下线";
          }else if(res.data.isShow == 1) {
            _this.appro = "重新编辑";
            _this.stateNow ="上线被驳回";
            _this.rejectShow = false;
          }else if(res.data.isShow == 6) {
            _this.appro = "再次申请下线";
            _this.stateNow ="下线被驳回";
            _this.rejectShow = false;
          }
          _this.status = res.data.isShow;
          _this.activity = res.data.name;
          _this.blank = res.data.bankBranchInfo.name;
          _this.maxMoney = res.data.maxMoney;
          _this.maxNumber = res.data.maxNumber;
          _this.craetionTime = res.data.createTime;
          _this.modifiTime = res.data.updateTime;
          _this.myName = res.data.creatorName;
          _this.hisName = res.data.modifierName;
          _this.icon = res.data.icon;
          _this.process = res.data.content;
          _this.rejectReason = res.data.rejectReason
          if (res.data.isOrder == '1') {
            _this.howChoose = '是';
          } else {
            _this.howChoose = '否';
          }
          }, (error) => {
            console.log(error)
          }
        )
      }
    },
  }
</script>

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

  .auditProductActivity {
    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;
          .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 {
        background: #fff;
        padding: 32px 24px;
        .myWord {
          font-weight: 600;
          font-size: 18px;
        }
        .myOnly {
          width: 100%;
          display: flex;
          justify-content: space-between;
          margin-top: 10px;
          .myColor {
            color: black;
          }
          .myonlyFirst {
            .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;
            }

            .myColortwo {
              display: inline-block;
              width: 80px;
              height: 16px;
            }
          }
          .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: 30%;
            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>