<template>
  <div>
    <div style="display: flex">
      <Input
        class="upload-input"
        :value="imageUrls"
        @focus="onFocus"
        @change="onInputChange"
        @blur="onBlur"
      />
      <BasicUpload
        :maxSize="20"
        :maxNumber="10"
        @change="handleChange"
        :api="uploadApi"
        class="my-3"
      />
      <a-button
        @click="openChooseModal"
        style="position: relative; top: 12px; margin: 0 5px"
        type="danger"
        preIcon="ic:sharp-view-list"
        :iconSize="16"
      >
        选择
      </a-button>
      <span class="tip-span" v-if="tipShow">{{ tip }}</span>
    </div>

    <div class="image-list" v-if="image_list">
      <div v-for="(item, index) in image_list" :key="index">
        <div class="image-item" v-if="imageUrls.split(',').includes(item.url)">
          <div class="image-wrap">
            <a-image width="70px" :src="'http://jetbill.cn' + item.url"
          /></div>
          <div class="dele-image" @click="deleteImage(item.url)">
            <Icon icon="ri:delete-bin-5-fill" />
          </div>
        </div>
      </div>
    </div>
    <ChooseModal
      :type="type"
      @register="chooseModalRegister"
      @checked="checked"
      @checkedBatches="checkedBatches"
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive, toRefs } from 'vue';
  import { BasicUpload } from '/@/components/Upload';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { uploadApi } from '/@/api/sys/upload';
  import ChooseModal from './ChooseModal.vue';
  import { useModal } from '/@/components/Modal';
  import { Image, Input } from 'ant-design-vue';
  import Icon from '/@/components/Icon';
  import { getAttachmentList } from '/@/api/sys/general';

  const props = {
    value: { type: String, default: '' },
    tip: { type: String, default: '' },
    urls: { type: String, default: '' },
    type: { type: String, default: '' },
    errMsg: { type: String, default: '' },
    rules: { type: Array, default: [] },
  };
  export default defineComponent({
    components: { BasicUpload, ChooseModal, aImage: Image, Input, Icon },
    props,
    emits: ['change'],
    setup(props, { emit }) {
      const { createMessage } = useMessage();
      const [chooseModalRegister, { openModal }] = useModal();
      function openChooseModal() {
        openModal(true);
      }
      const state = reactive({
        imageUrls: props.urls,
        image_list: [] as object[],
        tipShow: false,
      });

      function deleteImage(url) {
        const arr = state.imageUrls.split(',');
        arr.splice(
          arr.findIndex((item) => item === url),
          1
        );
        state.imageUrls = arr.toString();
      }
      function checked(record, closeModal) {
        console.log('state.imageUrls', state.imageUrls);
        console.log(`props.type`, props.type);
        if (props.type === 'image') {
          state.imageUrls = record.imgUrl.replace('http://jetbill.cn', '');
        } else {
          state.imageUrls = state.imageUrls + ',' + record.imgUrl.replace('http://jetbill.cn', '');
        }
        closeModal();
        emit('change');
      }
      function checkedBatches(keys, closeModal) {
        console.log(`keys`, keys);
        closeModal();
        console.log('========checkedBatches========');
        emit('change');
      }
      function onInputChange(e) {
        state.imageUrls = e.target.value;
      }
      function onFocus() {
        state.tipShow = true;
      }
      function onBlur() {
        state.tipShow = false;
      }
      getImageList();
      async function getImageList() {
        await getAttachmentList().then((res) => {
          state.image_list = res.rows;
        });
      }

      return {
        handleChange: (list: string[]) => {
          console.log(`list`, list);
          createMessage.info(`已上传文件${JSON.stringify(list)}`);
        },
        checkedBatches,
        checked,
        openChooseModal,
        deleteImage,
        onInputChange,
        onFocus,
        onBlur,
        uploadApi,
        chooseModalRegister,
        openModal,
        ...toRefs(props),
        ...toRefs(state),
      };
    },
  });
</script>
<style scoped>
  .upload-input {
    position: relative;
    top: 11px;
    width: 45%;
    height: 34px;
    margin-right: 5px;
  }

  .image-list {
    display: flex;
    flex-wrap: wrap;
    width: 70%;
  }

  .image-item {
    width: 120px;
    margin: 0 5px;
    text-align: center;
  }

  .image-wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 80px;
    border: 1px solid #ddd;
    border-radius: 2px;
  }

  .dele-image {
    height: 20px;
    margin: 8px 0;
    color: #fff;
    background: #e74c3c;
    border-radius: 2px;
  }

  .tip-span {
    position: relative;
    top: 11px;
    font-size: 13px;
    line-height: 250%;
    color: gray;
  }
</style>
