import React, { Component } from "react";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import { View, Image, Button } from "@tarojs/components";
import {
  AtButton,
  AtCalendar,
  AtIcon,
  AtTextarea,
  AtModal,
  AtModalContent,
  AtModalAction,
} from "taro-ui";
import Skeleton from "taro-skeleton";
import {
  recordDetails,
  examineRecord,
} from "../../utils/servers/servers";
import InquiryModal from "../../components/common/inquiryModal";
import ImagePicker from "../../components/common/imagePicker";
import { resourceAddress } from "../../utils/config";
import "../mybusiness/index";

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

  constructor(props) {
    super(props);
    this.state = {
      opinion: "",
      attachmentUrl: [],
      data: {},
    }
    this.getReleasetDails = this.getReleasetDails.bind(this);
  }

  componentDidMount() {
    this.getReleasetDails();
  }

  // 项目详情
  getReleasetDails() {
    recordDetails({
      id: this.$instance.router.params.id,
    }).then((v) => {
      if (v.code === 200) {
        if (v.data) {
          let list = [];
          console.log("---", v.data.annexUrl)
          for (let i of (v.data.annexUrl || '').split(',')) {
            if (i) {
              list.push({ 'url': resourceAddress + i })
            }
          }
          this.setState({
            data: v.data,
            attachmentUrl: list,
          })
        } else {
          setTimeout(() => {
            Taro.switchTab({
              url: "/pages/mybusiness/index",
            });
          }, 1800);
          Taro.showToast({
            title: "您没有权限查看此公出详情",
            icon: "none",
            duration: 1800,
          });
        }
      } else {
        Taro.showToast({ title: v.msg, icon: "none" });
      }
    })
      .catch((err) => {
        Taro.showToast({ title: "系统错误,请稍后再试", icon: "none" });
        // console.log(err);
      });
  }

  // 同意/驳回
  agree(sta) {
    if (!this.state.opinion) {
      Taro.showToast({ title: "请填写审批意见", icon: "none" });
      return;
    }
    examineRecord({
      id: this.$instance.router.params.id,
      processStatus: sta,
      content: this.state.opinion,
    })
      .then((v) => {
        if (v.code === 200) {
          Taro.showToast({
            title: "操作成功",
            icon: "none",
          });
          this.getReleasetDails();
        } else {
          Taro.showToast({ title: v.msg, icon: "none" });
        }
      })
      .catch((err) => {
        Taro.showToast({ title: "系统错误,请稍后再试", icon: "none" });
        // console.log(err);
      });
  }


  render() {
    const { data, attachmentUrl } = this.state
    return (
      <View className="indexPage">
        {Object.keys(data).length === 0 ?
          <Skeleton
            title
            row={3}
            animateName="elastic"
            avatarShape="square"
            loading
          /> :
          <View className="list">
            <View
              className="item"
            >
              <View className="infor">
                <View className="title">
                  <View className="aname">
                    {data.projectName}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    负责人：{data.adminName}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    研发人员：{data.name}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    累积工时：{data.duration}
                  </View>
                </View>
                <View className="userName">
                  {console.log("====", attachmentUrl)}
                  {attachmentUrl && attachmentUrl.length > 0 &&
                    <ImagePicker
                      files={attachmentUrl || []}
                      showAddBtn={false}
                    />}
                </View>
                {data.processStatus == 1 && <View style={{ marginTop: "30px" }}>
                  <AtTextarea
                    value={this.state.opinion}
                    onChange={(value) => {
                      this.setState({
                        opinion: value,
                      });
                    }}
                    maxLength={50}
                    placeholder="请填写审批意见"
                  />
                  <View className="operation">
                    <AtButton
                      type="secondary"
                      circle
                      loading={this.state.loading}
                      onClick={() => {
                        this.setState({
                          isInquiryOpened: true,
                          inquiryTitle: "提醒",
                          inquiryContent: "您确定要驳回此申请吗?",
                          inquiryFn: () => {
                            this.agree(3);
                          },
                        });
                      }}
                    >
                      驳回
                    </AtButton>
                    <AtButton
                      type="primary"
                      loading={this.state.loading}
                      circle
                      onClick={() => {
                        if (this.state.loading) {
                          return;
                        }
                        this.setState({
                          isInquiryOpened: true,
                          inquiryTitle: "提醒",
                          inquiryContent: "您确定要同意此申请吗?",
                          inquiryFn: () => {
                            this.agree(2);
                          },
                        });
                      }}
                    >
                      同意
                    </AtButton>
                  </View>
                </View>}
              </View>
            </View>
          </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: () => { },
            });
          }}
        />
      </View>
    );
  }
}

export default Detail;
