<template>
  <div id="app">
  <!-- <dropload  :pulldown="showDropLoad"
            :pullup="showDropLoad"
            :loadupfn='loadUpFn'
            :loaddownfn='loadDownFn'
            :propsDataLenght='approvalList.length'
  > -->
    <!-- <mu-card v-for="(item, indx) in rewardList" key="222">
      <mu-card-reward
          :title="item.title"
          :sub-title="item.subTitle"
          :third-title="item.thirdTitle"
          :content="item.content"
          :reward-content="item.rewardContent"
          :reward-name="item.rewardName"
          :key="item.id"
          :hasline="hasline"
          :title-right-text-has-bg="item.hasStateBg"
          title-right-state="never"
          :title-right-text="item.titleRightText"
          >
      </mu-card-reward>
    </mu-card> -->
    <mu-card v-for="(item,index) in approvalList" key="123">
      <!-- <mu-card-notice  :avatar-obj="item.avatar"
          @handle-avatar-click="navigation_user_page(item)" :time="item.time"
            :title="item.title" :name="item.nName" appid="" :mess="item.mess" :content="item.subTitle" :content-extend="item.."
            :key="item.taskId"
            :has-button="item.hasButton"
            :has-agreen="item.hasAgree"
            :has-disagree= "item.hasDisagree"
            :taskid="item.taskId"
            :agreevalue="item.agreeValue"
            :disagreevalue="item.disagreeValue"
            @handle-agree-click="handleAgreeClick"
            @handle-disagree-click="handleDisagreeClick"
            >
           </mu-card-notice> -->
           <mu-card-todo
              :title="item.title"
              :time="item.time"
              :name="item.nName"
              :content="item.metaData.content"
              :content-extend="item.metaData.extendDatas"
              :has-button = "item.hasButton"
              :has-agreen = "item.hasAgree"
              :has-disagree = "item.hasDisagree"
              :agree-label = "item.agreeValue.ActionValue"
              :disagree-label = "item.disagreeValue.ActionValue"
              :appid="item.appId"
              @handle-disagree-click="handleDisagreeClick"
              @handle-agree-click="handleAgreeClick"
            ></mu-card-todo>
        </mu-card>
    </mu-card>
<!-- </dropload> -->

  </div>
</template>
<script>
import { Card, CardTodo, CardNotice, CardAddress ,CardProject, CardReward}  from 'muse-ui/card';
import TextField  from 'muse-ui/form/textField';
// import dropload  from 'muse-ui/dropload';

