import React, { Component } from "react";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import { connect } from "react-redux";
import { View, Text, } from "@tarojs/components";
import { AtInput, AtButton, AtRadio } from "taro-ui";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/radio.scss";
import "taro-ui/dist/style/components/input.scss";
import "taro-ui/dist/style/components/icon.scss";
import { creatOrder } from '../../utils/servers/servers';
import { accountList } from '../../utils/tools/config';
import "./index.less";

class applyReimbursement extends Component {
  $instance = getCurrentInstance();

  constructor(props) {
    super(props);
    this.state = {
      type: -1,
      other: "",
    };
  }

  handleChange(e) {
    this.setState({
      type: e
    })
  }

  onInputChange(e) {
    this.setState({
      other: e
    })
  }

  componentDidShow() {

  }

  componentDidMount() {

  }

  // 不需要prid绑定，直接发起
  creatOrder() {
    const { type, other, } = this.state
    Taro.showLoading({ title: '处理中...' });
    creatOrder({
      type,
      typeOther: other,
    }).then(v => {
      Taro.hideLoading()
      if (v.error.length === 0) {
        Taro.redirectTo({
          url: '/pages/drafts/index?id=' + v.data
        })
      } else {
        Taro.showToast({ title: v.error[0].message, icon: 'none' })
      }
    }).catch(() => {
      Taro.showToast({
        title: '系统错误,请稍后再试',
        icon: 'none'
      })
    })
  }


  render() {
    const { type, other } = this.state
    return (
      <View className="reimbursement">
        <View>
          <View className="rtit">请选择报销费用类型</View>
          <View className="rlist">
            <AtRadio
              options={accountList}
              value={type}
              onClick={this.handleChange.bind(this)}
            />
            {type == 0 &&
              <AtInput
                name='other'
                type='text'
                placeholder='请填写明细'
                value={other}
                onChange={this.onInputChange.bind(this)}
              />}
            <View className="rlbuttom">
              <AtButton
                type="primary"
                circle
                onClick={() => {
                  if (type == -1) {
                    Taro.showToast({
                      title: '请选择报销费用类型',
                      icon: 'none'
                    })
                  } else if (type == 0 && !other) {
                    Taro.showToast({
                      title: '请填写其他明细',
                      icon: 'none'
                    })
                  } else {
                    this.creatOrder()
                  }
                }}
              >
                确定
              </AtButton>
            </View>
          </View>
        </View>
      </View>
    );
  }
}

export default applyReimbursement;
