<template>
  <div class="add-client">
    <main-page left-arrow @click-left="handleClickLeft">
      <div class="px-4 pt-14">
        <div class="bg-white rounded-md">
          <textarea
            placeholder="请填写具体描述"
            rows="4"
            class="px-4 mt-2 w-full"
          />
          <van-uploader
            v-model="fileList"
            multiple
            accept=".doc, .docx, .xml, .xlsx, .pdf, audio/*, image/*, video/*"
            class="mb-2 ml-4"
          >
            <app-icon
              type="png"
              :path="require('@/assets/icons/addfile.png')"
              class-name="w-20 h-20 mr-3"
            />
          </van-uploader>
        </div>
        <c-cell
          dot
          title="跟进方式"
          class="mt-4"
          :content="content1"
          @click="showPopup"
        />
        <van-action-sheet
          v-model="show"
          :actions="actions"
          cancel-text="取消"
          close-on-click-action
          @cancel="onCancel"
          @select="onSelect"
        />

        <div
          v-show="isShow"
          class="flex  bg-blue-50 w-full mt-4 rounded-md "
        >
          <div class="flex items-center pl-4 ">
            <app-icon
              type="png"
              :path="require('@/assets/icons/location.png')"
              class-name="w-4 h-4 items-center"
            />
          </div>
          <div>
            <p class="my-3 mx-3 text-base font-normal">
              这里是定位地址么什么什么什么什么什么的
            </p>
          </div>
        </div>
        <c-button class="mt-20">
          完成
        </c-button>
      </div>
    </main-page>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Uploader } from 'vant'
import { Cell, CellGroup } from 'vant'
import { ActionSheet } from 'vant'
import { Icon } from 'vant'

Vue.use(Icon)
Vue.use(ActionSheet)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(Uploader)
export default Vue.extend({
  name: 'AddFollow',
  components: {
    'main-page': () => import('@/layout/main-page.vue'),
    'c-button': () => import('@/components/common/c-button.vue'),
    'c-cell': () => import('@/components/common/c-cell.vue'),
    'app-icon': () => import('@/components/common/Icon.vue')
  },
  data() {
    return {
      show: false,
      isShow: false,
      content1: '远程沟通',
      content2:
        '这里是定位地址么什么什么什么什么什么什么什么v什么什么什么什么什么什么v么v的',
      actions: [{ name: '远程沟通' }, { name: '外勤拜访' }],
      fileList: [
        // { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
        // // Uploader 根据文件后缀来判断是否为图片文件
        // // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
        // { url: 'https://cloud-image', isImage: true },
      ]
    }
  },
  computed: {},
  created() {
    // console.log(Mock, 'mock')
  },
  methods: {
    handleClickLeft() {
      this.$router.go(-1)
    },
    afterRead(file: any) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
    },
    showPopup() {
      this.show = true
    },
    onSelect(item: { name: string; }) {
      this.show = false
      this.content1 = item.name
      if (item.name == '外勤拜访') {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    onCancel() {
      this.show = false
    }
  }
})
</script>

<style>
</style>
