<template>
  <div>
    <template v-if="!data.isShowEdit">
      <q-input filled bg-color="myInput" @focus="data.isShowEdit=true" label="请输入跟进记录" />
    </template>
    <template v-else>
      <div class="editer_input">
        <q-input v-model="text" style="50px" maxlength="1000" type="textarea" placeholder="请填写跟进记录" />
        <!-- <div></div> -->
        <div class="file_Space">
          <div style="display:flex;align-items:center;">
            <div>
              <a-upload v-model:file-list="data.imageList" name="file" :multiple="true"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="uploadImg">
                <i style="font-size:25px;cursor:pointer;" class="iconfont icon-picture"></i>
              </a-upload>
            </div>
            <div style="margin-left:8px;">
              <a-upload v-model:file-list="data.fileList" name="file" :multiple="true"
                action="https://www.mocky.io/v2/5cc8019d300000980a055e76" @change="handleChange">
                <i style="font-size:20px;cursor:pointer;" class="iconfont icon-paperclip"></i>
              </a-upload>
            </div>
          </div>
          <div>
            <q-btn color="myInput" text-color="#000" size="sm" @click="data.isShowEdit=false" label="取消" />
            <q-btn color="primary" style="margin-left:10px;" size="sm" label="确定" />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts">
  import {
    ref,
    reactive,
    onMounted
  } from 'vue'
  import message from '@/utils/message'
  import customer2 from '@/api/customer2'
  export default {
    setup(props, ctx) {
      interface dataParam {
        [key: string]: any
      }
      interface FileItem {
        uid: string;
        name?: string;
        status?: string;
        response?: string;
        url?: string;
      }
      interface FileInfo {
        file: FileItem;
        fileList: FileItem[];
      }
      const data = reactive < dataParam > ({
        isShowEdit: false,
        fileList: [],
        imageList: []
      })
      const uploadImg = (info: FileInfo) => {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        console.log(info,'info');
        // if (info.file.status === 'done') {
        //   message.success(`${info.file.name} file uploaded successfully`);
        // } else if (info.file.status === 'error') {
        //   message.error(`${info.file.name} file upload failed.`);
        // }
      };
      onMounted(() => {

      })
      return {
        data,
        uploadImg
      }
    }
  }

</script>
<style lang="scss">
  .editer_input {
    padding: 5px 0;
  }

  .myInput {
    background-color: #f6f6f6 !important;
  }

  .file_Space {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    align-items: center;
  }

  .q-field__control {
    background-color: #f6f6f6 !important;
  }

  .q-field--filled .q-field__control:hover:before {
    opacity: 0;
  }

</style>
