<template>
  <view class="content">
    <view class="header">
      <view class="headernei" @click="isTop = true">
        <img src="@/assets/images/search.png" alt="" />
      </view>
    </view>
    <!-- 顶部搜索 -->
    <u-popup :show="isTop" mode="top" @close="isTop = false">
      <view class="tt">
        <u--form
          labelPosition="left"
          labelWidth="auto"
          :model="select"
          ref="uForm"
        >
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'会员编号'">
                <u--input fontSize="12" v-model="select.memberCode"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'会员姓名'">
                <u--input fontSize="12" v-model="select.memberName"></u--input>
              </u-form-item>
            </u-col>
          </u-row>

          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'荣誉奖衔'">
                <picker
                  :range="awardsList"
                  range-key="awardsName"
                  @change="bindPickerChange1"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.awardsName"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'隶属体系'">
                <picker
                  :range="vertexList"
                  range-key="vertexName"
                  @change="bindPickerChange2"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.vertexName"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'隶属团队'">
                <picker
                  :range="memberteamList"
                  range-key="teamName"
                  @change="bindPickerChange3"
                >
                  <u--input
                    disabled
                    fontSize="12"
                    disabledColor="#ffffff"
                    v-model="select.teamName"
                    suffixIcon="arrow-down"
                    suffixIconStyle="font-size: 12px;"
                  ></u--input>
                </picker>
              </u-form-item>
            </u-col>
            <u-col span="12">
              <u-form-item :label="'变更次数'">
                <u--input fontSize="12" v-model="select.editNumber"></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'联系方式'">
                <u--input fontSize="12" v-model="select.phone"></u--input>
              </u-form-item>
            </u-col>
            <u-col span="6">
              <u-form-item :label="'服务中心编号'">
                <u--input
                  fontSize="12"
                  v-model="select.centerMemberCode"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="6">
              <u-form-item :label="'服务中心姓名'">
                <u--input
                  fontSize="12"
                  v-model="select.centerMemberName"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="12">
              <u-form-item
                :label="'创建日期'"
                @click="(isData = true), (setTime = 0)"
              >
                <u--input
                  disabled
                  fontSize="12"
                  disabledColor="#ffffff"
                  v-model="select.creationTimeVal"
                  suffixIcon="arrow-down"
                  suffixIconStyle="font-size: 12px;"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
          <u-row gutter="10">
            <u-col span="12">
              <u-form-item
                :label="'支付日期'"
                @click="(isData = true), (setTime = 1)"
              >
                <u--input
                  disabled
                  fontSize="12"
                  disabledColor="#ffffff"
                  v-model="select.payVal"
                  suffixIcon="arrow-down"
                  suffixIconStyle="font-size: 12px;"
                ></u--input>
              </u-form-item>
            </u-col>
          </u-row>
        </u--form>
        <view class="footer">
          <u-button
            @click="getList1"
            color="#C8161D"
            text="搜索"
            class="btnn"
          ></u-button>
          <u-button @click="reset" text="重置"></u-button>
        </view>
      </view>
    </u-popup>

    <view class="top_content" v-for="(item, index) in tableData" :key="index">
      <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">
          <u--input
            style="width: 200rpx"
            color="#259CFE"
            v-model="item.newMemberName"
          ></u--input>
        </view>
      </view>
      <view class="theline">
        <view class="flex_title">{{ '变更联系方式' }}</view>
        <view class="flex_content">
          <u--input
            style="width: 200rpx"
            color="#259CFE"
            v-model="item.newPhone"
          ></u--input>
        </view>
      </view>
      <view class="theline">
        <view class="flex_title">{{ '会员姓名' }}</view>
        <view class="flex_content">{{ item.memberName }}</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">{{ item.pkAwardsVal }}</view>
      </view>
      <view class="theline">
        <view class="flex_title">{{ '隶属体系' }}</view>
        <view class="flex_content">{{ item.vertexName }}</view>
      </view>
      <view class="theline">
        <view class="flex_title">{{ '隶属团队' }}</view>
        <view class="flex_content">{{ item.teamName }}</view>
      </view>
      <view class="theline">
        <view class="flex_title">{{ '服务中心编号' }}</view>
        <view class="flex_content">{{ item.centerMemberCode }}</view>
      </view>
      <view class="theline">
        <view class="flex_title">{{ '服务中心姓名' }}</view>
        <view class="flex_content">{{ item.centerMemberName }}</view>
      </view>
      <view class="theline">
        <view class="flex_title">{{ '创建日期' }}</view>
        <view class="flex_content">{{ item.creationTime }}</view>
      </view>
      <view class="theline">
        <view class="flex_title">{{ '支付日期' }}</view>
        <view class="flex_content">{{ item.payTime }}</view>
      </view>
      <view class="theline">
        <view class="flex_title">{{ '变更次数' }}</view>
        <view class="flex_content">{{ item.editNumber }}</view>
      </view>
    </view>

  
    <u--form
      labelPosition="left"
      labelWidth="auto"
      :model="select"
      ref="uForm"
    > 
      <view
        class="main_item"
        v-for="item in handleBusinessList"
        :key="item.businessType"
      >
        <u-row gutter="10">
          <u-col>
            <view class="content_title">
              {{ item.editTypeName }}
            </view>
            <!-- 单选 -->
            <u-checkbox-group
              v-if="item.buttonType == 1"
              :value="item.businessValueList"
              placement="row"
              @change="(val) => handleCheckboxChange(item, val)"
            >
              <u-checkbox
                size="24rpx"
                shape="circle"
                :customStyle="{ marginRight: '10rpx' }"
                v-for="(aitem, aindex) in item.enumEntityList"
                :key="aindex"
                :label="aitem.label"
                :name="aitem.value"
              >
              </u-checkbox>
            </u-checkbox-group>

            <u-checkbox-group
              v-if="item.buttonType == 2"
              v-model="item.businessValueList"
              placement="row"
            >
              <u-checkbox
                size="24rpx"
                :customStyle="{ marginRight: '10rpx' }"
                v-for="(bitem) in item.enumEntityList"
                :key="bitem.value"
                :label="bitem.label"
                :name="bitem.value"
              >
              </u-checkbox>
            </u-checkbox-group> 
          </u-col>
        </u-row>
      </view>
        
      </u--form>
    <view class="footer_a">
      <view class="footer">
        <!-- <u-button @click="cancelCz" color="#CCCCCC" text="取消"></u-button> -->
        <u-button
          v-hasButtons="['BasicBusinessConfirm']"
          @click="saveDate"
          color="#C8161D"
          text="下一步"
        ></u-button>
      </view>
    </view>
    <u-popup
      :show="errorShow"
      round="10"
      mode="center"
      @close="errorShow = false"
    >
      <view class="centerPopup">
        <view class="centerTitle">{{'会员信息错误'}}</view>
        <table class="tftable" border="1">
          <tr>
            <td align="center">{{ '会员编号' }}</td>

            <td align="center">{{ '报错信息' }}</td>
          </tr>
          <tr v-for="(item,index) in errorData" :key="index">
            <td align="center">{{ item.memberCode }}</td>
            <td align="center">{{ item.errorMsg }}</td>
          </tr>
        </table>
        <view class="footer" style="margin-top:20rpx">
         
          <u-button  color="#C8161D" @click="errorShow = false" text="确定"></u-button>
        </view>
      </view>
    </u-popup>
    <u-calendar
      @close="isData = false"
      :closeOnClickOverlay="true"
      :show="isData"
      mode="range"
      @confirm="confirm"
    ></u-calendar>
    <!-- 悬浮球 -->
    <drag-button />
  </view>
