// 账单
import React from 'react';
import {List, DatePickerView, Picker, Modal, Button} from 'antd-mobile';
import './style/index.less';
import Moment from 'moment';

const Item = List.Item;
const Brief = Item.Brief;

export default class Bill extends React.Component {
  constructor({history}) {
    super();
    this.state = {
      adminStatus: true,
      visible: false,
      admID: "2",
      categoryData: [],
      categoryID: undefined,
      quickActive: "1",
      quickValue: "本周",
      startDate: Moment().format('YYYY-MM-DD'), 
      endDate: Moment().format('YYYY-MM-DD'),
      dataActive: "startDate",
      dateValue: new Date(),
      bodyHeight: 0
    }
    this.history=history;
  }

  componentDidMount() {
    let billHeight = document.querySelector(".bill").offsetHeight;
    let listQueryConditions = document.querySelector(".list-query-conditions").offsetHeight;
    let bodyHeight = parseInt(billHeight) - parseInt(listQueryConditions) - 10
    this.setState({bodyHeight});
    this.getCategoryData()
  }

  // 获取列表下拉数据
  getCategoryData = () => {
    let categoryData = [
      {
        label: '全部类别',
        value: '1',
      },
      {
        label: '门诊',
        value: '2',
      },
      {
        label: '住院',
        value: '3',
      },
      {
        label: '急诊',
        value: '4',
      },
    ];
    this.setState({categoryData})
  }

  handleCategoryChange = val => {
    this.setState({categoryID: val})
  }

  handleShowModal = () => {
    this.setState({visible: true})
  }

  onClose = () => {
    this.setState({visible: false})
  }

  // 切换快捷日期
  handleSwitchQuick = item => {
    let start=""
    let end=""
    if (item.value === "1") {
      start = Moment().week(Moment().week()).startOf('week').format('YYYY-MM-DD')
      end = Moment().week(Moment().week()).endOf('week').format('YYYY-MM-DD')
    } else if (item.value === "2") {
      start =Moment().month(Moment().month()).startOf('month').format('YYYY-MM-DD');  //本月初
      end = Moment().month(Moment().month()).endOf('month').format('YYYY-MM-DD');   //现在
    } else if (item.value === "3") {
      start =Moment().month(Moment().month() - 2).startOf('month').format('YYYY-MM-DD');  //本月初
      end = Moment().month(Moment().month()).endOf('month').format('YYYY-MM-DD');   //现在
    }
    this.setState({quickActive: item.value, quickValue: item.label, startDate: start, endDate: end}, () => {
      this.onClose(); // 关闭弹窗
    })
  }

  handleClockStartDate = () => {
    let date = new Date()
    this.setState({dataActive: "startDate"}, () => {
      if (!this.state.startDate) {
        this.setState({dateValue: date})
      } else {
        this.setState({dateValue: new Date(this.state.startDate)})
      }
    })
  }

  handleClockEndDate = () => {
    let date = new Date()
    this.setState({dataActive: "endDate"}, () => {
      if (!this.state.endDate) {
        this.setState({dateValue: date})
      } else {
        this.setState({dateValue: new Date(this.state.endDate)})
      }
    })
  }

  datePickerViewChange = (date) => {
    if (this.state.dataActive === "startDate") {
      this.setState({dateValue: date, startDate: Moment(date).format('YYYY-MM-DD')})
    } else if (this.state.dataActive === "endDate") {
      this.setState({dateValue: date, endDate: Moment(date).format('YYYY-MM-DD')})
    }
  }

  // 根据选择的开始日期与结束日期-查询
  handleQuery = () => {
    let {startDate, endDate} = this.state;
    if (startDate && endDate && startDate.slice(0, 4) === endDate.slice(0, 4)) {
      this.setState({quickValue: startDate + " / " + endDate.slice(5)}, () => {
        this.onClose();
      })
    } else {
      this.setState({quickValue: startDate + (endDate ? "/" + endDate : '')}, () => {
        this.onClose();
      })
    }
  }

  // 加载更多
  handleLoadMore = () => {
    console.log("加载中")
  }

  // 跳转到账单详情
  handleGoBillingDetails = () => {
    this.history.push("/0001/00020004")
  }

  handleDateChange = (type, e) => {
    if (type === 'start') {
      // this.setState({startDate: e.target.value});
    } else {
      // this.setState({endDate: e.target.value});
    }
  }

