<template>
  <view class="content">
    <view class="top_view" v-for="(item, index) in tableData" :key="index">
      <view class="top_content">
        <view class="theline">
          <view class="flex_title">{{ '会员编号' }}</view>
          <view class="flex_content">{{ item.memberCode }}</view>
        </view>
        <view class="theline">
          <view class="flex_title">{{ '变更会员姓名' }}</view>
          <view class="flex_content">
            {{ item.newMemberName }}
          </view>
        </view>
        <view class="theline">
          <view class="flex_title">{{ '联系方式' }}</view>
          <view class="flex_content">
            {{ item.phone }}
          </view>
          <!--  -->
        </view>
        <view class="theline">
          <view class="flex_title">{{ '变更会员姓名' }}</view>
          <view class="flex_content" style="width: 200rpx; color: #259cfe">{{
            item.newMemberName
          }}</view>
        </view>
        <view class="theline">
          <view class="flex_title">{{ '变更联系方式' }}</view>
          <view class="flex_content" style="width: 200rpx; color: #259cfe">{{
            item.newPhone
          }}</view>
        </view>
        <view class="theline">
          <view class="flex_title">{{ '扣款币种' }}</view>
          <view class="flex_content">{{ item.pkAccountKeyVal }}</view>
        </view>
        <view class="theline">
          <view class="flex_title">{{
            '单笔扣款金额' + `(${isLocalSymbol()})`
          }}</view>
          <view class="flex_content">{{ item.singleAmount100 }}</view>
        </view>
      </view>
      <view class="">
        <u-button
          @click="handleDelete(item, index)"
          color="#C8161D"
          text="删除"
          class="btnn"
        ></u-button>
      </view>
    </view>
    <view
      class="top_view"
      v-for="item in handleBusinessList"
      :key="item.businessType"
      style="margin-top: 20rpx"
    >
      <view class="top_title">{{ item.businessTypeVal }}</view>
      <view class="sec_title">{{ item.newValue }}</view>
      <view class="theflex">
        <view class="top_content">
          <view class="theline">
            <view class="flex_title">{{ '扣款币种' }}</view>
            <view class="flex_content">{{ item.pkAccountKeyVal }}</view>
          </view>
          <view class="theline">
            <view class="flex_title">{{
              '单笔扣款金额' + `(${isLocalSymbol()})`
            }}</view>
            <view class="flex_content">{{ item.cost }}</view>
          </view>
        </view>
        <view
          ><u-icon
            @click="handleDelete2(item, index)"
            size="22"
            color="#ED1D25"
            name="trash"
          ></u-icon
        ></view>
      </view>
    </view>
    <view class="footer_a">
      <view class="footer">
        <u-button
          class="thbtn"
          @click="saveDate(0)"
          color="#CCCCCC"
          :text="'取消'"
        ></u-button>
        <u-button
          class="thbtn"
          v-hasButtons="['ReviewBusinessExemptSign']"
          @click="saveDate(1)"
          color="#009B58"
          :text="'免签'"
        ></u-button>
        <u-button
        v-hasButtons="['ReviewBusinessExemptPay']"
          class="thbtn"
          @click="saveDate(2)"
          color="#F3A900"
          :text="'免付'"
        ></u-button>
        <u-button
          class="thbtn"
          @click="saveDate(3)"
          v-hasButtons="['ReviewBusinessExemptAll']"
          color="#E41B1B"
          :text="'全免'"
        ></u-button>
        <u-button
          class="thbtn"
          @click="saveDate(4)"
          v-hasButtons="['ReviewBusinessConfirm']"
          color="#70BEFE"
          :text="'确认'"
        ></u-button>
      </view>
    </view>
    <!-- 悬浮球 -->
    <drag-button />
  </view>
</template>

