<template>
  <div class="text-center py-2">样品信息</div>
  <a-table :dataSource="dataSource" :columns="columns">
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.key == 'index'">
        {{ index + 1 }}
      </template>
      <template v-if="column.key == 'fj'">
        <div class="flex">
          <!-- 上传图片 -->
          <JUpload
            v-if="type == 'edit'"
            ref="uploadRef"
            :value="value"
            v-bind="uploadBinds.props"
            :showDownloadBtn="false"
            :showUploadList="false"
            accept=".png,.jpg"
            @beforeUpload="beforeUpload"
            @change="emitValue($event, record)"
          >
          </JUpload>
          <a-space v-if="record.fj">
            <a-button size="small" type="primary" @click="down(record.fj, record.pointname)">
              <DownloadOutlined />
            </a-button>
            <a-button @click="Preview(record.fj)" size="small" type="primary">
              <eye-outlined />
            </a-button>
            <a-button size="small" v-if="type == 'edit'" type="primary" @click="delImg(record)">
              <DeleteOutlined />
            </a-button>
          </a-space>
        </div>
      </template>
      <template v-if="column.key == 'action'">
        <a-space>
          <a-radio-button value="small" @click="view(record)">查看</a-radio-button>
          <a-radio-button value="small" v-if="type == 'edit'" @click="del(record)">删除</a-radio-button>
        </a-space>
      </template>
    </template>
  </a-table>
  <SamplesTesting v-if="show" :sampleId="Item" />
  <a-modal v-model:visible="previewVisible" :title="previewTitle" :footer="null" @cancel="previewVisible = false">
    <img alt="example" style="width: 100%" :src="baseUploadUrl + previewImage" />
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue';

  import { downloadFile } from '/@/api/common/api';
  import { Modal } from 'ant-design-vue';
  import JUpload from '@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
  import { EyeOutlined, DownloadOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import SamplesTesting from './SamplesTesting.vue';
  import { getJcypList, updateJcyp, deleteJcyp } from '@/api/common/api';

  import { useGlobSetting } from '/@/hooks/setting';

  const props = defineProps({
    type: {
      type: String,
      default: 'edit',
    },
    hjjcId: {
      type: String,
      default: '',
    },
  });

  const { createMessage } = useMessage();
  const value = ref();
  const uploadRef = ref();
  const uploadBinds = reactive({ props: {} as any });
  const globSetting = useGlobSetting();
  const baseUploadUrl = globSetting.uploadUrl;

  const show = ref(false);
  const previewVisible = ref(false);
  const previewTitle = ref('图片预览');
  const previewImage = ref();
  const Item = ref();
  const dataSource = ref<any>();
  const columns = ref<any>([
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
    },
    {
      title: '样点编码',
      dataIndex: 'pointcode',
      key: 'pointcode',
    },
    {
      title: '样品编码',
      dataIndex: 'samplecode',
      key: 'samplecode',
    },
    {
      title: '样品名称',
      dataIndex: 'samplename',
      key: 'samplename',
    },

    {
      title: '采样起始位置(cm)',
      dataIndex: 'positionstart',
      key: 'positionstart',
    },
    {
      title: '采样终止位置(cm)',
      dataIndex: 'positionend',
      key: 'positionend',
    },
    {
      title: '采样人',
      dataIndex: 'sampleuser',
      key: 'sampleuser',
    },
    {
      title: '采样时间',
      dataIndex: 'sampletime',
      key: 'sampletime',
    },
    {
      title: '附件照片',
      dataIndex: 'fj',
      key: 'fj',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
    },
  ]);
  async function init() {
    const res = await getJcypList({ hjjcId: props.hjjcId });
    dataSource.value = res.records;
  }
  init();
  watch(
    () => props.hjjcId,
    (val) => {
      console.log(val, 'valbuzou');
      show.value = false;
      init();
    },
    { deep: true, immediate: true }
  );
  //   上传图片的限制
  function beforeUpload(file) {
    if (file.type != 'image/jpg' && file.type != 'image/png') {
      createMessage.error('只能上传jpg,png格式的图片');
      return false;
    }
    // if (file.type != 'image/png') {
    //   createMessage.error('只能上传jpg,jpeg,png格式的图片');
    //   return false;
    // }
    return true;
  }
  //   上传图片
  async function emitValue(value, record) {
    if (!value) {
      createMessage.error('上传失败请稍后重试');
      return;
    }
    const param = {
      fj: value,
      sampleId: record.sampleId,
    };
    await updateJcyp(param);
    init();
  }
  // 删除图片
  async function delImg(record) {
    const param = {
      fj: '',
      sampleId: record.sampleId,
    };
    await updateJcyp(param);
    init();
  }
  // 点击查看
  function view(v) {
    show.value = true;
    Item.value = v.sampleId;
  }
  // 点击删除
  function del(v) {
    Modal.confirm({
      title: '确认删除',
      content: '是否确认删除数据',
      centered: true,
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        show.value = false;
        // 删除的那个 dataSource里的值就需要少哪个
        await deleteJcyp({ sampleId: v.sampleId });
        init();
      },
    });
  }
  // 点击预览图片
  function Preview(url) {
    previewVisible.value = true;
    previewImage.value = url;
  }
  function down(url, name) {
    let fileExtension = url.split('.').pop();
    downloadFile('/sys/common/static' + url, `${name}.${fileExtension}`);
  }
</script>
