
<style scoped>
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.Capital {
  background-color: #fff;
  height: 100%;
  height: 100vh;
}
.Capital_List .Capital_List_Left {
  flex: 0.8;
}

.Capital_List .Capital_List_Right {
  flex: 0.2;
  line-height: 3rem;
  color: #fc997b;
  text-align: right;
}
.Capital_List .reduce {
  color: #6d6d6d;
}
.Capital_Total {
  background-image: url("http://image.supercarrier8.com/h5_key/MyReward-backgroundTop.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #fff;
}
.Capital_Total .TotalShow li:nth-child(2) {
  float: left;
  border-right: 0.01rem solid #fff;
  margin-top: 1rem;
  width: 1%;
  height: 3rem;
}
.Capital_Total .TotalShow li.total {
  width: 49%;
  display: block;
  float: left;
  text-align: center;
  padding: 1rem 0;
}
.Capital_Total .TotalShow li .count {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 0.3rem;
}
.Capital_Total .TotalShow li .name {
  font-size: 0.7rem;
}

.Capital_Title {
  height: 3rem;
  line-height: 3rem;
  border-bottom: 1px solid #e6e6e6;
  margin: 0 6%;
}
.Capital_Main .Capital_Title_Left {
  float: left;
  color: #67a2fc;
  font-weight: bold;
}
.Capital_Main .Capital_Date_Right {
  float: right;
  border-radius: 0.6rem;
  width: 7rem;
  opacity: 0.5;
  box-shadow: 0 0 10px #bcbc;
  line-height: 1.5rem;
  height: 1.5rem;
  margin-top: 0.7rem;
}
.Capital_Main .Capital_Title_Left span {
  padding-left: 1.3rem;
  padding-top: 0.3rem;
  background: url("http://image.supercarrier8.com/h5_key/icon-billDetails.png");
  background-repeat: no-repeat;
  background-position: 0rem 50%;
  background-size: 1.1rem ;
}
.Capital_Main .Capital_Date_Right i {
  margin-left: 0.5rem;
  padding-right: 0.3rem;
  padding-left: 1.3rem;
  background: url("http://image.supercarrier8.com/h5_key/icon-calendar.png");
  background-repeat: no-repeat;
  background-position: 0rem 50%;
  background-size: 0.9rem 0.9rem;
}
.Capital_Main .Capital_Date_Right span {
  border-left: 0.01rem solid#bfbfbf;
  padding-left: 0.5rem;
}
.Capital_List ul {
  list-style-type: none;
  margin: 0px;
  padding: 0 6%;
}
.Capital_List li {
  border-bottom: 1px solid #e6e6e6;
  display: flex;
  padding: 0.6rem;
}
.Capital_List li .date {
  color: #9a9a9a;
}
.Capital_List li .Capital_List_Left {
  float: left;
  width: 80%;
}
.nodata {margin:0 auto;margin-top:0.6rem;color:#616161;font-size:0.7rem;padding-top:12rem;text-align: center;background: url(http://image.supercarrier8.com/h5_key/NoReward.png) no-repeat center center;background-size: 10rem;}
.picker-items{width: 100%;}
</style>
<template>
  <div
    class="container Capital jfBaseSize"
    v-cloak
    v-bind:style="vh?'height:100vh':'height: 100%;'"
  >
    <div class="Capital_Total">
      <ul class="TotalShow clearfix">
        <li class="total">
          <div class="count">{{TotalCount.InTotal}}</div>
          <span class="name">本月收入</span>
        </li>
        <li></li>
        <li class="total">
          <div class="count">{{TotalCount.OutTotal}}</div>
          <span class="name">本月支出</span>
        </li>
      </ul>
    </div>
    <div class="Capital_Main">
      <div class="Capital_Title">
        <div class="Capital_Title_Left">
          <span>收支明细</span>
        </div>
        <div class="Capital_Date_Right">
          <i></i>
          <span @click="selectDate">{{this.selectedValue}}</span>
        </div>
      </div>
      <div style="clear:both;"></div>
      <div class="nodata" v-show="nodatashow">您还没有门店收支明细记录！</div>
      <div class="Capital_List">
        <ul>
          <li v-for="item in DataList" :key="item.ID">
            <div class="Capital_List_Left">
              <p class="name" v-html="item.ObjectName"></p>
              <p class="date" v-html="item.ROW_CREATE_DATE"></p>
            </div>
            <div
              v-bind:class="item.tiks=='-'?'Capital_List_Right reduce':'Capital_List_Right'"
              v-html="item.tiks+item.Amount"
            ></div>
          </li> 
        </ul>
      </div>
    </div>
    <div class="pickerPop" @touchmove.prevent>
      <mt-datetime-picker
        v-model="DefaultValue"
        ref="picker"
        type="date"
        @confirm="handleConfirm"
        :startDate="startDate"
        :endDate="endDate"
        year-format="{value} 年"
        month-format="{value} 月"
      ></mt-datetime-picker>
    </div>
    <ReturnHome ref="returnhome"></ReturnHome>
  </div>
</template>
<script>
import Vue from "vue";
import { Toast, DatetimePicker, Indicator, Picker } from "mint-ui";
import channelHelper from "@/assets/js/channelHelper.js";
import { base64 } from "@/assets/js/cryptoHelper";
import utils from "@/assets/js/utils.js";
import ReturnHome from "@/components/channel/temp001/ReturnHome";
Vue.component(DatetimePicker.name, DatetimePicker);
export default {
  name: "Key_CapitalDetail",
  components: {ReturnHome},
  provide(){       
     return{           
        goPage:this.goPage       
     }   
  },
  props: ["comp", "cfg", "selectedPage"],
  data() {
    var that = this;
    return {
      nodatashow:false,
      vh: false,
      DefaultValue: new Date(),
      selectedValue: that.formateDate(new Date()),
      startDate: that.setStartDate(),
      endDate: new Date(),
      DataList: [],
      TotalCount: {
        InTotal: "0.00",
        OutTotal: "0.00"
      }
    };
  },
  methods: {
    goPage(pagetype) {
      this.$parent.changeSelectedPage(pagetype);
    },
    formateDate(date) {
      var date = new Date(date);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m > 9 ? m : "0" + m;
      return y + "." + m + "月";
    },
    setStartDate() {
      var date = new Date();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m > 9 ? m : "0" + m;
      return new Date(y + "-01");
    },
    selectDate() {
      this.$refs.picker.open();
      $(".picker-slot")[2].style.display = "none";
    },
    GetCurrentMonth(date) {
      var date = new Date(date);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m > 9 ? m : "0" + m;
      return y +"-"+ m;
    },
    handleConfirm(date) {
      var that = this;
      that.selectedValue = that.formateDate(date); //获取的时间为时间戳，getdata是自己写的一个转换时间的方法
      that.LoadList(that.GetCurrentMonth(date));
    },
    LoadList(MonthDate) {
     
       var that = this;
      var eno = that.sup8.context.enterpriseno;
      //判断是否登录
      if (!channelHelper.CheckLogin(this.$parent,eno,that.sup8.context.entranceid)) {
        this.$parent.changeSelectedPage('Key_Login')
        return false;
      }
      var url = "/channel/GetBudgetResultInfo";
      var dataParams = {
        searchMonth: MonthDate,
        UserToken: channelHelper.GetUserToken(),
        EnterpriseNo: eno,
        LanguageType: channelHelper.GetLanguageType(),
        Limit:100,
        Offset:0
      };
      var cbError = function() {
        Indicator.close();
      };
      var cbSuccess = function(res) {
        Indicator.close();
        if (res.flag) {
          that.DataList = res.data.Rows;
          that.TotalCount = res.data;
          that.nodatashow=false;
          if(res.data.Total==0)
          {
            that.nodatashow=true;
          }
        }else
          {
            that.nodatashow=true;
          }
      };
      //请求后端
      channelHelper.CommonCallService(url, dataParams,  cbSuccess, cbError,  null, null );
    }
  },
  watch: {},
  created: function() {
    var that = this;
    var isDesign = location.pathname.indexOf('design');
    if(isDesign!=-1)
    {
        return;
    }
    that.LoadList(that.GetCurrentMonth(new Date()));
  },
  mounted: function() {
    //如果登录了则自动跳转到首页
    // if(localStorage.getItem("loginInfo")!=null)
    // {
    //     //var loginInfo=JSON.parse(localStorage.getItem("loginInfo"));
    //     this.login(true);
    // }
    var that = this;
    var isDesign = location.pathname.indexOf("design");
    if (!(isDesign > -1)) {
      that.$set(that, "vh", true);
    } else {
      that.$set(that, "vh", false);
    }
    setTimeout(() => {
      let offsetHeight = document.body.offsetHeight;
      let scrollHeight = document.body.scrollHeight;
      this.height =
        scrollHeight > offsetHeight ? scrollHeight + "px" : offsetHeight + "px";
    }, 1000);
  }
};
</script>

