<template>
  <div class='mu-card todo-history-card' @click="handlerClick" :data-udc="udc">
    <div class="triangle">
    </div>
    <div class="main">
      <div class="todo-aui-media-list-item-inner"  :data-udc="udc">
        <div class="todo-aui-list-item-media">
          <mu-avatar :isimg="avatarObj && avatarObj.isImg" :avatarcolor="avatarObj && avatarObj.color" :avatarname="avatarObj && avatarObj.aName" :avatarurl="avatarObj && avatarObj.aUrl"
           size=50 @click='handleAvatarClick($event)'></mu-avatar>
        </div>
        <div v-if="hasButton" class="line"><span class="line-content"></span></div>
        <div class="aui-list-item-inner" @click='handleListClick'>
          <div class="aui-list-item-text">
            <div v-if="appid == 907" class="aui-list-item-title mu__title">
                 <span class="aui-list-item-title-first">
                   <span class="list-item-title-name"> {{name}} </span>
                   &nbsp;{{subTitle}}&nbsp;
                   </span>
                   {{mess}}
            </div>
            <div v-else class="aui-list-item-title-two  mu__title">{{title}}</div>
            <div class="aui-list-item-time" style="padding-top:0;">{{time}}</div>
          </div>
          <div v-if="content" :class="['mu-main',{'approval-mu-main':appid == 907}]">
            <span :class="{'has-arrow-content': true}" v-html="content"></span>
            <span v-if="isRightArrow" class="todo-right-arrow m-sys-forward"></span>
          </div>
          <div v-else :class="['mu-main',{'approval-mu-mainExtend':appid == 907}]">
            <span v-html="contentExtend"></span>
          </div>
          <div v-if="hasButton && !isError" class="button-area">
            <div :class="['agreeBtn',{'ui-border-blue': !agreed},{'agreed':agreed}]" v-if="hasAgreen && !disagreed"  @click='handleAgreeClick($event)'>
              <div v-if="agreeloading" class="agree-loding ball-clip-rotate">
                <div></div>
              </div>
              <div v-else style="position:relative;" class='normal__btn'>{{getRealText(agreeText)}}</div>
            </div>
            <div :class="['disagreeBtn',{'ui-border': !disagreed}, {'disagreed':disagreed}]" v-if="hasDisagree && !agreed" @click='handleDisagreeClick($event)'>
              <div v-if="disagreeloading" class="disagree-loding ball-clip-rotate">
                <div></div>
              </div>
              <div v-else style="position:relative;" class='normal__btn'>{{getRealText(disagreeText)}}</div>
            </div>
          </div>
          <div v-if="isError"  class="button-area">
            <div @click.stop style="height:27px;line-height: 27px;text-align: right;    margin-top: 12px;color:#1695F0;font-size:14px;">
              {{errorText}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import avatar from '../avatar';
export default {
  name: 'mu-card-todo-history',
  props: {
    title: {
      type: String,
    },
    hasButton:{
      type:Boolean,
      default:false
    },
    hasAgreen:{
      type:Boolean,
      default:false
    },
    hasDisagree:{
      type:Boolean,
      default:false
    },
    agreeLabel:{
      type:String,
      default:'同意'
    },
    disagreeLabel:{
      type:String,
      default:'不同意'
    },
    stepName: {
      type: String,
    },
    time:{
      type:String,
    },
    'avatar-obj':{
      type: Object,
    },
    content: {
      type: String,
    },
    triangleColor: {
        type: String
    },
    name: {
        type: String
    },
    mess: {
        type: String
    },
    appid: {
        type: String
    },
    contentExtend:{
      type: String
    },
    taskid:{
      type:String
    },
    agreevalue:{
      type:Object
    },
    disagreevalue:{
      type:Object
    },
    key:{
      type:String
    },
    isRightArrow: {
      type: Boolean
    },
    subTitle: {
      type: String,
      default: '提交的',
    },
    dotAgreeText: {
      type: String,
      default: '已拒绝'
    },
    hasAgreenText: {
      type: String,
      default: '已同意'
    }
  },
  data(){
    return {
      disagreed:false,
      disagreeloading:false,
      disagreeText:this.disagreeLabel,
      agreed:false,
      agreeloading:false,
      agreeText:this.agreeLabel,
      taskId:this.taskid,
      agreeValue:this.agreevalue,
      disagreeValue:this.disagreevalue,
      propshasAgreen:this.hasAgreen,
      propshasDisagree:this.hasDisagree,
      hasClick: true,
      isError: false,
      errorText: '',
      udc: encodeURIComponent(JSON.stringify({
        ext: {
          type: 'globalTodo',
          id: this.taskid,
          appId: this.appid,
        }
      })),
      dotAgreeText: this.dotAgreeText,
      hasAgreenText: this.hasAgreenText,
    };
  },
  methods:{
    getRealText(str = ''){
     if (str.length > 4) {
       return str.slice(0,4) + '...';
     }
     return str;
   },
    handlerClick:function(e){
        this.$emit('handle-click', e);
    },
    handleAvatarClick(e) {
      e.stopPropagation();
      this.$emit('handle-avatar-click');
    },
    handleListClick() {
       this.$emit('handle-list-click');
    },
    handleAgreeClick(e) {
      e.stopPropagation();
      if (!this.hasClick) {
        return ;
      }
      if(!this.disagreeloading){
        this.agreeloading = true;
        this.$emit('handle-agree-click',this.taskId,this.agreeValue,()=>{
            this.agreeloading=false;
            this.agreed=true;
            this.hasClick = false;
            this.agreeText = this.hasAgreenText;
            this.propshasDisagree = false;
        }, (text) => {
            //this.agreeloading=false;
            this.isError = true;
            this.errorText = text;
        });
      }
    },
    handleDisagreeClick(e) {
      e.stopPropagation();
      if (!this.hasClick) {
        return ;
      }
      if(!this.agreeloading){
        this.disagreeloading = true;
        this.$emit('handle-disagree-click',this.taskId,this.disagreeValue, ()=>{
            this.disagreeloading=false;
            this.disagreed=true;
            this.hasClick = false;
            this.disagreeText = this.dotAgreeText;
            this.propshasAgreen = false;
        }, (text) => {
            //this.disagreeloading=false;
            this.isError = true;
            this.errorText = text;
        });
      }
    }
  },
  components:{
    'mu-avatar': avatar
  },
  watch:{
    disagreeLabel(v){
      this.disagreeText = v;
    }
  },
};
</script>
<style lang="less" scoped>
.todo-history-card{

}
.triangle{
    width:0;
    height:0;
    border-width:10px;
    border-style:solid dashed dashed dashed;
    border-color:#fff transparent transparent transparent;
    transform:rotate(135deg);
    position: absolute;
    left: -10px;
    top: -10px;
}
.mu-card {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  //padding:0.8rem;
  color: #212121;
  background-color: #fff;
  position: relative;
  min-height: 2.2rem;
  margin-bottom: 12px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.mu-card-footer{
  position: relative;
  padding: 0.5rem 0;
  font-size: 0.7rem;
  height:30px;
  line-height:30px;
  color: #757575;
  background-color: rgba(0, 0, 0, 0);
  -webkit-box-sizing: border-box;
  flex-direction: row-reverse;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin-top:12px;
  &:after {
    width: 100%;
    height: 1px;
    background-color:#e6e7e8;
    display: block;
    content: '';
    position: absolute;
    top: 0;
    right: auto;
    left: 0;
    z-index: 2;
    transform-origin: 0 0;
    pointer-events: none;
  }
}
.mu-main{
    font-size: 16px;
    color: #3A4247;
    line-height: 20px;
    margin-top: 6px;
    margin-bottom: 8px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #3a4247;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    position: relative;
}
.approval-mu-main {
    color: #bfc4c7;
    font-size: 14px;
    line-height: 16px;
    font-weight: normal;
}
.approval-mu-mainExtend {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color:black !importtant;
    font-size: 14px;
    line-height: 16px;
    font-weight: normal;
}
.aui-list-item-inner {
    position: relative;
    margin-right: 12px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 10px;
}
.todo-aui-media-list-item-inner {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    width:100%;
}
.aui-list-item-text {
    //margin-top: 12px;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: relative;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.aui-media-list-item-inner + .aui-info {
  margin-right: 0.75rem;
}
.mu__title{
  margin-right:6px;
}
.aui-list-item-title {
    position: relative;
    color: #3A4247;
    line-height: 20px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.aui-list-item-title-two {
    position: relative;
    color: #6B7175;
    line-height: 20px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}
.list-item-title-name{
  margin-top:-2px;
  display:inline-block;
  line-height: 20px;
  max-width:60px;
  vertical-align: middle;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.aui-list-item-title-first {
    color: #6B7175;
    // color: #3A4247;
    line-height: 16px;
    font-size: 14px;
}
.aui-list-item-time{
      font-size: 12px;
      color: #bfc4c7;
      text-align: right;
      line-height: 14px;
      -webkit-box-self: flex-start;
      -webkit-align-self: flex-start;
      align-self: flex-start;
      -webkit-box-flex: 1.0;
      -webkit-flex-shrink: 1;
      flex-shrink: 0;
      align-content: flex-end;
}
.aui-list-item-right, .aui-list-item-title-row em {
    max-width: 50%;
    position: relative;
    font-size: 0.6rem;
    color: #757575;
    margin-left: 0.25rem;
}
.todo-aui-list-item-media {
    position: relative;
    //margin-top: 8px;
    //margin-left: 10px;
    display: inherit;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: center;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    padding-top: 12px;
    padding-left: 12px;
    margin-bottom: 10px;
}
.todo-aui-list-item-media img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: block;
}
.aui-list-item-media-list {
  margin-top: 0.25rem;
  padding-right: 0;
  display: block;
}
span.message-extend__strong.message-extend__a1{
  color:#ff8f00;
}
.button-area{
  overflow: hidden;
  margin-bottom:12px;
}
.line{
  position:absolute;
  bottom:42px;
  margin-top:22px;
  width:100%;
}
.line-content{
  display: block;
  height: 1px;
  margin: 0 12px;
  background: rgba(230,231,232,0.5);
}
.agreeBtn,.disagreeBtn{
  display:inline-block;
  width:79px;
  height:27px;
  //border:1px solid #a5d1f0;
  //border-radius:100px;
  color:#1695f0;
  line-height:27px;
  text-align: center;
  float:right;
  margin-top:12px;
  padding-top: 1px;
}
.disagreeBtn{
  display:inline-block;
  width:79px;
  height:27px;
  //border:1px solid #e6e7e8;
  //border-radius:100px;
  color:#6b7175;
  line-height:27px;
  text-align: center;
  float:right;
  margin-top:12px;
  padding-top: 1px;
}
.ball-clip-rotate{
  display:block;
  padding-top:4px;
}
@keyframes rotate{
  0% {
    transform: rotate(0deg);
}
50% {
    transform: rotate(180deg);
}
100% {
    transform: rotate(360deg);
}
}
.agree-loding>div{
    background-color: #a5d1f0;
    border-radius: 100%;
    margin: 2px;
    animation-fill-mode: both;
    border: 2px solid #a5d1f0;
    border-bottom-color: transparent;
    height: 15px;
    width: 15px;
    background: transparent !important;
    display: inline-block;
    animation: rotate 0.75s 0s linear infinite;
}
.disagree-loding>div{
    background-color: #e6e7e8;
    border-radius: 100%;
    margin: 2px;
    animation-fill-mode: both;
    border: 2px solid #e6e7e8;
    border-bottom-color: transparent;
    height: 15px;
    width: 15px;
    background: transparent !important;
    display: inline-block;
    animation: rotate 0.75s 0s linear infinite;
}
.agreed{
  color:#bfc4c7;
  background: #f3f4f5;
  border-radius: 100px;
}
.disagreed{
  color:#bfc4c7;
  border-radius:100px;
  background:#f3f4f5;
}
.normal__btn{
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:90px;
  padding:0 4px !important;
  white-space:nowrap;
}
.todo-right-arrow{
  position: absolute;
  right: 0;
  height: 100%;
  display: flex;
  align-items: center;
}
.has-arrow-content{
  padding-right: 30px;
}
</style>