<!-- 市况 -->
<script setup lang="ts">
import { Chart1, Chart3, Chart4, Chart5, Chart6 } from './MarketData'
import HomeHead from '@/views/home/components/HomeHead.vue'
import AppBlock from '@/components/AppBlock.vue'
import AppNewsBox from '@/components/AppNewsBox.vue'
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
import { useDate } from '@/views/home/hooks/useDate'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { getList, marketPreADD, getMarketUser, saveMarketUser, MarketDownload, MarketPreview, getCurrencyList, getMetalList } from '@/api/daikin/base'
import { NModal, NCard } from 'naive-ui'
import { formatDate } from '@/utils/format'
import { message } from '@/utils/message'
import { useUserStore } from '@/stores/modules/user'
import UserList from '@/views/home/intelligence/process/UserPages.vue'
import Amtion from '@/components/amtion.vue'
import { noticeld } from '@/stores/modules/noticeId'
const store = useUserStore()
const stores = noticeld()
const userCode = ['admin', 'shikuang_dandang', 'tech_service'].some((item) =>
    store.user.roleCode?.includes(item)
)
const userCodes = ['admin', 'huilv_dandang', 'tech_service'].some((item) =>
    store.user.roleCode?.includes(item)
)
const { day, week } = useDate()
const { push } = useRouter()
const currentDate = new Date();
const currentDates = new Date();
const value1 = ref<[Date, Date]>([
    currentDate.setMonth(currentDate.getMonth() - 11),
    new Date()
])
const value2 = ref<[Date, Date]>([
    currentDates.setMonth(currentDates.getMonth() - 11),
    new Date()
])
const { chartRef: chartRef1, option: chartOption1, state } = Chart1()
const { option: chartOption11 } = Chart1()
const { chartRef: chartRef3, option: chartOption3, state2 } = Chart3()
const { chartRef: chartRef4, option: chartOption4, state3 } = Chart4()
const { chartRef: chartRef5, option: chartOption5, state4 } = Chart5()
const { chartRef: chartRef6, option: chartOption6, state5 } = Chart6()

const listData = ref()
const listDatas = ref()
async function getData() {
    const { data } = await getList({ type: 2 })
    const { data: ds } = await getList({ type: 1 })
    listData.value = data
    listDatas.value = ds
}
const metal = ref()
const currency = ref()
onMounted(async () => {
    getData()
    const { data } = await getCurrencyList()
    const { data: dat } = await getMetalList()
    if (dat && dat != 'null' && dat.length > 0) {
        metal.value = dat
        // .filter((item:any) => {
        //     if(["Fe","lengmei"].includes(item.value)){
        //         return false
        //     }else return item
        // })
        from.value.label.radio = dat[0].value
        state4.number = dat[0].value
        console.log("🚀 ~ file: Market.vue:56 ~ metal:", metal)
    }
    if (data && data != 'null' && data.length > 0) {
        currency.value = data
        from.value.labe2.radio = data[0].value
        const dat = data[0].value.split(',')
        state5.currencyCodeFrom = dat[0]
        state5.currencyCodeTo = dat[1]
        state2.currencyCodeFrom = dat[0]
        state2.currencyCodeTo = dat[1]
        state3.currencyCodeFrom = dat[0]
        state3.currencyCodeTo = dat[1]
    }
})

const src = ref('');
const srcType = ref()
const showModalRef2 = ref(false)
const lokeFuck = async (n) => {
    const { id } = n
    if (!id) return
    let { data: { url } } = await MarketPreview({ id })
    if (!url) {
        message.info("没有可预览文件！")
        return
    }
    srcType.value = getLastSubstring(url)
    if (['doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx', 'pdf'].includes(srcType.value)) {
        // src.value = filePath
        // pdfShow.value = true
        url = 'https://view.xdocin.com/view?src=' + url
        const screenWidth = window.screen.width;
        const screenHeight = window.screen.height;
        window.open(url, '', 'width=' + screenWidth + ',height=' + screenHeight + ',top=' + 0 + ',left=' + 0)
    }
    else {
        message.error("文件格式不是 'doc', 'docx', 'ppt', 'pptx', 'xls', 'xlsx','pdf'！")
    }


}
function getLastSubstring(str: string): string {
    const lastIndex = str.lastIndexOf('.');
    if (lastIndex !== -1) {
        return str.substring(lastIndex + 1);
    } else {
        return '';
    }
}



