<template>
  <view class="methods_content">
    <view v-for="(i, index) in list" :key="`item_${index}`" class="items" @click="handleSelect(i)">
      <view>
        <up-icon :name="i?.icon" :color="i?.color" size="26"></up-icon>
      </view>
      <view class="items_content_info">
        <view class="label">
          {{ i?.label }}
          <uni-icons
            v-if="props?.valueModel === i?.type || valueModel === i?.type"
            type="circle-filled"
            size="18"
            color="#0082FA"
          ></uni-icons>
          <uni-icons v-else type="circle" size="18" color="#999"></uni-icons>
        </view>
        <view class="des">
          {{ i?.des }}
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps(['valueModel'])
const emit = defineEmits(['update:valueModel'])
const valueModel = ref('')
const handleSelect = (e: any) => {
  valueModel.value = e?.type
  emit('update:valueModel', e?.type)
}
const list = [
  {
    label: '电话催缴',
    des: '直接电话联系',
    type: 'PhoneCall',
    icon: 'phone',
    color: '#00B75F'
  },
  {
    label: '上门催缴',
    des: '实地走访',
    type: 'Visit',
    icon: 'home',
    color: '#DF3600'
  },
  {
    label: '微信联系',
    des: '通过微信沟通',
    type: 'WeChat',
    icon: 'weixin-fill',
    color: '#00B75F'
  },
  {
    label: '书面通知',
    des: '张贴催缴通知',
    type: 'WrittenNotice',
    icon: 'edit-pen',
    color: '#0082FA'
  }
]
</script>
<style lang="scss" scoped>
.methods_content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 30rpx;
  .items {
    background-color: #fff;
    width: 43.5%;
    padding: 20rpx 15rpx;
    border-radius: 15rpx;
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    .items_content_info {
      flex: 1;
      padding-left: 5rpx;
    }
    .label {
      color: #333;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .des {
      color: #999;
      font-size: 24rpx;
      padding-top: 10rpx;
    }
  }
}
</style>
