import React, { Component } from "react";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import { Text, View, Image } from "@tarojs/components";
import ImagePicker from "../../components/common/imagePicker";
import InquiryModal from "../../components/common/inquiryModal";
import AuditModal from "../../components/common/auditModal";
import {
  getPridDetail,
  getAccountList,
  selectList,
  AccountExamine,
} from "../../utils/servers/servers";
import {
  getAccountName,
  getTypeName,
  getVehicleName,
  commonAdd,
  copyText,
} from "../../utils/tools";
import { AtTextarea, AtButton, AtIcon } from "taro-ui";
import { resourceAddress } from "../../utils/config";
import Right from '../../image/right.png'

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";

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

  constructor(props) {
    super(props);
    this.state = {
      data: {},
      list: [],
      total: 0,
      bankData: {},
      reason: "",
      visible: false,
    };
  }

  componentDidMount() {
    this.$instance.router.params && this.$instance.router.params.id &&
      (
        this.getDetail(),
        this.getAccountList()
      )
  }

  // 报销单详情
  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,
          attachmentUrl: list,
        })
      } else {
        Taro.showToast({ title: v.error[0].message, icon: 'none' })
      }
    }).catch(() => {
      Taro.showToast({
        title: '系统错误,请稍后再试',
        icon: 'none'
      })
    })
  }

  // 报销详情金额列表
  getAccountList() {
    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)
        }
        this.setState({
          list: v.data,
          total: sum,
        })

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


  render() {
    const { data, list, total, bankData, attachmentUrl } = this.state
    const icon = {
      width: '50px',
      height: '10px',
      margin: '0 10px',
    }
    return (
      <View className="subform">
        <View className="title">
          {getAccountName(data.type, data.typeOther)}
        </View>
        {/* {(data.status == 1 || data.status == 2) &&
          <View className="formItem">
            <View className="formName" >编号：</View>
            <View className="formValue">{data.checkNo}</View>
            <View className='tbt'
              onClick={e => { e.stopPropagation(); copyText(data.checkNo) }}
            >复制编号打印</View>
          </View>} */}
        {data.type == 1 &&
          <View className="formItem">
            <View className="formName" >公出企业：</View>
            <View className="formValue">{data.userNames}</View>
          </View>}
        {data.type == 1 &&
          <View className="formItem">
            <View className="formName" >公出地点：</View>
            <View className="formValue">{data.districtName}</View>
          </View>}
        {data.type == 1 &&
          <View className="formItem">
            <View className="formName">公出时间：</View>
            <View className="formValue">
              <View
                className="time"
              >
                <View className="timeContent">
                  <View>{this.state.rangeStartMinuteVal.slice(0, 16)}&nbsp;至&nbsp;{this.state.rangeEndMinuteVal.slice(0, 16)}</View>
                </View>
              </View>

            </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">{getAccountName(data.type, data.typeOther)}</View>
        </View>
        {data.type != 4 && data.type != 5 &&
          <View className="formItem">
            <View className="formName">报销至订单：</View>
            <View className="formValue">
              <View>
                <View>{data.buyerName}</View>
                <View>{data.contractNo}</View>
              </View>
            </View>
          </View>}
        <View className="formTitle">
          {data.type != 4 && data.type != 5 && "报销"}费用详细
        </View>
        {/* 差旅费显示 */}
        {data.type == 1 &&
          list?.map(item =>
            item.type == 1
              ? <View className="unItem" key={item.id}>
                <View className="formItem">
                  <View className="formName">交通工具：</View>
                  <View className="formValue">{getVehicleName(item.vehicle, item.vehicleOther)}&nbsp;</View>
                </View>
                <View className="formItem">
                  <View className="formName">时间：</View>
                  <View className="formValue">
                    <View className="ftxt">{item.startTimeStr.slice(0, 16)}&nbsp;至&nbsp;{item.endTimeStr.slice(0, 16)}</View>
                  </View>
                </View>
                <View className="formItem">
                  <View className="formName">地点：</View>
                  <View className="formValue">
                    <View className="ftxt">{item.startDistrict}</View>
                    <Image src={Right} style={icon} mode='aspectFit' />
                    <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="formItem" key={item.id}>
                <View className="formName" >{getTypeName(item.type) + "："}</View>
                <View className="formValue">{item.amount}（元）</View>
              </View>
          )
        }
        {/* 通用 */}
        {(data.type == 0 || data.type == 2 || data.type == 4 || data.type == 5) &&
          list?.map(item =>
            <View className="unItem" key={item.id}>
              {!!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}>
              {!!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 && data.debitTotalAmount &&
          <View className="formItem">
            <View className="formName">预借支：</View>
            <View className="formValue"><Text style={{ color: "red" }}>{data.debitTotalAmount}</Text>（元）</View>
          </View>
        }
        {
          data.type != 4 && data.type != 5 &&
          <View className="formItem">
            <View className="formName">总金额：</View>
            <View className="formValue"><Text style={{ color: "red" }}>{total}</Text>（元）</View>
          </View>
        }
        {
          data.type != 4 && data.type != 5 &&
          <View className="formItem">
            <View className="formName">实报金额：</View>
            <View className="formValue"><Text style={{ color: "red" }}>
              {(total > data.debitTotalAmount) ? commonAdd(total, -data.debitTotalAmount) : 0}
            </Text>（元）</View>
          </View>
        }
        <View className="formItem" style={{ display: "block", paddingBottom: 0 }}>
          <View className="formName">附件：</View>
          <View
            className="formValue"
            style={{ paddingTop: "10px", textAlign: "left" }}
          >
            {attachmentUrl && attachmentUrl.length > 0 &&
              <ImagePicker
                files={attachmentUrl || []}
                showAddBtn={false}
              />}
          </View>
        </View>
      </View>
    );
  }
}

export default Drafts;
