<template>
  <div class="quality-testing-report">
      <div class="report-menu">
        <ReportMenu :my-menu-list="menuList" />
      </div>
    <div  :class="[reportStatus =='5'?'report-content-detail':'report-content']" >
      <ReportContent :my-content-list="items" :key="key" :report-status="reportStatus" ref="childContent" @setSingleContent ="setSingleContent" @setSingleTableHeaderSetting="setSingleTableHeaderSetting"  @getSingleContent="getSingleContent" />
    </div>
    <div class="report-setting" v-if="reportStatus!=='5'">
      <ReportSetting :report-type="reportType" :report-data-type="reportDataType"  ref="childSetting" @deleteSingleSetting="deleteSingleSetting" @resetReport="resetReport" @addSingleSetting="addSingleSetting" @changeSingleSetting = "changeSingleSetting"/>
    </div>
  </div>
</template>

<script>
import ReportMenu from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/ReportMenu.vue";
import ReportContent from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/ReportContent.vue";
import ReportSetting from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/ReportSetting.vue";
import {uuidv4} from "@/unit/code";
import {HistogramChartOption,PieChartOption,PolylineChartOption,MeasureChartOption,CircleChartOption} from "@/echarts/option";
import {ref,provide} from "vue";
import {getReportDetail, getReportResultDetail} from "../../../../../../service/reportModel";
import {ElMessageBox} from "element-plus";
import {elAlert} from "@/unit/element-ui/tip";
export default {
  name: "QualityTestingReport",
  components: {ReportSetting, ReportContent, ReportMenu},
  props:{
    uuid:{

    },
    reportDataType:{  //"moban" 模板报告  "result" 结果报告

    },
    reportMbType:{

    },
    operationType:{

    }
  },
  setup(props){

    let items = ref([]);
    const key = ref(0);
    let responseData;
    let childSetting = ref(null);
    let childContent = ref(null);
    let menuList = ref(null);
    let reportStatus = ref(null);  //报告的状态 5：查看详情
    let reportType = ref(null);   //报告的类型 0:质检报告

    function validDateRequired() {
      let requiredField = ['FONT_SIZE','ALIGNMENT','CONTENT_TEXT','FONT_COLOR','LINE_NUMBER','UUID','TYPE','FONT_STYLE','LEVEL_DIR','IS_DIR']
      let error = {}
      let find = items.value.find(i => {
        return  requiredField.find(key => {
          if (!i[key]){
            error.msg = key
          }
          return !i[key]
        })

      })
      if (find){
        console.log('dsadsa',error,find)
        elAlert(error.msg)
        return false
      }else {
        return true
      }
    }


    // reportType.value = "0";
    // items.value = [];
    if (props.operationType !== 'add'){
      getReportDataDetail();
    }else {
      reportType.value = props.reportMbType
    }

    function getReportDataDetail(){
      let uuid = props.uuid;
      responseData = [];
      if(props.reportDataType == "moban"){
        getReportDetail(uuid).then(res=>{
          if(res.msg[0]["scuuess"] == "false"){
            ElMessageBox.alert(res.msg[0]["error"], '提示', {
              confirmButtonText: '确定'
            });
            return
          }
          responseData = JSON.parse(JSON.stringify(res.msg[0].Rows[0])).content;

          if(props.operationType == "detail"){
            reportStatus.value="5";
          }else{
            reportStatus.value=JSON.parse(JSON.stringify(res.msg[0].Rows[0])).STATE;
          }
          reportType.value=JSON.parse(JSON.stringify(res.msg[0].Rows[0])).TYPE;
          items.value = getJsonData(responseData);
          menuList.value = getMenu(items.value);
          key.value++
        })
      }else if(props.reportDataType == "result"){

        getReportResultDetail(uuid).then(res=>{
          if(res.msg[0]["scuuess"] == "false"){
            ElMessageBox.alert(res.msg[0]["error"], '提示', {
              confirmButtonText: '确定'
            });
            return
          }

          responseData = JSON.parse(JSON.stringify(res.msg[0].Rows[0])).content;
          // reportStatus.value=JSON.parse(JSON.stringify(res.msg[0].Rows[0])).STATE;
          reportStatus.value="0";
          reportType.value=JSON.parse(JSON.stringify(res.msg[0].Rows[0])).TYPE;
          items.value = getJsonData(responseData);
          menuList.value = getMenu(items.value);
          key.value++
        })
      }
    }
    function getJsonData(lists){
      let tempLists = [];
      for(let i=0;i<lists.length;i++){
        if(lists[i].TYPE=='2'){   //echarts 表
          lists[i].CHART_CONTENT_TEXT = JSON.parse(lists[i].CHART_CONTENT_TEXT);
        }else if(lists[i].TYPE=='3'){   //table表
          lists[i].CONTENT_TEXT = JSON.parse(lists[i].CONTENT_TEXT);
        }
        tempLists.push(lists[i])
      }
      return tempLists
    };
    function getMenu(lists){
      let tempList = [];
      for(let i=0;i<lists.length;i++){
        if(lists[i].IS_DIR =='1'){
          tempList.push(lists[i])
        }
      }
      return  tempList;
    }
    function setSingleContent(value){
      for(let i=0;i<items.value.length;i++){
        if(value.UUID == items.value[i].UUID){
          console.log("获取uuid",value);
          items.value[i].CONTENT_TEXT = value.CONTENT_TEXT;
          childSetting.value.setSingleSetting(items.value[i],reportType.value);
        }
      }
    }
    function getSingleContent(val){

      for(let i=0;i<items.value.length;i++){
        if(val == items.value[i].UUID){
          childSetting.value.setSingleSetting(items.value[i],reportType.value);
          menuList.value = getMenu(items.value);
        }
      }
    }
    function setSingleTableHeaderSetting(val){
      for(let i=0;i<items.value.length;i++){
        if(val.UUID == items.value[i].UUID){
          items.value[i].CONTENT_TEXT.TITLE.TEXT = val.CONTENT_TEXT;
          getSingleContent(val.UUID);
          menuList.value = getMenu(items.value);
        }
      }
    }
    function changeSingleSetting(val,type){

      for(let i=0;i<items.value.length;i++){
        if(val.uuid ==items.value[i].UUID){
          switch (items.value[i].TYPE){
            case "1":{
              items.value[i].CONTENT_TEXT = val.inputContent;
              items.value[i].FONT_SIZE = val.myFontSize;
              items.value[i].FONT_STYLE = val.fontStyleName;
              items.value[i].FONT_COLOR = val.myFontColor;
              items.value[i].ALIGNMENT = val.myAlignment;
              items.value[i].IS_DIR = val.menuName;
              items.value[i].LEVEL_DIR = val.menuLevel;
              childContent.value.setSingleInputContent(items.value[i]);
              menuList.value = getMenu(items.value);
              break;
            }
            case "2":{
              items.value[i].CONTENT_TEXT = val.tableContent;
              items.value[i].FONT_SIZE = val.fontSize;
              items.value[i].FONT_STYLE = val.fontStyleName;
              items.value[i].FONT_COLOR = val.fontColor;
              items.value[i].ALIGNMENT = val.alignment;
              items.value[i].CHART_TYPE = val.chartType;
              items.value[i].CHART_WIDTH = val.chartWidth;
              items.value[i].CHART_HEIGHT = val.chartHeight;
              items.value[i].CHART_CONTENT_TEXT  = getChartOption(val);
              childContent.value.setSingleChartContent(items.value[i]);
              menuList.value = getMenu(items.value);
              break;
            }
            case "3":{
            //  items.value[i].CONTENT_TEXT = val.inputContent;
              items.value[i].FONT_SIZE = val.myFontSize;
              items.value[i].FONT_STYLE = val.fontStyleName;
              items.value[i].FONT_COLOR = val.myFontColor;
              items.value[i].ALIGNMENT = val.myAlignment;
              items.value[i].CONTENT_TEXT.TITLE = val.tableContent.TITLE;
              items.value[i].CONTENT_TEXT.name = val.tableContent.name;
              items.value[i].CONTENT_TEXT.datalist = val.tableContent.datalist;
              childContent.value.setSingleTableContent(items.value[i]);
              menuList.value = getMenu(items.value);
              break;
            }
          }
        }
      }
    }
    function getChartOption(val){
      let option = {};
      switch (val.chartType){
        case "1":{
          if(props.reportDataType =="result"){
            option =val.CHART_CONTENT_TEXT
          }else{
            option = HistogramChartOption;
          }
          option.grid.left = 5*(10-val.chartWidth/10) +"%";
          option.grid.right = 5*(10-val.chartWidth/10) +"%"
          option.grid.top = 5*(12-val.chartHeight/10) +"%";
          option.grid.bottom = 5*(10-val.chartHeight/10) +"%"
          break;
        }
        case "2":{
          if(props.reportDataType =="result"){
            option =val.CHART_CONTENT_TEXT
          }else{
            option = PieChartOption;
          }
          option.series[0].radius = val.chartWidth +"%";
          break;
        }
        case "3":{
          if(props.reportDataType =="result"){
            option =val.CHART_CONTENT_TEXT
          }else{
            option = PolylineChartOption;
          }
          option.grid.left = 5*(10-val.chartWidth/10) +"%";
          option.grid.right = 5*(10-val.chartWidth/10) +"%"
          option.grid.top = 5*(12-val.chartHeight/10) +"%";
          option.grid.bottom = 5*(10-val.chartHeight/10) +"%"
          break;
        }
        case "4":{
          if(props.reportDataType =="result"){
            option =val.CHART_CONTENT_TEXT
          }else{
            option = MeasureChartOption;
          }
          option.grid.left = 5*(10-val.chartWidth/10) +"%";
          option.grid.right = 5*(10-val.chartWidth/10) +"%"
          option.grid.top = 5*(12-val.chartHeight/10) +"%";
          option.grid.bottom = 5*(10-val.chartHeight/10) +"%"
          break;
        }
        case "5":{
          if(props.reportDataType =="result"){
            option =val.CHART_CONTENT_TEXT
          }else{
            option = CircleChartOption;
          }
          option.series[0].radius = val.chartWidth +"%";
          break;
        }
      }
      if(JSON.stringify(option) !== "{}"){
        option.backgroundColor = val.backgroundColor;
        option.title.text = val.headerContent;
        option.title.textStyle.fontSize = Number(val.fontSize);
        option.title.textStyle.color = val.fontColor;
        option.title.textStyle.fontWeight = val.fontStyleName;
        option.title.left = val.alignment;

      }
      return option;
    }
    function addSingleSetting(val){
      let obj = {};
      switch (val.TYPE){
        case "1":{
          obj = {   //设置新增一条数据的默认值
            UUID:uuidv4(),
            TYPE:'1',
            CONTENT_TEXT:'',
            FONT_SIZE:'14',
            FONT_COLOR:'#555555',
            ALIGNMENT:'0',
            IS_DIR:'0',
          }
          break;
        }
        case "2":{
          obj = {   //设置新增一条数据的默认值
            UUID:uuidv4(),
            TYPE:'2',
            FONT_SIZE:'14',
            FONT_COLOR:'#555555',
            CONTENT_TEXT:'"{}"',
            CHART_CONTENT_TEXT:{
              title:{
                text:''
              }
            },
            ALIGNMENT:'0',
            FONT_STYLE:"1"
          }
          break;
        }
        case "3":{
          obj = {   //设置新增一条数据的默认值
            UUID:uuidv4(),
            TYPE:'3',
            CONTENT_TEXT:{
              TITLE:{
                TEXT:''
              }
            },
            FONT_SIZE:'14',
            FONT_COLOR:'#555555',
            ALIGNMENT:'0',
            IS_DIR:'0',
          }
          break;
        }
      }

      if(val.UUID ==''){
        items.value.push(obj);
      }else{
        for(let i=0;i<items.value.length;i++){
          if(val.UUID==items.value[i].UUID){
            items.value.splice(i+1,0,obj);
            break
          }
        }
      }
    }

    function deleteSingleSetting(val){
      for(let i=0;i<items.value.length;i++){
        if(val==items.value[i].UUID){
          items.value.splice(i,1)
          break;
        }
      }
      menuList.value = getMenu(items.value);
    }
    function resetReport(){
      getReportDataDetail()  //重新获取数据
    }
    return{
      items,menuList,getSingleContent,changeSingleSetting,childSetting,childContent,setSingleContent,addSingleSetting,setSingleTableHeaderSetting,
      deleteSingleSetting,resetReport,reportStatus,reportType,
      validDateRequired,key
    }
  }
}
</script>

<style scoped lang="scss">
.quality-testing-report{
  overflow: hidden;
  width: 100%;
  height: 99%;
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  >div{
    overflow: hidden;
  }
  .report-menu{
    height: 100%;
    width: 22%;
  }
  .report-content{
    height: 100%;
    width: 55%;
  }
  .report-content-detail{
    height: 100%;
    width: 77%;
  }
  .report-setting{
    height: 100%;
    width: 22%;
  }
}
</style>
