<template>
   <div>
        <el-dialog v-model="props.modelValue" @closed="closeDialog" center :title="title" width="1280px">
            <div ref="searchRef">
                <Search :searchArr="searchConfiger" @submit="onSearch" ></Search>
            </div>
            <MyTable 
                :tableData="pageData.tableData" 
                :tableColumn="pageData.tableColumn"
                :tableHeight="pageData.tableHeight" 
                :key="pageData.keyCount" 
                :tableConfiger="pageData.tableConfiger"
                @chooseData="chooseData">
                <template #sjly="{row}">
                    <DictTag :tag="false" :value="row.sjly" :options="props.dic.D_GS_RQFJ_LX" />
                </template>
                <template #sffj="{row}">
                    <DictTag :tag="false" :value="row.sffj" :options="props.dic.D_BZ_SF" />
                </template>
            </MyTable>
            <Pages @changeNo="changeNo" @changeSize="changeSize" :tableHeight="pageData.tableHeight" :pageConfiger="{...pageData.pageConfiger}"></Pages>
            <template #footer>
                <el-button @click="cancelDailg">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { qcckGet, qcckDelete } from "@/api/qcckApi.js";
import MyTable from "@/components/aboutTable/MyTable.vue";
import Pages from "@/components/aboutTable/Pages.vue";
import Search from "@/components/aboutTable/Search.vue";
import { ref,reactive, onMounted, nextTick,getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
const props = defineProps({
    modelValue:{
        type:Boolean,
        default:false
    },
    dic:{
        type:Object,
        default:{}
    }
})
const chooseList = ref([])
const title =ref('')
const searchRef = ref()
const emits = defineEmits(['update:modelValue','cancel','submit'])
const searchConfiger = ref([
  { label: "指向地点", prop: "dd", placeholder: "请输入指向地点", showType: "input" },
  { label: "数据内容", prop: "nr", placeholder: "请输入数据内容", showType: "input" },
  { label: "是否发掘", prop: "sffj", placeholder: "请输入数据内容", showType: "select" },
  { label: "数据时间", prop: "times", showType: "datetimerange" },
]);
const pageData = reactive({
  tableData: [],
  keyCount: 0,
  tableConfiger: {
    rowHieght: 61,
    showSelectType: "radio",
    rowKey:'id',
    haveControls: false,
    loading: false,
  },
  pageConfiger: {
    total: 0,
    pageSize: 20,
    pageCurrent: 1
  },
  tableColumn: [
    { label: "数据来源", prop: "sjly",showSolt:true},
    { label: "是否发掘", prop: "sffj",showSolt:true},
    { label: "数据时间", prop: "sj", showOverflowTooltip: true,},
    { label: "指向地点", prop: "dd", showOverflowTooltip: true,},
    { label: "数据内容", prop: "nr", showOverflowTooltip: true},
  ],
});

const dm = ref('');
const init = (val) =>{
    tabHeightFn();
    dm.value = val;
    let zdlist = props.dic.D_GS_RQFJ_LX || []
    let obj = zdlist.find(v=>v.dm == val);
    title.value = obj ? obj.zdmc+'选择' :'选择数据';
    getList()
}

const getList = () =>{
    let params = {
        fjlx:dm.value,
        pageCurrent:pageData.pageConfiger.pageCurrent,
        pageSize:pageData.pageConfiger.pageSize,
    }
    pageData.tableConfiger.loading = true;
    qcckGet(params,'/mosty-gsxt/qbcj/getZdryCbfjtc').then(res=>{
        let arr = res.records || [];
        pageData.tableData = arr.map((item)=>{
            item.sjly = dm.value ;
            return item;
        });
        pageData.pageConfiger.total = res.total;
        pageData.tableConfiger.loading = false;
    }).catch(()=>{
        pageData.tableConfiger.loading = false;
    })
}


const changeNo = (val) => {
  pageData.pageConfiger.pageCurrent = val;
  getList()
};
const changeSize = (val) => {
  pageData.pageConfiger.pageSize = val;
  getList()
};

const chooseData = (val) =>{
    if(Array.isArray(val)) chooseList.value = val;
}

const handleSubmit  = () =>{
    if(chooseList.value.length == 0) return proxy.$message({ type: "warning", message: "请选择数据" });;
    emits('submit',chooseList.value);
    cancelDailg()
}

const cancelDailg = () =>{
    emits('update:modelValue',false);
    emits('cancel');
    chooseList.value = []
}

const tabHeightFn = () => {
  pageData.tableHeight = window.innerHeight - searchRef.value.offsetHeight - 320;
  window.onresize = function () {
    tabHeightFn();
  };
};

defineExpose({init})
</script>

<style lang="scss" scoped>
::v-deep .el-dialog{
    margin-top: 30px;
}

</style>