  render() {
    let {categoryData, categoryID, visible, quickActive, quickValue, startDate, endDate, dataActive, dateValue, bodyHeight} = this.state;

    let quickDate = [
      {
        label: '本周',
        value: '1',
      },
      {
        label: '本月',
        value: '2',
      },
      {
        label: '最近个三月',
        value: '3',
      },
    ]
    let quickSelectDom = quickDate&&quickDate.map((item, index) => {
      return (<span key={index} className={item.value === quickActive ? "quick-active" : ""} onClick={() => this.handleSwitchQuick(item)}>{item.label}</span>)
    })
    return (
      <div className="electronic-health-card">
        <div style={{height: "100%", overflow: "auto"}} className="account bill">
          <div className="list-query-conditions">
            <div className="query-conditions border-bottom-after">
              <div onClick={this.handleShowModal}>
                <div className="query-conditions-content"><span className="ellipsis">{quickValue}</span><i className="iconfont icon-arrow-right"></i></div>
              </div>
              <div>
                <Picker title="选择类别" data={categoryData} cols={1} value={categoryID} onChange={this.handleCategoryChange}>
                  <List.Item arrow="horizontal"></List.Item>
                </Picker>
              </div>
            </div>
            <p>
              <span>充值总额：<strong>12.23</strong></span>
              <span>支出总额：<strong>12439.45</strong></span>
            </p>
          </div>
          <List className="bill-detail-list" style={{height: bodyHeight + "px", overflow: "auto"}}>
            <Item
              extra={<span className="am-list-extra-income">+200</span>}
              thumb={<i className="iconfont icon-weixin icon-weixin"></i>}
              onClick={this.handleGoBillingDetails}
            >
              My wallet
              <Brief>subtitle</Brief>
            </Item>
            <Item
              extra="-800"
              thumb={<i className="iconfont icon-weixin icon-weixin"></i>}
            >
              My Cost Ratio
              <Brief>subtitle</Brief>
            </Item>
            <Item
              extra="-800"
              thumb={<i className="iconfont icon-weixin icon-weixin"></i>}
            >
              My Cost Ratio
              <Brief>subtitle</Brief>
            </Item>
            <Item
              extra="-800"
              thumb={<i className="iconfont icon-weixin icon-weixin"></i>}
            >
              My Cost Ratio
              <Brief>subtitle</Brief>
            </Item>
            <Item
              extra="-800"
              thumb={<i className="iconfont icon-weixin icon-weixin"></i>}
            >
              My Cost Ratio
              <Brief>subtitle</Brief>
            </Item>
            <Item
              extra="-800"
              thumb={<i className="iconfont icon-weixin icon-weixin"></i>}
            >
              My Cost Ratio
              <Brief>subtitle</Brief>
            </Item>
            <Item
              extra="-800"
              thumb={<i className="iconfont icon-weixin icon-weixin"></i>}
            >
              My Cost Ratio
              <Brief>subtitle</Brief>
            </Item>
            <Item
              extra="-800"
              thumb={<i className="iconfont icon-weixin icon-weixin"></i>}
            >
              My Cost Ratio
              <Brief>subtitle</Brief>
            </Item>
            <Item
              extra="-800"
              thumb={<i className="iconfont icon-weixin icon-weixin"></i>}
            >
              My Cost Ratio
              <Brief>subtitle</Brief>
            </Item>
            <Item
              extra="-800"
              thumb={<i className="iconfont icon-weixin icon-weixin"></i>}
            >
              My Cost Ratio
              <Brief>subtitle</Brief>
            </Item>
            <p className="load-more" onClick={this.handleLoadMore} style={{display: "none"}}>加载更多<i className="iconfont icon-arrow-right"></i></p>
            <p className="no-more" style={{display: "block"}}>--没有更多了--</p>
          </List>
        </div>
        <Modal
          popup
          // closable={true}
          visible={visible}
          onClose={this.onClose}
          animationType="slide-up"
        >
          <div className="quick-date">
            {quickSelectDom}
          </div>
          <div className="start-end-date">
            <span className={dataActive === "startDate" ? "date data-active" : "date"} onClick={this.handleClockStartDate}>
              <input value={startDate} onChange={(e) => this.handleDateChange('start', e)} />
            </span>
            <strong>至</strong>
            <span className={dataActive === "endDate" ? "date data-active" : "date"} onClick={this.handleClockEndDate}>
              <input value={endDate} onChange={(e) => this.handleDateChange('end', e)} />
            </span>
            <Button type="primary" inline size="small" onClick={this.handleQuery}>查询</Button>
          </div>
          <DatePickerView
            mode="date"
            value={dateValue}
            onChange={this.datePickerViewChange}
            // onValueChange={this.datePickerViewValueChange}
          />
        </Modal>
      </div>
    )
  }
}