<template>
  <view class="content">
    <uni-nav-bar
      :fixed="true"
      color="#ffffff"
      background-color="#ffffff"
      :status-bar="true"
    >
      <view slot="left"><text class="nav-title">客户</text></view>
      <view class="nav-search" @click="goSearch">
        <image class="search-icon" src="/static/imgs/client/search-icon.png" />
        <text class="search-text">输入客户名称试试</text>
      </view>
      <view slot="right">
        <view v-if="hasLogin">
          <image
            style="width: 40rpx; height: 40rpx"
            src="/static/imgs/client/user-icon.png"
          ></image>
        </view>
        <view v-else><text class="nav-login">登录</text></view>
      </view>
    </uni-nav-bar>
  </view>
</template>

<script>
import { go2 } from '@/utils/hook.js'
import qnMap from '@/components/qn-map/qn-map.nvue'
export default {
  components: { qnMap },
  data() {
    return {
      userName: 'zhangsan',
      isList: false,
      location: {
        name: '广州',
        latitude: 23.1023,
        longitude: 113.3345
      },
      packingList: [
        {
          enterpriseId: 1,
          enterpriseName: '天河金街',
          latitude: 23.1023,
          longitude: 113.3345,
          whetherCooperation: 0
        },
        {
          enterpriseId: 2,
          enterpriseName: '色印务有限公司',
          latitude: 23.1023,
          longitude: 113.336,
          whetherCooperation: 1
        }
      ]
    }
  },
  methods: {
    getSupplier(e) {
      console.log('e:', e.detail.markerId)
    },
    mapChange(data) {
      console.log('data:', data)
      this.packingList.push({
        enterpriseId: 3,
        enterpriseName: 'guangzhou',
        latitude: 23.1023,
        longitude: 113.338,
        whetherCooperation: 1
      })
    },
    showList() {
      this.isList = true
    },
    goSearch() {
      go2('login')
    }
  },
  computed: {
    hasLogin() {
      return this.$store.state.qnToken != ''
    }
  }
}
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100vh;
}
.map_area {
  width: 750rpx;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
}
.list-button {
  position: fixed;
  bottom: 140rpx;
  right: 32rpx;
  width: 84rpx;
  height: 84rpx;
}
.locate-button {
  position: fixed;
  bottom: 40rpx;
  right: 32rpx;
  width: 84rpx;
  height: 84rpx;
}
.nav-login {
  font-size: 28rpx;
  color: #007aff;
  text-align: right;
}
.nav-title {
  font-size: 40rpx;
  color: #000000;
  letter-spacing: 0;
  font-weight: 500;
}
.nav-search {
  width: 440rpx;
  height: 64rpx;
  background: #f5f6f7;
  border-radius: 16px;
  padding-left: 24rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
}
.search-icon {
  width: 28rpx;
  height: 28rpx;
  flex: 0 0 auto;
  margin-right: 8rpx;
}
.search-text {
  font-size: 25rpx;
  flex: 1 0 auto;
  color: rgba(34, 34, 34, 0.75);
  font-weight: 400;
}
</style>
