<template>
  <!-- 选择地点 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >
    <!-- 背景地图 -->
    <div class="pt-14 h-80 bg-gray-200 " />
    <div class="px-4 pb-28">
      <!-- 选择地址 -->
      <div class="-mt-8 text-sm text-text-secondary  rounded">
        <c-cell v-model="radio" placeholder="请输入地点名称" label="地点名称" type="input" class-input="text-left">
          <app-icon
            slot="right"
            icon-name="search-blue"
            class-name="w-6 h-6 flex items-center "
          />
        </c-cell>
      </div>
      <!-- 预存地址 -->
      <div class="mt-4 text-sm text-text-secondary">
        <div class="bg-white h-7 flex items-center px-4 rounded">预存地址</div>
        <van-radio-group v-model="radio">
          <div v-for="(place,index) in places" :key="index" class="flex rounded" @click="clickC(index)">
            <van-radio :name="place" icon-size="16px" icon="radio" class="bg-white pl-4 pr-1 w-full">
              <div class="border-b py-3 w-screen text-text-secondary" :class="classborder(index)">{{ place }}</div>
              <app-icon
                v-if="checked === index+''"
                slot="icon"
                icon-name="radio-checked"
                class-name="w-4 h-4 flex items-center"
              />
              <app-icon
                v-else
                slot="icon"
                icon-name="radio"
                class-name="w-4 h-4 flex items-center"
              />
            </van-radio>
          </div>
        </van-radio-group>
      </div>
      <!--按钮-->
      <div class="fixed bottom-0 left-0 w-full px-4  bg-common-bg py-1.5">
        <c-button>
          发布
        </c-button>
      </div>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
import { RadioGroup, Radio } from 'vant'

Vue.use(Radio)
Vue.use(RadioGroup)
export default Vue.extend({
  name: 'SelectLocale',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'c-button': () => import('@/components/common/c-button.vue')
  },
  data() {
    return {
      radio: '',
      place: '',
      places: ['第一会议室', '峨眉会议室', '南京分公司'],
      checked: ''
    }
  },
  computed: {

  },
  created() {
    // console.log(Mock, 'mock')
  },
  methods: {
    clickC(index: number) {
      this.checked = index + ''
    },
    classborder(index:number) {
      if (index === this.places.length - 1) {
        return 'border-none'
      }
    }
  }
})
</script>

<style lang="less" scoped>

</style>