async function downloadFile(data: { id: any; title: string }) {
    console.log(data)
    if (!data.id) return
    try {
        const response = await MarketDownload({ id: data.id })
        console.log(response)
        var blob = new Blob([response.data]);

        const downloadUrl = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        link.download = response.fileName; // 替换为你要保存的文件名
        link.click();
        URL.revokeObjectURL(downloadUrl);
    } catch (error) {
        message.error(error);
    }
}
const tab = ref(false)
const tab1 = ref(false)
const tab2 = ref(false)
const names = ref('Cu')
const names1 = ref('100USD-CNY')
const names2 = ref('100USD-CNY')
const tabClick1 = (e) => {

    console.log(e.target.getAttribute('data-id'))
    tab1.value = false
    const dat = e.target.getAttribute('data-id').split(',')
    names1.value = e.target.innerText
    state2.currencyCodeFrom = dat[0]
    state2.currencyCodeTo = dat[1]
}
const tabClick2 = (e) => {

    console.log(e.target.getAttribute('data-id'))
    tab2.value = false
    const dat = e.target.getAttribute('data-id').split(',')
    names2.value = e.target.innerText
    state3.currencyCodeFrom = dat[0]
    state3.currencyCodeTo = dat[1]
}
const tabClick = (e) => {

    console.log(e.target)
    tab.value = false
    state.type = e.target.getAttribute('data-id')
    //  names.value =e.target.innerText
}
const tabShow = (num) => {

    // console.log(num)
    switch (num) {
        case 0:
            tab.value = tab.value === false ? true : false
            break;
        case 1:
            tab1.value = tab1.value === false ? true : false
            break;
        case 2:
            tab2.value = tab2.value === false ? true : false
            break;
    }
}


const from = ref({
    label: {
        radio: ''
    },
    labe2: {
        radio: ''
    }
})
const shomk = ref(false)
const sdubList = ref({
    title: '',
    fileList: [],
})
const shomks = (it) => {
    sdubList.value.type = it
    // console.log(sdubList.value)
    shomk.value = true
}
async function onSubmit() {
    const { type, title, fileList } = sdubList.value

    let filePath
    if (fileList.length > 0) {
        // console.log(fileList)
        filePath = fileList[0].response.url
    }

    const { msg, code } = await marketPreADD({ type, title, filePath })
    if (code === 200) { message.success("修改成功") }
    else message.warning(msg)
    window.location.reload();
    // console.log(sdubList.value)
}
const handleExceed: UploadProps['onExceed'] = (uploadFile: any, uploadFiles: any) => {
    message.warning("当前只支持上传一个文件")
}
const thisCka = (e) => {
    if (value1.value) {
        state4.startTime = formatDate(value1.value[0]).substring(0, 10)
        state4.endTime = formatDate(value1.value[1]).substring(0, 10)
    }
    state4.number = e
    console.log(e)
}
const thisCka2 = (e) => {
    const dat = e.split(',')
    if (value2.value) {
        state5.startTime = formatDate(value2.value[0]).substring(0, 10)
        state5.endTime = formatDate(value2.value[1]).substring(0, 10)
    }
    state5.currencyCodeFrom = dat[0]
    state5.currencyCodeTo = dat[1]
}
const timenFirst = (e) => {
    // console.log(e)
    state4.startTime = formatDate(value1.value[0]).substring(0, 10)
    state4.endTime = formatDate(value1.value[1]).substring(0, 10)
}
const timenFirsts = (e) => {
    // console.log(e)
    state5.startTime = formatDate(value2.value[0]).substring(0, 10)
    state5.endTime = formatDate(value2.value[1]).substring(0, 10)
}
const header = { 'token': store.user.token }

const showModal = ref(false)
const flg = ref()
const setUserList = ref()
async function getUser(moduleId: any) {
    showModal.value = !showModal.value
    flg.value = moduleId
    const { data: userArr } = await getMarketUser({ moduleId })
    stores.article.reviewSource = '2'
    setUserList.value = userArr

}
// 获取子组件传过来的值
const handleChild = (data: any) => {
    console.log(data, 444);
    const { showModal: show, multipleSelection } = data
    showModal.value = unref(show)
    // userList.value = multipleSelection
    let userIdList: any[] = []
    multipleSelection.value.forEach((i: { userId: any }) => {
        // console.log(dataList.value)
        userIdList.push(i.userId)
    })

    saveMarketUser({
        moduleId: flg.value,
        userIdList: userIdList
    })
}
const CloseThiss = (data: boolean) => {
    showModal.value = data
}
</script>

