<template>
  <view class="permission_show_page">
    <view>
      <view class="permission_head">
        <view class="permission_head_icon">
          <image
            src="https://gc-prod-1385694945.cos.ap-shanghai.myqcloud.com/uploads/cs-test/01KD7KT7FJC7Z3K6AFA93ZHCJ5.png" />
        </view>
        <view class="permission_head_label"> 当前项目您无添加突发事件的权限 </view>
        <view class="permission_head_sub_label"> 可联系以下人员添加 </view>
      </view>

      <view class="permission_content">
        <hs-empty v-if="!listData?.length" height="20vh" />
        <view v-for="(i, index) in listData" :key="`item_${index}`" class="permission_item">
          <view>
            {{ i?.employee_name }} <text>{{ i?.employee_phone }}</text>
          </view>
          <view class="item_btn_phone" @click="handleMakePhoneCall(i?.employee_phone)">
            联系TA
          </view>
        </view>
      </view>
    </view>

    <hs-footer btnParimaryName="报其他项目" @handleParmaryClick="handleSubmit" />
  </view>
</template>
<script setup lang="ts">
import { getApiLoading } from '@/common/libraries/apiLoading'
import { Apis } from '@/gen/Apis'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

const listData = ref<any>([])

const handleSubmit = () => {
  uni.navigateBack({
    delta: 1
  })
}

const handleMakePhoneCall = (phone: string) => {
  if (phone) {
    uni.makePhoneCall({
      phoneNumber: phone
    })
  } else {
    uni.showToast({
      title: '当前人员手机号为空！',
      icon: 'none'
    })
  }
}

const getPermission = (data: any) => {
  getApiLoading(Apis.Emergency.EmergencyEventTeams.GetPermission, {
    asset_projects_id: data?.id
  }).then(res => {
    listData.value = res?.data?.members || []
    console.log(res)
  })
}

onLoad(e => {
  getPermission(e)
})
</script>
<style lang="scss">
.permission_show_page {
  padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
}

.permission_head {
  color: #3d3d3d;
  text-align: center;

  &_icon {
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 232rpx;
      height: 232rpx;
    }
  }

  &_label {
    font-size: 36rpx;
    padding: 10rpx 0 25rpx 0;
    font-weight: 500;
  }

  &_sub_label {
    font-size: 28rpx;
  }
}

.permission_content {
  padding: 20rpx 80rpx 0 80rpx;

  .permission_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;
    color: #333333;
    border: 1rpx solid #f1f1f1;
    border-radius: 10rpx;
    padding: 30rpx;
    font-size: 28rpx;

    text {
      color: #666;
    }

    .item_btn_phone {
      color: #0082fa;
    }
  }
}
</style>
