<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">
    <template #bodyCell="{ column, record }">
      <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)" v-if="record.jcjgList?.length > 0">查看</a-radio-button>
          <a-radio-button value="small" v-if="type == 'edit'" @click="del(record)">删除</a-radio-button>
        </a-space>
      </template>
    </template>
  </a-table>
  <SamplenInfor v-if="visible" :type="type" :Item="Item" />
</template>
<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useMethods } from '/@/hooks/system/useMethods';
  import { downloadFile } from '/@/api/common/api';
  import { jxHqjgjcsj } from '@/views/dkgl/hqgl/api';
  import { Modal } from 'ant-design-vue';

  import SamplenInfor from './SampleInfor.vue';

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

  const { handleImportXls } = useMethods();

  const dataSource = ref<any>([]);
  const columns = ref<any>([
    {
      title: '监测介质',
      dataIndex: 'jcjz',
      key: 'jcjz',
    },
    {
      title: '采样单位',
      dataIndex: 'cydw',
      key: 'cydw',
    },
    {
      title: '采样井深度(cm)',
      dataIndex: 'cyjsd',
      key: 'cyjsd',
    },
    {
      title: '样点编号',
      dataIndex: 'ydbh',
      key: 'ydbh',
    },
    {
      title: '经度',
      dataIndex: 'jd',
      key: 'jd',
    },
    {
      title: '纬度',
      dataIndex: 'wd',
      key: 'wd',
    },
    {
      title: '地面高程',
      dataIndex: 'dmgc',
      key: 'dmgc',
    },
    {
      title: '地下水埋深(cm)',
      dataIndex: 'dxsms',
      key: 'dxsms',
    },
    {
      title: '长期监测井',
      dataIndex: 'cqjcj',
      key: 'cqjcj',
    },
    {
      title: '采样深度(cm)',
      dataIndex: 'cysd',
      key: 'cysd',
    },
    {
      title: '采样日期',
      dataIndex: 'cyrq',
      key: 'cyrq',
    },
    {
      title: '检测日期',
      dataIndex: ' jcrq',
      key: ' jcrq',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
    },
  ]);
  const visible = ref(false);

  const Item = ref<any>();

  watch(
    () => props.data,
    () => {
      if (props.type == 'view') {
        console.log(props.data, 'props.data');
        dataSource.value = props.data;
      }
    },
    { deep: true, immediate: true }
  );
  function onImportXls(d) {
    handleImportXls(d, jxHqjgjcsj, (res) => {
      if (res.code === 200) {
        dataSource.value = dataSource.value.concat(res.result);
      }
    });
  }

  // 点击查看
  function view(v) {
    Item.value = v.jcjgList;
    visible.value = true;
  }
  // 删除
  function del(v) {
    Modal.confirm({
      title: '确认删除',
      content: '是否确认删除数据',
      centered: true,
      okText: '确认',
      cancelText: '取消',
      onOk: async () => {
        visible.value = false;
        // 删除所有
        if (v == 'all') {
          dataSource.value = [];
        } else {
          dataSource.value.forEach((item, index) => {
            if (v.ydbh == item.ydbh) dataSource.value.splice(index, 1);
          });
        }
      },
    });
  }

  async function getFormValue() {
    console.log('子组件执行');
    //获取所有值
    let fieldsValue = dataSource.value;

    return fieldsValue;
  }
  function down(url, name) {
    let fileExtension = url.split('.').pop();
    downloadFile('/sys/common/static' + url, `${name}.${fileExtension}`);
  }
  defineExpose({
    getFormValue,
  });
</script>
