<!--
 * @Company: 沈阳信诚科技
 * @Email: html_venustar@163.com
 * @Author: Liuqiming
 * @Description: 切片/时间 查询
 * @LastEditors: Liuqiming
 * @LastEditTime: 2024-03-29 11:00:41
 * @Date: 2024-03-18 15:03:08
-->
<template>
  <div class="app-container capture-area" ref="pdfDom">
    <div class="headReturn">
      <div>
        <img src="../../../../assets/images/report02.png" alt="" @click="handlerReturn">
        <span>{{ pageType ? '铸坯追溯-切片查询' : '铸坯追溯-时间查询'}}</span>
      </div>
      <div>
        <el-button @click="downloadAsPDF" :loading="exportLoading"><svg-icon icon-class="exportSvg" />导出PDF</el-button>
        <el-button @click="downloadAsword" :loading="exportLoading"><svg-icon icon-class="exportSvg" />导出Word</el-button>
      </div>
    </div>
    <div id="pdfDom">
      <div class="search-data">
        <el-form :model="searchData" label-width="100px" inline>
          <el-form-item v-if="pageType">
            <template #label>
              位置(mm)<el-tooltip effect="dark" content="以头部位置为准计算相对位置" placement="top">
                <el-icon><InfoFilled /></el-icon>
              </el-tooltip>
            </template>
            <inputRange v-model="searchData.position" placeholder="起始位置-终止位置"></inputRange>
          </el-form-item>
          <el-form-item label="选择时间" v-else>
            <el-date-picker
              v-model="searchData.timeRange"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm"
              value-format="YYYY-MM-DD HH:mm:ss"
              time-format="A hh:mm"
              range-separator="至"
              :clearable="false"
              :disabled-date="disabledDate"
            />
          </el-form-item>
          <el-form-item>
            <el-button @click="handlerSearch" type="primary" v-preventClick="1000">搜索</el-button>
            <el-button @click="handlerReset" v-preventClick="1000">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div v-loading="loading">
        <BilletInformation :pageType="pageType" :sliderMax="sliderMax" :sliderVal="sliderVal" :data="castingReportData"></BilletInformation>
        <contentBorder icon-class="casting-5" title="大包回转变化">
          <timeLine :stampData="stampData"></timeLine>
        </contentBorder>
        <contentBorder icon-class="casting-6" title="切片经过设备时间" v-if="pageType">
          <els-table
            :btnList="btnList"
            :columns="columns"
            :tableData="tableData"
            :searchList="searchList"
            :option="tableOption"
            :tableLoading="tableLoading"
          ></els-table>
        </contentBorder>
        <!-- <contentBorder icon-class="casting-7" title="工艺过程参数"></contentBorder> -->
        <Technology :technologyData="technologyData"></Technology>
      </div>
    </div>
  </div>
</template>

<script setup name="CastingFrom-detail">
import BilletInformation from "./components/BilletInformation.vue";
import Technology from '../../report/components/Technology'
import { init } from './detail.jsx'
import { computed, nextTick } from "vue";
import { useRouter } from "vue-router";
import { getLadleRotationChanges, sliceList, } from '@A/digitalCasting/from/castingFrom.js'
import { getCastingReportById } from '@A/digitalCasting/report/report'

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
// 页面类型：0 铸坯追溯-切片查询， 1 铸坯追溯-时间查询
const pageType = computed(() => route.query.pageType === '0')

