<template>
  <div class="w-full flex justify-end" v-if="type == 'edit'">
    <a-space>
      <a-button type="primary" @click.stop="down('/upload/static/环境检测报告模板.xlsx', '环境检测报告模板')">模板下载</a-button>
      <a-upload name="file" :showUploadList="false" accept=".xls,.xlsx" :customRequest="(d) => onImportXls(d)" @click.stop class="ml-2">
        <a-button type="primary">导入</a-button>
      </a-upload>
      <a-button type="primary" @click="del('all')">删除</a-button>
    </a-space>
  </div>
  <div class="text-center py-2">点位信息</div>
  <a-table :dataSource="dataSource" :columns="columns" class="trdxsjc">
    <template #bodyCell="{ column, record, index }">
      <template v-if="column.key == 'index'">
        {{ index + 1 }}
      </template>
      <template v-if="column.key == 'fj'">
        <div class="flex">
          <!-- 上传图片 -->
          <JUpload
            ref="uploadRef"
            :value="value"
            v-if="type == 'edit'"
            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 == 'pointtype'">
        <span>{{ record.pointtype == 'solid' ? '土壤' : '地下水' }}</span>
      </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>
  <!-- 弹框 -->
  <a-modal v-model:visible="visible" title="详细信息" style="width: 70%">
    <template #footer>
      <!-- <div>
        <a-button type="primary" @click="visible = false">确定</a-button>
      </div> -->
    </template>
    <SamplenInfor :type="type" :hjjcId="Item" />
  </a-modal>
  <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, toRaw } from 'vue';
  import { useMethods } from '/@/hooks/system/useMethods';
  import { downloadFile } from '/@/api/common/api';
  import { getHjjcList, addHjjc, updateHjjc, deleteHjjc, deleteHjjcAll } from '@/api/common/api';
  import { Modal } from 'ant-design-vue';
  import { EyeOutlined, DownloadOutlined, DeleteOutlined } from '@ant-design/icons-vue';
  import JUpload from '@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
  import SamplenInfor from './SampleInfor.vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useGlobSetting } from '/@/hooks/setting';

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

  const { createMessage } = useMessage();
  const { handleImportXls } = useMethods();
  const globSetting = useGlobSetting();
  const baseUploadUrl = globSetting.uploadUrl;

  const value = ref();
  const uploadRef = ref();
  const uploadBinds = reactive({ props: {} as any });

  const dataSource = ref<any>();
  const columns = ref<any>([
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
    },
    {
      title: '样点编码',
      dataIndex: 'pointcode',
      key: 'pointcode',
    },
    {
      title: '样点名称',
      dataIndex: 'pointname',
      key: 'pointname',
    },
    {
      title: '样点类型',
      dataIndex: 'pointtype',
      key: 'pointtype',
    },
    {
      title: '坐标系名称',
      dataIndex: 'ucs',
      key: 'ucs',
    },
    {
      title: '经度',
      dataIndex: 'jd',
      key: 'jd',
    },
    {
      title: '纬度',
      dataIndex: 'wd',
      key: 'wd',
    },
    {
      title: '附件照片(png/jpg格式)',
      dataIndex: 'fj',
      key: 'fj',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
    },
  ]);
  const visible = ref(false);
  const previewVisible = ref(false);
  const previewTitle = ref('图片预览');
  const previewImage = ref();
  const Item = ref('');
  const params = ref<any>({
    pageNo: 1,
    pageSize: 10,
    ...props.data,
  });

  // 获取数据
  async function init() {
    const res = await getHjjcList(params.value);
    // imgs.value = [];
    dataSource.value = res.records;
  }
  // 点击分页
  // function changePage(v) {
  //   console.log(v.current, 'v');
  // }
  watch(
    () => props.data,
    () => {
      const res = toRaw(props.data);
      params.value = { ...params.value, ...res };
      init();
    },
    { deep: true, immediate: true }
  );
  function onImportXls(d) {
    d.data = {
      wrdkid: params.value.wrdkid,
      pointType: params.value.pointType,
      scjdbm: params.value.scjdbm,
      faId: params.value.faId,
    };
    handleImportXls(d, addHjjc, (res) => {
      if (res.code === 200) {
        init();
      }
    });
  }
  //   上传图片的限制
  function beforeUpload(file) {
    console.log(file, 'file');
    if (file.type != 'image/jpg' && file.type != 'image/png') {
      createMessage.error('只能上传jpg,png格式的图片');
      return false;
    }
    // if (file.type != 'image/png') {
    //   createMessage.error('只能上传jpg,png格式的图片');
    //   return false;
    // }
    return true;
  }
  //   上传图片
  async function emitValue(value, record) {
    if (!value) {
      createMessage.error('上传失败请稍后重试');
      return;
    }
    // 拿到数据走接口保存
    const param = {
      fj: value,
      hjjcId: record.hjjcId,
    };
    await updateHjjc(param);
    init();
  }
  // 删除图片
  async function delImg(record) {
    const param = {
      fj: '',
      hjjcId: record.hjjcId,
    };
    await updateHjjc(param);
    init();
  }
  // 点击查看
  function view(v) {
    console.log(v.hjjcId, 'v.hjjcId');
    Item.value = v.hjjcId;
    visible.value = true;
  }
  // 删除
  function del(v) {
    Modal.confirm({
      title: '确认删除',
      content: '是否确认删除数据',
      centered: true,
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        visible.value = false;
        // 删除所有
        if (v == 'all') {
          await deleteHjjcAll({ ...props.data });
          init();
        } else {
          // 删除的那个 dataSource里的值就需要少哪个
          await deleteHjjc({ hjjcId: v.hjjcId });
          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>
<style  lang="less">
.trdxsjc {
  .ant-table-thead {
    tr {
      th::after{
        position: absolute;
        display: inline-block;
        margin-right: 4px;
        color: #ff4d4f;
        font-size: 14px;
        font-family: SimSun, sans-serif;
        line-height: 1;
        content: '*';
          
      }
      th:first-child::after{
        display: none;
      }
      th:last-child::after{
        display: none;
      }
    }
  }
}
</style>