<template>
  <div class="app-content">
    <!-- 客户信息 -->
    <div class="module-com user-info">
      <div class="user-wrap">
        <app-avatar-module :src="data.avatarUrl" />
        <div class="user-top-right">
          <div>
            <div class="flex-center">
                <span class="app-size-32">{{ data.name }}</span>

                <template v-if="data.member > 0">
                  <app-vip-module class="level-img" :vipImg="`${constant.imgUrl}/retail/member/grade/${data.member}.png`" />
                </template>
                <template v-else>
                  <template v-if="data.mobile == ''">
                    <app-vip-module class="level-img" :vipImg="`${constant.imgUrl}/retail/member/grade/customer.png`" />
                  </template>
                  <template v-else>
                    <app-vip-module class="level-img" :vipImg="`${constant.imgUrl}/retail/member/grade/member.png`" />
                  </template>
                </template>

            </div>
            <div class="app-color-3">ID：{{ data.id }}</div>
          </div>
          <div class="source-wrap">
            <i
              v-if="data.sourceType == 0"
              :class="[data.sourceType == 0? 'iconweixinlaiyuanColor' : '']"
              class="iconfont iconweixinlaiyuan"
              style="font-size:42rpx;"
            ></i>
            <i
              v-else-if="data.sourceType == 1"
              :class="[data.sourceType == 1? 'zhifubaoColor' : '']"
              class="iconfont iconzhifubao"
              style="font-size:42rpx;"
            ></i>
            <i
              v-else-if="data.sourceType == 2"
              :class="[data.sourceType == 2? 'app-color-4' : '']"
              class="iconfont iconxiaochengxu1"
              style="font-size:42rpx;"
            ></i>
            <i
              v-else-if="data.sourceType == 3"
              :class="[data.sourceType == 3? 'app-color-4' : '']"
              class="iconfont iconzhangshangcaifuyemianshoujiban344"
              style="font-size:42rpx;"
            ></i>
            <i
              v-else-if="data.sourceType == 4"
              :class="[data.sourceType == 4? 'app-color-4' : '']"
              class="iconfont iconwaimai"
              style="font-size:42rpx;"
            ></i>
            <i
              v-if="data.sourceType != 1"
              class="iconfont iconweixingongzhonghao"
              :class="[data.subscribe==1? 'app-color-4' : '']"
              style="font-size:42rpx;"
            ></i>
            <i
              @click="data.mobile&&callUp(data.mobile)"
              :class="['iconfont', 'iconshoujihao1',data.mobile?'mobileColor':'']"
              style="font-size:42rpx;"
            ></i>
          </div>
        </div>
      </div>
      <div class="user-bottom">
        <div class="data-list" v-for="(item, index) in fundsData" :key="index">
          <div class="app-size-30 app-bold">{{ item.value }}</div>
          <div class="app-color-3">{{ item.name }}</div>
        </div>
      </div>
    </div>

    <!-- 标签 -->

    <div class="module-com remark-wrap">
      <div class="app-blod"><span>标签</span><i class="iconfont icontianjiakehu" @click="setUserTag" style="float:right;font-size:40rpx;"></i></div>
      <div class="list-wrap">

        <span class="user_tag">常买散花</span>
        <span class="user_tag">企业客户</span>
        <span class="user_tag">生日送过</span>

      </div>
    </div>

    <!-- 客户按钮 -->
    <div class="module-com tabs-wrap">
      <div class="tabs-list" v-for="(item, index) in tabsData" :key="index" @click="pageTo(item)">
        <div class="tabs-img">
          <img :src="item.img" alt mode="widthFix" />
        </div>
        <div class="tabs-name">{{ item.name }}</div>
      </div>
    </div>
    <!-- 备注 -->
    <div class="module-com remark-wrap" v-if="!$util.isEmpty(data.remarkList)">
      <div class="app-blod">客户备注</div>
      <div class="list-wrap">
        <div class="list-line" v-for="(item, index) in data.remarkList" :key="index">
          <div>{{ item.remark }}</div>
          <div @click="delRemarkFn(item)">
            <i class="iconfont icondelete"></i>
          </div>
        </div>
      </div>
    </div>
    <!-- 消费记录 -->
    <div class="module-com remark-wrap" v-if="!$util.isEmpty(data.orderList)">
      <div class="app-blod">最近消费</div>
      <div class="list-wrap">
        <block v-for="(item, index) in data.orderList" :key="index">
          <div class="list-line" v-if="index < 3 || orderMoreStatus">
            <div class="flex-center">
              <div class="time">{{ item.createTime }}</div>
              <div>{{ item.orderName }}</div>
            </div>
            <div class="price">￥{{ item.actPrice }}</div>
          </div>
        </block>
      </div>
      <!-- <div class="more-text" v-if="!orderMoreStatus" @click="orderMoreFn">更多 ></div> -->
    </div>

    <!-- 客户标签 -->
    <modal-module
      :show="userTagModal"
      @cancel="modalCancel"
      @click="userTagModalClick"
      :maskClosable="false"
      title="客户标签"
      padding="30rpx 30rpx"
    >
      <template v-slot:content>
        <div class="app-modal-input-wrap">

          <view style="padding:0 8px 10px 8px;">
              <span class="user_tag">恋人</span>
              <span class="user_tag">学生</span>
              <span class="user_tag">准婚</span>
              <span class="user_tag">同行</span>
              <span class="user_tag">常买散花</span>
              <span class="user_tag">企业客户</span>
              <span class="user_tag">生日送过</span>
              <span class="user_tag">酒店</span>
              <span class="user_tag">影楼</span>
              <span class="user_tag">开花艺课</span>
              <span class="user_tag">学员</span>
          </view>

        </div>
      </template>
    </modal-module>

    <!-- 充值弹窗 -->
    <modal-module
      :show="rechargeModal"
      @cancel="modalCancel"
      @click="rechargeModalClick"
      :maskClosable="false"
      title="充值"
      padding="30rpx 30rpx"
    >
      <template v-slot:content>
        <div class="app-modal-input-wrap">
          <div class="inp-list-line">
            <div class="line-label">充值金额</div>
            <div class="line-input">
              <input
                type="text"
                placeholder="请输入金额（元）"
                v-model="rechargeForm.rechargeAmount"
                :adjust-position="false"
                class="inp-input"
              />
            </div>
          </div>
          <div class="inp-list-line">
            <div class="line-label">确认密码</div>
            <div class="line-input">
              <input
                type="password"
                v-model="rechargeForm.confirmPassword"
                :adjust-position="false"
                class="inp-input"
              />
            </div>
          </div>
        </div>
      </template>
    </modal-module>
    <!-- 修改密码弹窗 -->
    <modal-module
      :show="passwordModal"
      @cancel="modalCancel"
      @click="passwordModalClick"
      :maskClosable="false"
      title="重置密码"
      padding="30rpx 30rpx"
    >
      <template v-slot:content>
        <div class="app-modal-input-wrap">
          <div class="inp-list-line">
            <div class="line-label">密码</div>
            <div class="line-input">
              <input
                type="password"
                v-model="passwordForm.password"
                :adjust-position="false"
                class="inp-input"
              />
            </div>
          </div>
        </div>
      </template>
    </modal-module>
    <!-- 升级 -->
    <modal-module
      :show="upgradeModal"
      @cancel="modalCancel"
      @click="upgradeModalClick"
      :maskClosable="false"
      title="升级"
      padding="30rpx 30rpx"
    >
      <template v-slot:content>
        <div class="app-modal-input-wrap">
          <div class="inp-list-line">
            <div class="line-label">会员等级</div>
            <div class="line-input">
              <picker
                mode="selector"
                :value="upgradeForm.member"
                :range="levelData.list"
                range-key="level"
                @change="changeLevelFn"
                class="inp-select"
              >
                <div v-if="upgradeForm.member">{{ levelSelData.level }}</div>
                <div class="tui-placeholder" v-else>请选择</div>
              </picker>
            </div>
          </div>
          <div class="inp-list-line">
            <div class="line-label">确认密码</div>
            <div class="line-input">
              <input type="text" v-model="upgradeForm.confirmPassword" class="inp-input" />
            </div>
          </div>
        </div>
      </template>
    </modal-module>
    <!-- 添加备注 -->
    <modal-module
      :show="remarkModal"
      @cancel="modalCancel"
      @click="remarkModalClick"
      :maskClosable="false"
      title="添加客户备注"
      padding="30rpx 30rpx"
    >
      <template v-slot:content>
        <div class="app-modal-input-wrap">
          <div class="inp-list-line">
            <textarea
              v-model="remarkForm.remark"
              placeholder-style="phcolor"
              placeholder="请填写客户信息备注内容，如客户喜好、居住地址等"
            />
          </div>
        </div>
      </template>
    </modal-module>
    <!-- 删除备注弹窗 -->
    <modal-module
      :show="promptRemarkModal"
      @cancel="modalCancel"
      @click="promptModalClick"
      :content="promptModalText"
      color="#333"
      :size="32"
      padding="30rpx 30rpx"
    ></modal-module>
    <kd-entrance></kd-entrance>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import AppVipModule from "@/components/module/app-vip";