<script>
import * as inf from "@/api/information";
import { isLocals, isLocalSymbol } from "@/util/numberToCurrency";
export default {
  data() {
    return {
      thedata: {},
      tableData: [],
      handleBusinessList: [],
    };
  },
  onLoad(options) {
    this.thedata = JSON.parse(options.data);
    this.tableData = this.thedata.businessOldMemberList;
    this.handleBusinessList = this.thedata.handleBusinessList;
  },
  methods: {
    isLocalSymbol,
    isLocals,
    //删除页面上当前条
    handleDelete(row, index) {
      const delList = [];
      this.tableData.forEach((ele, eindex) => {
        if (row.memberCode == ele.memberCode) {
          delList.push(eindex);
        }
      });
      this.tableData.splice(index, delList.length);
      this.handleBusinessList = this.handleBusinessList.filter(
        (ele) => ele.memberCode !== row.memberCode
      );
      this.thedata.businessMemberList = this.thedata.businessMemberList.filter(
        (ele) => ele.memberCode !== row.memberCode
      );
    },
    handleDelete2(row, index) {
      const delList2 = [];
      const delList3 = [];
      this.handleBusinessList.forEach((ele, eindex) => {
        if (row.pkId == ele.pkId) {
          delList2.push(eindex);
        }
      });
      this.thedata.businessMemberList.forEach((ele, eindex) => {
        if (row.pkId == ele.pkId) {
          delList3.push(eindex);
        }
      });
      this.handleBusinessList.splice(index, delList2.length);
      this.thedata.businessMemberList.splice(index, delList3.length);
    },
    saveDate(index) {
      this.thedata.businessOldMemberList = this.tableData;
      this.thedata.handleBusinessList = this.handleBusinessList;
      if (this.tableData.length > 0 && this.handleBusinessList.length > 0) {
        if (index == 0) {
          uni.navigateBack();
        } else if (index == 2 || index == 4) {
          //免付和确认
          if (index == 2) {
            uni.navigateTo({
              url:
                "/pages/information/bisiness/zxqc?data=" +
                JSON.stringify(this.thedata) +
                "&index=" +
                index,
            });
            // this.$router.push({
            //   path: "/information/business/zxqc",
            //   query: {
            //     data: JSON.stringify(this.thedata),
            //     index: index,
            //   },
            // });
          } else if (index == 4) {
            //确认需要调校验金额接口
            const thebusinessCostVOList = this.thedata.businessCostVOList;
            inf
              .balanceCheck({ businessCostVOList: thebusinessCostVOList })
              .then((res) => {
                if (res.code == 200) {
                  uni.navigateTo({
                    url:
                      "/pages/information/bisiness/zxqc?data=" +
                      JSON.stringify(this.thedata) +
                      "&index=" +
                      index,
                  });
                  //   this.$router.push({
                  //     path: "/information/business/zxqc",
                  //     query: {
                  //       data: JSON.stringify(this.thedata),
                  //       index: index,
                  //     },
                  //   });
                } else if (res.code == 504 && res.data) {
                  //   this.errorShow = true;
                  //   this.errorData = res.data;
                }
              });
          }
        } else if (index == 1 || index == 3) {
          //免签和全免
          const thehandleBusinessList = this.thedata.handleBusinessList;
          const thebusinessMemberList = this.thedata.businessMemberList;
          const thebusinessCostVOList = this.thedata.businessCostVOList;
          if (index == 1) {
            //免签需要调校验金额接口
            inf
              .balanceCheck({ businessCostVOList: thebusinessCostVOList })
              .then((res) => {
                if (res.code == 200) {
                  inf
                    .saveHandelBusiness({
                      processType: index,
                      handleBusinessList: thehandleBusinessList,
                      businessMemberList: thebusinessMemberList,
                    })
                    .then((res) => {
                      uni.showToast({
                        title: res.msg,
                        icon: "none",
                        duration: 1500,
                      });

                      setTimeout(() => {
                        uni.navigateBack();
                      }, 1500);
                    });
                } else if (res.code == 504 && res.data) {
                  //   this.errorShow = true;
                  //   this.errorData = res.data;
                }
              });
          } else if (index == 3) {
            inf
              .saveHandelBusiness({
                processType: index,
                handleBusinessList: thehandleBusinessList,
                businessMemberList: thebusinessMemberList,
              })
              .then((res) => {
                if (res.code == 200) {
                  uni.showToast({
                    title: res.msg,
                    icon: "none",
                    duration: 1500,
                  });
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 1500);
                } else if (res.code == 504 && res.data) {
                  //   this.errorShow = true;
                  //   this.errorData = res.data;
                }
              });
          }
        }
      } else {
        uni.showToast({
          title: "业务不能为空",
          icon: "none",
          duration: 1500,
        });
      }
    },
  },
};
</script>

<style lang='scss' scoped>
.content {
  background: #f9f9f9;
  padding: 20rpx 24rpx;
  padding-bottom: 140rpx;
  .top_view {
    background: #ffffff;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(204, 204, 204, 0.4);
    border-radius: 20rpx;
    padding: 18rpx 22rpx;
    .top_title {
      font-size: 28rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      margin-bottom: 14rpx;
    }
    .sec_title {
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: bold;
      color: #259cfe;
      margin: 20rpx 0;
    }
    .theflex {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .top_content :nth-child(odd) {
    width: 300rpx;
  }
  .top_content {
    display: flex;
    flex-wrap: wrap;

    // justify-content: space-between;
    .flex_title {
      font-size: 24rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
    }
    .flex_content {
      font-size: 20rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      margin: 20rpx 0;
    }
  }
  .footer_a {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 30rpx 0;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(204, 204, 204, 0.4);
    .footer {
      display: flex;
      align-items: center;
      background: #ffffff;
      padding: 0 60rpx;
      .thbtn {
        margin: 0 10rpx;
      }
    }
  }
}
</style>