import React, { Component } from "react";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import { Button, Picker, Text, View } from "@tarojs/components";
import dayjs from "dayjs";
import ImagePicker from "../../components/common/imagePicker";
import InquiryModal from "../../components/common/inquiryModal";
import AccountModal from "../../components/common/accountModal";
import Select from "../applyreimbursement/select";
import {
  AtButton,
  AtInput,
  AtModal,
  AtTextarea,
  AtModalHeader,
  AtModalContent,
  AtRadio,
  AtModalAction,
  AtIcon,
} from "taro-ui";
import {
  getPridDetail,
  getAccountList,
  selectList,
  detailsDelete,
  subAccount,
  getDepartmentList,
} from "../../utils/servers/servers";
import {
  getNumHourse,
  getAccountName,
  getTypeName,
  getVehicleName,
  commonAdd,
  getNewOptions,
  removeNull,
} from "../../utils/tools";
import { resourceAddress } from "../../utils/config";
import "taro-ui/dist/style/components/form.scss";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/loading.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/textarea.scss";
import "taro-ui/dist/style/components/input.scss";

import "./index.less";
import NewModal from "./modal"

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

  constructor(props) {
    super(props);
    this.state = {
      imgs: [],
      data: {},
      visible: "",
      list: [],
      total: 0,
      reality: 0,
      accountvisible: "",
      typeVisible: "",
      bankData: {},
      upaccount: false,
      accountsList: [],
      isShow: false,
    };
    this.onChange = this.onChange.bind(this);
    this.getNumHourse = this.getNumHourse.bind(this);
  }

  componentDidMount() {
    this.getDepartmentList()
    this.$instance.router.params && this.$instance.router.params.id &&
      (
        this.getDetail(),
        this.state.data.type != 2 && this.getMyList()
      )
  }

  componentDidShow() { // 对应onShow，只有在onShow中才会监听到当前页面的改变
    let pages = Taro.getCurrentPages();
    let currPage = pages[pages.length - 1]; // 获取当前页面
    const { data } = this.state
    const obj = {
      buyerName: currPage.data.name || data.buyerName,
      contractNo: currPage.data.contractNo || data.contractNo,
      orderNo: currPage.data.orderNo || data.orderNo,
      debitId: currPage.data.debitId || data.debitId,
      debitTotalAmount: currPage.data.totalAmount || data.debitTotalAmount || 0,
    }
    this.setState({
      data: { ...this.state.data, ...obj },
    })

    this.getAccountList();

  }

  componentWillUnmount() {
    this.imagePickerRef && this.imagePickerRef.clear();
  }

  // 部门数据
  getDepartmentList() {
    getDepartmentList({}).then(v => {
      let thedata = v.data;
      let theArr = [];
      if (!thedata) {
        if (v.error && v.error.length) {
          Taro.showToast({ title: v.error[0].message, icon: 'none' })
        }
      } else {
        thedata.map(function (item, index) {
          theArr.push({
            key: index,
            name: item.name,
            id: item.id
          });
        });
      }
      this.setState({
        departmentArr: theArr
      });
    }).catch(() => {
      Taro.showToast({
        title: '系统错误,请稍后再试',
        icon: 'none'
      })
    })
  }

  // 图片上传操作
  onChange(value, type) {
    let arr = this.state.imgs.concat([]);
    if (type === "add") {
      arr.push(value);
    } else if (type === "remove") {
      arr.splice(value, 1);
    }
    this.setState({
      imgs: arr,
    });
  }

  onInputChange(title, value) {

  }

  // 取消添加
  onAccountClose() {
    this.setState({
      accountvisible: "",
    })
  }

  // 添加收款账户
  onAccountOk() {
    this.setState({
      accountvisible: "",
    }, () => { this.getMyList() })
  }

  // 类型修改 取消
  onTypeClose() {
    this.setState({
      typeVisible: "",
    })
  }

  // 类型修改 确定
  onTypeOk(type, typeOther) {
    const oldType = this.state.data.type
    const oldTypeOther = this.state.data.typeOther
    if ((oldType == type) && (typeOther == oldTypeOther)) {
      this.setState({
        typeVisible: "",
      })
    } else {
      let data = {
        updateType: 1,
        id: this.$instance.router.params.id,
        type,
        typeOther,
      }
      subAccount(removeNull(data))
        .then((v) => {
          if (v.error.length === 0) {
            this.getAccountList()
            // 手动刷新
            const obj = { type, typeOther }
            this.setState({
              data: { ...this.state.data, ...obj },
              typeVisible: "",
            })
            Taro.showToast({
              title: "修改成功！",
              icon: "none",
            });
          } else {
            Taro.showToast({
              title: v.error[0].message,
              icon: "none",
            });
          }
        })
        .catch(() => {

        });
    }
  }

  // 费用弹窗
  onClose() {
    this.setState({
      visible: "",
    })
    this.getAccountList()
  }

  // 报销账户列表
  getMyList(sta) {
    let data1 = { status: 1 }
    let data2 = {
      pageNo: 1,
      pageSize: 99,
    }
    selectList(sta ? data2 : data1).then(v => {
      if (v.error.length === 0) {
        let list = v.data.list || []
        if (list?.length > 0) {
          if (sta) {
            this.setState({
              accountsList: list
            })
          } else {
            this.setState({
              bankData: list[0],
            })
          }
        }
      } else {
        Taro.showToast({ title: v.error[0].message, icon: 'none' })
      }
    }).catch(() => {
      Taro.showToast({
        title: '系统错误,请稍后再试',
        icon: 'none'
      })
    })
  }

  // 确认收款账户
  selectOn() {
    let list = this.state.accountsList
    for (var i = 0; i < list.length; i++) {
      if (list[i].id == this.state.aid) {
        this.setState({
          upaccount: false,
          bankData: list[i]
        })
      }
    }
  }

  // 报销单详情
  getDetail() {
    getPridDetail({
      id: this.$instance.router.params.id,
    }).then(v => {
      if (v.error.length === 0) {
        let list = [];
        for (let i of (v.data.attachmentUrl || '').split(',')) {
          if (i) {
            list.push({ 'url': resourceAddress + i })
          }
        }
        this.setState({
          data: v.data,
          rangeStartMinuteVal: v.data.releaseStartStr,
          rangeEndMinuteVal: v.data.releaseEndStr,
          totalDuration: v.data.duration,
          imgs: list,
        })
        this.getAccountList()
      } else {
        Taro.showToast({ title: v.error[0].message, icon: 'none' })
      }
    }).catch(() => {
      Taro.showToast({
        title: '系统错误,请稍后再试！',
        icon: 'none'
      })
    })
  }

  // 报销详情金额列表
  getAccountList() {
    const { data } = this.state
    getAccountList({
      eaid: this.$instance.router.params.id,
    }).then(v => {
      if (v.error.length === 0) {
        let sum = 0
        for (var i = 0; i < v.data.length; i++) {
          // sum += v.data[i].amount
          sum = commonAdd(sum, v.data[i].amount)
        }
        let reality = (sum > data.debitTotalAmount) ? commonAdd(sum, -data.debitTotalAmount) : 0
        this.setState({
          list: v.data,
          total: sum,
          reality,
        })

      } else {
        Taro.showToast({ title: v.error[0].message, icon: 'none' })
      }
    }).catch(() => {
      Taro.showToast({
        title: '系统错误,请稍后再试',
        icon: 'none'
      })
    }).finally(() => {
      this.setState({
        isShow: true
      })
    })
  }

  // 删除报销详情
  detailsDelete(id) {
    detailsDelete({
      id,
    }).then(v => {
      if (v.error.length === 0) {
        Taro.showToast({ title: "操作成功", icon: 'none' })
        this.getAccountList()
      } else {
        Taro.showToast({ title: v.error[0].message, icon: 'none' })
      }
    }).catch(() => {
      Taro.showToast({
        title: '系统错误,请稍后再试',
        icon: 'none'
      })
    })
  }

  // 提交申请
  onSubmit() {
    const { data, bankData, list } = this.state
    if (data.type == 1) {
      if (!data.userNames) {
        Taro.showToast({ title: "请填写公出客户名称", icon: "none" });
        return;
      }
      if (!data.districtName) {
        Taro.showToast({ title: "请填写公出地点", icon: "none" });
        return;
      }
      if (!this.state.rangeStartMinuteVal) {
        Taro.showToast({ title: "请选择公出时间", icon: "none" });
        return;
      }
      if (!this.state.rangeEndMinuteVal) {
        Taro.showToast({ title: "请选择公出时间", icon: "none" });
        return;
      }
    }
    if (!data.remarks) {
      Taro.showToast({ title: "请填写报销事由", icon: "none" });
      return;
    }
    if (list.length == 0) {
      Taro.showToast({ title: "请先添加报销/申请费用详细", icon: "none" });
      return;
    }
    if (data.type == 5) {
      if (!data.debitId) {
        Taro.showToast({ title: "请选择需抵扣的借支", icon: "none" });
        return;
      }
    }
    if (data.type != 3 && data.type != 5) {
      if (!bankData.id) {
        Taro.showToast({ title: "请选择收款账户", icon: "none" });
        return;
      }
    }
    let imgUrls = []
    if (this.state.imgs.length) {
      let picArr = [];
      this.state.imgs.map(function (item) {
        if (item.url) {
          picArr.push(item.url.substring(resourceAddress.length));
        } else {
          picArr.push(item)
        }
      });
      imgUrls = picArr.join(",");
    }
    this.setState({
      loading: true,
    });
    let comData = {
      updateType: 0,
      id: this.$instance.router.params.id,
      status: 1,  // 提交审核
      type: data.type, // 报销类型
      typeOther: data.type == 0 ? data.typeOther : undefined, // 其他类型
      remarks: data.remarks, // 报销事由
      applyDep: (data.type == 4 || data.type == 5) ? undefined : data.applyDep, // 申请部门（借支抵扣不需要）
      attachmentUrl: this.state.imgs.length === 0 ? "" : imgUrls, // 附件
      payDep: data.payDep, // 支付部门
      orderNo: (data.type == 4 || data.type == 5) ? undefined : data.orderNo, // 订单编号（借支抵扣不需要）
      debitId: data.type == 4 ? undefined : data.debitId, // 预支单
      eaaid: (data.type == 3 || data.type == 5) ? undefined : bankData.id, // 报销账户（第三方付款和抵扣不需要）
      // 差旅费
      userNames: data.type == 1 ? data.userNames : undefined, // 公出客户名称
      districtName: data.type == 1 ? data.districtName : undefined, // 公出地点
      releaseStart: data.type == 1 ? this.state.rangeStartMinuteVal : undefined, // 开始时间
      releaseEnd: data.type == 1 ? this.state.rangeEndMinuteVal : undefined, // 结束时间
      duration: data.type == 1 ? this.state.totalDuration : undefined, // 公出时长
    }
    subAccount(removeNull(comData))
      .then((v) => {
        this.setState({
          loading: false,
        })
        if (v.error.length === 0) {
          Taro.showToast({
            title: "提交成功！",
            icon: "none",
          });
          Taro.switchTab({
            url: "/pages/recordlist/index",
          });
        } else {
          Taro.showToast({
            title: v.error[0].message,
            icon: "none",
          });
        }
      })
      .catch(() => {
        this.setState({
          loading: false,
        });
      });
  }

  getNumHourse(startTime, endTime) {
    this.setState({
      totalDuration: getNumHourse(
        startTime,
        endTime,
        this.state.validDates.length
      ),
    });
  }


  onPickerHide() {
    this.setState({
      isPickerRender: false,
    });
  }


  onSetPickerTime(val) {
    let data = val.detail;
    this.setState({
      rangeStartMinuteVal: data.selectStartTime,
      rangeEndMinuteVal: data.selectEndTime,
    });
    let arr = [];
    if (data.startTime && data.endTime) {
      let a = dayjs(data.startTime);
      let b = dayjs(data.endTime);
      let num;
      if (a.hour() <= b.hour()) {
        num = b.diff(a, "day") + 1;
      } else {
        num = b.diff(a, "day") + 2;
      }
      let strAdd = data.startTime;
      for (let i = 0; i < num; i++) {
        let time = dayjs(strAdd).add(i, "days").format("YYYY-MM-DD");
        arr.push({ value: time });
      }
    }
    this.setState({
      rangeEndVal: dayjs(data.endTime).format("YYYY-MM-DD"),
      rangeStartVal: dayjs(data.startTime).format("YYYY-MM-DD"),
      validDates: arr,
    }, () => {
      let a1 = dayjs(dayjs(data.endTime).format("YYYY-MM-DD HH:mm:ss"));
      let b1 = dayjs(dayjs(data.startTime).format("YYYY-MM-DD  HH:mm:ss"));
      this.getNumHourse(b1, a1);
    });
  }


  render() {
    const { data, list, total, bankData, } = this.state
    const departmentArr = this.state.departmentArr || [];
    return (
      <View className="subform">
        <View className="title">{getAccountName(data.type, data.typeOther)}</View>
        {data.type == 1 &&
          <View className="inputFormItem">
            <AtInput
              name='userNames'
              title='公出企业:'
              type='text'
              placeholder='请填写公出企业'
              value={data.userNames}
              onChange={e => { data.userNames = e }}
            />
          </View>}
        {data.type == 1 &&
          <View className="inputFormItem">
            <AtInput
              name='districtName'
              title='公出地点:'
              type='text'
              placeholder='请填写公出地点'
              value={data.districtName}
              onChange={e => { data.districtName = e }}
            />
          </View>}
        {data.type == 1 &&
          <View className="formItem">
            <View className="formName">公出时间:</View>
            <View className="formValue">
              <View
                className="time"
                onClick={() => {
                  this.setState({
                    isPickerRender: true,
                  });
                }}
              >
                {this.state.rangeStartMinuteVal &&
                  this.state.rangeEndMinuteVal ? (
                  <View className="timeContent">
                    <View style={{ textAlign: "center" }}>{this.state.rangeStartMinuteVal}</View>
                    &nbsp;&nbsp;至&nbsp;&nbsp;
                    <View style={{ textAlign: "center" }}>{this.state.rangeEndMinuteVal}</View>
                  </View>
                ) : (
                  "请选择时间"
                )}
              </View>
              <timePicker
                config={{
                  endDate: true,
                  column: "minute",
                  dateLimit: false,
                  limitStartTime: dayjs()
                    .subtract(3, "year")
                    .format("YYYY-MM-DD HH:mm:ss"),
                  limitEndTime: dayjs()
                    .add(3, "year")
                    .format("YYYY-MM-DD HH:mm:ss"),
                }}
                isPartition
                pickerShow={this.state.isPickerRender}
                onconditionaljudgment={(v) => {
                  let a = dayjs(
                    dayjs(v.detail.endTime)
                      .second(0)
                      .format("YYYY-MM-DD HH:mm:ss")
                  );
                }}
                onhidepicker={() => {
                  this.onPickerHide();
                }}
                onsetpickertime={(v) => {
                  this.onSetPickerTime(v);
                }}
              />
            </View>
          </View>}
        {data.type == 1 &&
          <View className="formItem">
            <View className="formName">公出时长:</View>
            <View className="formValue">{this.state.totalDuration}小时</View>
          </View>}
        <View className="formItem">
          <View className="formName">申请类型:</View>
          <View className="formValue" onClick={() => {
            this.setState({
              isInquiryOpened: true,
              inquiryTitle: "温馨提示",
              inquiryContent: "您是否需要重新选择费用类型？原报销数据将清空后，需重新填写！！！",
              inquiryFn: () => {
                this.setState({
                  typeVisible: "edit"
                })
              },
            });
          }}>
            {getAccountName(data.type, data.typeOther)}
            <AtIcon value="chevron-right" size="20" color="#000000" />
          </View>
        </View>
        {data.type != 4 && data.type != 5 &&
          <View className="formItem">
            <View className="formName">报销至订单:</View>
            <View className="formValue" onClick={() => {
              Taro.navigateTo({
                url: "/pages/dataindex/index"
              })
            }}>
              <View>
                <View>{data.buyerName}</View>
                <View>{data.contractNo}</View>
              </View>
              <AtIcon value="chevron-right" size="20" color="#000000" />
            </View>
          </View>}
        <View className="formTitle">
          {(data.type == 4 || data.type == 5) ? "申请详细" : "报销详细"}
        </View>
        <View className="formItem">
          <View className="formName">申请人:</View>
          <View className="formValue">{data.aname}</View>
        </View>
        {
          data.type != 4 && data.type != 5 &&
          <View className="formItem">
            <View className="formName">报销公司:</View>
            <View className="formValue">
              <Picker
                value={departmentArr.findIndex(item => item.id === data.applyDep)}
                range={departmentArr} rangeKey='name' mode='selector'
                onChange={(e) => {
                  const obj = { applyDep: departmentArr[e.detail.value].id, appDepName: departmentArr[e.detail.value].name }
                  this.setState({
                    data: { ...data, ...obj },
                  })
                }}>
                <View>
                  {data.appDepName}
                  <AtIcon value="chevron-right" size="20" color="#000000" />
                </View>
              </Picker>
            </View>
          </View>
        }
        <View className="formItem">
          <View className="formName">
            {data.type == 4
              ? "预借支公司:" : data.type == 5
                ? "抵扣公司:" : "支付公司:"}</View>
          <View className="formValue">
            <Picker
              value={departmentArr.findIndex(item => item.id === data.payDep)}
              range={departmentArr} rangeKey='name' mode='selector'
              onChange={(e) => {
                const obj = { payDep: departmentArr[e.detail.value].id, payDepName: departmentArr[e.detail.value].name }
                this.setState({
                  data: { ...data, ...obj },
                })
              }}>
              <View>
                {data.payDepName}
                <AtIcon value="chevron-right" size="20" color="#000000" />
              </View>
            </Picker>
          </View>
        </View>
        <View className="formItem">
          <View className="formName">{(data.type == 4 || data.type == 5) ? "说明:" : "报销事由:"}</View>
          <View className="formValues">
            <AtTextarea
              value={data.remarks == null ? "" : data.remarks}
              onChange={e => {
                const obj = { remarks: e }
                this.setState({
                  data: { ...data, ...obj }
                })
              }}
              height={75}
              maxLength={50}
              placeholder={(data.type == 4 || data.type == 5) ? "请填写说明:" : "请填写报销事由"}
            />
          </View>
        </View>
        <View className="formTitle">
          {data.type != 4 && data.type != 5 && "报销"}费用详细
          <Button className="ftBottom" size='mini' type='primary'
            onClick={() => {
              data.type == 1
                ? this.setState({ visible: "add" })
                : Taro.navigateTo({
                  url: `/pages/accountfrom/index?type=${data.type}&id=${this.$instance.router.params.id}`
                })
            }}>+ 增加</Button>
        </View>
        {this.state.visible != "" &&
          <NewModal
            eaid={this.$instance.router.params.id}
            visible={this.state.visible}
            onClose={this.onClose.bind(this)}
          />}
        {/* 差旅费显示 */}
        {data.type == 1 &&
          list?.map(item =>
            item.type == 1
              ? <View className="unItem" key={item.id}>
                <View className="close"
                  onClick={() => {
                    this.setState({
                      isInquiryOpened: true,
                      inquiryTitle: "提醒",
                      inquiryContent: "您确定要删除吗?",
                      inquiryFn: () => {
                        this.detailsDelete(item.id);
                      },
                    });
                  }}
                >删除</View>
                {/* <View className="edit">编辑</View> */}
                <View className="formItem">
                  <View className="formName">交通工具:</View>
                  <View className="formValue">{getVehicleName(item.vehicle, item.vehicleOther)}</View>
                </View>
                <View className="formItem">
                  <View className="formName">时间:</View>
                  <View className="formValue">
                    <View className="ftxt">{item.startTimeStr}</View>
                    &nbsp;&nbsp;至&nbsp;&nbsp;
                    <View className="ftxt">{item.endTimeStr}</View>
                  </View>
                </View>
                <View className="formItem">
                  <View className="formName">地点:</View>
                  <View className="formValue">
                    <View className="ftxt">{item.startDistrict}</View>
                    <Text style={{ fontSize: "30px", padding: "0 5px" }}>⇀</Text>
                    <View className="ftxt">{item.endDistrict}</View>
                  </View>
                </View>
                <View className="formItem">
                  <View className="formName">金额:</View>
                  <View className="formValue">{item.amount}（元）</View>
                </View>
              </View>
              : <View className="inputFormItems" key={item.id}>
                {/* <AtInput
                  name={item.id}
                  title={getTypeName(item.type) + ":"}
                  type='number'
                  placeholder='请输入金额（元）'
                  value={item.amount}
                /> */}
                <View className="formItem">
                  <View className="formName">{getTypeName(item.type) + ":"}</View>
                  <View className="formValue">{item.amount}（元）</View>
                </View>
                <View className="close"
                  onClick={() => {
                    this.setState({
                      isInquiryOpened: true,
                      inquiryTitle: "提醒",
                      inquiryContent: "您确定要删除吗?",
                      inquiryFn: () => {
                        this.detailsDelete(item.id);
                      },
                    });
                  }}
                >删除</View>
              </View>)}
        {/* 通用 */}
        {(data.type == 0 || data.type == 2 || data.type == 4 || data.type == 5) &&
          list?.map(item =>
            <View className="unItem" key={item.id}>
              <View className="close"
                onClick={() => {
                  this.setState({
                    isInquiryOpened: true,
                    inquiryTitle: "提醒",
                    inquiryContent: "您确定要删除吗?",
                    inquiryFn: () => {
                      this.detailsDelete(item.id);
                    },
                  });
                }}
              >删除</View>
              {/* <View className="edit">编辑</View> */}
              {!!item.agreeTimeStr &&
                <View className="formItem">
                  <View className="formName">{data.type == 5 ? "支付时间:" : "需付款时间:"}</View>
                  <View className="formValue">{item.agreeTimeStr.slice(0, 10)}</View>
                </View>}
              <View className="formItem">
                <View className="formName">
                  {data.type == 4
                    ? "预借支金额:" : data.type == 5
                      ? "抵扣金额:" : "金额:"}
                </View>
                <View className="formValue">{item.amount}（元）</View>
              </View>
            </View>
          )}
        {/* 第三方付款 */}
        {data.type == 3 &&
          list?.map(item =>
            <View className="unItem" key={item.id}>
              <View className="close"
                onClick={() => {
                  this.setState({
                    isInquiryOpened: true,
                    inquiryTitle: "提醒",
                    inquiryContent: "您确定要删除吗?",
                    inquiryFn: () => {
                      this.detailsDelete(item.id);
                    },
                  });
                }}
              >删除</View>
              {/* <View className="edit">编辑</View> */}
              {!!item.agreeTimeStr &&
                <View className="formItem">
                  <View className="formName">需付款时间:</View>
                  <View className="formValue">{item.agreeTimeStr.slice(0, 10)}</View>
                </View>}
              <View className="formItem">
                <View className="formName">付款方式:</View>
                <View className="formValue">{["公对公转账"][item.payType]}</View>
              </View>
              <View className="formItem">
                <View className="formName">发票类型:</View>
                <View className="formValue">{["普票", "专票"][item.invoiceType]}</View>
              </View>
              <View className="formItem">
                <View className="formName">发票号:</View>
                <View className="formValue">{item.invoiceNo}</View>
              </View>
              <View className="formItem">
                <View className="formName">付款单位:</View>
                <View className="formValue">{item.payerName}</View>
              </View>
              <View className="formItem">
                <View className="formName">开户银行:</View>
                <View className="formValue">{item.openBank}</View>
              </View>
              <View className="formItem">
                <View className="formName">银行账户:</View>
                <View className="formValue">{item.bankAccounts}</View>
              </View>
              <View className="formItem">
                <View className="formName">开户行地址:</View>
                <View className="formValue">{item.openBankAddress}</View>
              </View>
              <View className="formItem">
                <View className="formName">金额:</View>
                <View className="formValue">{item.amount}</View>
              </View>
            </View>
          )
        }
        {
          data.type != 4 &&
          <View className="formItem">
            <View className="formName">{data.type == 5 ? "抵扣借支:" : "抵扣:"}</View>
            <View className="formValue"
              onClick={() => {
                Taro.navigateTo({
                  url: `/pages/debitnote/index?depId=${data.applyDep}&id=${data.id}`
                })
              }}
            >
              {!data.debitId
                ? <Button size='mini' type='primary' style={{ marginRight: 0 }}>{'抵扣借支'}</Button>
                : <View>已选择<Text style={{ color: "red" }}>{data.debitTotalAmount}</Text>元借支订单
                  <AtIcon value="chevron-right" size="20" color="#000000" />
                </View>}
            </View>
          </View>
        }
        {data.type != 4 && data.type != 5 && < View className="tips">注：如需抵扣借支，请选择对应的借支订单</View>}
        {
          data.type != 4 && data.type != 5 &&
          <View className="formItem" style={{ paddingTop: "10px" }}>
            <View className="formName">总金额:</View>
            <View className="formValue"><Text style={{ color: "red" }}>{total}</Text>（元）</View>
          </View>
        }
        {
          data.type != 4 && data.type != 5 &&
          <View className="formItem" style={{ paddingTop: "10px" }}>
            <View className="formName">实报金额:</View>
            <View className="formValue"><Text style={{ color: "red" }}>{this.state.reality}</Text>（元）</View>
          </View>
        }
        <View className="formItem" style={{ display: "block", paddingBottom: 0 }}>
          <View className="formName">附件:</View>
          <View
            className="formValue"
            style={{ paddingTop: "10px", textAlign: "left" }}
          >
            {this.state.isShow &&
              <ImagePicker
                files={this.state.imgs}
                showAddBtn={true}
                ref={(ref) => (this.imagePickerRef = ref)}
                url="/api/admin/release/upload"
                onChange={this.onChange}
              />}
          </View>
        </View>
        <View className="tips">上传附件要求</View>
        <View className="tips">①需要提供发票报销</View>
        <View className="tips">②需要填写报销明细表</View>
        <View className="tips">③招待费需要提供报备截图</View>
        {
          data.type != 3 &&
          <View className="formTitle" style={{ marginTop: "20px" }}>
            报销收款账户
          </View>
        }
        {
          data.type != 3 && data.type != 5 &&
          <View className="unobstructedList">
            {(!bankData.id)
              ? <View className="noAccout" onClick={() => { this.setState({ accountvisible: true }) }}>
                暂未有收款账户
                <View className="nbt">去添加 &gt;</View>
              </View>
              : <View className="unItem" >
                <View className="edit"
                  onClick={() => {
                    this.setState({
                      upaccount: true,
                      aid: bankData.id,
                    }, () => {
                      this.getMyList(true)
                    })
                  }}
                >修改</View>
                <View className="formItem">
                  <View className="formName">收款人：{bankData.name}</View>
                </View>
                <View className="formItem">
                  <View className="formName">收款银行：{bankData.bank}</View>
                </View>
                <View className="formItem">
                  <View className="formName">收款账户：{bankData.accounts}</View>
                </View>
              </View>}
          </View>
        }
        <View className="bottom">
          <AtButton
            disabled={this.state.loading}
            type="primary"
            circle
            onClick={() => {
              this.onSubmit()
            }}
          >
            {data.status == 0 ? "提交申请" : data.status == 3 && "重新发起"}
          </AtButton>
        </View>
        {/* 二级确认弹窗 */}
        <InquiryModal
          isOpened={this.state.isInquiryOpened}
          title={this.state.inquiryTitle}
          content={this.state.inquiryContent}
          onClose={() => {
            this.setState({
              isInquiryOpened: false,
              inquiryTitle: "",
              inquiryContent: "",
              isNo: true,
            });
          }}
          onDetermine={() => {
            this.state.inquiryFn();
            this.setState({
              isInquiryOpened: false,
              inquiryTitle: "",
              inquiryContent: "",
              isNo: true,
              inquiryFn: () => { },
            });
          }}
        />
        {/* 收款账户添加 */}
        {
          this.state.accountvisible != "" &&
          <AccountModal
            isSub={true}
            visible={this.state.accountvisible}
            onClose={this.onAccountClose.bind(this)}
            onOk={this.onAccountOk.bind(this)}
          />
        }
        {/* 收款账户列表 */}
        <AtModal isOpened={this.state.upaccount}>
          <AtModalHeader>请选择收款账户</AtModalHeader>
          <AtModalContent>
            <AtRadio
              options={getNewOptions(this.state.accountsList)}
              value={this.state.aid}
              onClick={e => { this.setState({ aid: e }) }}
            />
          </AtModalContent>
          <AtModalAction>
            <Button type='secondary' onClick={() => { this.setState({ upaccount: false, accountsList: [] }) }}>取消</Button>
            <Button type='primary' onClick={() => { this.selectOn() }}>确定</Button>
          </AtModalAction>
        </AtModal>
        {/* 申请类型修改 */}
        {
          this.state.typeVisible != "" &&
          <Select
            visible={this.state.typeVisible}
            onClose={this.onTypeClose.bind(this)}
            onOk={this.onTypeOk.bind(this)}
            type={data.type}
            other={data.typeOther}
          />
        }
      </View >
    );
  }
}

export default Drafts;
