<template>
  <!-- 选择地点 -->
  <main-page
    left-arrow
    @click-left="$router.go(-1)"
  >

    <div class="pt-14 mx-4  bg-white">
      <div class="flex border-b w-full py-2.5 px-2.5" @click=" clickIcon1()">
        <app-icon
          slot="icon"
          :icon-name="checked1 ? 'radio-checked': 'radio'"
          class-name="w-4 h-4 mr-2 flex items-center"
        />
        <div class="text-sm">
          内部
        </div>
      </div>
      <div class="relative flex items-center border-b py-2.5 px-2.5" @click=" clickIcon2()">
        <app-icon
          slot="icon"
          :icon-name="checked2 ? 'radio-checked': 'radio'"
          class-name="w-4 h-4 mr-2 flex items-center"
        />
        <div class="text-sm">
          外部
        </div>
        <app-icon
          slot="icon"
          icon-name="right-arrow"
          class-name="w-1.5 h-3 mr-2 flex items-center inherit absolute right-2.5"
          @click="isShow()"
        />

      </div>
      <div v-if="show" class="pl-5">
        <c-cell title="客户单位" title-class="text-sm text-text-secondary" class="border-b">
          <div slot="content">XXX有限责任公司</div>
        </c-cell>
        <c-cell title="客户代表" title-class="text-sm text-text-secondary" class="border-b">
          <div slot="content">张凯丽</div>
        </c-cell>
        <c-cell title="联系方式" title-class="text-sm text-text-secondary">
          <div slot="content">173644832910</div>
        </c-cell>
      </div>
    </div>
  </main-page>
</template>

<script lang="ts">
import Vue from 'vue'
import { Icon } from 'vant'

Vue.use(Icon)
export default Vue.extend({
  name: 'OExtendedAttribute',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'app-icon': () => import('@/components/common/Icon.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue')
  },
  data() {
    return {
      checked1: false,
      checked2: false,
      tags: [
        { key: 'private', condition: '内部' },
        { key: 'public', condition: '外部' }
      ],
      show: false
    }
  },
  computed: {

  },
  created() {
    // console.log(Mock, 'mock')

  },
  methods: {
    clickIcon1() {
      this.checked1 = !this.checked1
      if (this.checked1 === true) {
        this.checked2 = false
      }
    },
    clickIcon2() {
      this.checked2 = !this.checked2
      if (this.checked2 === true) {
        this.checked1 = false
      }
    },
    isShow() {
      this.show = !this.show
      this.checked2 = !this.checked2
    }
  }
})
</script>

<style lang="less" scoped>

</style>
