<template>
  <div style="width: 208px; position: absolute">
    <div class="block">
      <div style="display: flex; justify-content: space-between">
        <div style="display: flex; margin: 12px">
          <img src="@/assets/sidebar/user.png" alt class="banner-icon" />
          <span class="banner">{{ $t("sidebar.userInfo") }}</span>
        </div>
        <div
          style="display: flex; margin: 12px; cursor: pointer"
          @click="reload"
        >
          <img
            src="@/assets/sidebar/fresh.png"
            alt
            style="width: 26px; height: 26px"
          />
          <span
            style="
              font-size: 14px;
              font-weight: 500;
              line-height: 26px;
              text-decoration: underline;
              color: #27417c;
            "
            >{{ $t("sidebar.reload") }}</span
          >
        </div>
      </div>
      <div style="width: 100%; text-align: center">
        <el-image
          style="width: 36px; height: 36px; border-radius: 50%"
          :src="userInfo.avatar"
          fit="cover"
        >
          <div slot="error" class="image-slot">
            <img
              src="@/assets/default.png"
              alt
              style="width: 36px; height: 36px"
            />
          </div>
        </el-image>
      </div>
      <div
        style="
          width: 100%;
          text-align: center;
          font-size: 14px;
          font-weight: bold;
          color: #27417c;
          line-height: 36px;
        "
      >
        {{ userInfo.nickname }}
        <span class="memberLevel">{{
          userInfo.userScoreLevelInfo.levelName
        }}</span>
      </div>
      <jd-button
        style="margin: 0 17px"
        :name="$t('sidebar.logout')"
        @click.native="logout"
      />
      <div
        style="
          width: 100%;
          height: 42px;
          margin-top: 26px;
          display: flex;
          cursor: pointer;
          background: #659fd5;
          color: #fff !important;
        "
        @click="index"
      >
        <img
          src="@/assets/sidebar/home.png"
          alt
          style="width: 26px; height: 26px; margin-top: 8px; margin-left: 14px"
        />
        <span
          style="
            font-size: 14px;
            font-weight: 500;
            line-height: 42px;
            margin-left: 5px;
          "
          >{{ $t("sidebar.home") }}</span
        >
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-top: 16px;
          cursor: pointer;
        "
        class="hover"
        :class="{ active: action === 'Person' }"
        @click="profile"
      >
        <div style="display: flex">
          <img
            v-if="action == 'Person'"
            src="@/assets/sidebar/user.png"
            alt
            style="
              width: 26px;
              height: 26px;
              margin-top: 10px;
              margin-left: 17px;
            "
          />
          <img
            v-else
            src="@/assets/sidebar/user.png"
            alt
            style="
              width: 26px;
              height: 26px;
              margin-top: 10px;
              margin-left: 17px;
            "
          />
          <span
            style="
              font-size: 14px;
              font-weight: 500;
              line-height: 42px;
              margin-left: 5px;
            "
            >{{ $t("route.personalCenter") }}</span
          >
        </div>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-top: 16px;
          cursor: pointer;
        "
        class="hover"
        :class="{ active: action === 'Controlorder' }"
        @click="controlorder"
      >
        <div style="display: flex">
          <img
            v-if="action == 'Controlorder'"
            src="@/assets/sidebar1/order.png"
            alt
            style="
              width: 26px;
              height: 26px;
              margin-top: 10px;
              margin-left: 17px;
            "
          />
          <img
            v-else
            src="@/assets/sidebar/order1.png"
            alt
            style="
              width: 26px;
              height: 26px;
              margin-top: 10px;
              margin-left: 17px;
            "
          />
          <span
            style="
              font-size: 14px;
              font-weight: 500;
              line-height: 42px;
              margin-left: 5px;
            "
            >{{ $t("sidebar.controlOrder") }}</span
          >
        </div>
        <div style="display: flex">
          <span
            style="
              font-size: 14px;
              font-weight: 500;
              color: #333333;
              line-height: 42px;
              margin-right: 30px;
            "
            >({{ mark.cargoControlAllNum }})</span
          >
        </div>
      </div>
      <div
        v-if="false"
        style="
          display: flex;
          justify-content: space-between;
          margin-top: 16px;
          cursor: pointer;
        "
        class="hover"
        :class="{ active: action === 'Waitmoneyorder' }"
        @click="waitmoneyorder"
      >
        <div style="display: flex">
          <img
            v-if="action == 'Waitmoneyorder'"
            src="@/assets/sidebar1/other.png"
            alt
            style="
              width: 26px;
              height: 26px;
              margin-top: 10px;
              margin-left: 17px;
            "
          />
          <img
            v-else
            src="@/assets/sidebar/order2.png"
            alt
            style="
              width: 26px;
              height: 26px;
              margin-top: 10px;
              margin-left: 17px;
            "
          />
          <span
            style="
              font-size: 14px;
              font-weight: 500;
              line-height: 42px;
              margin-left: 5px;
            "
            >{{ $t("sidebar.moneyOrder") }}</span
          >
        </div>
        <div style="display: flex">
          <span
            style="
              font-size: 14px;
              font-weight: 500;
              color: #333333;
              line-height: 42px;
              margin-right: 30px;
            "
            >({{ mark.notSettlementNum }})</span
          >
        </div>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-top: 16px;
          cursor: pointer;
        "
        class="hover"
        :class="{ active: action === 'Message' }"
        @click="message"
      >
        <div style="display: flex">
          <img
            v-if="action == 'Message'"
            src="@/assets/sidebar1/message.png"
            alt
            style="
              width: 26px;
              height: 26px;
              margin-top: 10px;
              margin-left: 17px;
            "
          />
          <img
            v-else
            src="@/assets/sidebar/msg.png"
            alt
            style="
              width: 26px;
              height: 26px;
              margin-top: 10px;
              margin-left: 17px;
            "
          />
          <span
            style="
              font-size: 14px;
              font-weight: 500;
              line-height: 42px;
              margin-left: 5px;
            "
            >{{ $t("sidebar.notReadMessage") }}</span
          >
        </div>
        <div style="display: flex">
          <span
            style="
              font-size: 14px;
              font-weight: 500;
              color: #333333;
              line-height: 42px;
              margin-right: 30px;
            "
            >({{ mark.unreadMessageNum }})</span
          >
        </div>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-top: 16px;
          cursor: pointer;
        "
        class="hover"
        :class="{ active: action === 'Coupons' }"
        @click="coupon"
      >
        <div style="display: flex">
          <img
            v-if="action == 'Coupons'"
            src="@/assets/sidebar1/coupon.png"
            alt
            style="
              width: 26px;
              height: 26px;
              margin-top: 10px;
              margin-left: 17px;
            "
          />
          <img
            v-else
            src="@/assets/sidebar/coupons.png"
            alt
            style="
              width: 26px;
              height: 26px;
              margin-top: 10px;
              margin-left: 17px;
            "
          />
          <span
            style="
              font-size: 14px;
              font-weight: 500;
              line-height: 42px;
              margin-left: 5px;
            "
            >{{ $t("sidebar.coupons") }}</span
          >
        </div>
        <div style="display: flex">
          <span
            style="
              font-size: 14px;
              font-weight: 500;
              color: #333333;
              line-height: 42px;
              margin-right: 30px;
            "
            >({{ mark.couponNum }})</span
          >
        </div>
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-top: 16px;
          cursor: pointer;
        "
        v-if ="switchState"
        class="hover"
        :class="{ active: action === 'Integral' }"
        @click="myIntegral"
      >
        <div style="display: flex">
          <img
            src="@/assets/sidebar/rage.png"
            alt
            style="
              width: 26px;
              height: 20px;
              margin-top: 10px;
              margin-left: 17px;
            "
          />
          <span
            style="
              font-size: 14px;
              font-weight: 500;
              line-height: 42px;
              margin-left: 5px;
            "
            >{{ $t("route.integral") }}</span
          >
        </div>
      </div>
      <jd-button
        style="margin: 16px auto; width: 160px"
        :name="$t('sidebar.delivery')"
        @click.native="transVisble = true"
      />
      <jd-button
        v-if="check"
        style="margin: 16px auto; width: 160px"
        :name="$t('sidebar.price')"
        dark
        @click.native="price"
      />
      <div
        style="display: flex; margin-top: 16px; cursor: pointer"
        class="hover"
        @click="old"
      >
        <span
          style="
            font-size: 14px;
            font-weight: 500;
            line-height: 48px;
            margin-left: 35px;
          "
          >{{ $t("旧订单") }}</span
        >
      </div>
      <br />
    </div>
    <div class="block">
      <div style="display: flex">
        <div style="display: flex; margin: 12px">
          <img src="@/assets/sidebar/panel.png" alt class="banner-icon" />
          <span class="banner">{{ $t("sidebar.myPanel") }}</span>
        </div>
      </div>
      <div
        style="
          width: 100%;
          height: 42px;
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
        "
        class="hover"
        @click="handerShowMyOrderMenu"
      >
        <div style="display: flex; margin-top: 10px; margin-left: 13px">
          <img
            src="@/assets/sidebar/orderBlack.png"
            alt
            style="width: 26px; height: 26px"
          />
          <span
            style="
              font-size: 14px;
              font-weight: bold;
              line-height: 26px;
              margin-left: 5px;
            "
            >{{ $t("sidebar.myOrder") }}</span
          >
        </div>
        <div class="arrow-top" :class="{ arrowBottom: showMyOrder }" />
      </div>
      <el-collapse-transition>
        <div v-show="showMyOrder">
          <div
            style="margin-top: 20px; cursor: pointer"
            class="hover"
            :class="{ active: action === 'Postorder' }"
            @click="postorder"
          >
            <span
              style="
                font-size: 13px;
                font-weight: 400;
                line-height: 32px;
                margin-left: 44px;
              "
              >{{ $t("sidebar.myPost") }}</span
            >
          </div>
          <div
            style="margin-top: 16px; cursor: pointer"
            class="hover"
            :class="{ active: action === 'Receivedorder' }"
            @click="receivedorder"
          >
            <span
              style="
                font-size: 13px;
                font-weight: 400;
                line-height: 32px;
                margin-left: 44px;
              "
              >{{ $t("sidebar.myReceivedo") }}</span
            >
          </div>
        </div>
      </el-collapse-transition>
      <div
        style="display: flex; margin-top: 16px; cursor: pointer"
        class="hover"
        :class="{ active: action === 'Controlorder' }"
        @click="controlorder"
      >
        <img
          v-if="action == 'Controlorder'"
          src="@/assets/sidebar1/manage.png"
          alt
          style="width: 26px; height: 26px; margin-top: 10px; margin-left: 17px"
        />
        <img
          v-else
          src="@/assets/sidebar/manage.png"
          alt
          style="width: 26px; height: 26px; margin-top: 10px; margin-left: 17px"
        />
        <span
          style="
            font-size: 14px;
            font-weight: 500;
            line-height: 42px;
            margin-left: 5px;
          "
          >{{ $t("sidebar.controlManage") }}</span
        >
      </div>
      <div
        style="display: flex; margin-top: 16px; cursor: pointer"
        class="hover"
        :class="{ active: action === 'Logistics' }"
        @click="logistics"
      >
        <img
          v-if="action == 'Logistics'"
          src="@/assets/sidebar1/logistics.png"
          alt
          style="width: 26px; height: 26px; margin-top: 10px; margin-left: 17px"
        />
        <img
          v-else
          src="@/assets/sidebar/logistics.png"
          alt
          style="width: 26px; height: 26px; margin-top: 10px; margin-left: 17px"
        />
        <span
          style="
            font-size: 14px;
            font-weight: 500;
            line-height: 45px;
            margin-left: 5px;
          "
          >{{ $t("sidebar.logistics") }}</span
        >
      </div>