// 页面所用变量
const exportLoading = ref(false)
const loading = ref(false)
const searchData = ref({})
const castingReportData = ref({})
const sliderVal = ref([])
const sliderMax = ref(10)
const tableData = ref([])
const tableLoading = ref(false)
// echarts图标 参数
let technologyData = ref(null)
const stampData = ref([])
// 初始化页面设置参数
const initSet = () => {
  if (pageType.value) {
    searchData.value = { position: [] }
  } else {
    searchData.value = { timeRange: [castingReportData.value.prdStartTime, castingReportData.value.prdEndTime] }
  }
  technologyData.value = {
    startTime: castingReportData.value.prdStartTime,
    endTime: castingReportData.value.prdEndTime,
    startLocation: 0,
    endLocation: castingReportData.value.prdStrandNo,
    prdLength: castingReportData.value.prdLength,
    prdNo: castingReportData.value.prdNo,
    prdStrandNo: castingReportData.value.prdStrandNo,
    isSlice: pageType.value
  }
}
// 返回上一页
const handlerReturn = () => {
  router.go(-1)
  proxy.$tab.closePage(route).then(({ visitedViews }) => {})
}
// 导出pdf
const pdfDom = ref(null)
const downloadAsPDF = () => {
  exportLoading.value = true
  let title = ''
  if (pageType.value) {
    title = `${castingReportData.value.prdNo}切片${technologyData.value.startLocation}mm-${technologyData.value.endLocation}mm`
  } else {
    title = `${castingReportData.value.prdNo}铸坯${technologyData.value.startTime}-${technologyData.value.endTime}`
  }
  proxy.htmlToPdf.getPdf(title,"#pdfDom", ()=>{
    console.log('导出成功')
    exportLoading.value = false
  })
}
// 导出word
const downloadAsword = () => {
  if (pageType.value) {
    let data = {
      prdNo: castingReportData.value.prdNo,
      startLocation: technologyData.value.startLocation || 0,
      endLocation: technologyData.value.endLocation || sliderMax.value,
      prdLength: sliderMax.value,
      startTime: castingReportData.value.prdStartTime,
      endTime: castingReportData.value.prdEndTime,
    }
    // 'word/demoSlice'
    proxy.download('/busses/l2L3RepProdData/exportRepProdDataSliceWord',
    data,
    `${castingReportData.value.prdNo}切片${data.startLocation}mm-${data.endLocation}mm.docx`)
  } else {
    let data = {
      prdNo: castingReportData.value.prdNo,
      startTime: technologyData.value.startTime,
      endTime: technologyData.value.endTime
    }
    // 'word/demoTime'
    proxy.download('/busses/l2L3RepProdData/exportRepProdDataTimeWord',
    data,
    `${castingReportData.value.prdNo}铸坯${technologyData.value.startTime}-${technologyData.value.endTime}.docx`)
  }
}
// 搜索
const handlerSearch = () => {
  if (pageType.value) {
    let sp = searchData.value.position
    if (sp.length !== 2 || sp.find(item => !item || item == '') == '') {
      proxy.$modal.msgWarning('请输入完整的起始位置及终止位置！')
      return
    }
    if (sp.length == 2 && parseFloat(sp[0]) > parseFloat(sp[1])) {
      proxy.$modal.msgWarning('起始位置不能大于终止位置！')
      return
    }
    if (sp.find(item => (parseFloat(item)) > sliderMax.value)) {
      proxy.$modal.msgWarning('起始位置与终止位置不能大于铸坯最大长度！')
      return
    }
    let list = sp?.map(item => (parseFloat(item)))
    sliderVal.value = list
    technologyData.value.startLocation = list[0]
    technologyData.value.endLocation = list[1]
    if (pageType.value) {
      let data = {
        startLocation: technologyData.value.startLocation,
        endLocation: technologyData.value.endLocation,
        prdNo: castingReportData.value.prdNo,
        startTime: castingReportData.value.prdStartTime,
        endTime: castingReportData.value.prdEndTime,
        prdLength: sliderMax.value,
      }
      postLiceList(data)
    }
  } else {
    technologyData.value.startTime = searchData.value?.timeRange ? searchData.value?.timeRange[0] : ''
    technologyData.value.endTime = searchData.value?.timeRange ? searchData.value?.timeRange[1] : ''
  }
  initData()
  postLargePackageRotationChanges()
}
// 重置
const handlerReset = () => {
  console.log(searchData.value)
  searchData.value = {
    timeRange: [castingReportData.value.prdStartTime, castingReportData.value.prdEndTime]
  }
  sliderVal.value = []
  technologyData.value = {
    startTime: castingReportData.value.prdStartTime,
    endTime: castingReportData.value.prdEndTime,
    startLocation: '',
    endLocation: '',
    prdLength: castingReportData.value.prdLength,
    prdNo: castingReportData.value.prdNo,
  }
  initData()
  postLargePackageRotationChanges()
}
const disabledDate = (date) => {
  return date.getTime() < (new Date(castingReportData.value.prdStartTime).getTime() - 86400000) || date.getTime() > (new Date(castingReportData.value.prdEndTime).getTime())
}
// 初始化页面数据
const initData = () => {

}
// 大包回转变化
const postLargePackageRotationChanges = () => {
  getLadleRotationChanges(technologyData.value).then(res => {
    stampData.value = res.data
  }).catch(err => console.log(err))
}
// 铸坯头部信息 -不跟随-查询条件变化
const getCastingReportData = () => {
  getCastingReportById(route.query.id).then(res => {
    castingReportData.value = res.data
    sliderMax.value = parseFloat(res.data?.prdLength)
    initSet()

    initData()
    postLargePackageRotationChanges()
    if (pageType.value) {
      let data = {
        startLocation: 0,
        endLocation: sliderMax.value,
        prdNo: castingReportData.value.prdNo,
        startTime: castingReportData.value.prdStartTime,
        endTime: castingReportData.value.prdEndTime,
        prdLength: sliderMax.value,
      }
      postLiceList(data)
    }
  }).catch(err => console.log(err))
}

// 切片经过设备时间
const postLiceList = (data) => {
  tableLoading.value = true
  sliceList(data).then(res => {
    tableData.value = res.data
    tableLoading.value = false
  }).catch(err => console.log(err))
}
getCastingReportData()

const {
  searchList,
  btnList,
  columns,
  tableOption,
} = init()
</script>

<style lang="scss" scoped>
.headReturn{
  width: 100%;
  display: flex;
  justify-content: space-between;
  text-align: center;
  align-items: center;
  margin-bottom: 20px;
  img{
    vertical-align: middle;
    margin-right: 20px;
    cursor: pointer;
  }
  span{
    display: inline-block;
    vertical-align: middle;
    font-size: 18px;
    font-weight: 600;
  }
}
.search-data{
  width: 100%;
  padding: 20px;
  background: #F5F7F9;
  border-radius: 4px;
  .el-form-item{
    margin-bottom: 0;
  }
}

</style>
