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 {
  projectDetails,
  examineRecord,
} from "../../utils/servers/servers";
import { resourceAddress } from "../../utils/config";
import dayjs from "dayjs";
import './index.less'

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

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

  componentDidMount() {
    this.getProjectDetail();
  }

  componentDidShow() {
    this.getProjectDetail();
  }

  // 项目详情
  getProjectDetail() {
    projectDetails({
      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,
          })
        } else {
          setTimeout(() => {
            Taro.switchTab({
              url: "/pages/project/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.name}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    项目编号：{data.projectNumber}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    项目名称：{data.name}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    项目起止时间：{dayjs(data.startTime).format("YYYY-MM-DD") + " 至 " + dayjs(data.endTime).format("YYYY-MM-DD")}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    是否跨年：{["否", "是"][data.crossYear]}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    创建年份：{data.createYear}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    项目年份：{data.projectYear}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    项目负责人：{data.adminName}
                  </View>
                </View>
                <View className="userName">
                  <View className="uNtext">
                    研发人员：{data.staffName}
                  </View>
                </View>
                <View className="userName" style={{ marginBottom: 20 }}>
                  <View className="uNtext">
                    备注：{data.remark}
                  </View>
                </View>
                <AtButton type='primary'>累计研发工时：{data.duration}</AtButton>
              </View>
            </View>
          </View>}
      </View>
    );
  }
}

export default ProjectDetail;