<template>
    <HomeHead class="top">
        <template #content>
            <!-- <HomeHeadSearch /> -->
        </template>
    </HomeHead>
    <div class="h-full relative flex flex-col overflow-y-auto scrollbar-width-1px">
        <div class="pl12px mt30px flex w-full h-full gap-30px">
            <!-- <img src="./images/shukuang.png" alt="" class="w-full h-full"> -->

            <AppBlock class="flex-1 box">
                <div class="box-title">市况</div>
                <el-button type="primary" v-if="userCode" class="button !mr-30px !mt-[-30px] z-100"
                    @click="push({ name: 'MarketDataModify' })">数据管理</el-button>
                <div class="bgStyle !h250px mt20px">
                    <div class=" relative w100%">

                        <span @click="tabShow(0)" class="title bg-#70BFCD pl18px pr24px">{{ names }}
                            <!-- <el-icon><CaretBottom /></el-icon> -->
                        </span>
                        <span class="absolute right-160px top-14px z-30 text-#000">最近7天数据</span>

                        <div v-if="false && tab"
                            class="tab absolute bg-#fff w100px top-50px z-50 text-#112144 text-center leading-28px text-18px ">
                            <div v-if="metal"
                                v-for="im in metal.filter((item: any) => !['Fe', 'lengmei'].includes(item.value))"
                                class="py5px  !rounded-none" :data-id="im.value" @click="tabClick">{{ im.title }}</div>
                            <!-- <div class="py5px !rounded-none" data-id="Fe" @click="tabClick">Fe</div>
                         
                            <div class="py5px !rounded-none" data-id="Cu" @click="tabClick">Cu</div>
                            <div class="py5px !rounded-none" data-id="Re" @click="tabClick">稀土</div> -->
                        </div>
                        <VChart class="absolute z-22 left-0 right-0 !w-full" ref="chartRef1" :option="chartOption1"
                            autoresize />
                    </div>
                    <!-- <div>
                        <span class="title  bg-#70BFCD p5px pl10px !pr25px">AI</span>
                        <VChart class="absolute z-22" ref="chartRef2" :option="chartOption2" autoresize />
                    </div> -->
                </div>
                <div class="bgStyle !h250px mt10px">
                    <div class=" relative w100%">

                        <span class="title bg-#FF960F pl18px pr28px">{{ 'AI' }}
                            <!-- <el-icon><CaretBottom /></el-icon> -->
                        </span>
                        <span class="absolute right-160px top-14px z-30 text-#000">最近7天数据</span>
                        <VChart class="absolute z-22 left-0 right-0 !w-full" ref="chartRef1" :option="chartOption11"
                            autoresize />
                    </div>
                    <!-- <div>
                        <span class="title  bg-#70BFCD p5px pl10px !pr25px">AI</span>
                        <VChart class="absolute z-22" ref="chartRef2" :option="chartOption2" autoresize />
                    </div> -->
                </div>
                <div class="bgStyle  !h240px mt10px">
                    <div>
                        <span class="title  bg-#003BB7 !text-16px  pl13px pr20px  ">历年数据</span>
                        <VChart class=" absolute z-22" ref="chartRef5" :option="chartOption5" autoresize />
                    </div>
                </div>
                <div class="mt8px ml10px">
                    <div class="flex items-center w-45%">

                        <span class="text-#000 whitespace-nowrap">日期:</span>
                        <el-config-provider :locale="zhCn">
                            <el-date-picker v-model="value1" type="daterange" range-separator="到"
                                start-placeholder="开始时间" end-placeholder="结束时间" size="small"
                                @change="timenFirst" /></el-config-provider>
                    </div>
                    <div class="flex justify-between items-center">
                        <el-radio-group v-model="from.label.radio" class="ml-4" @change="thisCka">
                            <el-radio v-if="metal" v-for="im in metal" :label="im.value"
                                size="large">{{ im.title }}</el-radio>
                            <!-- <el-radio label="Al" size="large" >Al</el-radio>
                            <el-radio label="Fe" size="large" >Fe</el-radio>
                            <el-radio label="Re" size="large" >稀土</el-radio> -->
                        </el-radio-group>
                        <el-popover placement="top-end" trigger="click" :popper-style="{ width: '590px',borderRadius:'10px' }"
                            :teleported="true">
                            <template #reference>
                                <div
                                    class="bg-gr h-42px w115px flex justify-center items-center text-#fff rounded-10px text-18px cursor-pointer font-bold">
                                    市况预测 <el-icon class="rotate-270deg">
                                        <CaretBottom />
                                    </el-icon></div>
                            </template>
                            <!-- <Teleport to="v-screen-box"> -->
                            <!-- <VScaleScreen
                        ref="fitscreenRef"
                        :width="1920"
                        :height="1080"
                        mode="fit"
                        > -->
                            <div class="bgStyle h-250px w-690px mt15px mb10px">
                                <div class="w-full">
                                    <span class="title  bg-#003BB7 !text-16px pl13px pr20px b">市况预测</span>
                                    <!-- <el-button type="primary" v-if="userCode" class="button" @click="getUser(1)">查看范围</el-button> -->
                                    <el-button type="primary" size="small" v-if="userCode" class="button !mr-2%"
                                        @click="push({ name: 'MarketModifys' })">管理</el-button>
                                    <p class="mt40px p15px !border-none max-h250px  overflow-auto">
                                    <p class="!border-none  w-98% !flex items-center pb10px news-item !pr30rpx"
                                        v-for="n in listDatas" :key="n">
                                        <AppNewsBox class="flex-1 !border-none" :text="n.title" :date="n.createTime" />
                                    <p class="flex-shrink flex !border-none w35px ml20px">
                                        <el-button size="small" type="primary" @click="lokeFuck(n)">预览</el-button>
                                        <!-- <el-button type="primary" @click="downloadFile(n)">下载</el-button> -->
                                    </p>
                                    </p>
                                    </p>

                                </div>
                            </div>
                            <!-- </VScaleScreen> -->
                            <!-- </Teleport>  -->
                        </el-popover>
                    </div>

                </div>
            </AppBlock>
            <AppBlock class="flex-1 box">
                <div class="box-title ">汇率</div>
                <div class="bgStyle !h250px mt20px">
                    <div class="mr25px">
                        <span @click="tabShow(1)"
                            class="title  bg-#FF603A !text-16px pl13px pr20px ">{{ names1 }}<el-icon>
                                <CaretBottom />
                            </el-icon></span>
                        <div v-if="tab1"
                            class="tab absolute bg-#fff w100px top-40px z-50 text-#112144 text-center leading-28px text-16px ">
                            <div v-if="currency" v-for="it in currency" class="py5px  !rounded-none" :data-id="it.value"
                                @click="tabClick1">{{ it.title }}</div>
                            <!-- <div class="py5px !rounded-none" data-id="CNA,USD" @click="tabClick1">人民币-美元</div>
                            <div class="py5px !rounded-none" data-id="JPY,USD" @click="tabClick1">日元-美元</div> -->
                        </div>


                        <VChart class=" absolute z-22" ref="chartRef3" :option="chartOption3" autoresize />
                    </div>
                    <div>
                        <span @click="tabShow(2)"
                            class="title  bg-#70BFCD  !text-16px pl13px pr20px ">{{ names2 }}<el-icon>
                                <CaretBottom />
                            </el-icon></span>

                        <div v-if="tab2"
                            class="tab absolute bg-#fff w100px top-40px z-50 text-#112144 text-center leading-28px text-16px ">
                            <div v-if="currency" v-for="it in currency" class="py5px  !rounded-none" :data-id="it.value"
                                @click="tabClick2">{{ it.title }}</div>
                            <!-- <div class="py5px !rounded-none" data-id="CNA,USD" @click="tabClick2">人民币-美元</div>
                            <div class="py5px !rounded-none" data-id="JPY,USD" @click="tabClick2">日元-美元</div> -->
                        </div>

                        <VChart class="absolute z-22" ref="chartRef4" :option="chartOption4" autoresize />
                    </div>
                </div>

                <div class="bgStyle  !h250px mt10px">
                    <div>
                        <span class="title  bg-#003BB7 !text-16px pl13px pr20px ">历年数据</span>
                        <VChart class=" absolute z-22" ref="chartRef6" :option="chartOption6" autoresize />
                    </div>
                </div>
                <div class="mt10px ml10px">
                    <div class="flex items-center w-45%">

                        <span class="text-#000 whitespace-nowrap">日期:</span>
                        <el-config-provider :locale="zhCn">
                            <el-date-picker v-model="value2" type="daterange" range-separator="到"
                                start-placeholder="开始时间" end-placeholder="结束时间" size="small"
                                @change="timenFirsts" /></el-config-provider>
                    </div>
                    <div class="h-30px">
                        <el-radio-group v-model="from.labe2.radio" class="ml-4" @change="thisCka2">
                            <el-radio v-if="currency" v-for="it in currency" :label="it.value"
                                size="large">{{ it.title }}</el-radio>
                            <!-- <el-radio label="JPY,USD" size="large" >日元-美元</el-radio>
                            <el-radio label="CNA,USD" size="large" >人民币-美元</el-radio> -->
                        </el-radio-group>
                    </div>

                </div>
                <div class="bgStyle  !h230px mt15px mb10px">
                    <div>
                        <span class="title  bg-#003BB7 !text-16px pl13px pr20px ">汇率预测</span>
                        <!-- <el-button type="primary" v-if="userCode" class="button" @click="getUser(2)">查看范围</el-button> -->
                        <el-button type="primary" v-if="userCodes" class="button"
                            @click="push({ name: 'MarketModify' })">管理</el-button>
                        <p class="mt40px p15px !border-none max-h-full overflow-auto">
                        <p class="!border-none  w615px !flex items-center pb10px news-item " v-for="n in listData"
                            :key="n">
                            <AppNewsBox class="flex-1 !border-none" :text="n.title" :date="n.createTime" />
                        <p class="flex-shrink flex !border-none w35px ml20px">
                            <el-button type="primary" @click="lokeFuck(n)">预览</el-button>
                            <!-- <el-button type="primary" @click="downloadFile(n)">下载</el-button> -->
                        </p>
                        </p>
                        </p>

                    </div>
                </div>
            </AppBlock>
        </div>
    </div>
    <!-- <div style="width: 1200px; height:800px ; position: fixed; z-index: 100; top:50px;;">
       
    </div> -->
    <n-modal :mask-closable="true" v-model:show="showModalRef2">
        <div class="w90% h90% ">
            <Amtion :data="src" :datas="srcType" />
        </div>

    </n-modal>


    <n-modal v-model:show="shomk">
        <div class="py40px px30px bg-#fff">

            <el-form :model="sdubList" label-width="120px" :inline="true">

                <el-form-item label="标题">
                    <el-input v-model="sdubList.title" />
                </el-form-item>
                <br>
                <el-form-item label="文件">
                    <el-upload v-model:file-list="sdubList.fileList" class="upload-demo" :headers="header"
                        action="/test-api/common/upload" :on-change="handleChange">
                        <el-button type="primary">选择文件</el-button>

                    </el-upload>
                </el-form-item>
                <br>
                <br>

                <el-form-item class="ml80px">
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </el-form-item>
            </el-form>

        </div>
    </n-modal>
    <n-modal v-model:show="showModal">
        <UserList :userDataList="setUserList" @clickChild="handleChild" @CloseThis="CloseThiss" />
    </n-modal>