</template>

<script>
import * as inf from "@/api/information";
import { isLocals, isLocalSymbol } from "@/util/numberToCurrency";
export default {
  data() {
    return {
      isTop: false,
      isData: false,
      select: {},
      queryParams: {
        pageNum: 1,
        pageSize: 20,
      },
      tableData: [],
      awardsList: [], //荣誉奖衔
      vertexList: [], //隶属体系
      memberteamList: [], //隶属团队
      handleBusinessList: [],
      errorShow: false,
      errorData: [],
    };
  },
  onLoad() {
    // 获取下拉
    this.getData();
    this.getList1();
  },
  methods: {
    isLocalSymbol,
    isLocals,
    saveDate() {
      if (this.tableData.length > 0) {
        inf
          .businessCheck({
            businessMemberList: this.tableData,
            handleBusinessList: this.handleBusinessList,
          })
          .then((res) => {
            if (res.code == 200) {
              uni.showToast({
                title: res.msg,
                icon: "none",
                duration: 1500,
              });
              uni.navigateTo({
                url:
                  "/pages/information/bisiness/reviewBusiness?data=" +
                  JSON.stringify(res.data) +
                  "&handleBusinessList=" +
                  JSON.stringify(this.handleBusinessList),
              });
            } else if (res.code == 504 && res.data) {
              this.errorShow = true;
              this.errorData = res.data;
            }
          });
      }
    },
    handleCheckboxChange(item, val) {
      if (item.buttonType == 1) {
        if (item.businessValueList.length === 0) {
          item.businessValueList = [...val];
        } else {
          const oldVal = item.businessValueList[0]
          const newVal = val.filter(v => v !== oldVal)
          item.businessValueList = [...newVal]
        }
      }
    },
    getData() {
      //获取基础业务枚举
      inf.getHandleBusinessEnum().then((res) => {
        res.data.forEach((ele) => {
          ele.businessValueList = [];
          ele.wowList = [];
        });
        console.log(res.data,'res.data')
        this.handleBusinessList = res.data;
      });
      // 荣誉奖衔下拉选
      inf.getAwardsListChiose().then((res) => {
        this.awardsList = res.rows;
      });
      // 隶属体系下拉选
      inf.getvertexValue().then((res) => {
        this.vertexList = res.data;
      });
      //隶属团队下拉选
      inf.getmemberTeamList().then((res) => {
        this.memberteamList = res.rows;
      });
    },
    bindPickerChange1(e) {
      this.$set(
        this.select,
        "awardsName",
        this.awardsList[e.detail.value].awardsName
      );
      this.$set(this.select, "pkAwards", this.awardsList[e.detail.value].pkId);
    },
    bindPickerChange2(e) {
      this.$set(
        this.select,
        "vertexName",
        this.vertexList[e.detail.value].vertexName
      );
      this.$set(this.select, "vertexId", this.vertexList[e.detail.value].pkId);
    },
    bindPickerChange3(e) {
      this.$set(
        this.select,
        "teamName",
        this.memberteamList[e.detail.value].teamName
      );
      this.$set(
        this.select,
        "teamId",
        this.memberteamList[e.detail.value].pkId
      );
    },
    confirm(e) {
      if (this.setTime == 0) {
        this.$set(this.select, "startDate", e[0]);
        this.$set(this.select, "endDate", e[e.length - 1]);
        this.$set(
          this.select,
          "creationTimeVal",
          e[0] + " 至 " + e[e.length - 1]
        );
      } else {
        this.$set(this.select, "startDatePay", e[0]);
        this.$set(this.select, "endDatePay", e[e.length - 1]);
        this.$set(this.select, "payVal", e[0] + " 至 " + e[e.length - 1]);
      }

      this.isData = false;
    },
    getList1() {
      this.tableData = [];
      this.queryParams.pageNum = 1;
      this.isTop = false;
      this.getSearch();
    },

    reset() {
      this.select = {};
      this.getSearch();
    },
    getSearch() {
      inf
        .getBusinessList(Object.assign({}, this.queryParams, this.select))
        .then((res) => {
          this.tableData = res.rows;
        });
    },
  },
};
</script>