<!--      <div
        style="display: flex; margin-top: 16px; cursor: pointer"
        class="hover"
        :class="{ active: action === 'Ecash' }"
        @click="ecash"
      >
        <img
          v-if="action == 'Ecash'"
          src="@/assets/sidebar1/ecash.png"
          alt
          style="width: 26px; height: 26px; margin-top: 10px; margin-left: 17px"
        />
        <img
          v-else
          src="@/assets/sidebar/rage.png"
          alt
          style="width: 26px; height: 26px; margin-top: 10px; margin-left: 17px"
        />
        <span
          style="
            font-size: 14px;
            font-weight: 500;
            line-height: 42px;
            margin-left: 5px;
          "
          >{{ $t("sidebar.ecash") }}</span
        >
      </div>-->
      <div
        style="
          width: 100%;
          height: 42px;
          margin-top: 26px;
          display: flex;
          justify-content: space-between;
        "
        class="hover"
        @click="handerShowCustomMenu"
      >
        <div style="display: flex; margin-top: 10px; margin-left: 13px">
          <img
            src="@/assets/sidebar/customBlack.png"
            alt
            style="width: 26px; height: 26px"
          />
          <span
            style="
              font-size: 14px;
              font-weight: bold;
              line-height: 26px;
              margin-left: 5px;
            "
            >{{ $t("sidebar.customerManage") }}</span
          >
        </div>
        <div class="arrow-top" :class="{ arrowBottom: showCustom }" />
      </div>
      <el-collapse-transition>
        <div v-show="showCustom">
          <div
            style="margin-top: 20px; cursor: pointer"
            class="hover"
            :class="{ active: action === 'Customer' }"
            @click="customer"
          >
            <span
              style="
                font-size: 13px;
                font-weight: 400;
                line-height: 32px;
                margin-left: 44px;
              "
              >{{ $t("sidebar.myCustomer") }}</span
            >
          </div>
          <div
            style="margin-top: 16px; cursor: pointer"
            class="hover"
            :class="{ active: action === 'Supplier' }"
            @click="supplier"
          >
            <span
              style="
                font-size: 13px;
                font-weight: 400;
                line-height: 32px;
                margin-left: 44px;
              "
              >{{ $t("sidebar.mySupplier") }}</span
            >
          </div>
        </div>
      </el-collapse-transition>
      <div
        style="display: flex; margin-top: 16px; cursor: pointer"
        class="hover"
        :class="{ active: action === 'Setting' }"
        @click="setting"
      >
        <img
          v-if="action == 'Setting'"
          src="@/assets/sidebar1/setting.png"
          alt
          style="width: 26px; height: 26px; margin-top: 10px; margin-left: 17px"
        />
        <img
          v-else
          src="@/assets/sidebar/setting.png"
          alt
          style="width: 26px; height: 26px; margin-top: 10px; margin-left: 17px"
        />
        <span
          style="
            font-size: 14px;
            font-weight: 500;
            line-height: 45px;
            margin-left: 5px;
          "
          >{{ $t("sidebar.setting") }}</span
        >
      </div>
      <div
        style="display: flex; margin-top: 16px; cursor: pointer"
        class="hover"
        :class="{ active: action === 'Help' }"
        @click="help"
      >
        <img
          v-if="action == 'Help'"
          src="@/assets/sidebar1/help.png"
          alt
          style="width: 26px; height: 26px; margin-top: 10px; margin-left: 17px"
        />
        <img
          v-else
          src="@/assets/sidebar/help.png"
          alt
          style="width: 26px; height: 26px; margin-top: 10px; margin-left: 17px"
        />
        <span
          style="
            font-size: 14px;
            font-weight: 500;
            line-height: 48px;
            margin-left: 5px;
          "
          >{{ $t("sidebar.help") }}</span
        >
      </div>
    </div>
    <div class="block">
      <div style="display: flex; justify-content: space-between">
        <div style="margin-left: 22px; margin-top: 28px">
          <div>
            <span style="font-size: 13px; color: #333333; font-weight: Bold">{{
              $t("sidebar.service")
            }}</span>
          </div>
          <div style="margin-top: 12px">
            <span style="font-size: 13px; color: #27417c; font-weight: Regular"
              >400-900-9962</span
            >
          </div>
        </div>
        <img
          src="@/assets/sidebar/service.png"
          alt
          style="
            width: 66px;
            height: 66px;
            margin-top: 16px;
            margin-right: 14px;
          "
        />
      </div>
      <div style="margin-top: 16px; margin-left: 22px">
        <span style="font-size: 13px; color: #999999"
          >({{ $t("sidebar.artificial") }}：{{
            $t("周一到周六")
          }}9:00-18:00)</span
        >
      </div>
      <div
        style="
          display: flex;
          justify-content: space-between;
          margin-top: 30px;
          margin-bottom: 30px;
        "
      >
        <div
          style="
            display: flex;
            width: 76px;
            height: 38px;
            margin-left: 17px;
            background: #659fd5;
            border: 2px solid #659fd5;
            border-radius: 24px;
            align-items: center;
          "
        >
          <img
            src="@/assets/sidebar/bird.png"
            alt
            style="width: 26px; height: 26px; margin-left: 8px"
          />
          <span style="font-size: 13px; font-weight: bold; color: #ffffff"
            >+{{ $t("sidebar.focus") }}</span
          >
        </div>
        <div
          style="
            display: flex;
            width: 76px;
            height: 38px;
            margin-left: 12px;
            border: 2px solid #659fd5;
            border-radius: 24px;
            margin-right: 29px;
            align-items: center;
          "
        >
          <img
            src="@/assets/sidebar/f.png"
            alt
            style="width: 26px; height: 26px; margin-left: 8px"
          />
          <span style="font-size: 13px; font-weight: bold; color: #659fd5"
            >+{{ $t("sidebar.focus") }}</span
          >
        </div>
      </div>
    </div>
    <div style="position: fixed; bottom: 0">
      <div class="complaint" @click="advice('complaint')">
        <div style="position: absolute">
          <img
            src="@/assets/sidebar/complaint.png"
            alt
            style="position: relative"
          />
          <div
            style="
              position: absolute;
              font-size: 12px;
              top: 78px;
              left: 45px;
              font-weight: bold;
              color: #333333;
              line-height: 16px;
            "
          >
            <span>{{ $t("sidebar.complaints") }}</span>
          </div>
        </div>
      </div>
      <div class="wechat">
        <div
          style="position: absolute; cursor: pointer"
          @click="advice('consult', 1)"
        >
          <img
            src="@/assets/sidebar/wechat.png"
            alt
            style="position: relative"
          />
          <div
            style="
              position: absolute;
              font-size: 12px;
              top: 75px;
              left: 35px;
              font-weight: bold;
              color: #333333;
              line-height: 16px;
            "
          >
            <span style="cursor: pointer" @click="advice('consult', 1)">{{
              $t("sidebar.consult")
            }}</span>
            <span
              style="cursor: pointer; margin-left: 5px"
              @click="advice('consult', 2)"
              >{{ $t("sidebar.advice") }}</span
            >
          </div>
        </div>
      </div>
      <div class="phone">
        <div style="position: absolute; cursor: pointer" @click="handleService">
          <img
            src="@/assets/sidebar/phone.png"
            alt
            style="position: relative"
          />
          <div
            style="
              position: absolute;
              font-size: 12px;
              top: 60px;
              left: 40px;
              font-weight: bold;
              color: #333333;
              line-height: 60px;
            "
          >
            <span>{{ $t("sidebar.onlineConsult") }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 实名登记提示弹窗 -->
    <el-dialog
      :title="$t('sidebar.notice')"
      :visible.sync="noticeVisble"
      width="30%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-card>
        {{ $t("sidebar.realNameNotice1") }}
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="noticeVisble = false">{{
          $t("sidebar.cancel")
        }}</el-button>
        <el-button
          @click="
            noticeVisble = false;
            $router.push('/jiedao/jd-idcard');
          "
          >{{ $t("sidebar.determine") }}</el-button
        >
      </div>
    </el-dialog>
    <!-- 实名认证弹窗 -->
    <el-dialog
      :title="$t('sidebar.notice')"
      :visible.sync="idcardVisble"
      width="30%"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-card v-if="authUserForm.status == 3">
        {{ $t("sidebar.realNameNotice3") }}
      </el-card>
      <el-card v-else>
        {{ $t("sidebar.realNameNotice2") }}
      </el-card>
      <el-form
        ref="authUserForm"
        :model="authUserForm"
        label-width="150px"
        style="margin-top: 20px"
      >
        <el-form-item :label="$t('realName.name')" prop="name">
          <el-input v-model="authUserForm.name" type="text" readonly />
        </el-form-item>
        <el-form-item :label="$t('realName.cardType')" prop="cardType">
          <dict-tag
            :type="DICT_TYPE.CERTIFICATE_TYPE"
            :value="authUserForm.cardType"
          />
        </el-form-item>
        <el-form-item :label="$t('realName.cardNumber')" prop="cardNumber">
          <el-input v-model="authUserForm.cardNumber" type="text" readonly />
        </el-form-item>
        <el-form-item :label="$t('realName.img1')" prop="img1">
          <el-col v-if="authUserForm.img1" :span="18">
            <el-image
              style="width: 100px; height: 100px"
              :src="authUserForm.img1"
              cover
            />
          </el-col>
        </el-form-item>
        <el-form-item :label="$t('realName.img2')" prop="img2">
          <el-col v-if="authUserForm.img2" :span="18">
            <el-image
              style="width: 100px; height: 100px"
              :src="authUserForm.img2"
              cover
            />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button
          v-if="authUserForm.status != 3"
          style="width: 200px"
          type="primary"
          @click="idcardVisble = false"
          >{{ $t("sidebar.determine") }}</el-button
        >
        <el-button
          v-if="authUserForm.status == 3"
          style="width: 200px"
          type="primary"
          @click="idcardVisble = false"
          >{{ $t("common.cancel") }}</el-button
        >
        <el-button
          v-if="authUserForm.status == 3"
          style="width: 200px"
          type="primary"
          @click="
            idcardVisble = false;
            $router.push('/jiedao/jd-idcard');
          "
          >{{ $t("common.update") }}</el-button
        >
      </div>
    </el-dialog>
    <!-- 选择运输方式 -->
    <el-dialog
      :title="$t('sidebar.transport')"
      :visible.sync="transVisble"
      width="564px"
      append-to-body
      :close-on-click-modal="false"
    >
      <img
        style="
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 0;
        "
        src="@/assets/profile/bg.png"
      />
      <img
        style="
          width: 205px;
          height: 70px;
          position: absolute;
          right: 72px;
          top: 0;
          z-index: 0;
        "
        src="@/assets/profile/bg2.png"
      />
      <div style="display: flex; flex-wrap: wrap; margin: 0 auto; width: 100%">
        <template v-for="item in getDictDatas(DICT_TYPE.ECW_TRANSPORT_TYPE)">
          <div class="transtype" @click="delivery(item.value)">
            <span>{{ $l(item, "label") }}</span>
            <img v-if="item.value == 1" src="@/assets/profile/type1.png" />
            <img v-else-if="item.value == 2" src="@/assets/profile/type2.png" />
            <img v-else-if="item.value == 3" src="@/assets/profile/type3.png" />
            <img v-else src="@/assets/profile/type4.png" />
          </div>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import JdButton from "@/components/JdButton";
import { getMark, getInfo, getIdCard,memberSystemStatus } from "@/api/user";
import { mapGetters } from "vuex";
import DictTag from "@/components/DictTag";
import md5 from "js-md5";
import { getDictDatas } from "@/utils/dict";

export default {
  name: "Menu",
  components: { JdButton, DictTag },
  data() {
    return {
      check: false,
      action: "",
      showMyOrder: true,
      showCustom: true,
      mark: {},
      switchState: false,
      userInfo: {},
      noticeVisble: false,
      idcardVisble: false,
      authUserForm: {},
      transVisble: false,
    };
  },
  computed: {
    language() {
      return this.$store.getters.language
    },
    ...mapGetters(["loginUser"]),
  },
  watch: {
    language(newVal, oldVal) {
      this.onLanguageChange(newVal, oldVal)
    }
  },
  created() {
    this.getMemberSystemStatus();
    this.action = this.$route.name;
    this.userInfo = this.loginUser;
    getMark().then((r) => {
      this.mark = r.data;
    });
    this.$bus.$on("updateAvatar", () => {
      this.getInfo();
    });
    this.$bus.$on("reload", () => {
      this.reload();
    });
  },
  methods: {
    onLanguageChange(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.getInfo();
      }
    },
    getMemberSystemStatus(){
      memberSystemStatus().then(res=>{
        this.switchState = res.data
      })
    },
    getDictDatas,
    handleService() {
      const online_talk = document.getElementsByClassName("online_talk ");
      if (online_talk) {
        online_talk[0].click();
      }
    },
    myIntegral() {
      this.$router.push("/jiedao/jd-integral");
      this.action = "Integral";
    },
    getInfo() {
      getInfo().then((r) => {
        this.userInfo = r.data;
      });
    },
    reload() {
      getMark().then((r) => {
        this.mark = r.data;
      });
    },
    handerShowMyOrderMenu() {
      if (this.showMyOrder) {
        this.showMyOrder = false;
      } else {
        this.showMyOrder = true;
      }
    },
    handerShowCustomMenu() {
      if (this.showCustom) {
        this.showCustom = false;
      } else {
        this.showCustom = true;
      }
    },
    logout() {
      this.$confirm(this.$t("sidebar.logoutNotice"), this.$t("sidebar.notice"))
        .then(() => {
          this.$store.dispatch("user/logout").then(() => {
            location.href = "";
          });
        })
        .catch(() => {});
    },
    setting() {
      this.$router.push("/jiedao/jd-setting");
      this.action = "Setting";
    },
    help() {
      this.$router.push("/jiedao/jd-help");
      this.action = "Help";
    },
    logistics() {
      this.$router.push("/jiedao/jd-logistics");
      this.action = "Logistics";
    },
    advice(val, type = 0) {
      this.$router.push(`/jiedao/jd-advice?type=${val}&dtype=${type}`);
    },
    message() {
      this.$router.push("/jiedao/jd-message");
      this.action = "Message";
    },
    coupon() {
      this.$router.push("/jiedao/jd-coupon");
      this.action = "Coupons";
    },
    customer() {
      this.$router.push("/jiedao/jd-customer");
      this.action = "Customer";
    },
    supplier() {
      this.$router.push("/jiedao/jd-supplier");
      this.action = "Supplier";
    },
    ecash() {
      this.$router.push("/jiedao/jd-ecash");
      this.action = "Ecash";
    },
    delivery(tranfId) {
      // getIdCard().then(r => {
      //   if (!r.data) {
      //     this.noticeVisble = true
      //   } else if (r.data.status !== 2) {
      //     this.idcardVisble = true
      //     this.authUserForm = r.data
      //   } else {
      //     this.$router.push('/jiedao/jd-delivery')
      //   }
      // })
      this.transVisble = false;
      this.$router.push("/jiedao/jd-delivery?tranfId=" + tranfId);
    },
    controlorder() {
      this.$router.push("/jiedao/jd-controlorder");
      this.action = "Controlorder";
    },
    waitmoneyorder() {
      this.$router.push("/jiedao/jd-waitmoneyorder");
      this.action = "Waitmoneyorder";
    },
    receivedorder() {
      this.$router.push("/jiedao/jd-receivedorder");
      this.action = "Receivedorder";
    },
    postorder() {
      this.$router.push("/jiedao/jd-postorder");
      this.action = "Postorder";
    },
    price() {
      this.$router.push("/jiedao/jd-price");
    },
    profile() {
      this.$router.push("/jiedao/jd-profile");
      this.action = "Profile";
    },
    index() {
      window.open(process.env.VUE_APP_HOME_API);
    },
    old() {
      const code = md5(md5("jiedaoguoji" + this.loginUser.mobile));
      const url =
        "http://backend.groupage.cn/Member?phone=" +
        this.loginUser.mobile +
        "&code=" +
        code +
        "&area_code=+" +
        this.loginUser.areaCode;
      window.open(url);
    },
  },
};
</script>