export default {
    name: 'app',
    components:{
      'mu-card-todo':CardTodo,
      'mu-card-notice':CardNotice,
      'mu-card':Card,
      'mu-text-field':TextField,
      // 'dropload':dropload,
      'mu-card-address':CardAddress,
      'mu-card-project':CardProject,
      'mu-card-reward':CardReward,
    },
    data: function () {
      return{
        password:'',
        hasAgree: true,
        hasButton:true,
        isError: true,
        hasline: false,
        hasBg: false,
        rewardList:[
          {
            title:'他他',
            subTitle:'张三丰',
            thirdTitle:'消息内容',
            content:'2017/11/9',
            time:'2017/11/9',
            btnText:'打赏成功',
            rewardContent:'iTalent移动端审批列表字段调iTalent移动端审批列表字段调iTalent移动端审批列表字段调iTalent移动端审批列表字段调',
            rewardName:'任务',
            avatar: {
                "aUrl": "",
                "isImg": false,
                "color": "#7eb6e0",
                "aName": "香锅"
            },
            taskId:123,
            titleRightText:'打赏成功打赏成功打赏成功',
            hasStateBg: true,
          },
          {
            title:'他他',
            subTitle:'张三丰',
            thirdTitle:'100.00元',
            content:'2017/11/9',
            time:'2017/11/9',
            btnText:'打赏成功',
            rewardContent:'iTalent移动端审批列表字段调iTalent移动端审批列表字段调iTalent移动端审批列表字段调iTalent移动端审批列表字段调',
            rewardName:'任务',
            avatar: {
                "aUrl": "",
                "isImg": false,
                "color": "#7eb6e0",
                "aName": "香锅"
            },
            taskId:123,
            titleRightText:'打赏成功',
            hasStateBg: true,
          },
          {
            title:'aaa',
            subTitle:'张三丰',
            thirdTitle:'100.00元',
            content:'2017/11/9',
            time:'2017/11/9',
            btnText:'打赏成功',
            rewardContent:'iTalent移动端审批列表字段调iTalent移动端审批列表字段调iTalent移动端审批列表字段调iTalent移动端审批列表字段调',
            rewardName:'任务',
            avatar: {
                "aUrl": "",
                "isImg": false,
                "color": "#7eb6e0",
                "aName": "香锅"
            },
            taskId:123,
            titleRightText:'a',
            hasStateBg: true,
          },
          {
            title:'他他',
            subTitle:'张三丰',
            thirdTitle:'100.00元',
            content:'2017/11/9',
            time:'2017/11/9',
            btnText:'打赏成功',
            rewardContent:'iTalent移动端审批列表字段调iTalent移动端审批列表字段调iTalent移动端审批列表字段调iTalent移动端审批列表字段调',
            rewardName:'任务',
            avatar: {
                "aUrl": "",
                "isImg": false,
                "color": "#7eb6e0",
                "aName": "香锅"
            },
            taskId:123,
            titleRightText:'打赏成功打赏成功打赏成功',
            hasStateBg: true,
          },
        ],
        approvalList:[
          {
            "avatar": {
                "aUrl": "",
                "isImg": false,
                "color": "#7eb6e0",
                "aName": "香锅"
            },
            "nName": "香锅",
            "thirdTitle":'10元',
            "mess": "标题标题",
            "title": "标题标题标题标题标题标题标题标题标题标题标",
            "subTitle": "扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段",
            "time": "1/22 10:27",
            "objUrl": "",
            "metaData": {
                "TaskID": "92877e81-e057-42a3-bf79-124992574150",
                "objUrl": "",
                "showCreateDate": "10:27",
                "User": {
                    "email": "xiangguo@beisen.com",
                    "UserId": 201135492,
                    "name": "香锅",
                    "avatar": {
                        "Original": null,
                        "Medium": null,
                        "Normal": null,
                        "HasAvatar": false,
                        "Big": null,
                        "Large": null,
                        "Color": "#7eb6e0",
                        "Small": null
                    }
                },
                "subTitle": "提交的",
                "createDate": "2017-08-29T10:27:59.6733432",
                "appId": "907",
                "appType": "907",
                "appName": "审批中心",
                "OperatorBtn": [
                    {
                        "IsSystemAction": false,
                        "ActionValue": "同意",
                        "ActionText": ""
                    },
                    {
                        "IsSystemAction": false,
                        "ActionValue": "不同意",
                        "ActionText": ""
                    }
                ],
                "extendDatas": "扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段扩展字段",
                "content": "内容内容内容内容内容内容内容内容内容内容内容内容内容内容"
            },
            "appId": 907,
            "hasButton": true,
            "hasAgree": true,
            "hasDisagree": true,
            "disagreeValue": {
                "IsSystemAction": false,
                "ActionValue": "a不同意a",
                "ActionText": ""
            },
            "agreeValue": {
                "IsSystemAction": false,
                "ActionValue": "a同意a",
                "ActionText": ""
            },
            "taskId": "92877e81-e057-42a3-bf79-124992574150"
          },
          {
            "avatar": {
                "aUrl": "",
                "isImg": false,
                "color": "#7eb6e0",
                "aName": "香锅"
            },
            "nName": "香锅",
            "mess": "出差申请",
            "title": "提交的",
            "subTitle": "请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理",
            "time": "10:27",
            "objUrl": "",
            "metaData": {
                "TaskID": "92877e81-e057-42a3-bf79-124992574150",
                "objUrl": "",
                "showCreateDate": "10:27",
                "User": {
                    "email": "xiangguo@beisen.com",
                    "UserId": 201135492,
                    "name": "香锅",
                    "avatar": {
                        "Original": null,
                        "Medium": null,
                        "Normal": null,
                        "HasAvatar": false,
                        "Big": null,
                        "Large": null,
                        "Color": "#7eb6e0",
                        "Small": null
                    }
                },
                "subTitle": "提交的",
                "createDate": "2017-08-29T10:27:59.6733432",
                "appId": "909",
                "appType": "907",
                "appName": "审批中心",
                "OperatorBtn": [
                    {
                        "IsSystemAction": false,
                        "ActionValue": "同意",
                        "ActionText": ""
                    },
                    {
                        "IsSystemAction": false,
                        "ActionValue": "不同意",
                        "ActionText": ""
                    }
                ],
                "extendDatas": "",
                "content": "出差申请"
            },
            "appId": 909,
            "hasButton": true,
            "hasAgree": true,
            "hasDisagree": true,
            "disagreeValue": {
                "IsSystemAction": false,
                "ActionValue": "不同意",
                "ActionText": ""
            },
            "agreeValue": {
                "IsSystemAction": false,
                "ActionValue": "同意",
                "ActionText": ""
            },
            "taskId": "92877e81-e057-42a3-bf79-124992574150"
          },
          {
            "avatar": {
                "aUrl": "",
                "isImg": false,
                "color": "#7eb6e0",
                "aName": "香锅"
            },
            "nName": "香锅",
            "mess": "出差申请",
            "title": "",
            "subTitle": "请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理请你处理",
            "time": "10:27",
            "objUrl": "",
            "metaData": {
                "TaskID": "92877e81-e057-42a3-bf79-124992574150",
                "objUrl": "",
                "showCreateDate": "10:27",
                "User": {
                    "email": "xiangguo@beisen.com",
                    "UserId": 201135492,
                    "name": "香锅",
                    "avatar": {
                        "Original": null,
                        "Medium": null,
                        "Normal": null,
                        "HasAvatar": false,
                        "Big": null,
                        "Large": null,
                        "Color": "#7eb6e0",
                        "Small": null
                    }
                },
                "subTitle": "",
                "createDate": "2017-08-29T10:27:59.6733432",
                "appId": "909",
                "appType": "907",
                "appName": "审批中心",
                "OperatorBtn": [
                    {
                        "IsSystemAction": false,
                        "ActionValue": "同意",
                        "ActionText": ""
                    },
                    {
                        "IsSystemAction": false,
                        "ActionValue": "不同意",
                        "ActionText": ""
                    }
                ],
                "extendDatas": "",
                "content": "出差申请"
            },
            "appId": 909,
            "hasButton": true,
            "hasAgree": true,
            "hasDisagree": true,
            "disagreeValue": {
                "IsSystemAction": false,
                "ActionValue": "不同意",
                "ActionText": ""
            },
            "agreeValue": {
                "IsSystemAction": false,
                "ActionValue": "同意",
                "ActionText": ""
            },
            "taskId": "92877e81-e057-42a3-bf79-124992574150"
          }
        ],
        showDropLoad:true,
        approvalListNull:[],
      }
    },
    created: function() {
    },
    mounted:function(){
      let cards = document.querySelectorAll('.mu-cards');
      let array = [].slice.call(cards);

      array.map((item, index)=>{
         item.style.transform = 'translateX('+ -150 +'px)';
         item.style.transitionDuration = index*150+'ms';
      });


    },
    methods: {
      handleAgreeClick:function(taskId,agreeValue,cb,reset){
        console.log(23)
        setTimeout(function(){
          cb(true);
          //reset('eeeee');
        }, 2000)
      },
      handleDisagreeClick:function(taskId,agreeValue,cb){
        console.log(33)
        setTimeout(function(){
          cb(true);
        }, 2000)
      },
      loadUpFn:function(){
          //this.showDropLoad = false;
          //this.approvalList.length = 0;
      },
      loadDownFn:function(){

      }
    }
}
</script>
<style>
#app{
background: #f3f4f5;
}
.mu-cards{
  position: relative;
  left: 150px;
}
</style>