import AppAvatarModule from "@/components/module/app-avatar";
import ModalModule from "@/components/plugin/modal";
// api
import { getLevel } from "@/utils/config";
import {
  getUserDet,
  remarkAdd,
  remarkDel,
  upgrade,
  rechargeB,
  resetPassword
} from "@/api/member";
export default {
  name: "member-detail",
  components: {
    AppVipModule,
    AppAvatarModule,
    ModalModule
  },
  props: {},
  data() {
    return {
      constant: this.$constant,
      // data
      data: {},
      // modal
      rechargeModal: false,
      userTagModal:false,
      passwordModal: false,
      upgradeModal: false,
      remarkModal: false,
      // 用户资金情况
      fundsData: [
        {
          name: "成长值",
          value: 0
        },
        {
          name: "消费次数",
          value: 0
        },
        {
          name: "累计消费",
          value: 0
        }
      ],
      // tab按钮
      tabsData: [
        {
          name: "优惠券",
          img: `${this.$constant.imgUrl}/retail/member/tab-icon-1.png`,
          funtion: () => {
            this.$msg("即将开通...");
          }
        },
        {
          name: "老带新",
          img: `${this.$constant.imgUrl}/retail/member/tab-icon-2.png`,
          funtion: () => {
            this.$msg("即将开通...");
          }
        },
        {
          name: "备注",
          img: `${this.$constant.imgUrl}/retail/member/tab-icon-4.png`,
          funtion: () => {
            //this.remarkModal = true;
			this.$msg("即将开通...")
          }
        },
        {
          name: "重置密码",
          img: `${this.$constant.imgUrl}/retail/member/tab-icon-6.png`,
          funtion: () => {
            //this.passwordModal = true;
			this.$msg("即将开通...")
          }
        }
      ],
      // 重置密码
      passwordForm: {
        password: ""
      },
      // 充值
      rechargeForm: {
        rechargeAmount: "",
        confirmPassword: ""
      },
      // 升级
      levelSelData: {},
      upgradeForm: {
        member: "",
        confirmPassword: ""
      },
      // 备注
      remarkForm: {
        remark: ""
      },
      remarkOperateData: {},
      // 订单
      orderMoreStatus: false,
      // 确认操作提示
      promptRemarkModal: false,
      promptModalText: "是否要删除该备注？"
    };
  },
  computed: {
    ...mapGetters({ levelData: "getLevel" })
  },
  onLoad() {},
  methods: {
    callUp(phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      });
    },
    //设置客户标签
    setUserTag(){
      this.userTagModal = true;
    },
    init() {
      this._getCustomDet();
      getLevel();
    },
    _getCustomDet() {
      getUserDet({ userId: this.option.id }).then(res => {
        if (this.$util.isEmpty(res.data)) {
          return false;
        }
        this.data = res.data;
        this.fundsData[0].value = res.data.growth;
        this.fundsData[1].value = res.data.buyNum;
        this.fundsData[2].value = res.data.buyAmount;
      });
    },
    _rechargeB() {
      rechargeB({
        userId: this.data.id,
        ...this.rechargeForm
      }).then(res => {
        this._getCustomDet();
        this.$msg("充值成功！");
        this.modalCancel();
      });
    },
    _upgrade() {
      upgrade({
        userId: this.data.id,
        ...this.upgradeForm
      }).then(res => {
        this.$msg("升级成功！");
        this.modalCancel();
      });
    },
    _resetPassword() {
      resetPassword({
        userId: this.data.id,
        ...this.passwordForm
      }).then(res => {
        this.$msg("重置成功！");
        this.modalCancel();
      });
    },
    _remarkAdd() {
      remarkAdd({
        userId: this.data.id,
        ...this.remarkForm
      }).then(res => {
        this.$msg("添加成功！");
        this.modalCancel();
        this._getCustomDet();
      });
    },
    _delRemark() {
      remarkDel({ id: this.remarkOperateData.id }).then(res => {
        this.$msg("删除成功！");
        this.modalCancel();
        this._getCustomDet();
      });
    },
    // operate ===========================
    orderMoreFn() {
      this.orderMoreStatus = false;
    },
    delRemarkFn(item) {
      this.remarkOperateData = item;
      this.promptModalText = "是否要删除该备注？";
      this.promptRemarkModal = true;
    },
    // 弹窗按钮
    changeLevelFn(e) {
      this.levelSelData = this.levelData.list[e.detail.value];
      this.upgradeForm.member = this.levelSelData.level;
    },
    passwordModalClick(e) {
      if (e.index === 0) {
        this.modalCancel();
      } else {
        this.modalCancel();
        this.promptModalText = "确认重置密码？";
        this.promptRemarkModal = true;
      }
    },
    upgradeModalClick(e) {
      if (e.index === 0) {
        this.modalCancel();
      } else {
        this.modalCancel();
        this.promptModalText = "确认升级？";
        this.promptRemarkModal = true;
      }
    },
    rechargeModalClick(e) {
      if (e.index === 0) {
        this.modalCancel();
      } else {
        this.modalCancel();
        this.promptModalText = "确认充值？";
        this.promptRemarkModal = true;
      }
    },
    userTagModalClick(e){
      if (e.index === 0) {
        this.modalCancel();
      } else {
        this.modalCancel();
      }
    },
    remarkModalClick(e) {
      if (e.index === 0) {
        this.modalCancel();
      } else {
        this._remarkAdd();
      }
    },
    promptModalClick(e) {
      if (e.index === 0) {
        this.modalCancel();
      } else {
        if (this.promptModalText == "是否要删除该备注？") {
          this._delRemark();
        }
        if (this.promptModalText == "确认升级？") {
          this._upgrade();
        }
        if (this.promptModalText == "确认充值？") {
          this._rechargeB();
        }
        if (this.promptModalText == "确认重置密码？") {
          this._resetPassword();
        }
      }
    },
    modalCancel() {
      this.rechargeModal = false;
      this.userTagModal = false;
      this.passwordModal = false;
      this.upgradeModal = false;
      this.remarkModal = false;
      this.promptRemarkModal = false;
    }
  }
};
</script>

