<template>
  <div class="div_page_bg">
    <div class="div_screen">
      <d-p-cell :show-bottom-line="true" title="开始时间" :placeholder="selectTips" :value="controller.startTime" is-link @on-cell-click="showStartDatePicker"></d-p-cell>
      <d-p-cell :show-bottom-line="true" title="结束时间" :placeholder="selectTips" :value="controller.endTime" is-link @on-cell-click="showEndDatePicker"></d-p-cell>
    </div>

    <div class="div_button">
      <span class="span_cancel" style="margin-right: 10px" @click="onCancel">取消</span>
      <span class="span_confirm" style="margin-left: 10px" @click="onConfirm">确定</span>
    </div>
  </div>
</template>

<script>
  import DPCell from "../../components/itemPassport/DPCell";
  import {mapMutations, mapState} from "vuex";
  import util from "../../util/util";
  export default {
    name: "chargeScreen",
    components: {DPCell},
    data(){
      return{
        selectTips: '请选择',
      }
    },
    computed: {
      ...mapState({
        controller: state => state.chargeScreenStore.chargeScreenLogic
      }),
    },
    created(){
      try {
        EbeiPlugins.setNavigationItemTitle("筛选");
        EbeiPlugins.cleanNavigationRightButton();
      }
      catch (e) {

      }
    },
    methods:{
      ...mapMutations('chargeScreenStore',[
          'setChargeScreenLogic',
          'clearChargeScreenLogic'
        ]
      ),
      showStartDatePicker () {
        let currDate = this.controller.startTime
        let that = this
        this.$datePickerUtil.showDatePicker(this, 'YYYY/MM/DD', '', currDate, (dateStr) => {
          that.controller.startTime = dateStr
        })
      },

      showEndDatePicker () {
        if (this.controller.startTime.length === 0) {
          this.$vux.toast.show({
            type: 'text',
            text: '请选择开始时间',
            position:'bottom',
          })
          return
        }

        let startDate = this.controller.startTime
        let currDate = this.controller.endTime
        let that = this
        this.$datePickerUtil.showDatePicker(this, 'YYYY/MM/DD', '', currDate, (dateStr) => {
          that.controller.endTime = dateStr
        })
      },
      onCancel(){
        this.clearChargeScreenLogic();
        this.$router.go(-1);
      },
      onConfirm(){
        if (!util.isNotEmpty(this.controller.startTime)) {
          this.$vux.toast.show({
            type: 'text',
            text: '请选择开始时间',
            position:'bottom',
          })
          return
        }
        if (!util.isNotEmpty(this.controller.endTime)) {
          this.$vux.toast.show({
            type: 'text',
            text: '请选择结束时间',
            position:'bottom',
          })
          return
        }
        this.$router.go(-1);
      }
    }
  }
</script>

<style scoped>
  .div_page_bg{
    width: 100%;
    height: 100%;
    background-color: #F9F9F9;
  }
  .div_screen{
    margin-top: 20px;
    height: calc(100vh - 160px);
  }
  .div_button{
    display: flex;
    justify-content: center;
    background-color: #F9F9F9;
    height: 140px;
  }
  .span_cancel{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #57A3FF;
    font-size: 15px;
    width: 120px;
    height: 42px;
    border-radius: 21px;
    border-style: solid;
    border-width: 1px;
    background-color: #F9F9F9;
    border-color: #57A3FF;
  }
  .span_confirm{
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 15px;
    width: 120px;
    height: 42px;
    border-radius: 21px;
    border-style: solid;
    border-width: 1px;
    background-color: #57A3FF;
    border-color: #57A3FF;
  }
</style>
