import React, { Component } from "react";
import { View, Image, Button, Text } from "@tarojs/components";
import Taro, { getCurrentInstance } from "@tarojs/taro";
import Skeleton from "taro-skeleton";
import dayjs from 'dayjs';
import {
  AtIcon,
  AtModal,
  AtModalHeader,
  AtModalContent,
  AtModalAction,
  AtTextarea
} from 'taro-ui';
import { getPublicList, limitUser, addSupplement } from "../../utils/servers/servers";
import noData from '../../image/noData.png';
import "./index.less";
import "taro-ui/dist/style/components/flex.scss";
import "taro-ui/dist/style/components/action-sheet.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/list.scss";
import "taro-ui/dist/style/components/modal.scss";
import MessageNoticebar from "../../components/common/messageNoticebar";
import { getContactType } from "../../utils/tools";
import Superior from "../../components/common/superior";
import ApproveList from './approve-list'

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

  constructor(props) {
    super(props);
    this.state = {
      data: [],
      user: {},
      loading: false,
      isOpen: false,
      opinion: "",
      type: 1,
      id: "",
      text: "",
      myUser: -1,
      isSuperior: false,
    };
    this.getPublicList = this.getPublicList.bind(this);
    this.addSupplement = this.addSupplement.bind(this);
  }

  componentDidMount() {
    this.getPublicList();
    if (!this.isLogin()) {
      Taro.setStorageSync('currentPage', `/pages/situation/index?id=${this.$instance.router.params.id}`)
    }
  }

  componentDidShow() {

  }

  isLogin() {
    return !!Taro.getStorageSync('userInfor');
  }

  onShareAppMessage() {
    this.limitUser();
    return {
      title: "面谈记录",
      path: "/pages/situation/index?id=" + this.$instance.router.params.id,
    };
  }

  getPublicList() {
    this.setState({
      loading: true
    })
    getPublicList(
      this.$instance.router.params.notRequired,
      {
        id: this.$instance.router.params.id,
      }
    )
      .then((v) => {
        if (v.error.length === 0) {
          this.setState({
            data: v.data.list,
            myUser: v.data.myUser,
            user: v.data.user,
            loading: false,
          })
        } else {
          setTimeout(() => {
            Taro.navigateBack({
              delta: 1
            })
          }, 1800);
          Taro.showToast({
            title: v.error[0].message,
            icon: "none",
            duration: 1800,
          });
        }
      })
      .catch((err) => {
        this.setState({
          loading: false
        })
        Taro.showToast({ title: "系统错误,请稍后再试", icon: "none" });
      });
  }

  limitUser() {
    limitUser({
      uid: this.$instance.router.params.id,
      // hours: 1,
    }).then((v) => {
      if (v.error.length === 0) {

      } else {
        Taro.showToast({
          title: v.error[0].message,
          icon: "none",
        });
      }
    }).catch(() => {

    })
  }

  // 公出补充
  addSupplement() {
    const { type, id, opinion, text } = this.state
    let obj = {}
    if (type == 1) {
      obj = {
        id,
        supplement: (opinion ? opinion + "/" : "") + text
      }
    } else if (type == 2) {
      obj = {
        id,
        nextPlan: (opinion ? opinion + "/" : "") + text
      }
    }
    addSupplement(obj).then((v) => {
      if (v.error.length === 0) {
        Taro.showToast({
          title: "填写成功",
        });
        this.setState({
          isOpen: false,
          id: "",
          text: "",
        })
        this.getPublicList();
      } else {
        Taro.showToast({
          title: v.error[0].message,
          icon: "none",
        });
      }
    }).catch(() => {

    })
  }

  render() {
    const { data, loading, type, opinion, myUser, user } = this.state;
    return (
      <View className="situation">
        <MessageNoticebar />
        <View
          className="titleContent"
        >
          {data && data.length === 0 ? (
            <Skeleton
              title
              row={3}
              animateName="elastic"
              avatarShape="square"
              loading={loading}
            >
              <View className='noData'>
                <Image src={noData} className='noDataImg' />
                <View className='noDataTitle'>暂无公出情况</View>
              </View>
            </Skeleton>
          ) : (
            <View>
              <View className="UserName">
                <Text style={{ width: "80%" }}>
                  <Text>{user.nickname}&nbsp;&nbsp;</Text>
                  <Text style={{ fontSize: "12px", color: ["red", "green"][user.signBills] }}>{["未签单", "已签单"][user.signBills]}</Text>
                </Text>
                {myUser == 1 && <Button className="share" plain type='primary' open-type="share">分享</Button>}
              </View>
              <View className="button">
                <View className="but"
                  onClick={e => {
                    e.stopPropagation()
                    this.setState({
                      isSuperior: true
                    })
                  }}
                >上级指导</View>
                {
                  this.state.isSuperior &&
                  <Superior
                    id={this.$instance.router.params.id}
                    userNames={user.nickname}
                    isOpinion={this.state.isSuperior}
                    isFill={myUser == 0}
                    onClose={() => {
                      this.setState({
                        isSuperior: false
                      })
                    }}
                  />
                }
                <View className="but"
                  onClick={e => {
                    e.stopPropagation()
                    Taro.navigateTo({
                      url: "/pages/customerProfile/index?id=" + this.$instance.router.params.id + "&notRequired=" + this.$instance.router.params.notRequired,
                    });
                  }}
                >客户档案</View>
              </View>
              {
                data.map(item =>
                  <View className="content" key={item.prdId}>
                    <View className="citem">
                      <Text className="ctxt">跟进方式</Text>
                      <Text className="ctxt">跟进人</Text>
                      <Text className="ctxt" style={{ width: "40%" }}>跟进时间</Text>
                      <Text className="ctxt" style={{ width: "10%" }}>次数</Text>
                    </View>
                    <View className="citems">
                      <Text className="ctxt">{getContactType(item.contactType)}</Text>
                      <Text className="ctxt">{item.followName}</Text>
                      <Text className="ctxt" style={{ width: "40%" }}>{!!item.followTime && dayjs(item.followTime).format('YYYY-MM-DD HH:mm')}</Text>
                      <Text className="ctxt" style={{ width: "10%" }}>{item.followCount}</Text>
                    </View>
                    {/* <View className="val">跟进方式：<Text className="t">{getContactType(item.contactType)}</Text></View>
                    <View className="val">跟进人：<Text className="t">{item.followName}</Text></View>
                    <View className="val">跟进部门：<Text className="t">{item.followDep}</Text></View>
                    <View className="val">跟进说明：<Text className="t">{item.result}</Text></View>
                    <View className="val">跟进时间：<Text className="t">{item.followTime}</Text></View>
                    <View className="val">跟进次数：<Text className="t">{item.followCount}</Text></View> */}
                    <View className="val">跟进部门：<Text className="t">{item.followDep}</Text></View>
                    <View className="val">跟进说明：<Text className="t">{item.result}</Text></View>
                    <View className="val">公出时间：<Text className="t">{item.releaseStarts}</Text></View>
                    <View className="val">公出人：<Text className="t">{item.aname}</Text></View>
                    {/* <View className="val">公出目标：<Text className="t">{item.remarks}</Text></View>
                    <View className="val">公出计划：<Text className="t">{item.plan}</Text></View>
                    <View className="val">预计效果：<Text className="t">{item.expectedEffect}</Text></View>
                    <View className="tit">
                      <Text style={{ width: myUser == 1 ? "80%" : "100%" }}>
                        本次公出目标总结
                        <Text className="txt">(包括后续面谈时间、内容、沟通对象、沟通结果)</Text>
                      </Text>
                      {
                        myUser == 1 &&
                        <View className="bt"
                          onClick={e => {
                            e.stopPropagation()
                            this.setState({
                              type: 1,
                              id: item.prdId,
                              opinion: item.supplement,
                              isOpen: true,
                            })
                          }}
                        >填写</View>
                      }
                    </View>
                    <View className="val" style={{ fontWeight: 400 }}>{item.supplement || "无"}</View>
                    <View className="tit">
                      <Text>
                        下一步公出计划
                        <Text className="txt">(下一步公出计划)</Text>
                      </Text>
                      {
                        myUser == 1 &&
                        <View className="bt"
                          onClick={e => {
                            e.stopPropagation()
                            this.setState({
                              type: 2,
                              id: item.prdId,
                              opinion: item.nextPlan,
                              isOpen: true,
                            })
                          }}
                        >填写</View>
                      }
                    </View> */}
                    <View className="val" style={{ fontWeight: 400 }}>{item.nextPlan || "无"}</View>

                    <View className="val">
                      <ApproveList data={item.logList}></ApproveList>
                    </View>
                  </View>
                )
              }
              
            </View>
          )}
        </View>

        {
          this.state.isOpen &&
          <AtModal
            isOpened={this.state.isOpen}
          >
            <AtModalHeader>公出企业-{type == 1 ? "本次共出目标" : type == 2 ? "下一步公出计划" : ""}</AtModalHeader>
            <AtModalContent>
              <View style={{ margin: "0 0 10px", color: "#6190E8" }}>{user.nickname}</View>
              <AtTextarea
                value={this.state.text}
                onChange={e => {
                  this.setState({ text: e })
                }}
                maxLength={200}
                placeholder={type == 1
                  ? '请填写本次公出目标总结，包括后续面谈时间、内容、沟通对象、沟通结果等内容' : type == 2
                    ? "请填写下一步公出计划" : ""}
              />

              <View className='historicalClock' style={{ marginTop: "15px" }}>
                {
                  !!opinion
                    ? opinion.split("/").map(item =>
                      <View key={item.id} className='item'>
                        {/* <View className='head'>
                          <View className='spot' />
                          <View className='clockTime' style={{ color: "#6190E8" }}>

                          </View>
                        </View> */}
                        <View className='clockContent' style={{ borderTop: "1px solid #999999" }}>
                          {/* <View className='verticalLine' /> */}
                          <View className='rightContent'>
                            <View className='contentItem' style={{ paddingBottom: "0px" }}>
                              <AtIcon className='atIcon' value='message' size='15' color='#999999' />
                              {item || "暂无"}
                            </View>
                          </View>
                        </View>
                      </View>
                    )
                    : <View style={{ textAlign: "center" }}>暂无信息</View>
                }
              </View>
            </AtModalContent>
            <AtModalAction>
              <Button type='secondary' onClick={() => { this.setState({ isOpen: false }) }}>取消</Button>
              <Button type='primary' onClick={this.addSupplement.bind(this)}>确定</Button>
            </AtModalAction>
          </AtModal>
        }

      </View>
    );
  }
}

export default CustomerProfile;
