<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="msg.Remark" maxlength="1000" type="textarea" placeholder="请填写跟进记录" />
        <div class="file_box">
          <div class="img_list">
            <div v-for="(e, i) in msg.ImageList" :key="i" class="img_box">
              <img :src="e" class="img" />
              <q-icon name="cancel" color="primary" class="del_icon" @click="delImg(i)" />
            </div>
          </div>
          <div class="file_list">
            <div v-for="(e, i) in msg.FileList" :key="i" class="flex items-center file_box">
              <div class="flex items-center">
                附件：
                <span style="color: #333">{{ e.FileName }}</span>
                ({{ e.size }})
              </div>
              <div class="del_btn" @click="delFile(i)">删除</div>
            </div>
          </div>
        </div>
        <div class="file_Space">
          <div style="display: flex; align-items: center">
            <div>
              <n-upload accept="image/*" multiple :show-file-list="false" v-model:file-list="data.imageList" 
              :custom-request="customUploadImg">
                 <i style="font-size: 25px; cursor: pointer" class="iconfont icon-picture"></i>
              </n-upload>
            </div>
            <div style="margin-left: 8px">
              <n-upload accept="image/*" multiple :show-file-list="false" v-model:file-list="data.fileList" 
              :custom-request="customUploadFile">
                 <i style="font-size: 20px; cursor: pointer" class="iconfont icon-paperclip"></i>
              </n-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" @click="save" label="确定" />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts">
  import {
    reactive,
    inject
  } from 'vue'
  import customer from '@/api/customer'
  import massage from '@/utils/message'
  import {
    UploadSelfFile
  } from '@/utils/upload'
  interface dataParam {
    [key: string]: any
  }
  export default {
    setup(props, ctx) {
      let msg = reactive < dataParam > ({
        CustomerId: inject('CustomerId'),
        Remark: '',
        ImageList: [],
        FileList: []
      })
      const data = reactive < dataParam > ({
        isShowEdit: false,
        fileList: [],
        imageList: []
      })
      let customUploadImg = file => {
        console.log(82,file)
        UploadSelfFile('/horse', file.file.file, res => {
          msg.ImageList.push(res.FileUrl)
        })
      }
      let customUploadFile = file => {
        UploadSelfFile('/horse', file.file.file, res => {
          msg.FileList.push({
            FileName: res.FileName,
            FileUrl: res.FileUrl,
            size: res.Size
          })
        })
      }
      const delImg = i => {
        msg.ImageList.splice(i, 1)
      }
      const delFile = i => {
        msg.FileList.splice(i, 1)
      }
      const save = () => {
        customer.setCustomerTripFollowUpInfo(msg).then(res => {
          massage.successMsg(res.data.Message)
          msg.Remark = ''
          msg.ImageList = []
          msg.FileList = []
          ctx.emit('success')
        })
      }

      return {
        msg,
        data,
        customUploadImg,
        customUploadFile,
        delImg,
        delFile,
        UploadSelfFile,
        save
      }
    }
  }

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

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

  .file_box {
    margin-top: 5px;

    .img_list {
      display: flex;
      flex-wrap: wrap;

      .img_box {
        width: 40px;
        height: 40px;
        margin: 10px;

        position: relative;

        .img {
          width: 100%;
          height: 100%;
          overflow: hidden;
          object-fit: cover;
        }

        .del_icon {
          font-size: 18px;
          position: absolute;
          top: 0;
          right: 0;
          transform: translate(50%, -50%);
        }
      }
    }

    .file_list {
      .file_box {
        font-size: 14px;
        color: #9696a6;

        .del_btn {
          margin-left: 10px;
          padding-left: 5px;
          border-left: 1px solid var(--q-primary);
          color: var(--q-primary);
          cursor: pointer;
        }
      }
    }
  }

  .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>
