<template>
  <view class="methods_content">
    <view v-for="(i, index) in list" :key="`item_${index}`" class="items" @click="handleSelect(i)">
      <view class="label">
        <text :style="{ color: i?.color, backgroundColor: i?.bgColor }"> {{ i?.label }} </text>
        <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>
</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: 'PromiseToPay',
    bgColor: '#E7FFD6',
    color: '##00B75F'
  },
  {
    label: '拒绝缴费',
    des: '住户明确拒绝缴费',
    type: 'RefuseToPay',
    bgColor: '#FFE8E8',
    color: '#DF3600'
  },
  {
    label: '未联系到',
    des: '无法联系到住户',
    type: 'NotReached',
    bgColor: '#E8E8E8',
    color: '#666666'
  },
  {
    label: '需要跟进',
    des: '需要后续继续跟进',
    type: 'NeedFollowUp',
    bgColor: '#E8F2FF',
    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;
    .label {
      color: #333;
      font-size: 28rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text {
        padding: 8rpx 20rpx;
        border-radius: 100rpx;
        font-size: 24rpx;
      }
    }
    .des {
      color: #999;
      font-size: 24rpx;
      padding-top: 10rpx;
    }
  }
}
</style>
