// 每日清单
import React from 'react';
import { Modal, SearchBar, DatePickerView, Toast, Accordion } from 'antd-mobile';
import moment from 'moment';
import { $http } from "containers/config/https";
import "./style/visitRecords.less";

export default class DailyList extends React.Component {
  constructor(props) {
    super(props);
    let userData = localStorage.getItem("userData") ? JSON.parse(localStorage.getItem("userData")) : {};
    let weChatParams = sessionStorage.getItem("weChatParams") ? JSON.parse(sessionStorage.getItem("weChatParams")) : {};
    this.state = {
      userData,
      weChatParams,
      visible: false,
      value: "",
      searchVal: undefined,
      accordionData: []
    };
  }

  componentDidMount() {
    this.setState({ value: new Date(moment().subtract(1, 'days').format('YYYY-MM-DD')), searchVal: moment().subtract(1, 'days').format('YYYY-MM-DD') }, () => {
      // 搜索
      this.handleSearch();
    })
  }

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

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

  handleSearchChange = (e) => {
    console.log(e)
  }

  // 搜索
  handleSearch = () => {
    Toast.loading('数据加载中...', 30);
    let { searchVal, userData } = this.state;
    let data = {
      params: [{
        hospCode: userData.hisHospID || '',
        userCode: "wxsf",
        // patNO: "0002158920",
        patNO: userData.hisPatNo,
        startDate: searchVal,
        endDate: searchVal
      }],
    }
    $http.post("urlS", this, {
      code: "130975",
      data: data,
      namespace: "UPP",
      success: function (res) {
        Toast.hide()
        if (+res.errorCode === 0) {
          this.setState({ accordionData: res.result })
        } else {
          this.setState({ accordionData: [] })
          Toast.info(res.errorMessage, 3, () => { }, false)
        }
      },
      error: function (error) {
        Toast.hide()
      }
    });
  }

  // 切换日期change
  detePickerViewChange = (value) => {
    this.setState({ value });
  }

  // 确认
  handleConfirm = () => {
    let { value } = this.state;
    console.log(value)
    this.setState({ searchVal: moment(value).format("YYYY-MM-DD") }, () => {
      // 搜索
      this.onClose();
    })
  }

  render() {
    let { value, visible, searchVal, accordionData } = this.state;
    return (
      <div className="daily-list">
        <SearchBar
          placeholder="搜索"
          cancelText="搜索"
          onSubmit={this.handleSearch}
          onCancel={this.handleSearch}
          value={searchVal}
          onChange={this.handleSearchChange}
          onFocus={this.handleShwoModal}
        />
        <div className="accordion-content">
          <Accordion defaultActiveKey="0" onChange={this.onChange}>
            {accordionData && accordionData.map((item, index) => {
              return (
                <Accordion.Panel key={index} header={<div>{item.tartype}<span style={{ color: "#666", fontSize: '14px' }}>（总金额：{item.sum})</span></div>}>
                  {item.itmList && item.itmList.map((childItem, childIndex) => {
                    return (
                      <div key={childIndex} className="accordion-item border-bottom-after">
                        <p>收费项目名: {childItem.itmDesc}</p>
                        <p>数量: {childItem.qty}</p>
                        <p>金额: {childItem.sum}</p>
                        <p>单价: {childItem.unitprice}</p>
                        <p>单位: {childItem.uom}</p>
                      </div>)
                  })}
                </Accordion.Panel>
              )
            })}
          </Accordion>
        </div>
        <Modal
          popup
          visible={visible}
          onClose={this.onClose}
          animationType="slide-up"
          className="daily-list-modal"
        >
          <div className="modal-head border-bottom-after"><span onClick={this.onClose}>取消</span><span onClick={this.handleConfirm}>确认</span></div>
          <DatePickerView
            mode="date"
            value={value}
            onChange={this.detePickerViewChange}
          />
        </Modal>
      </div>
    )
  }
}