<template>
  <div class="personal-setting__container">
    <van-row class="personal-header__div">
      <div class="personal-header__title">我的</div>
      <div class="personal-header_mian">
        <div class="user-photo__container">
          <img :src="userPhoto" width="64px" height="64px" />

          <!-- <ht-icon>
            <ht-icon
              name="circle-full"
              scale="1.6"
              class="user-photo__circle"
              :class="{ red: curUser.user.sex == '女' }"
            />
            <ht-icon v-if="curUser.user.sex == '女'" name="female" />
            <ht-icon v-else name="male" scale="0.8" />
          </ht-icon>-->

          <div class="user-photo__changer">
            修改

            <van-uploader
              :after-read="afterRead"
              :max-count="1"
              :before-read="beforeRead"
            />
          </div>
        </div>
        <div class="user-profile">
          <div class="user-profile__name">{{ curUser.user.fullname }}</div>
          <div class="user-profile__account">
            <span>账号：{{ curUser.user.account }}</span>
            <span
              v-if="curUser.user.status == '1'"
              class="user-profile__status"
            >
              <!-- <ht-icon name="user-normal" scale="1.2" /> -->
              <i class="icon-yonghuzhuangtai-zhengchang"></i>
              正常
            </span>
            <span
              v-else-if="curUser.user.status == '0'"
              class="user-profile__status"
            >
              <!-- <ht-icon name="user-ban" scale="1.2" /> -->
              <i class="icon-yonghuzhuangtai-jinyong"></i>
              禁用
            </span>
            <span
              v-else-if="curUser.user.status == '-1'"
              class="user-profile__status"
            >
              <!-- <ht-icon name="user-ban" scale="1.2" /> -->
              <i class="icon-yonghuzhuangtai-weijihuo"></i>
              未激活
            </span>
            <span v-else class="user-profile__status">
              <!-- <ht-icon name="user-ban" scale="1.2" /> -->
              <i class="icon-yonghuzhuangtai-lizhi"></i>
              离职
            </span>
          </div>
        </div>
        <div class="user-layout">
          <!-- <span
          v-if="layoutList && layoutList.length > 1"
          class="user-layout__span"
          @click="selectLayoutShow = true"
        >
          <ht-icon name="layout" />
          切换布局
        </span> -->
          <span class="user-layout__span" @click="changePassword">
            修改密码
            <i class="van-icon van-icon-arrow van-cell__right-icon" />
          </span>
        </div>
      </div>
    </van-row>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" head-height="0">
      <van-cell-group>
        <van-cell
          class="user-props__cell user-props__cell__hidenisLink"
          title="手机号码"
          is-link
          :value="curUser.user.mobile"
        >
          <template #icon>
            <SvgIcon class="icon" icon="icon-shouji1"></SvgIcon>
          </template>
        </van-cell>
        <van-cell
          class="user-props__cell user-props__address"
          title="电子邮箱"
          is-link
          :value="curUser.user.email || '无'"
          @click="emailShow = true"
        >
          <template #icon>
            <SvgIcon class="icon" icon="icon-youxiang"></SvgIcon>
          </template>
        </van-cell>

        <van-cell
          class="user-props__cell user-props__address"
          title="家庭地址"
          icon="location-o"
          is-link
          :value="curUser.user.address || '无'"
          @click="addressShow = true"
        >
          <template #icon>
            <SvgIcon class="icon" icon="icon-dizhi"></SvgIcon>
          </template>
        </van-cell>

        <van-cell
          class="user-props__cell"
          title="性别"
          icon="location-o"
          is-link
          :value="curUser.user.sex || '无'"
          @click="sexShow = true"
        >
          <template #icon>
            <SvgIcon class="icon" icon="icon-xingbie"></SvgIcon>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="group-All">
        <van-cell
          class="spaceCell"
          title="组织架构信息"
          is-link
          @click="postNameShow = true"
          :value="'切换岗位'"
        />
        <van-cell class="user-role__cell" title="所属组织">
          <template #label>
            <span v-if="orgs.length > 0">
              <van-tag v-for="org in orgs" :key="org.orgId">
                {{ org.orgName }}
              </van-tag>
            </span>
            <span v-else>
              <van-tag class="user-role__none">无</van-tag>
            </span>
          </template>
        </van-cell>
        <van-cell class="user-role__cell post_postName" title="所在岗位">
          <template #label>
            <span v-if="posts.length > 0">
              <van-tag
                v-for="post of posts"
                :key="post.postId"
                :class="{ active: post.selected }"
              >
                <span v-if="post.selected">当前岗位:</span>
                {{ post.postName }}
              </van-tag>
            </span>
            <span v-else>
              <van-tag class="user-role__none">无</van-tag>
            </span>
          </template>
        </van-cell>
        <van-cell class="user-role__cell" title="所属角色">
          <template #label>
            <span v-if="roles.length > 0">
              <van-tag
                v-for="(roleName, index) in roles"
                :key="`${roleName.name}${index}`"
              >
                {{ roleName.name }}
              </van-tag>
            </span>
            <span v-else>
              <van-tag class="user-role__none">无</van-tag>
            </span>
          </template>
        </van-cell>
      </van-cell-group>

      <van-cell-group>
        <van-cell
          class="user-seal__cell spaceCellcanvas"
          title="电子签章"
          to="canvas"
          style="border-radius: 0.32rem"
        >
          <template #label>
            <van-image
              v-if="electronicSealFileUrl"
              :src="electronicSealFileUrl"
              width="72"
              height="44"
            />
            <van-empty v-else :image="noImg" description="暂未上传电子签章" />
          </template>
        </van-cell>
      </van-cell-group>

      <van-cell-group class="user-more__group">
        <!-- v-if="showUpdate" -->
        <van-cell
          v-if="showUpdate"
          title="软件更新"
          is-link
          @click="appUpdate()"
          style="border-radius: 0.32rem"
        >
          <template #icon>
            <SvgIcon class="icon" icon="icon-ruanjiangengxin"></SvgIcon>
          </template>
        </van-cell>
      </van-cell-group>
      <van-cell-group class="user-more__group">
        <!-- v-if="showMpBindBtn" -->

        <van-cell
          v-if="showMpBindBtn"
          title="绑定小程序"
          is-link
          @click="bindMiniprogram()"
          style="border-radius: 0.32rem"
        >
          <template #icon>
            <SvgIcon class="icon" icon="icon-xiaochengxu"></SvgIcon>
          </template>
        </van-cell>
      </van-cell-group>
      <van-button
        type="primary"
        class="user-exist__btn"
        size="normal"
        block
        plain
        @click="exit"
      >
        退出
      </van-button>
    </van-pull-refresh>
    <van-action-sheet
      v-model="selectLayoutShow"
      :actions="layoutList"
      cancel-text="取消"
      close-on-click-action
      @change="onSelectLayout"
    />
    <!-- 导航栏 -->
    <tabBar :active-index="3"></tabBar>

    <!-- 修改地址 -->
    <van-popup
      v-model="addressShow"
      :close-on-click-overlay="false"
      @open="onOpen('address')"
      round
      position="bottom"
      style="max-height: 80%; min-height: 40%"
    >
      <van-nav-bar
        title="修改地址"
        left-text="取消"
        right-text="确定"
        class="popup_header_fixed"
        @click-left="onClose('addressShow')"
        @click-right="onSave('addressShow')"
      />

      <div class="content popup_header_margin">
        <van-field
          v-model="message"
          rows="7"
          maxlength="200"
          show-word-limit
          autosize
          type="textarea"
          placeholder="请输入地址"
        />
      </div>
    </van-popup>
    <!-- 电子邮箱 -->
    <van-popup
      v-model="emailShow"
      :close-on-click-overlay="false"
      @open="onOpen('email')"
      round
      position="bottom"
      style="max-height: 80%; min-height: 40%"
    >
      <van-nav-bar
        title="电子邮箱"
        left-text="取消"
        right-text="确定"
        class="popup_header_fixed"
        @click-left="onClose('emailShow')"
        @click-right="onSave('emailShow')"
      />
      <div class="content popup_header_margin">
        <van-field
          v-model="message"
          rows="7"
          maxlength="50"
          show-word-limit
          autosize
          type="textarea"
          placeholder="请输入电子邮箱"
        />
      </div>
    </van-popup>
    <!-- 性别 -->

    <van-action-sheet
      v-model="sexShow"
      :actions="columnsSex"
      cancel-text="取消"
      close-on-click-action
      @cancel="sexShow = false"
      @select="sexClose"
    />
    <!-- 切换主岗位 -->
    <van-action-sheet
      v-model="postNameShow"
      :actions="posts"
      cancel-text="取消"
      close-on-click-action
      @cancel="postNameShow = false"
      @select="postNameClose"
    />
    <ResetPassword
      ref="ResetPassword"
      :account="curUser.user.account"
    ></ResetPassword>
  </div>
