import React, { Component } from "react";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import { View, Text, Image, } from "@tarojs/components";
import {
  AtButton,
  AtTextarea,
} 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 HistoricalClock from '../../components/historicalClock';
import { resourceAddress } from "../../utils/config";
import { getStageState } from "../../utils/tools";
import Un from "../../image/un.png";
import Ok from "../../image/ok.png";
import './index.less'

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

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

  componentDidMount() {
    this.getReleasetDails();
  }

  componentDidShow() {
    this.setState({
      isOpened: false
    }, () => {
      this.getReleasetDails();
    })
  }

  // 项目详情
  getReleasetDails() {
    recordDetails({
      id: this.$instance.router.params.id,
    }).then((v) => {
      if (v.code === 200) {
        if (v.data) {
          let list = [];
          for (let i of (v.data.annexUrl || '').split(',')) {
            if (i) {
              list.push({ 'url': resourceAddress + i })
            }
          }
          this.setState({
            data: v.data,
            attachmentUrl: list,
            isOpened: true,
          })
        } 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">
              {
                // 我的打卡
                this.$instance.router.params.type == 0 &&
                <View className="infor">
                  {data.processStatus == 1 && <Image className="statusicon" src={Un} />}
                  {data.processStatus == 2 && <Image className="statusicon" src={Ok} />}
                  <View className="title">
                    <View className="aname">
                      {data.projectName}
                    </View>
                  </View>
                  <View className="userName">
                    <View className="uNtext">
                      打卡时间：{data.createTime}
                    </View>
                  </View>
                  <View className="userName">
                    <View className="uNtext">
                      打卡人员：{data.name}
                    </View>
                  </View>
                  <View className="userName">
                    <View className="uNtext">
                      研发时间：{data.recordTime}
                    </View>
                  </View>
                  <View className="userName">
                    <View className="uNtext">
                      研发工时：{data.duration}
                    </View>
                  </View>
                  <View className="userName">
                    <View className="uNtext">
                      研发阶段：{getStageState(data.projectStatus)}
                    </View>
                  </View>
                  <View className="userName">
                    <View className="uNtext">
                      研发记录：{data.content}
                    </View>
                  </View>
                  <View className="userName">
                    <View className="uNtext">
                      附件：
                      {this.state.isOpened &&
                        <ImagePicker
                          files={attachmentUrl || []}
                          showAddBtn={false}
                        />}
                    </View>
                  </View>

                  <View className="userName" style={{ marginTop: 20 }}>
                    <View className="uNtext">
                      当前审核状态：
                      <Text style={{ color: ["#000000", "#dbc037", "#6eb173", "red"][data.processStatus] }}>
                        {["", "待审核", "审核通过", "审核驳回"][data.processStatus]}
                      </Text>
                      <Text className="logbt" onClick={() => { this.setState({ historicalIsOpened: true }) }}>查看审核日志</Text>
                    </View>
                  </View>

                  {
                    data.processStatus == 3 &&
                    <View className="option">
                      <AtButton
                        type="primary"
                        loading={this.state.loading}
                        circle
                        onClick={() => {
                          Taro.navigateTo({
                            url: `/pages/reclockin/index?id=${this.$instance.router.params.id}`,
                          });
                        }}
                      >
                        重新发起
                      </AtButton>
                    </View>}
                </View>
              }
              {
                // 审核
                this.$instance.router.params.type == 1 &&
                <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">
                    <View className="uNtext">
                      附件：
                      {attachmentUrl && attachmentUrl.length > 0 &&
                        <ImagePicker
                          files={attachmentUrl || []}
                          showAddBtn={false}
                        />}
                    </View>
                  </View>
                  <View className="userName">
                    <View className="uNtext">
                      审核状态：
                      <Text style={{ color: ["#000000", "#dbc037", "#6eb173", "red"][data.processStatus] }}>
                        {["", "待审核", "审核通过", "审核驳回"][data.processStatus]}
                      </Text>
                      <Text className="logbt" onClick={() => { this.setState({ historicalIsOpened: true }) }}>查看审核日志</Text>
                    </View>
                  </View>
                  {data.processStatus == 1 && <View style={{ marginTop: "30px" }}>
                    <AtTextarea
                      value={this.state.opinion}
                      onChange={(value) => {
                        this.setState({
                          opinion: value,
                        });
                      }}
                      maxLength={100}
                      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: () => { },
            });
          }}
        />
        {
          this.state.historicalIsOpened &&
          <HistoricalClock
            id={data.id}
            isOpened={this.state.historicalIsOpened}
            onClose={() => {
              this.setState({
                historicalIsOpened: false
              })
            }}
          />
        }

      </View>
    );
  }
}

export default Detail;