<style scoped>
.memberLevel {
  color: red;
}
.block {
  background-color: #f5f5f5;
  margin-bottom: 12px;
}
.banner {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  line-height: 26px;
}
.banner-icon {
  width: 26px;
  height: 26px;
  margin-right: 5px;
}
.arrow-top {
  margin-top: 16px;
  margin-right: 16px;
  width: 16px;
  height: 16px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  cursor: pointer;
}
.arrowBottom {
  margin-top: 10px;
  margin-right: 16px;
  width: 16px;
  height: 16px;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: matrix(0.71, 0.71, 0.71, -0.71, 0, 0);
  cursor: pointer;
}
.complaint {
  position: absolute;
  width: 108px;
  height: 108px;
  background: #ffffff;
  border-radius: 50%;
  left: -150px;
  bottom: 10px;
  cursor: pointer;
}
.wechat {
  position: absolute;
  width: 108px;
  height: 108px;
  background: #ffffff;
  border-radius: 50%;
  left: -150px;
  bottom: 125px;
}
.phone {
  position: absolute;
  width: 108px;
  height: 108px;
  background: #ffffff;
  border-radius: 50%;
  left: -150px;
  bottom: 235px;
}
.hover:hover {
  background: #659fd5;
  color: #fff !important;
}
.active {
  background: #659fd5;
  color: #fff !important;
}
/deep/ .el-dialog {
  border-radius: 20px;
  position: relative;
}
/deep/ .el-dialog__title {
  color: #143050;
  font-size: 20px;
  font-weight: 600;
  position: relative;
  z-index: 9;
}
/deep/ .el-dialog__title::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 0;
  width: 2.5px;
  height: 16.5px;
  border-radius: 4px;
  background-color: #2a6cd9;
}
/deep/ .el-dialog__headerbtn {
  z-index: 9;
}
.transtype {
  color: #333;
  font-weight: 600;
  font-family: "PingFang-SC-Bold";
  border-radius: 4px;
  width: 121px;
  height: 165px;
  padding: 16px;
  font-size: 16px;
  position: relative;
  background-size: 100% 100%;
  margin-right: 10px;
  z-index: 9;
}
.transtype img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
</style>