</template>

<script>
  import 'vant/lib/picker/style'
  import 'vant/lib/uploader/style'
  import req from '@/utils/request'
  import uc from '@/api/uc'
  import { setMasterById } from '@/api/uc.js'
  const tabBar = () => import('@/components/TabBar.vue')
  import { releaseWakeLock, appUpdate } from '@/utils/index.js'
  import { mapState } from 'vuex'
  import { Notify, Dialog } from 'vant'
  import ResetPassword from '@/components/ResetPassword.vue'
  export default {
    name: 'Personal',
    components: {
      tabBar,
      Dialog,
      ResetPassword,
    },
    data() {
      return {
        isLoading: false,
        userPhoto: require('../assets/images/defaultPhoto.jpg'),
        noImg: require('../assets/images/noImage.png'),
        curUser: { user: {} },
        showUpdate: window.plus ? true : false,
        electronicSeal: {},
        electronicSealFileUrl: '',
        showMpBindBtn: false,
        layoutList: [],
        selectLayoutShow: false,
        emailShow: false,
        sexShow: false,
        addressShow: false,
        passwordShow: false,
        postNameShow: false,

        message: '',

        columnsSex: [
          { name: '男' },
          {
            name: '女',
          },
        ],
      }
    },
    watch: {
      posts: {
        handler(val) {},
      },
    },
    computed: {
      ...mapState({
        currentUser: (state) => {
          return state.login.currentUser ? state.login.currentUser : {}
        },
        currentLayout: (state) => {
          return state.index.currentLayout ? state.index.currentLayout : {}
        },
        pwdStrategy: (state) => state.user.pwdStrategy,
      }),
      roles() {
        return this.curUser.roles && this.curUser.roles.length > 0
          ? this.curUser.roles
          : []
      },
      posts() {
        const post = []
        const list = []
        let currentPostId = sessionStorage.getItem('currentPostId')
        if (this.curUser.post && Object.keys(this.curUser.post).length > 0) {
          for (let key in this.curUser.post) {
            delete this.curUser.post[key].disabled
            let da = {
              ...this.curUser.post[key],
              name: this.curUser.post[key].postName,
              color:
                currentPostId == this.curUser.post[key].postId
                  ? '#409EFF'
                  : '#262626',
            }
            post.push(da)
            if (currentPostId == this.curUser.post[key].postId) {
              list.push(da)
            }
          }
        }
        post.forEach((item) => {
          if (currentPostId != item.postId) {
            list.push(item)
          }
        })
        if (!list) {
          this.postNameShow = false
        }

        return list
      },
      orgs() {
        return this.curUser.allOrgMap && this.curUser.allOrgMap.length > 0
          ? this.curUser.allOrgMap
          : []
      },
    },
    mounted() {
      this.getUserData()
      this.initLayoutList()

      var userAgent = navigator.userAgent
      let mpOpenid = sessionStorage.getItem('mpOpenid')
      if (/miniProgram/i.test(userAgent) && mpOpenid) {
        this.showMpBindBtn = true
      } else {
        this.showMpBindBtn = false
      }
    },
    methods: {
      getUserData() {
        this.$route.path !== '/' &&
          this.$store
            .dispatch('user/loadCurrentUserDetail')
            .then((data) => {
              this.curUser = data
              if (this.curUser.user.sex) {
                this.columnsSex.forEach((item) => {
                  item.color = '#262626'
                  if (item.name == this.curUser.user.sex) {
                    item.color = '#409EFF'
                  }
                })
              }

              const postId = sessionStorage.getItem('currentPostId')
              if (postId) {
                this.setDefaultPost(postId)
              } else {
                if (this.curUser.org.length) {
                  sessionStorage.setItem(
                    'currentPostId',
                    this.curUser.org[0].postId
                  )
                  this.setDefaultPost(this.curUser.org[0].postId)
                }
              }
              if (data) {
                var promise = this.$store.dispatch('user/getCurrent')
                promise.then((data) => {
                  if (
                    data.photo &&
                    data.photo.indexOf('img/defaultPhoto') < 0
                  ) {
                    this.$store
                      .dispatch('menu/downloadImg', data.photo)
                      .then((res) => {
                        if (res != '') {
                          this.userPhoto = res
                        }
                      })
                  }
                })
                req
                  .get(
                    window.context.uc +
                      '/uc/electronicSeal/v1/getSealByCurrentUserId'
                  )
                  .then((response) => {
                    if (response) {
                      this.electronicSeal = response
                      this.$store
                        .dispatch(
                          'menu/downloadImg',
                          this.electronicSeal.fileId
                        )
                        .then((res) => {
                          if (res != '') {
                            this.electronicSealFileUrl = res
                          }
                        })
                    }
                  })
              }
            })
            .finally(() => {
              this.isLoading = false
            })
      },
      setDefaultPost(postId) {
        // this.columnsPostName = this.posts
        this.posts.forEach((item) => {
          if (item.postId == postId) {
            item.selected = true
            this.defaultPost = item
          } else {
            item.selected = false
          }
        })
      },

      //退出登陆
      exit() {
        let loginRouthPath =
          localStorage.getItem(
            this.$store.state.login.currentUser.account + 'loginRoutePath'
          ) || '/login'
        this.$store.dispatch('login/logoutAndCleanUp').then(() => {
          this.postMessage()
          releaseWakeLock()
          this.$router.push(loginRouthPath)
        })
      },
      postMessage() {
        window.uni &&
          uni.postMessage({
            data: {
              action: 'logout',
            },
          })
      },
      appUpdate() {
        appUpdate(true)
      },
      onRefresh() {
        this.getUserData()
      },
      onSelectLayout(item) {
        this.$store.dispatch('index/switchLayout', item)
        this.selectLayoutShow = false
        this.cacheUserLayout(item.type, item.id)
      },
      initLayoutList() {
        let _this = this
        req
          .get(
            `${window.context.portal}/portal/sysIndexLayoutManage/sysIndexLayoutManage/v1/getCurrentAuthLayout?from=mobile`
          )
          .then((response) => {
            if (response.data && response.data.length > 0) {
              _this.layoutList = response.data
            }
          })
      },
      cacheUserLayout(type, layoutId) {
        req
          .post(`${window.context.portal}/portal/main/v1/cacheUserLayout`, {
            type: type,
            layoutId: layoutId,
            layoutType: 1,
          })
          .then((response) => {})
      },
      bindMiniprogram() {
        let mpOpenid = sessionStorage.getItem('mpOpenid')
        this.$http
          .get(
            `${window.context.uc}/api/user/v1/user/bindMpOpenId?account=${this.currentUser.account}&mpOpenid=${mpOpenid}`
          )
          .then((res) => {
            if (res.state) {
              this.$toast.success('绑定成功')
              sessionStorage.removeItem('mpOpenid')
              this.showMpBindBtn = false
            }
          })
      },
      onClose(type) {
        this.message = ''
        this[type] = false
      },
      onSelect(type) {},
      onOpen(type) {
        this.message = this.curUser.user[type]
      },
      //性别确认
      sexClose(value, index) {
        this.curUser.user.sex = value.name
        this.saveClick()
        this.sexShow = false
      },
      //切换主岗位
      postNameClose(value, index) {
        this.posts.splice(index, 1)
        this.posts.unshift(value)

        this.posts.forEach((item) => {
          item.selected = false
          if (item.postId == value.postId) {
            item.selected = true
          }
        })

        sessionStorage.setItem('currentPostId', value.postId)
        req.get(
          window.context.uc + '/uc/ucGroup/v1/setCookie?postId=' + value.postId
        )
        this.$router.go(0)
        this.postNameShow = false
      },
      onSave(type) {
        switch (type) {
          case 'emailShow':
            this.curUser.user.email = this.message
            break
          case 'addressShow':
            this.curUser.user.address = this.message
        }

        this.saveClick()
        this[type] = false
      },
      // 返回布尔值
      beforeRead(file) {
        if (!['image/jpeg', 'image/png'].includes(file.type)) {
          this.$toast.fail('请上传jpg/png格式的图片')
          return false
        }
        return true
      },
      //修改头像
      afterRead(param) {
        const formData = new FormData()
        formData.append('files', param.file)
        uc.fileUpload(formData).then((response) => {
          if (response.success && response.size) {
            this.$store
              .dispatch('menu/downloadImg', response.fileId)
              .then((res) => {
                if (res != '') {
                  this.userPhoto = res
                }
              })
            this.curUser.user.photo = response.fileId
            this.saveClick()
          }
        })
      },

      //保存
      saveClick() {
        uc.userUpdateUser(this.curUser.user).then((res) => {
          if (res.state) {
            // this.$message.success(res.message)
            this.show = true
          }
        })
      },
      //修改密码
      changePassword() {
        this.$refs.ResetPassword.openResetPasswordDialog()
      },
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/matterButton.scss';
  ::v-deep .van-cell--required .van-field__error-message {
    text-align: left !important;
  }
  .content {
    .header {
      padding: 12px 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
      .colse {
        color: #999999;
      }
      .title {
        font-weight: 500;
      }
      .save {
        color: #409eff;
      }
    }
  }
  .personal-setting__container {
    background: #f5f5f5;
    height: calc(100% + 64px);
    overflow-y: auto;
    position: relative;

    .van-pull-refresh {
      z-index: 3;
      position: relative;
      // top: -60px;
      top: -94px;
      padding: 0 16px;
      width: calc(100% - 32px);

      // overflow-y: auto;
      // height: calc(100% - 34px);
      .van-cell-group {
        border-radius: 12px;
        &:not(:first-child) {
          margin-top: 10px;
        }
        & div:first-child {
          border-radius: 12px 12px 0px 0px;
        }
        & div:last-child {
          border-radius: 0px 0px 12px 12px;
        }
      }
    }

    .personal-header__div {
      padding: 0 16px;
      width: calc(100% - 32px);

      height: 247px;
      background: url('../assets/images/myBackGround.png') no-repeat;
      background-size: cover;
      .personal-header_mian {
        display: flex;
        flex-wrap: nowrap;
        height: 64px;
        position: relative;
      }
      .personal-header__title {
        color: #222222;
        // padding-top: 44px;
        margin-bottom: 26px;
        text-align: center;
        height: 44px;
        line-height: 44px;
        font-size: 18px;

        font-weight: 800;
      }
      .user-photo__container {
        position: relative;
        margin-right: 12px;
        .user-photo__changer {
          font-size: 12px;
          left: 0;
          top: 0;
          position: absolute;
          background: linear-gradient(
            rgba(0, 0, 0, 0) 70%,
            rgba(0, 0, 0, 0.54) 30%
          );
          width: 64px;
          height: 64px;
          border-radius: 50%;
          display: flex;
          padding-bottom: 2px;
          justify-content: center;
          align-items: flex-end;
          color: #fff;

          position: relative;
          .van-uploader {
            opacity: 0;
            position: absolute;
            width: 60px;
            height: 20px;
            border-radius: 50%;
            ::v-deep .van-uploader__upload {
              border-radius: 50%;
              margin: 0;
              height: 24px;
            }
          }
        }
        & > img {
          height: 64px;
          width: 64px;

          border-radius: 50%;

          & + svg {
            color: #fff;
            position: absolute;
            right: 16px;
            top: 0;
          }
        }
        .user-photo__changer {
          position: absolute;
        }
        .user-photo__circle {
          color: $--color-primary;

          &.red {
            color: #ef9090;
          }
        }
      }
      .user-profile {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-around;
      }
      .user-profile__name {
        color: #262626;
        font-size: 18px;
        font-weight: bold;
      }
      .user-profile__account {
        span {
          color: #585858;
          font-weight: 400;
          height: 17px;
          font-size: 12px;
        }
        .user-profile__status {
          font-size: 12px;
          background: transparent;

          border: 1px solid #409eff;
          border-radius: 4px 4px 4px 4px;
          color: $--color-primary;
          padding: 2px 8px;
          margin-left: 16px;
        }
      }
      .user-layout {
        position: absolute;
        right: 0;
        bottom: 1px;
      }
      .user-layout__span {
        color: #585858;
        font-weight: 400;
        font-size: 12px;
        line-height: 22px;
        display: flex;
        white-space: nowrap;
        i {
          margin-left: 0;
          color: #585858 !important;
        }
      }
    }

    .user-props__cell {
      align-items: center;

      .van-cell__title {
        height: 24px;
        line-height: 24px;
        font-size: 14px;
        margin-left: 8px;
        color: #262626;
      }
      .van-cell__value {
        font-weight: 400;
        flex: 2;
        color: #262626;
        white-space: pre-wrap;
        word-break: break-all;
        word-wrap: break-word;
      }
    }
    .user-props__cell__hidenisLink {
      .van-icon-arrow {
        visibility: hidden;
      }
    }
    .user-props__address {
      align-items: flex-start;
    }
    .user-role__cell {
      .van-cell__label {
        margin-top: 10px;

        .van-tag {
          padding: 5px 12px;
          margin-right: 12px;
          margin-bottom: 10px;
          font-size: 13px;

          background: #f4f4f4;

          color: #262626;
          border-radius: 6px 6px 6px 6px;

          font-weight: 400;
        }
        .user-role__none {
          background-color: $base-background-second;
          color: $base-color-grey;
        }
      }
    }

    .user-seal__cell {
      margin-top: 10px;
      .van-cell__label {
        text-align: center;
      }
      .van-empty {
        padding: 16px 0 0;
      }
      ::v-deep .van-empty__description {
        margin: 4px 0;
        font-size: 11px;
        color: #8c8c8c;
        font-weight: 400;
      }
      ::v-deep .van-empty__image {
        width: 72px;
        height: 44px;
      }
    }

    .post_postName {
      .van-cell__title {
        flex: auto;
      }
      .van-cell__value {
        span {
          color: #409eff;
        }
      }
      .van-icon {
        color: #409eff;
      }
    }
    .user-exist__btn {
      margin-top: 10px;
      border-radius: 12px 12px 12px 12px;

      border: 1px solid #e55555;
      .van-button__text {
        color: #e55555;
        font-weight: 400;
        font-size: 14px;
      }
    }

    .user-more__group {
      margin-top: 10px;

      .van-cell__title {
        font-size: 16px;
        margin-left: 10px;
        color: #333;
      }
    }
  }
  .active {
    color: #409eff !important;

    background: rgba(64, 158, 255, 0.1) !important;
  }
  .process-popup {
    padding: 24px 16px !important;
    .title {
      text-align: center;

      font-size: 17px;
      font-weight: 800;
      color: #1a1a1a;
    }
    .content {
      margin: 16px 0 24px 0;
    }
    .van-cell::after {
      border-bottom: 0.02667rem solid #ebedf0 !important;
      display: block !important;
    }
    .processButton {
      // position: absolute;
      width: 100%;
      // bottom: 20px;
      .van-button {
        width: 100%;

        border-radius: 8px 8px 8px 8px;
      }
    }
  }

  .icon {
    font-size: 22px;
  }
  .van-cell__right-icon {
    color: #969799;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .van-cell::after {
    border: none;
  }
  .group-All {
    .van-cell {
      padding-bottom: 2px;
    }
  }
  .van-cell {
    padding: 12px 12px;
  }
  .spaceCellcanvas {
    .van-cell__label {
      border-radius: 8px 8px 8px 8px !important;
      border: 1px solid #e6e6e6;
      margin-bottom: 4px;
      margin-top: 11px;
    }
    .van-cell__title span {
      color: #262626;
      font-weight: bold;
      font-size: 16px;
    }
  }
  .spaceCell {
    padding-bottom: 4px;
    .van-cell__title {
      line-height: 22px;
      color: #262626;
      font-weight: bold;
      font-size: 16px;
      height: 22px;
    }
    .van-cell__value {
      color: #585858;
      font-weight: 400;
      font-size: 12px;
    }
  }
  .van-action-sheet__cancel {
    color: #8c8c8c;
    font-weight: 400;
    font-size: 14px;
  }
  .van-action-sheet__name {
    font-size: 14px;
    font-weight: 400;
  }
  ::v-deep {
    .van-popup {
      .van-nav-bar__left {
        .van-nav-bar__text {
          color: #8c8c8c;
          font-size: 14px;
        }
      }
      .van-nav-bar__title {
        font-weight: bold;
        font-size: 17px;
      }
      .van-nav-bar__right {
        .van-nav-bar__text {
          font-size: 14px;
          color: #409eff;
        }
      }
    }
  }
  .popup_header_fixed {
    border-bottom: 1px solid #e6e6e6;
  }
</style>
