<template>
  <view class="phone-item" v-for="(item, i) in phoneList" :key="i">
    <view class="iocn-company-name">
      <image :src="item.icon" mode="scaleToFill" />
      <text class="company">{{ item.company || '暂无' }}:</text>
      <text class="name">{{ item.name }}</text>
    </view>
    <text class="mobild" @tap="phoneCall(item.mobild)">{{ item.mobild }}</text>
  </view>
</template>

<script lang="ts" setup>
import useGlobalFunc from '@/composables/useGlobalFunc'
import { ref } from 'vue'
import { store } from '@/store'
const { phoneCall } = useGlobalFunc()

/**
 * 运营列表
 */
interface PhoneListType {
  icon: string
  company: string
  name?: string
  mobild: string
}
const phoneData = store.state.storeInfo.allStoreInfo
const phoneList = ref<Array<PhoneListType>>([
  {
    icon: 'https://image.jxc4.com/image/dac33b5d4033369aa2149df98371c985.png',
    company: '京东运营',
    name: phoneData.operatorName || '暂无',
    mobild: phoneData.operatorPhone,
  },
  {
    icon: 'https://image.jxc4.com/image/1dd799ad5f08f5d2a162ea5da147a277.png',
    company: '美团运营',
    name: phoneData.operatorName2 || '暂无',
    mobild: phoneData.operatorPhone2,
  },
  {
    icon: 'https://image.jxc4.com/image/06a27a6503a6695824bf361ded5f1d45.png',
    company: '淘宝闪购运营',
    name: phoneData.operatorName3 || '暂无',
    mobild: phoneData.operatorPhone3,
  },
  {
    icon: 'https://image.jxc4.com/image/92fb99855bc1f68afdac8b0257228b99.png',
    company: '京西运营',
    name: '',
    mobild: phoneData.marketManPhone,
  },
])
</script>
<style>
page {
  background-color: #fff;
}
</style>

<style lang="scss" scoped>
.phone-item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx 20rpx;
  background-color: #fff;
  border-top: 1rpx solid rgb(218, 218, 218);
  border-bottom: 1rpx solid rgb(218, 218, 218);
  margin-top: 15rpx;
}

.iocn-company-name {
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 70rpx;
    height: 70rpx;
    border-radius: 15rpx;
  }

  .company,
  name {
    padding: 0 60rpx;
  }
}

.mobild {
  color: #4eb331;
}
</style>