</template>

<style scoped lang="less">
.bg-gr {
    background: linear-gradient(to left, #34A6D9 0%, #23D1C6 100%);
}

.button {
    display: block;
    float: right;
    margin-right: 20px;
}




::-webkit-scrollbar {
    width: 1px;
}

.top {
    position: absolute;
    right: 30px;
    top: -92px;
}

.date-wrapper[data-v-c5c4f420] {
    line-height: 1.5;
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    color: #142142;
    border: none;
}

.tab {
    div:hover {
        color: #0036BC;
    }
}

.box {
    padding: 23px 20px 0 20px;

    .box-title {
        font-size: 28px;
        font-weight: 600;
        position: relative;
        padding-left: 24px;
        color: black;

        &::before {
            content: " ";
            display: block;
            width: 8px;
            height: 30px;
            background-color: #003ab5;

            position: absolute;
            left: 0;
        }
    }
}

.bgStyle {
    display: flex;
    width: 100%;
    height: 270px;
    position: relative;
    padding: 0 5px;

    div {
        flex: 1;
        border: 1px solid rgb(236, 236, 236);
        border-radius: 18px;

        .title {
            // width: 60px;
            // height: 60px;
            border-radius: 18px 0 50px 0;
            color: aliceblue;
            line-height: 40px;
            font-size: 24px;
            font-weight: 500;
            z-index: 50;
            position: absolute;
        }
    }
}
</style>
