<template>
  <view class="main">
    <view class="header" :style="{ height: menu.bottom + 'px' }">
      <image
        @click="handleBack"
        class="allowLeft"
        :style="{ top: menu.top + (menu.height - 24) / 2 + 'px' }"
        src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"
      ></image>
    </view>
    <p class="title">{{ item.BillState === 1 ? "已提单" : "提单申请" }}</p>

    <view class="content">
      <view class="detail">
        <view
          class="type"
          :style="{ color: item.PaymentTerms === 1 ? 'red' : '' }"
          >{{
            detailInfo.PaymentTerms === 1
              ? "收款"
              : detailInfo.PaymentTerms === 0
              ? "退款"
              : ""
          }}</view
        >

        <view class="top">
          <view class="left">
            <image
              class="logo"
              :src="
                detailInfo.BUSINESSPROJECT_ICO
                  ? detailInfo.BUSINESSPROJECT_ICO
                  : 'https://eshangtech.com/ShopICO/yxcl/projectWarning/defaultImg.svg'
              "
            ></image>
          </view>
          <view class="right">
            <p class="detailTitle">
              {{
                detailInfo.BusinessProcess_Name
                  ? detailInfo.BusinessProcess_Name.split("】")[1]
                  : "-"
              }}
            </p>
            <view class="fixed">
              <image
                class="serviceFixed"
                src="https://eshangtech.com/ShopICO/yxcl/projectWarning/position.svg"
              ></image>
              <span class="service">{{ detailInfo.Serverpart_Name }}</span>
            </view>
            <view class="other">
              <view class="item">
                <image
                  class="icon"
                  src="https://eshangtech.com/ShopICO/yxcl/projectWarning/user.svg"
                ></image>
                <span class="value">{{ detailInfo.Staff_Name || "-" }}</span>
              </view>
              <!-- <view class="item">
                <image
                  class="icon"
                  src="https://eshangtech.com/ShopICO/yxcl/projectWarning/phone.svg"
                ></image>
                <span class="value">{{
                  detailInfo.BusinessProcess_StartDate || "-"
                }}</span>
              </view> -->
            </view>
          </view>
        </view>
        <view class="bottom">
          <view class="message">
            <image
              class="icon"
              src="https://eshangtech.com/ShopICO/yxcl/projectWarning/money.svg"
            ></image>
            <span class="text">退补款</span>
            <span class="money">{{
              detailInfo.Liquidation_Amount || "-"
            }}</span>
          </view>
          <view class="message">
            <image
              class="icon"
              src="https://eshangtech.com/ShopICO/yxcl/projectWarning/phone.svg"
            ></image>
            <span class="text">提单时间</span>
            <span class="money">{{
              detailInfo.BusinessProcess_EndDate
                ? $moment(detailInfo.BusinessProcess_EndDate).format(
                    "YYYY/MM/DD"
                  )
                : "-"
            }}</span>
          </view>
          <view class="message" style="margin-bottom: 0">
            <image
              class="icon"
              src="https://eshangtech.com/ShopICO/yxcl/projectWarning/date.svg"
            ></image>
            <span class="text">本期时间</span>
            <span class="money"
              >{{ detailInfo.STARTDATE || "-" }} -
              {{ detailInfo.ENDDATE || "-" }}</span
            >
          </view>
        </view>
      </view>

      <view class="contentTextBox" v-if="detailInfo.BillState !== 1">
        <textarea
          v-model="desc"
          :disabled="detailInfo.BillState === 1"
        ></textarea>
      </view>

      <view class="contain" v-if="detailObj.APPLYAPPROVE_ID">
        <view class="box">
          <view class="store">
            <view class="left">
              <image class="img" src="/static/images/right-ico.png"></image>
            </view>
            <view class="right">
              <view class="top">
                <p class="storeText">
                  【{{ detailObj.APPLYAPPROVE_NAME }}】
                  {{ detailObj.STAFF_NAME.split("【")[0] }}：
                </p>
                <p class="storeTextRight">
                  {{ detailObj.APPLYAPPROVE_INFO }}
                </p>
              </view>
              <span class="other">{{ detailObj.APPLYAPPROVE_DATE }}</span>
            </view>
          </view>
        </view>
      </view>

      <view class="bottomBtn" v-if="detailInfo.BillState !== 1">
        <button class="btn change" @click="handleBillLading">发起提单</button>
      </view>
      <!-- <view class="bottomBtn" v-if="detailInfo.BillState === 1">
        <button
          :style="{
            background: '#e0ba98',
          }"
          class="btn change"
        >
          已发起
        </button>
      </view> -->
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      menu: {}, // 手机信息
      detailInfo: {}, // 结算业务信息
      desc: "项目结算完成，发起提单审批流程", // 审核意见
      isPush: false, // 是否为推送进入
      selectId: "",
      detailObj: {}, // 流程详情数据
    };
  },

  computed: {
    ...mapState({
      user: (state) => {
        return state.userData;
      },
    }),
  },
  onLoad(query) {
    this.menu = uni.getMenuButtonBoundingClientRect();
    // 判断是否为推送
    if (query.ispush) {
      this.isPush = true;
    }
    // 推送进的话 直接进来拿id去查详情
    if (query.id) {
      console.log("query.id", query.id);
      this.selectId = query.id;
      this.handleGetDetail(query.id);
    }
  },
  methods: {
    //   查详情
    async handleGetDetail(id) {
      uni.showLoading({
        title: "加载中...",
      });

      const req = {
        SearchParameter: {
          BusinessApproval_ID: id,
          BusinessProcess_State: 9000,
          Operation_Type: 11,
          PendState: 3,
        },
      };
      const data = await this.$request.$webPost(
        "EShangApiMain/Finance/GetMonthAccountProinst",
        req
      );
      console.log("data", data);
      let list = data.Result_Data.List;
      if (list && list.length > 0) {
        this.detailInfo = list[0];
        this.detailInfo.Liquidation_Amount = this.$util.formatNumber(
          this.detailInfo.Liquidation_Amount
        );
      }
      console.log("this.detailInfo ", this.detailInfo);

      if (this.detailInfo.BillState === 1) {
        this.handleGetProgressList();
      }

      // let req = {
      //   BUSINESSAPPROVALId: id,
      // };
      // const data = await this.$request.$webGet(
      //   "EShangApiMain/BusinessProcess/GetBUSINESSAPPROVALDetail",
      //   req
      // );
      // console.log("data", data);
      // this.detailInfo = data.Result_Data;
      // console.log("this.detailInfo", this.detailInfo);

      uni.hideLoading();
    },
    //   返回上一页面
    // 稍微判断一下 不重载列表页面
    handleBack() {
      if (this.isPush) {
        uni.redirectTo({
          url: "/pages/billOfLading/index",
        });
      } else {
        uni.navigateBack({
          delta: 1,
        });
      }
    },
    // 发起提单
    async handleBillLading() {
      if (!this.desc) {
        uni.showToast({
          title: "请先输入审核意见！",
          icon: "none",
        });
        return;
      }

      console.log("user", this.user);
      const req = {
        businessApprovalID: this.detailInfo.BusinessApproval_ID,
        approveedInfo: this.desc || "",
        approveedStaffId: this.user.UserId,
        approveedStaffName: this.user.UserName,
      };
      //   const data = await handleGetLadingBill(req);
      const data = await this.$request.$webGet(
        "EShangApiMain/Finance/LadingBill",
        req
      );
      uni.showToast({
        title: data.Result_Desc,
        icon: "none",
      });
      let _this = this;
      setTimeout(() => {
        _this.handleGetDetail(_this.detailInfo.BusinessApproval_ID);
      }, 2000);

      //   if (data.Result_Code === 100) {
      //     setTimeout(() => {
      //       uni.navigateBack({
      //         delta: 1,
      //       });
      //     });
      //   }
    },
    // 已经提单了的 去拿到流程列表
    async handleGetProgressList() {
      const data = await this.$request.$webGet(
        "EShangApiMain/BusinessProcess/GetBUSINESSAPPROVALDetail",
        { BUSINESSAPPROVALId: this.selectId }
      );
      let list = data.Result_Data.approveList;
      if (list && list.length > 0) {
        let obj = list[list.length - 1];
        this.detailObj = obj;
        console.log("this.detailObj", this.detailObj);
      }
    },
  },
};
</script>
<style scoped lang="scss">
@import "/static/public/font/stylesheet.css";
.main {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-image: url("https://eshangtech.com/ShopICO/yxcl/projectWarning/bg.svg");
  background-size: cover;
  .header {
    width: 100%;
    box-sizing: border-box;
    padding: 0 16px;
    position: relative;
    margin-top: 0;
    z-index: 222;
    .allowLeft {
      position: absolute;
      width: 24px;
      height: 24px;
      left: 16px;
    }
  }

  .title {
    font-size: 28px;
    font-family: Alimama ShuHeiTi;
    color: #160002;
    line-height: 39px;
    margin: 18px 0 16px 16px;
    background: linear-gradient(180deg, #c25e18 30%, #8c4917 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx;
    .detail {
      width: 100%;
      box-sizing: border-box;
      background: linear-gradient(
        314deg,
        #fffcf3 0%,
        #fff0e6 20%,
        #fff9f5 51%,
        #fff8e7 73%,
        #fff6ee 100%
      );
      border-radius: 8px;
      padding: 16px;
      position: relative;
      .type {
        position: absolute;
        right: 0;
        top: 55px;
        background: linear-gradient(
          270deg,
          #f8d792 0%,
          #ffe6b2 50%,
          #fbc13b 100%
        );
        border-radius: 10px 0 0 2px;
        padding: 2px 8px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: #604128;
        line-height: 20px;
      }
      .top {
        width: 100%;
        height: 168rpx;
        display: flex;
        align-items: center;
        .left {
          width: 168rpx;
          height: 168rpx;
          margin-right: 12px;
          border-radius: 8px;
          overflow: hidden;
          .logo {
            width: 168rpx;
            height: 168rpx;
          }
        }
        .right {
          width: calc(100% - 180rpx);
          //display: flex;
          //flex-direction: column;
          //justify-content: space-between;
          //align-items: flex-start;
          .detailTitle {
            font-size: 30rpx;
            width: 100%;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #160002;
            margin-bottom: 12rpx;
            line-height: 32rpx;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 设置显示的行数 */
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .fixed {
            height: 24px;
            line-height: 24px;
            padding: 1px 4px;
            box-sizing: border-box;
            background: rgba(252, 186, 118, 0.2);
            border-radius: 4px;
            display: inline-block;
            margin-bottom: 12rpx;
            .serviceFixed {
              width: 20rpx;
              height: 24rpx;
              margin-right: 8rpx;
              line-height: 24px;
            }
            .service {
              font-size: 28rpx;
              font-family: PingFangSC-Semibold, PingFang SC;
              font-weight: 600;
              color: #6c492a;
              line-height: 40rpx;
            }
          }
          .other {
            width: 100%;
            display: flex;
            align-items: center;
            .item {
              display: flex;
              align-items: center;
              margin-right: 16px;
              .icon {
                width: 16px;
                height: 16px;
                margin-right: 6px;
              }
              .value {
                font-size: 28rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 40rpx;
                white-space: nowrap;
              }
            }
          }
        }
      }
      .bottom {
        margin-top: 24px;
        .message {
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          .icon {
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }
          .text {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #786b6c;
            line-height: 20px;
            margin-right: 8px;
          }
          .money {
            font-size: 14px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #7d5632;
            line-height: 20px;
          }
        }
      }
    }

    .contentTextBox {
      width: 100%;
      margin-top: 24rpx;
      background: #fff;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 16px;
    }

    .contain {
      width: 100%;
      background: #fff;
      border-radius: 8px;
      box-sizing: border-box;
      padding: 16px;
      margin-top: 16px;
      display: flex;
      .img {
        width: 32px;
        height: 32px;
      }
      .text {
        margin-left: 8px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160002;
        line-height: 24px;
        margin-bottom: 8px;
      }
      .strong {
        font-size: 18px;
        color: rgba(125, 86, 50, 1);
        font-weight: 600;
        margin: 0 4px;
      }
      .box {
        width: 100%;
        .store {
          width: 100%;
          display: flex;
          margin-bottom: 10px;
          .left {
            width: 32px;
            .img {
              width: 20px;
              height: 20px;
              margin-top: 3px;
            }
          }
          .right {
            flex: 1;
            width: 100%;
            display: inline-block;
            .top {
              .storeText {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 24px;
                white-space: nowrap;
              }
              .storeTextRight {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #160002;
                line-height: 24px;
                width: 100%;
                text-align: right;
              }
            }
          }
          .other {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #160002;
            line-height: 24px;
            display: inline-block;
            width: 100%;
            text-align: right;
          }
        }
      }
    }

    .bottomBtn {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 0;
      margin-top: 24rpx;
      display: flex;
      justify-content: space-between;
      .btn {
        // width: calc((100% - 32rpx) / 2);
        width: 100%;
        height: 41px;
        background: rgba(125, 86, 50, 0.1);
        border-radius: 4px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #6d5f5e;
        opacity: 0.6;
      }
      .change {
        background: #7d5632;
        color: #feffff;
        opacity: 1;
      }
    }
  }
}
</style>
