import React, { Component } from "react";
import Taro from "@tarojs/taro";
import { Button, Text, View } from "@tarojs/components";
import dayjs from "dayjs";
import "./index.less";

import ImagePicker from "../../components/common/imagePicker";

import { AtButton, AtTextarea, AtIcon, AtCalendar } from "taro-ui";
import {
  addPublicRelease,
  getWorkingHoursList,
} from "../../utils/servers/servers";

import {
  getHours,
  getNumHourse,
  getUserWordTimes,
} from "../../utils/tools";

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/icon.scss";
import "taro-ui/dist/style/components/textarea.scss";
import "taro-ui/dist/style/components/calendar.scss";

import "./publicContent.less";
import InquiryModal from "../../components/common/inquiryModal"; //提示弹窗
import UserQuery from "../../components/common/userquery"; //选择协单人弹窗

class PublicContent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rangeStartVal: "",
      rangeEndVal: "",
      rangeEndMinuteVal: "",
      rangeStartMinuteVal: "",
      reason: "",
      plan: "",
      expectedEffect: "",
      imgs: [],
      validDates: [],
      totalDuration: 0,
      loading: false,
      workTypeList: [],
      workType: 0,
      isPickerRender: false,
      coorderList: [],
      cList: [],
      popup: false,
    };
    this.onSubmit = this.onSubmit.bind(this);
    this.selectArrder = this.selectArrder.bind(this);
    this.onChange = this.onChange.bind(this);
    this.getWorkingHoursList = this.getWorkingHoursList.bind(this);
    this.onPickerHide = this.onPickerHide.bind(this);
    this.onSetPickerTime = this.onSetPickerTime.bind(this);
    this.getNumHourse = this.getNumHourse.bind(this);
  }

  componentDidMount() {
    Taro.eventCenter.on("result", () => {
      this.imagePickerRef && this.imagePickerRef.clear();
      this.setState({
        rangeStartVal: "",
        rangeEndVal: "",
        rangeEndMinuteVal: "",
        rangeStartMinuteVal: "",
        reason: "",
        plan: "",
        expectedEffect: "",
        imgs: [],
        validDates: [],
        totalDuration: 0,
        loading: false,
      });
    });
    this.getWorkingHoursList();
  }

  getNumHourse(startTime, endTime) {
    this.setState({
      totalDuration: getNumHourse(
        startTime,
        endTime,
        this.state.validDates.length
      ),
    });
  }

  onSubmit() {
    if (!this.state.rangeStartMinuteVal) {
      Taro.showToast({ title: "请选择公出时间", icon: "none" });
      return;
    }
    if (!this.state.rangeEndMinuteVal) {
      Taro.showToast({ title: "请选择公出时间", icon: "none" });
      return;
    }
    if (
      !(
        this.props.selectArrderLocation.longitude &&
        this.props.selectArrderLocation.latitude
      )
    ) {
      Taro.showToast({ title: "请选择公出地点", icon: "none" });
      return;
    }
    if (!this.state.reason) {
      Taro.showToast({ title: "请输入公出目标", icon: "none" });
      return;
    }
    if (!this.state.plan && this.props.enterpriseInfor.type != 2) {
      Taro.showToast({ title: "请输入公出计划", icon: "none" });
      return;
    }
    if (!this.state.expectedEffect && this.props.enterpriseInfor.type != 2) {
      Taro.showToast({ title: "请输入预计效果", icon: "none" });
      return;
    }
    if (this.state.totalDuration === 0) {
      Taro.showToast({
        title: "请选择公出时间,目前设置公出时间不足0.5小时",
        icon: "none",
      });
      return;
    }
    this.setState({
      loading: true,
    });
    let datas = {
      uid: this.props.enterpriseInfor.id,
      releaseStarts: this.state.rangeStartMinuteVal,
      releaseEnds: this.state.rangeEndMinuteVal,
      remarks: this.state.reason,
      // plan: this.state.plan,
      // expectedEffect: this.state.expectedEffect,
      userName: this.props.selectArrderLocation.name,
      longitude: this.props.selectArrderLocation.longitude,
      latitude: this.props.selectArrderLocation.latitude,
      annexUrl: this.state.imgs.length === 0 ? "" : this.state.imgs.join(","),
      duration: this.state.totalDuration,
      type: this.props.enterpriseInfor.type,
      validDate: JSON.stringify(this.state.validDates),
      assist: this.state.coorderList.length === 0 ? 0 : 1,
      assistAid: this.state.coorderList.length === 0 ? "" : this.state.coorderList.join(","),
    };
    if (this.props.enterpriseInfor.type == 0) {
      datas = {
        ...datas,
        ...{
          plan: this.state.plan,
          expectedEffect: this.state.expectedEffect,
        }
      };
    } else if (this.props.enterpriseInfor.type == 2) {
      datas = datas;
    } else {
      datas = {
        ...datas,
        ...{
          plan: this.state.plan,
          expectedEffect: this.state.expectedEffect,
          orderNo: this.props.enterpriseInfor.orderNo,
        }
      };
    }
    addPublicRelease(datas)
      .then((v) => {
        this.setState({
          loading: false,
        });
        if (v.error.length === 0) {
          Taro.eventCenter.trigger("publicContent", v.data);
        } else {
          Taro.showToast({
            title: v.error[0].message,
            icon: "none",
          });
        }
      })
      .catch(() => {
        this.setState({
          loading: false,
        });
      });
  }

  selectArrder() {
    const key = "AWBBZ-GRAC2-JFYUO-CLA7I-JAHXK-YFFGT"; //使用在腾讯位置服务申请的key
    const referer = "科德打卡定位"; //调用插件的app的名称
    const category = "公司企业,房产小区";
    Taro.navigateTo({
      url:
        "plugin://chooseLocation/index?key=" +
        key +
        "&referer=" +
        referer +
        "&category=" +
        category,
    });
  }

  onChange(value, type) {
    let arr = this.state.imgs.concat([]);
    if (type === "add") {
      arr.push(value);
    } else if (type === "remove") {
      arr.splice(value, 1);
    }
    this.setState({
      imgs: arr,
    });
  }

  getWorkingHoursList() {
    getWorkingHoursList({})
      .then((v) => {
        if (v.error.length === 0) {
          let obj = Taro.getStorageSync("userInfor");
          let index = v.data.findIndex(
            (value) => value.type === obj.workTimeInfor.type
          );
          this.setState({
            workType: index !== -1 ? index : 0,
          });
          this.setState({
            workTypeList: v.data,
          });
        } else {
          Taro.showToast({
            title: v.error[0].message,
            icon: "none",
          });
        }
      })
      .catch((err) => {
        //console.log(err);
      });
  }

  onPickerHide() {
    this.setState({
      isPickerRender: false,
    });
  }

  onSetPickerTime(val) {
    let data = val.detail;
    this.setState({
      rangeStartMinuteVal: data.selectStartTime,
      rangeEndMinuteVal: data.selectEndTime,
    });
    let arr = [];
    if (data.startTime && data.endTime) {
      let a = dayjs(data.startTime);
      let b = dayjs(data.endTime);
      let num;
      if (a.hour() <= b.hour()) {
        num = b.diff(a, "day") + 1;
      } else {
        num = b.diff(a, "day") + 2;
      }
      let strAdd = data.startTime;
      for (let i = 0; i < num; i++) {
        let time = dayjs(strAdd).add(i, "days").format("YYYY-MM-DD");
        arr.push({ value: time });
      }
    }
    this.setState(
      {
        rangeEndVal: dayjs(data.endTime).format("YYYY-MM-DD"),
        rangeStartVal: dayjs(data.startTime).format("YYYY-MM-DD"),
        validDates: arr,
      },
      () => {
        let a1 = dayjs(dayjs(data.endTime).format("YYYY-MM-DD HH:mm:ss"));
        let b1 = dayjs(dayjs(data.startTime).format("YYYY-MM-DD  HH:mm:ss"));
        this.getNumHourse(b1, a1);
      }
    );
  }
  // 新增技术协单
  setList(list, arr) {
    this.setState({
      cList: list,
      coorderList: arr
    })
  }
  // 弹窗开关
  popupClick() {
    this.setState({
      popup: !this.state.popup
    })
  }

  render() {
    const { cList, coorderList, popup } = this.state
    return (
      <View className="publicContent">
        <View className="formItem">
          <View className="formName">公出企业:</View>
          <View className="formValue">{this.props.enterpriseInfor.name}</View>
        </View>
        <View className="formItem">
          <View className="formName">公出类型:</View>
          <View className="formValue">
            {this.props.enterpriseInfor.type == 0
              ? "业务公出" : this.props.enterpriseInfor.type == 1
                ? "技术公出" : this.props.enterpriseInfor.type == 2
                  ? "行政公出" : this.props.enterpriseInfor.type == 3
                    ? "技术协单" : ""}
          </View>
        </View>
        {this.props.enterpriseInfor.contractNo ? (
          <View className="formItem">
            <View className="formName">合同编号:</View>
            <View className="formValue">
              {this.props.enterpriseInfor.contractNo}
            </View>
          </View>
        ) : (
          ""
        )}
        <View className="formItem">
          <View className="formName">作息时间类型:</View>
          <View className="formValue">
            <picker
              onChange={(e) => {
                this.setState({
                  workType: e.detail.value,
                });
                if (this.state.workTypeList[e.detail.value]) {
                  let obj = Taro.getStorageSync("userInfor");
                  obj.workTimeInfor = this.state.workTypeList[e.detail.value];
                  Taro.setStorageSync("userInfor", obj);
                  this.setState({
                    rangeStartVal: "",
                    rangeStartMinuteVal: "",
                    rangeEndMinuteVal: "",
                    rangeEndVal: "",
                    validDates: [],
                    totalDuration: 0,
                  });
                }
              }}
              value={this.state.workType}
              rangeKey="name"
              range={this.state.workTypeList}
            >
              <view style={{ display: "flex", alignItems: "center" }}>
                {this.state.workTypeList[this.state.workType]
                  ? this.state.workTypeList[this.state.workType].name
                  : ""}
                <AtIcon value="chevron-right" size="20" color="#bbbbbb" />
              </view>
            </picker>
          </View>
        </View>
        <View className="formItem">
          <View className="formName">公出时间:</View>
          <View className="formValue">
            <View
              className="time"
              onClick={() => {
                this.setState({
                  isPickerRender: true,
                });
              }}
            >
              {this.state.rangeStartMinuteVal &&
                this.state.rangeEndMinuteVal ? (
                <View className="timeContent">
                  <View>开始时间:{this.state.rangeStartMinuteVal}</View>
                  <View>结束时间:{this.state.rangeEndMinuteVal}</View>
                </View>
              ) : (
                "请选择公出时间"
              )}
            </View>
            <timePicker
              config={{
                endDate: true,
                column: "minute",
                dateLimit: false,
                // initStartTime: "2019-01-01 12:32:44", //默认开始时间
                // initEndTime: "2019-12-01 12:32:44",   //默认结束时间
                limitStartTime: dayjs()
                  .subtract(3, "year")
                  .format("YYYY-MM-DD HH:mm:ss"),
                limitEndTime: dayjs()
                  .add(3, "year")
                  .format("YYYY-MM-DD HH:mm:ss"),
              }}
              isPartition
              pickerShow={this.state.isPickerRender}
              onconditionaljudgment={(v) => {
                let a = dayjs(
                  dayjs(v.detail.endTime)
                    .second(0)
                    .format("YYYY-MM-DD HH:mm:ss")
                );
                let b = dayjs(dayjs().second(0).format("YYYY-MM-DD HH:mm:ss"));
                if (a.isBefore(b)) {
                  Taro.showToast({
                    title: "结束时间不能小于当前时间",
                    icon: "none",
                  });
                  v.detail.setLv(false);
                }
              }}
              onhidepicker={() => {
                this.onPickerHide();
              }}
              onsetpickertime={(v) => {
                this.onSetPickerTime(v);
              }}
            />
          </View>
        </View>
        <View className="formItem">
          <View className="formName">总时长:</View>
          <View className="formValue">{this.state.totalDuration}小时</View>
        </View>
        {this.state.validDates.length !== 0 ? (
          <View
            className="formItem"
            style={{ display: "block", paddingTop: "15px" }}
          >
            <View className="formName">
              <View>去除放假时间:</View>
            </View>
            <View className="tips">
              绿色方块为公出时间,长按即可去除放假时间
            </View>
            <AtCalendar
              currentDate={this.state.rangeStartVal}
              minDate={this.state.rangeStartVal}
              maxDate={this.state.rangeEndVal}
              isSwiper={false}
              validDates={this.state.validDates}
              onDayLongClick={(item) => {
                if (
                  !(
                    dayjs(item.value).isSame(this.state.rangeStartVal) ||
                    dayjs(item.value).isSame(this.state.rangeEndVal)
                  )
                ) {
                  if (
                    !(
                      dayjs(item.value).isAfter(this.state.rangeStartVal) &&
                      dayjs(item.value).isBefore(this.state.rangeEndVal)
                    )
                  ) {
                    return;
                  }
                } else {
                  Taro.showToast({
                    title: "开始结束时间不能取消",
                    icon: "none",
                  });
                  return;
                }
                let index = this.state.validDates.findIndex((v) => {
                  let lv = dayjs(v.value).isSame(item.value);
                  return lv;
                });
                const { start, end } = getUserWordTimes();
                let totalDuration = getHours(
                  dayjs().format("YYYY-MM-DD") + start,
                  dayjs(dayjs().format("YYYY-MM-DD") + end)
                ); //一天工作时长
                if (index < 0) {
                  let arr = item.value.split("-");
                  this.state.validDates.push({ value: arr.join("-") });
                  this.setState({
                    validDates: this.state.validDates,
                    totalDuration: this.state.totalDuration + totalDuration,
                  });
                } else {
                  this.state.validDates.splice(index, 1);
                  this.setState({
                    validDates: this.state.validDates,
                    totalDuration: this.state.totalDuration - totalDuration,
                  });
                }
              }}
            />
          </View>
        ) : null}
        <View className="formItem" style={{ paddingBottom: 0 }}>
          <View className="formName">公出地点:</View>
          <View className="formValue" onClick={this.selectArrder}>
            <Text className="formValueText">
              {this.props.selectArrderLocation.name}
            </Text>
            <AtIcon value="chevron-right" size="30" color="#bbbbbb" />
          </View>
        </View>
        <View className="tips">
          以地图为中心100米范围为可打卡区域,移动红标只需要拖动地图即可
        </View>
        <View className="formItems" style={{ paddingBottom: 0, marginTop: 10 }}>
          <View className="formNames">技术协单: </View>
          <View className="formValues">
            {
              cList.length == 0
                ? <Text>无</Text>
                : cList.map((item, index) =>
                  <View className="fitems" key={index}>
                    {item.name}
                    <View className="fclose"
                      onClick={() => {
                        coorderList.includes(item.id) &&
                          (
                            cList.splice(coorderList.indexOf(item.id), 1),
                            coorderList.splice(coorderList.indexOf(item.id), 1)
                          )
                        this.setState({
                          cList,
                          coorderList,
                        })
                      }}
                    ><AtIcon value="close-circle" size="15" color="#bbbbbb" /></View>
                  </View>
                )
            }
            {cList.length < 5 && <Button className="addbuttom" type='primary' onClick={this.popupClick.bind(this)}>新增技术协单</Button>}
          </View>
        </View>
        <View
          className="formItem"
          style={{ display: "block", paddingTop: "15px" }}
        >
          {/* 公出目标 */}
          <View className="formName">
            <Text style={{ color: "red" }}>*公出目标:</Text>
            <View
              className="formValue"
              style={{ paddingTop: "10px", textAlign: "left" }}
            >
              <AtTextarea
                height={46}
                value={this.state.reason}
                onChange={(v) => {
                  this.setState({
                    reason: v,
                  });
                }}
                maxLength={200}
                placeholder={
                  this.props.enterpriseInfor.type == 2
                    ? "详细说明本次公出的内容,预计完成的内容"
                    : "本次公出目标,谈的思路与步骤?"
                }
              />
            </View>
          </View>
          {/* 公出计划 */}
          {this.props.enterpriseInfor.type != 2 && (
            <View className="formName">
              <Text style={{ color: "red" }}>*公出计划:</Text>
              <View
                className="formValue"
                style={{ paddingTop: "10px", textAlign: "left" }}
              >
                <AtTextarea
                  height={46}
                  value={this.state.plan}
                  onChange={(v) => {
                    this.setState({
                      plan: v,
                    });
                  }}
                  maxLength={200}
                  placeholder="本次公出准备工作"
                />
              </View>
            </View>
          )}
          {/* 预计效果 */}
          {this.props.enterpriseInfor.type != 2 && (
            <View className="formName">
              <Text style={{ color: "red" }}>*预计效果:</Text>
              <View
                className="formValue"
                style={{ paddingTop: "10px", textAlign: "left" }}
              >
                <AtTextarea
                  height={46}
                  value={this.state.expectedEffect}
                  onChange={(v) => {
                    this.setState({
                      expectedEffect: v,
                    });
                  }}
                  maxLength={200}
                  placeholder="预计本次公出效果"
                />
              </View>
            </View>
          )}
        </View>
        {/*  */}
        <View className="formItem" style={{ display: "block" }}>
          <View className="formName">附件:</View>
          <View
            className="formValue"
            style={{ paddingTop: "10px", textAlign: "left" }}
          >
            <ImagePicker
              showAddBtn
              ref={(ref) => (this.imagePickerRef = ref)}
              url="/api/admin/release/upload"
              onChange={this.onChange}
            />
          </View>
        </View>
        <View className="operation">
          <AtButton
            disabled={this.state.loading}
            type="secondary"
            circle
            onClick={() => {
              Taro.eventCenter.trigger("enterpriseBack");
            }}
          >
            上一步
          </AtButton>
          <AtButton
            type="primary"
            loading={this.state.loading}
            circle
            onClick={() => {
              if (this.state.loading) {
                return;
              }
              this.setState({
                isInquiryOpened: true,
                inquiryTitle: "提醒",
                inquiryContent: "您确定要提交此申请吗?",
                inquiryFn: () => {
                  this.onSubmit();
                },
              });
            }}
          >
            提交申请
          </AtButton>
        </View>
        <InquiryModal
          isOpened={this.state.isInquiryOpened}
          title={this.state.inquiryTitle}
          content={this.state.inquiryContent}
          onClose={() => {
            this.setState({
              isInquiryOpened: false,
              inquiryTitle: "",
              inquiryContent: "",
            });
          }}
          onDetermine={() => {
            this.state.inquiryFn();
            this.setState({
              isInquiryOpened: false,
              inquiryTitle: "",
              inquiryContent: "",
              inquiryFn: () => { },
            });
          }}
        />
        {popup &&
          <UserQuery
            isOpened={popup}
            onDesc={this.popupClick.bind(this)}
            cList={cList}
            coorderList={coorderList}
            setList={this.setList.bind(this)}
          />
        }
      </View>
    );
  }
}

export default PublicContent;