<style lang="scss" scoped>
.newpersondetails {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  font-family: aa;
  .box {
    width: 100%;
    height: 100%;
    padding: 15px;
    .box-jc-t-r {
      width: 60px;
      height: 25px;
      view {
        border-radius: 12px;
        font-size: 13px;
        color: #fff;
        text-align: center;
        line-height: 25px;
      }
    }
    .box-photo {
      width: 100%;
      height: 480rpx;
      overflow: hidden;
      border-radius: 6px;
      margin-bottom: 15px;
    }
    .box-jc {
      width: 100%;
      padding: 15px;
      border-radius: 6px;
      margin-bottom: 15px;
      box-shadow: 0px 3px 6px 0px rgba(139, 115, 64, 0.16);
      background: #ffffff;
      .box-jc-top {
        width: 100%;
        display: flex;
        padding: 9px 0;
        align-items: flex-start;
        justify-content: space-between;
        border-bottom: 1px solid #e2e2e2;
        .box-jc-t-l {
          width: calc(100vw - 30px - 75px);
          display: flex;
          flex-wrap: wrap;
        }
      }
      .box-jc-c {
        width: 100%;
        padding: 10px 0 0;
        .box-jc-c-t {
          width: 100%;
          display: flex;
          align-items: center;
          font-size: 12px;
          color: #111;
          .box-jc-c-t-i {
            width: 50%;
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            image {
              width: 26rpx;
              height: 26rpx;
              margin-right: 4px;
            }
          }
        }
      }
      .box-jc-c-item {
        display: flex;
        flex-wrap: wrap;
        font-size: 12px;
        color: #111111;
        .box-jc-c-item-i {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          margin-right: 10px;
          image {
            width: 26rpx;
            height: 26rpx;
            margin-right: 4px;
          }
        }
      }
    }
    .box-sf,
    .box-grdt {
      width: 100%;
      padding: 15px;
      border-radius: 6px;
      margin-bottom: 15px;
      box-shadow: 0px 3px 6px 0px rgba(139, 115, 64, 0.16);
      background: #ffffff;
    }
    .box-sf-item {
      width: 33%;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .box-grdt-i-box {
      display: inline-block;
      margin-top: 15px;
    }
    .box-grdt-i-t {
      padding: 0 20rpx;
      height: 45rpx;
      border-radius: 22.5rpx;
      display: flex;
      align-items: center;
      font-size: 11px;
      background: rgba(0, 198, 193, 0.2);
    }
    .box-grdt-i-ty {
      width: 20rpx;
      height: 20rpx;
      border-radius: 50%;
    }
    .box-grdt-i-c {
      width: 100%;
      font-size: 12px;
      color: #111111;
      margin-top: 10px;
      line-height: 21px;
    }
    .box-grdt-i-c-w {
      width: 100%;
      height: 35px;
      display: flex;
      align-items: center;

      color: #999999;
    }
    .box-c-item {
      border-radius: 4px;
    }
    .ftBox-right-text {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      overflow: hidden;
      background: #f5f5f5;
      font-size: 14px;
      color: #333333;
    }
  }
  .boxfixed {
    width: 100%;
    height: 88rpx;
    position: fixed;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .xboxfixed {
    width: 558rpx;
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .xboxfixed-item {
    width: 260rpx;
    height: 88rpx;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #ffffff;
    position: relative;
    button {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      opacity: 0;
    }
  }
}
</style>
<template>
  <view class="newpersondetails">
    <view class="box">
      <!-- <view class="box-photo">
				<u-swiper 
				:list="dataList.imgs"
				:effect3d="swipers.style == 2"
				:height="480"
				:interval="5000"
				:border-radius="12"
				name='url'
				@click="previewphoto"
				></u-swiper>
			</view> -->
      <view class="box-jc">
        <view class="box-jc-top">
          <view class="box-jc-t-l">
            <text
              style="margin-right: 5px; font-size: 14px; font-weight: bold"
              >{{ dataList.Name }}</text
            >
            <image
              v-if="dataList.Sex == 1"
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan2.png"
              style="width: 36rpx; height: 36rpx; margin-top: 3rpx"
            ></image>
            <image
              v-if="dataList.Sex == 2"
              src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv2.png"
              style="width: 36rpx; height: 36rpx; margin-top: 3rpx"
            ></image>
            <u-tag
              text="未认证"
              bg-color="#e2e2e2"
              color="#FFF"
              size="mini"
              border-color="#e2e2e2"
              v-if="dataList.IsAttestation == 0"
            />
            <u-tag
              text="已认证"
              :bg-color="mainColor"
              color="#FFF"
              size="mini"
              :border-color="mainColor"
              v-if="dataList.IsAttestation == 1"
            />
          </view>
          <view class="box-jc-t-r">
            <view
              :style="{ background: mainColor }"
              v-if="mall_UserInfo.UserId == dataList.Id"
              @click="goedit(1)"
              >编辑</view
            >
            <view
              @click="dianjiguanzhu(dataList)"
              v-if="
                dataList.IsFollow != -1 && mall_UserInfo.UserId != dataList.Id
              "
            >
              <view
                :style="{ background: mainColor }"
                v-if="dataList.IsFollow == 0"
                >关注</view
              >
              <view
                :style="{ background: mainColor }"
                v-if="dataList.IsFollow == 1"
                >已关注</view
              >
              <view
                :style="{ background: mainColor }"
                v-if="dataList.IsFollow == 2"
                >被关注</view
              >
              <view
                :style="{ background: mainColor }"
                v-if="dataList.IsFollow == 3"
                >互关</view
              >
            </view>
          </view>
        </view>
        <!-- 基本资料 -->
        <view class="box-jc-c">
          <view class="box-jc-c-t">
            <view class="box-jc-c-t-i">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-sr.png"
              ></image>
              <text>{{ dataList.BirthdayYear }}年</text>
              <text style="margin: 0 5px">·</text>
              <text>{{ dataList.ConoldBaseInfostellation }}</text>
            </view>
            <view class="box-jc-c-t-i">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-rw.png"
                style="width: 12rpx; height: 26rpx"
              ></image>
              <text>{{ dataList.Height }}cm</text>
              <text style="margin: 0 5px">·</text>
              <text>{{ dataList.Weight }}kg</text>
            </view>
          </view>
          <view class="box-jc-c-item">
            <view class="box-jc-c-item-i">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-fz.png"
              ></image>
              <text>现居{{ dataList.DWCName }}</text>
              <text v-if="dataList.PName != ''" style="margin: 0 5px">·</text>
              <text v-if="dataList.PName != ''"
                >{{ dataList.PName }}{{ dataList.CName }}人</text
              >
            </view>
            <view class="box-jc-c-item-i" v-if="dataList.Job">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-gz.png"
              ></image>
              <text>{{ dataList.Job }}</text>
            </view>
            <view class="box-jc-c-item-i" v-if="dataList.MarriageStr">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-hy.png"
                style="width: 30rpx"
              ></image>
              <text>{{ dataList.MarriageStr }}</text>
            </view>
            <view class="box-jc-c-item-i">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-zc.png"
                style="width: 28rpx"
              ></image>
              <text>{{ dataList.HouseInfoStr }}</text>
              <text style="margin: 0 5px" v-if="dataList.CarInfoStr">·</text>
              <text v-if="dataList.CarInfoStr">{{ dataList.CarInfoStr }}</text>
              <text style="margin: 0 5px">·</text>
              <text v-if="dataList.YearMoney"
                >年收入{{ dataList.YearMoney }}万元</text
              >
            </view>
            <view class="box-jc-c-item-i">
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-book.png"
              ></image>
              <text>{{ dataList.EducationTypeStr }}</text>
              <text style="margin: 0 5px" v-if="dataList.SchoolInfo">·</text>
              <text v-if="dataList.SchoolInfo">{{ dataList.SchoolInfo }}</text>
            </view>
          </view>
          <view class="box-jc-c-item"> </view>
        </view>
      </view>
      <!-- 身份认证 -->
      <!-- <view class="box-sf">
				<text style="font-size: 13px;font-weight: bold;">身份认证</text>
				<view class="box-sf-item" @click="gosfzrenz" v-if="dataList.IsAttestation!=1">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-sfr-n.png" style="width: 50px;height: 50px;margin-bottom: 5px;"></image>
					未认证
				</view>
				<view class="box-sf-item" v-if="dataList.IsAttestation==1">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-sfr.png" style="width: 50px;height: 50px;margin-bottom: 5px;"></image>
					已认证
				</view>
			</view> -->
      <!-- 个人动态 -->
      <view
        class="box-grdt"
        @click="dynamicList.length > 0 ? gogerendongtai() : ''"
      >
        <view
          style="
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
          "
        >
          <view style="display: flex">
            <text style="font-size: 13px; font-weight: bold">个人动态</text>
            <text style="font-size: 13px; color: #888888">({{ count }})</text>
          </view>
          <u-icon name="arrow"></u-icon>
        </view>
        <view
          v-if="dynamicList.length == 0"
          class="box-grdt-i-c-w"
          style="justify-content: center"
        >
          暂无动态
        </view>
        <view
          style="display: flex; align-items: center; margin-top: 10px"
          v-if="dynamicList.length > 0"
        >
          <view
            v-for="(x, y) in dynamicList"
            :key="y"
            class="box-c-item"
            :style="{
              width: pjwidth,
              height: pjwidth,
              'margin-right': dynamicList.length == y + 1 ? '' : '10px',
            }"
          >
            <view
              class="ftBox-right-text"
              style="
                padding: 6px;
                overflow: hidden;
                width: 100%;
                height: 100%;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              "
              v-if="x.fileType == 0"
            >
              {{ x.content }}
            </view>
            <view class="ftBox-right-text" v-if="x.fileType == 1">
              <image
                :src="x.coverPhoto"
                mode="aspectFill"
                style="width: 100%; height: 100%; border-radius: 5px"
              ></image>
            </view>
            <view
              class="ftBox-right-text"
              v-if="x.fileType == 2"
              style="position: relative"
            >
              <video
                id="myVideo"
                :src="x.coverPhoto"
                style="width: 100%; height: 100%; border-radius: 5px"
                :controls="false"
                :show-center-play-btn="false"
              ></video>
              <view
                style="
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  left: 0;
                  top: 0;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                "
              >
                <u-icon name="play-circle-o" :size="50" color="#FFF"></u-icon>
              </view>
            </view>
            <view
              class="ftBox-right-text"
              v-if="x.fileType == 3"
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                background: #bba16b;
              "
            >
              <image
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/mic.png"
                mode="aspectFill"
                style="width: 27px; height: 40px; border-radius: 5px"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 关于我 -->
      <!-- <view class="box-grdt" style="margin-bottom: 100px;">
				<view style="display: flex;align-items: center;justify-content: space-between;">
					<text style="font-size: 13px;font-weight: bold;">关于我</text>
					<view class="box-jc-t-r" @click="goedit(2)" v-if="mall_UserInfo.UserId == dataList.Id">
						<view :style="{background:mainColor}">编辑</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">自我描述</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.About!=''">{{dataList.About}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">家庭背景</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.FamilyInfo!=''">{{dataList.FamilyInfo}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">兴趣爱好</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.Hobby!=''">{{dataList.Hobby}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">曾经旅游过的地方</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.ActivityRegion!=''">{{dataList.ActivityRegion}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">理想的另一半是什么样的</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.HopeYou!=''">{{dataList.HopeYou}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view> -->

      <!-- TODO字段不确定 -->
      <!-- <view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">期待的未来生活是怎样的</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.OtherInfo!=''">{{dataList.OtherInfo}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">最喜欢的一本书及原因</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.LikeBook!=''">{{dataList.LikeBook}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">最喜欢的电影及原因</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.LikeTV!=''">{{dataList.LikeTV}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view>
				<view>
					<view class="box-grdt-i-box" >
						<span class="box-grdt-i-t">
							<view class="box-grdt-i-ty" :style="{background:mainColor}"></view>
							<text :style="{color:mainColor,'margin-left':'5px'}">欣赏的名人爱情及原因</text>
						</span>
					</view>
					<view class="box-grdt-i-c">
						<text v-if="dataList.IdealLove!=''">{{dataList.IdealLove}}</text>
						<view v-else class="box-grdt-i-c-w">暂无</view>
					</view>
				</view> -->

      <!-- </view> -->
    </view>
    <view class="boxfixed">
      <view
        class="xboxfixed"
        :style="{
          'justify-content':
            mall_UserInfo.UserId == dataList.Id ? 'center' : 'space-between',
        }"
      >
        <view class="xboxfixed-item" style="background: #00c6c1">
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-fx.png"
            style="width: 54rpx; height: 54rpx; margin-right: 10px"
          ></image>
          <text>推给朋友</text>
          <button open-type="share"></button>
        </view>
        <view
          class="xboxfixed-item"
          style="background: #3183fe"
          v-if="mall_UserInfo.UserId != dataList.Id"
        >
          <image
            src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pd-hi.png"
            style="width: 54rpx; height: 54rpx; margin-right: 10px"
          ></image>
          <text>想认识TA</text>
          <button
            open-type="contact"
            :send-message-title="dataList.Name"
            :send-message-path="path"
            :send-message-img="dataList.Photo"
            :show-message-card="true"
          ></button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: "个人详情",
      mainColor: "",
      dataList: {},
      Jumptype: 0,
      UserId: 0,
      isShowBtn: true, //跳过来不显示编辑按钮
      path: "",
      mall_UserInfo: null,
      count: 0,
      dynamicList: [],
      pjwidth: 0,
    };
  },
  created() {
    this.mainColor = this.$uiConfig.mainColor;
    this.mall_UserInfo = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo")
      : null;
  },
  onShareAppMessage(res) {
    let u = uni.getStorageSync("mall_UserInfo");
    let uid = u.UserId ? u.UserId : 0;
    if (uid == 0) {
      uid = uni.getStorageSync("pid") ? uni.getStorageSync("pid").pid : 0;
    }
    let SmallShopId = u.SmallShopId ? u.SmallShopId : 0;
    if (SmallShopId == 0) {
      //如果微店id为0 去找所属微店id
      SmallShopId = u.UserSmallShopId ? u.UserSmallShopId : 0;
    }
    let Up = uni.getStorageSync("mall_UserInfo")
      ? uni.getStorageSync("mall_UserInfo").UserPageType
      : 0;
    return {
      title: "个人资料",
      path:
        "/pages/index/index?id=" +
        this.UserId +
        "&user_id=" +
        uid +
        "&SmallShopId=" +
        SmallShopId +
        "&Up=" +
        Up +
        "&JumpType=13",
      imageUrl: "",
    };
  },
  onLoad(options) {
    if (options && options.UserId) {
      this.UserId = options.UserId;
      this.init();
      if (this.UserId != this.mall_UserInfo.UserId) {
        this.isShowBtn = false;
      } else {
        this.isShowBtn = true;
      }
      let u = uni.getStorageSync("mall_UserInfo");
      let uid = u.UserId ? u.UserId : 0;
      let Up = uni.getStorageSync("mall_UserInfo")
        ? uni.getStorageSync("mall_UserInfo").UserPageType
        : 0;
      this.path =
        "/pages/index/index?id=" +
        options.UserId +
        "&user_id=" +
        uid +
        "&Up=" +
        Up +
        "&JumpType=11";
      this.getMyDynamicList();
    }
    if (options && options.Jumptype) {
      //判断跳到个人中心
      this.Jumptype = options.Jumptype;
    }
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
    let windowWidth = this.$utils.SystemInfo().windowWidth;

    this.pjwidth = (windowWidth - 60 - 30) / 4 + "px";
  },
  onShow() {
    this.init();
  },
  onUnload() {
    // 页面关闭后销毁实例
    if (this.Jumptype == 1) {
      uni.reLaunch({
        url: "/pages/user-center/user-center",
      });
    }
  },
  methods: {
    init() {
      this.request2(
        {
          url: "/api/AppletMiai/GetMiAiBaseIfo",
          data: { UserId: this.UserId },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.dataList = res.data;
            this.dataList.imgs = [];
            this.dataList.AlbumList.map((x) => {
              let obj = {
                url: x,
              };
              this.dataList.imgs.push(obj);
            });
          }
        }
      );
    },
    getMyDynamicList() {
      this.request2(
        {
          url: "/api/AppletSchool/GetMiAiDynamicList",
          data: {
            pageIndex: 1,
            pageSize: 4,
            UserTeacher: 0,
            CreateBy: this.UserId,
            UserId: this.mall_UserInfo.UserId,
            TalkId: 0,
          },
        },
        (res) => {
          if (res.resultCode == 1) {
            this.count = res.data.count;
            this.dynamicList = res.data.pageData;
          }
        }
      );
    },
    previewphoto(i) {
      uni.previewImage({
        urls: this.dataList.AlbumList,
        current: i,
      });
    },
    //图片预览
    previewImage(index, images) {
      uni.previewImage({
        urls: images,
        current: index,
      });
    },
    goedit(type) {
      uni.navigateTo({
        url:
          "/pages/blindDate/editData?UserId=" + this.UserId + "&type=" + type,
      });
    },
    dianjiguanzhu(x) {
      //关注操作
      let ID = 0;
      if (x.IsFollow != 0) {
        ID = x.MyFollowId;
      }
      this.request2(
        {
          url: "/api/AppletMiai/GetFollowMember",
          data: {
            ID: ID,
            UserId: x.Id,
          },
        },
        (res) => {
          uni.showToast({
            title: res.message,
            icon: "none",
          });

          this.init();
        }
      );
    },
    gorenz() {
      //去认证
      uni.navigateTo({
        // url: '/pages/blindDate/basicdata'
        url: "/pages/blindDate/editData?UserId=" + this.UserId,
      });
    },
    gosfzrenz() {
      //身份证认证
      if (this.mall_UserInfo.UserId == this.UserId) {
        uni.navigateTo({
          url: "/pages/blindDate/personal/IDidentification",
        });
      }
    },
    gogerendongtai() {
      //跳入动态列表
      uni.navigateTo({
        url: "/pages/friendcircle/my-news?UserId=" + this.UserId,
      });
    },
  },
};
</script>