<style lang='scss' scoped>
.app-content {
  background-image: url("../../static/images/member/bg.png");
  background-size: 100% 330px;
  background-repeat: no-repeat;
  padding-top: 30px;
  padding-bottom: 30px;
}
// 公共
.module-com {
  margin: 0 30px 20px;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0px 6px 16px #ddd;
  border-radius: 10px;
}
// 用户信息
.user-info {
  padding: 40px 30px 50px;
  .user-wrap {
    @include disFlex(center, space-between);
    margin-bottom: 60px;
    .user-top-right {
      @include disFlex(flex-start, space-between);
      width: calc(100% - 120px);
      .flex-center {
        margin-bottom: 14px;
        .level-img {
          margin-left: 10px;
          width: 80px;
          /deep/.vip-text {
            left: 70px;
            top: 3px;
          }
        }
      }
      .source-wrap {
        .iconfont {
          margin-left: 10px;
        }
        .iconweixinlaiyuan.iconweixinlaiyuanColor {
          color: #35b801;
        }
        .iconzhifubao.zhifubaoColor {
          color: #00aaed;
        }
        .iconshoujihao1.mobileColor {
          color: #fc2e47;
        }
      }
    }
  }
  .user-bottom {
    width: 100%;
    @include disFlex(center, space-between);
    .data-list {
      text-align: center;
      .app-size-30 {
        margin-bottom: 14px;
      }
    }
  }
}
// tabs
.tabs-wrap {
  padding: 40px 10px;
  @include disFlex(center, center);
  flex-wrap: wrap;
  .tabs-list {
    width: 25%;
    margin-bottom: 50px;
    text-align: center;
    .tabs-img {
      width: 50px;
      height: 50px;
      margin: 0 auto 14px;
      img {
        height: 100%;
      }
    }
    .tabs-name {
      color: $fontColor2;
    }
    &:nth-child(n + 5) {
      margin-bottom: 0;
    }
  }
}
// 备注
.remark-wrap {
  .list-wrap {
    margin-top: 24px;
    .list-line {
      @include disFlex(center, space-between);
      margin-top: 10px;
      padding: 16px 20px;
      background-color: #f7f7f8;
      color: $fontColor2;
      border-radius: 4px;
      .iconfont {
        color: $fontColor3;
      }
      .time {
        margin-right: 70px;
      }
      .price {
        color: #333;
      }
    }
  }
  .more-text {
    margin-top: 24px;
    text-align: center;
    color: $fontColor3;
  }
}
.user_tag{
  border:1px solid #CCCCCC;
  padding:5px 12px 5px 12px;
  border-radius:25px;
  color:#BBBBBB;
  margin-right:10px;
  margin-bottom:12px;
  display:inline-block;
  font-size:30rpx;
}
</style>