<style lang='scss' scoped>
.centerPopup {
  padding: 27rpx;
  width: 670rpx;
  .centerTitle{
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    text-align: center;
  }
  .tftable {
    font-size: 24rpx;
    border-collapse: collapse;
    border-radius: 20rpx;
    width: 100%;
    background: #fff;
    border: 2rpx solid #f9f9f9;
    tr td {
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      padding: 30rpx 0rpx;
      border: 2rpx solid #333;
      // height: 60px;
    }
  }
}
::v-deep .u-checkbox-group--row {
  flex-wrap: wrap;
}
::v-deep .u-checkbox {
  margin: 20rpx 0;
}
::v-deep .u-transition {
  z-index: 998 !important;
}
::v-deep .u-input {
  padding: 0 18rpx !important;
}
::v-deep .u-form-item__body__left__content__label {
  font-size: 24rpx;
}
::v-deep .u-form-item__body {
  padding: 10rpx 0;
}
.content {
  padding: 20rpx 24rpx;
  background: #f9f9f9;
  padding-bottom: 140rpx;
  .content_title {
    font-size: 28rpx;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }
  .header {
    background: #ffffff;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(204, 204, 204, 0.4);
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    justify-content: space-between;
    .headernei {
      background: rgba(216, 216, 216, 0);
      border-radius: 64rpx;
      opacity: 1;
      width: 100%;
      padding: 30rpx 42rpx;
      img {
        width: 44rpx;
        height: 44rpx;
      }
    }
  }
  .tt {
    padding: 20rpx;
    margin-top: 20rpx;
    font-size: 24rpx;
  }
  .top_content :nth-child(odd) {
    width: 300rpx;
  }
  .top_content {
    background: #ffffff;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(204, 204, 204, 0.4);
    border-radius: 20rpx;
    padding: 18rpx 22rpx;
    margin-bottom: 20rpx;
    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;
    }
  }
  .main_item {
    padding: 20rpx 22rpx;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(204, 204, 204, 0.4);
    border-radius: 20rpx;
    margin-bottom: 20rpx;
  }

  .footer_a {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    // height: 83px;
    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;
    }
  }
}
</style>