import nav from '../../common/navbar/navbar.vue'
import { doFetch, doFetchqs } from "../../components/axios/api";
import url from '../../components/axios/url'
import {checkFalse, checkStatus, checkSuccess} from "../../../static/js/checkStatus";
import { fomatBirthday } from '../../utils/fomatBirthday'
import { formatLongTime } from '@/utils/utils';
import { mapState } from 'vuex';

export default {
  name: "wechatmember-detail",
  data() {
    var validateTel = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入号码'));
      } else {
        if (!this.baseForm.nationCode) {
          this.baseForm.nationCode = '86';
          if(!(/^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value))) {
            callback(new Error('请输入正确号码'));
          }
        }
        if (this.baseForm.nationCode) {
          if(this.baseForm.nationCode == '86') {
            if(!(/^0?1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(value))) {
              callback(new Error('请输入正确号码'));
            }
          }else {
            if(!(/^(\d{1,11})$/.test(value))) {
              callback(new Error('请输入正确号码'));
            }
          }
        }
        callback();
      }
    };
    return {
      memberId: this.$route.query.memberId || '',
      navpath: [
        {
          name: '首页',
          path: ''
        },
        {
          name: '微信会员',
          path: '/wechatmembers'
        },
        {
          name: '会员详情',
          path: ''
        }
      ],
      addresspage: {
        currentPage: 1,
        pageSize: 3,
        totalCount: 0
      },
      page: {
        currentPage: 1,
        pageSize: 20,
        totalCount: 0
      },
      memberData: [],
      tabStatus: false,
      addressData: [],
      labelTagactive: 1,
      memberInfo: {
        memberId: '',
        thirdImgUrl: '',
        accumulatPoints: null,
        storedValue: '',
        couponCount: null,
        cardNum: '',
        cardNumOfClique: '',
        authTime: '',
        gradeName: '',
        gradeId: '',
        limitTime: '',
        cardGivingTime: '',
        openCardChannelDict: '',
        openCardChannel: '',
        numOfSale: 0,
        wechatMallNum: 0,
        numOfEcommerce: 0,
        collectionCount: 0,
        purchaseCount: 0,
        subscribeCount: 0,
        numOfChat: 0,
        numOfTel: 0,
        numOfMarket: 0
      },
      memberbaseinfo: {
        status: 1,
        wxStatus: 0,
        attentionTime: '',
        attentionChannelDict: '',
        cancelAttentionTime: '',
        createTime: '',
        wxCannel: '',
        thirdNickname: '',
        memberName: '',
        memberGender: '',
        memberBirthday: '',
        memberMainStoreArea: '',
        phoneNumber: '',
        unsubscribe: '',
        mainStoreName: '',
        mainClerkName: '',
        shopNames: '',
        storeId: '',
        storeName: ''
      },
      dialogGradeVisible: false,
      gradeForm: {
        gradeId: '',
        remark: ''
      },
      graderules: {
        gradeId: [
          {required: true, message: '请选择等级', trigger: 'change'}
        ],
        remark: [
          {required: true, message: '请输入原因备注', trigger: 'change'}
        ]
      },
      memberGrade: [],
      baseForm: {
        memberName: '',
        memberGender: 0,
        memberBirthday: '',
        memberMainStoreArea: '',
        remark: '',
        mainStoreId: '',
        mainStoreName: '',
        storeIds: '',
        subStoreIdsBak: '',
        phoneNumber: '',
        nationCode: 86
      },
      nationCodeList: [],
      storeIds: [],
      storeList: [],
      dialogBaseVisible: false,
      mainstoreList: [],
      loading: false,
      // 这一块的数据真是乱七八糟 都搞不清谁是谁
      // 请以后写好注释 完全不想看
      systemTags: null,
      tagsList: null,
      fieldList: null,
      remarkList: [],
      isGrilClothes: 0,
      figureInfo: null,
      baseinfoheight: null,
      baseinfoweight: null,
      openChildrenField: null,
      openField: null,
      dictFigureList: null,
      dialogTagVisible: false,
      curTagsList: [],
      dialogRemarkVisible: false,
      formRemark: {
        remark: '',
        memberRemarkId: ''
      },
      rules2: {
        memberName: [
          { required: true,message: '会员姓名不能为空'}
        ],
        memberBirthday: [
          { required: true,message: '生日日期不能为空'}
        ],
        phoneNumber: [
          { validator: validateTel, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState([
      'storeImageUrl'
    ])
  },  
  filters: {
    limitText: val => {
      if(val) {
        if(val.length > 4) {
          val = val.substring(0,4) + '...';
        }
      }
      return val;
    },
    fomatNumber: val => {
      if(val != -1) {
        return val
      }else {
        return '--';
      }
    }
  },
  methods: {
    handlerUpdateRemark() {
      doFetch(url.updateRemark,{
        memberId: this.memberId,
        remark: this.formRemark.remark,
        memberRemarkId: this.formRemark.memberRemarkId
      }).then(res => {
          if(res.data.errorCode === 0) {
            return true;
          }else {
            return false;
          }
      }).then(res => {
        if(res) {
          checkSuccess();
          this.getExtendInfo();
        }else {
          checkFalse();
        }
        this.dialogRemarkVisible = false;
      }).catch(err => {
        checkStatus(err);
      });
    },
    // 切换选中
    changeCheck(list, item) {
      // console.log(list);
      // let count = 0;
      // console.log(item.checkBox);
      // this.$nextTick(_ => {
      //   console.log(list.isCheck);
      // });
      // for(let i = 0; i < list.checkBox.length; i++) {
      //   let val = list.checkBox[i];
      //   for (let j = 0; j < list.subTags.length; j++) {
      //     if (val == list.subTags[j].tagsName) {
      //       list.subTags[j].isCheck = 1;
      //       count++;
      //     }
      //   }
      // }
      // // 是否都选中了
      // if (count == list.subTags.length) {
      //   list.isCheck = 1;
      // }
      // console.log(list, count);
    },
    // 提交编辑导购标签
    updateClerkTags() {
      let tagIds = tagIds ? (tagIds.length ? tagIds.length = 0 : tagIds) : [];

      // 循环对比tagsName 是否在勾选框内部
      this.curTagsList.forEach(ele => {
        ele.subTags.forEach(list => {
          if (ele.checkBox.includes(list.tagsName)) {
            tagIds.push(list.tagsId);
          }
        });
      });

      let curtagIds = null;
      if(tagIds.length > 0) {
        curtagIds = tagIds.join(',');
      }
      //
      if (!curtagIds) {
        this.$message.warning('至少选择一个手工标签！');
        return;
      }
      doFetch(url.updateClerkTags,{
        memberId: this.memberId,
        tagIds: curtagIds
      }).then(res => {
        if(res.data.errorCode === 0) {
         checkSuccess();
         this.tagsList = res.data.result.tagsList;
        }else {
          checkFalse(res.data.message);
        }
      }).then(() => {
        this.dialogTagVisible = false;
      }).catch(err => {
        checkStatus(err);
      })
    },
    editTags() {
      this.getTagList();
      this.dialogTagVisible = true;
    },
    getTagList() {
      doFetch(url.clerkTags,{
        memberId: this.memberId
      }).then(res => {
        if(res.data.errorCode === 0) {
          let tempList = res.data.result.tagsList;
          if(tempList) {
            let paranttag = tempList.filter(item => {
               return item.parentTagsId == null
            });
            paranttag.forEach(item => {
              let subTags = [];
              tempList.forEach(list => {
                if(item.tagsId == list.parentTagsId) {
                  subTags.push(list);
                }
              });
              item.subTags = subTags;
            });
            // 编辑导购标签组

            this.curTagsList = paranttag.map(ele => ({
              ...ele,
              checkBox: ele.subTags.reduce((res, item) => {
                if (item.isCheck) {
                  res.push(item.tagsName);
                }
                return res;
              }, [])
            }));
          }
        }else {
          checkFalse(res.data.message);
        }
      }).catch(err => {
        checkStatus(err);
      })
    },
    closeRemark() {
      this.formRemark.remark = '';
       this.$refs.formRemark.resetFields();
    },
    editRemark(item) {
      this.formRemark.remark = item.remark;
      this.formRemark.memberRemarkId = item.memberRemarkId;
      this.dialogRemarkVisible = true;
    },
    linkRoute(route) {
      this.$router.push({ path: route,query: {'memberId': this.memberId}});
    },
    // 更新头像
    updateImgUrl() {
      doFetch(url.updateImgUrl,{
        memberId: this.memberId
      }).then(res => {
        if(res.data.errorCode === 0) {
          checkSuccess();
          const ret = res.data.result;
          this.memberInfo.thirdImgUrl = !!ret.thirdImgUrl ? ret.thirdImgUrl : this.storeImageUrl;
        }else {
          checkFalse(res.data.message);
        }
      }).catch(err => {
        checkStatus(err);
      })
    },
    closeDialogBase() {
      this.$refs.baseForm.resetFields();
    },
    getcodeList() {
      doFetch(url.codeList).then(res => {
        if(res.data.errorCode === 0) {
          this.nationCodeList = res.data.result.nationCodeList;
        }else {
          checkFalse(res.data.message);
        }
      }).catch(err => {
        checkStatus(err);
      })
    },
    submitBaseInfo(formName) {
      if(!this.baseForm.memberName){
        checkFalse('姓名不能为空');
        return false;
      }
      if(!this.baseForm.memberBirthday){
        checkFalse('生日不能为空');
        return false;
      }
      if(!this.baseForm.phoneNumber){
        checkFalse('手机号码不能为空');
        return false;
      }
      if(!this.baseForm.remark){
        checkFalse('备注不能为空');
        return false;
      }
      this.$refs[formName].validate((valid) => {
        if(valid) {
          let storeIds = '';
          if(this.storeIds && this.storeIds.length > 0) {
            storeIds = this.storeIds.join(',');
          }
          let subStoreIdsBak = '';
          if(this.baseForm.subStoreIdsBak && this.baseForm.subStoreIdsBak.length > 0) {
            subStoreIdsBak = this.baseForm.subStoreIdsBak.join(',');
          }
          let params = {
            memberId: this.memberId,
            memberName: this.baseForm.memberName,
            memberGender: this.baseForm.memberGender,
            memberBirthday: fomatBirthday(this.baseForm.memberBirthday),
            // memberMainStoreArea: this.baseForm.memberMainStoreArea,
            remark: this.baseForm.remark,
            mainStoreId: this.baseForm.mainStoreId,
            storeIds: storeIds,
            subStoreIdsBak: subStoreIdsBak,
            phoneNumber: this.baseForm.phoneNumber,
            nationCode: this.baseForm.nationCode
          };
          doFetch(url.updateBaseDetail,params).then(res => {
            this.$refs[formName].resetFields();
            if(res.data.errorCode === 0) {
              checkSuccess();
              this.dialogBaseVisible = false;
              return true;
            }else {
              checkFalse(res.data.message);
              return false;
            }
          }).then((res) => {
            this.dialogBaseVisible = false;
            if(res) {
              setTimeout(() => {
                this.getBaseDetail();
              },3000);
            }
          }).catch(err => {
            checkStatus(err);
            this.dialogSubStoreVisible = false;
            this.$refs[formName].resetFields();
          })
        }else {
          return false;
        }
      });
    },
    handleStoreKeyup:  _.debounce(
      function(val) {
        this.getStoreCodeName(val);
      }
      , 20),
    getStoreCodeName(val) {
      doFetchqs(url.storeCodeName,{
        searchParam: val,
        flag: 1
      }).then(res => {
        if(res.data.errorCode === 0) {
          this.storeList = res.data.result;
        }else {
          checkFalse(res.data.message);
        }
      }).catch(err => {
        checkStatus(err);
      })
    },
    handleKeyup: _.debounce(
      function(val) {
        this.getMainStoreCodeName(val);
      }
      , 20),
    getMainStoreCodeName(val) {
      doFetchqs(url.storeCodeName,{
        searchParam: val,
        flag: 1
      }).then(res => {
        if(res.data.errorCode === 0) {
          this.mainstoreList = res.data.result;
        }else {
          checkFalse(res.data.message);
        }
      }).catch(err => {
        checkStatus(err);
      })
    },
    // 删除导购备注
    deleteRemark(obj) {
      this.memberRemarkId = obj.memberRemarkId;
      doFetch('/api-member/member-load-delete-remark', {
        memberRemarkId: this.memberRemarkId
      }).then(res => {
        if (res.data.errorCode === 0) {
          checkSuccess();
          this.getExtendInfo();
        }
      });
    },
    eidtBaseInfo() {
      this.dialogBaseVisible = true;
      this.getcodeList();
      this.baseForm = {
          memberName: this.memberbaseinfo.memberName,
          memberGender: this.memberbaseinfo.memberGender,
          memberBirthday: this.memberbaseinfo.memberBirthday,
          memberMainStoreArea: this.memberbaseinfo.memberMainStoreArea,
          remark: this.memberbaseinfo.remark,
          mainStoreId: this.memberbaseinfo.mainStoreId,
          mainStoreName: this.memberbaseinfo.mainStoreName,
          phoneNumber: this.memberbaseinfo.phoneNumber,
          nationCode: this.memberbaseinfo.nationCode
      };
      if(this.memberbaseinfo.mainStoreId){
        this.mainstoreList = [{
          storeId:  this.memberbaseinfo.mainStoreId,
          storeName: this.memberbaseinfo.mainStoreName
        }]
      }
      if(this.memberbaseinfo.shopNames && this.memberbaseinfo.shopNames.length > 0) {
        this.storeList = this.memberbaseinfo.shopNames;
        let storeIds = this.memberbaseinfo.shopNames.map(item => {
           return item.storeId
        });
        this.storeIds = storeIds;
        this.baseForm.subStoreIdsBak = _.cloneDeep(storeIds);
      }
    },
    submitGrade(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          doFetch(url.memberGrade,{
            memberId: this.memberInfo.memberId,
            remark: this.gradeForm.remark,
            gradeId: this.gradeForm.gradeId,
          }).then(res => {
            this.$refs[formName].resetFields();
            if(res.data.errorCode === 0) {
              this.getDetail(this.memberId);
              checkSuccess();
              return true;
            }else {
              checkFalse(res.data.message);
              return false;
            }
          }).then(res => {
            this.dialogGradeVisible = false;
            if(res) {
              setTimeout(() => {
                this.getDetail();
                this.getLogPage();
              },2000);
            }
          }).catch(err => {
            checkStatus(err);
            this.dialogGradeVisible = false;
            this.$refs[formName].resetFields();
          })
        }else {
          return false;
        }
      });
    },
    getGradeList() {
      doFetch(url.gradeList).then(res => {
        if(res.data.errorCode === 0) {
          this.memberGrade = res.data.result;
        }else {
          checkFalse(res.data.message);
          return false;
        }
      }).catch(err => {
        checkStatus(err);
      })
    },
    cancleGrade() {
      this.$refs.gradeForm.resetFields();
    },
    handlerGrade() {
      this.getGradeList();
      this.gradeForm.gradeId = this.memberInfo.gradeId;
      this.dialogGradeVisible = true;
    },
    cardDetail(memberId) {
      this.$router.push({ path:'/cardvoucher',query: {'memberId': memberId}});
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getLogPage();
    },
    handleAddressCurrentChange(val) {
      this.addresspage.currentPage = val;
      this.getAddressPage();
    },
    handleSizeChange(val){
      this.page.pageSize = val;
      this.getLogPage();
    },
    getDetail() {
      doFetch(url.memberDetail,{
        memberId: this.memberId,
        pageName: 'wxMember'
      }).then(res => {
        if(res.data.errorCode === 0) {
          const ret = res.data.result
          this.memberInfo = ret.memberInfo;
          this.memberInfo.thirdImgUrl = ret.memberInfo.thirdImgUrl ? ret.memberInfo.thirdImgUrl : this.storeImageUrl ;
        }else {
          checkFalse(res.data.message);
          return false;
        }
      }).catch(err => {
        checkStatus(err);
      })
    },
    goback() {
      this.$router.push({ path:'/wechatmembers'});
    },
    getAddressPage() {
      doFetch(url.addressPage,{
        memberId: this.memberId,
        pageSize: this.addresspage.pageSize,
        currentPage: this.addresspage.currentPage
      }).then(res => {
        if(res.data.errorCode === 0) {
          this.addressData = res.data.result.page.result;
          this.addresspage.currentPage = res.data.result.page.currentPage;
          this.addresspage.totalCount = res.data.result.page.totalCount;
        }else {
          checkFalse(res.data.message);
          return false;
        }
      }).catch(err => {
        checkStatus(err);
      })
    },
    getExtendInfo() {
      doFetch(url.extendInfo,{
        memberId: this.memberId,
      }).then(res => {
        if(res.data.errorCode === 0) {
          this.systemTags = res.data.result.systemTags;
          this.tagsList = res.data.result.tagsList;
          // 导购备注信息
          if (this.remarkList) {
            this.remarkList = res.data.result.remarkList.map(ele => ({
              ...ele,
              createTime: ele.createTime != -1 ? formatLongTime(ele.createTime, 1) : '--'
            }));
          }
          console.log(this.remarkList);
          this.openField = res.data.result.openField;
          this.fieldList = res.data.result.fieldList;
          this.isGrilClothes = res.data.result.isGrilClothes;
          this.figureInfo = res.data.result.figureInfo;
          if(this.figureInfo) {
            if(res.data.result.figureInfo.baseinfo) {
              this.baseinfoheight = res.data.result.figureInfo.baseinfo[0];
              this.baseinfoweight = res.data.result.figureInfo.baseinfo[0];
            }
          }
          this.dictFigureList = res.data.result.dictFigureList;
          this.openChildrenField = res.data.result.openChildrenField;
          this.openField = res.data.result.openField;
        }else {
          checkFalse(res.data.message);
          return false;
        }
      }).catch(err => {
        checkStatus(err);
      })
    },
    getBaseDetail() {
      doFetch(url.baseDetail,{
        memberId: this.memberId,
        pageName: 'wxMember'
      }).then(res => {
        if(res.data.errorCode === 0) {
          // console.log(res.data.result)
          this.memberbaseinfo = res.data.result.member;
        }else {
          checkFalse(res.data.message);
          return false;
        }
      }).catch(err => {
        checkStatus(err);
      })
    },
    getLogPage() {
      doFetch(url.logPage,{
        memberId: this.memberId,
        pageSize: this.page.pageSize,
        currentPage: this.page.currentPage
      }).then(res => {
        if(res.data.errorCode === 0) {
          this.memberData = res.data.result.page.result;
          this.page.currentPage = res.data.result.page.currentPage;
          this.page.totalCount = res.data.result.page.totalCount;
        }else {
          checkFalse(res.data.message);
          return false;
        }
      }).catch(err => {
        checkStatus(err);
      })
    }
  },
  created() {
    if (!this.storeImageUrl) {
      this.$store.dispatch('getStorePicture');
    }
    this.$store.commit('mutations-slide', false);
    const fromPage = this.$route.query.fromPage;
    if (fromPage === 'memberGroup') {
      this.navpath[1].name = '会员标签分组';
    }
  },
  beforeMount() {
    if(this.memberId) {
      this.getDetail(this.memberId);
      this.getAddressPage();
      this.getExtendInfo();
      this.getBaseDetail();
      this.getLogPage();
    }
  },
  components: {
    'v-nav': nav
  }
}
