<template>
  <div class="content-all card">
    <div class="content-border">
      <div class="content-header">
        <span>报告模板</span>
      </div>
      <div class="content-text scroll">
        <template v-for="item in myContentList" :key="item.UUID">
          <div :class="[reportStatus=='5'?'content-single':'content-single-edit']" @click="chooseSingleSetting(item.UUID)">
            <template v-if="item.TYPE==='1'">
              <my-input :my-report-status="reportStatus" :my-color="item.FONT_COLOR" :my-font="item.FONT_STYLE" :id="item.UUID" @getInputContent="getInputContent" :my-alignment="item.ALIGNMENT" :my-size="item.FONT_SIZE+'px'" :ref="mySingleInput" :my-value="item.CONTENT_TEXT" />
            </template>
            <template v-if="item.TYPE==='2'">
              <my-report-echart  :key="item.CHART_CONTENT_TEXT" :ref="mySingleChart" :id="item.UUID"  :my-chart-options="item.CHART_CONTENT_TEXT" />
            </template>
            <template v-if="item.TYPE==='3'">
              <my-report-table :id="item.UUID"  :ref="mySingleTable" :my-report-status="reportStatus" @getTableHeader="getTableHeader"  :my-color="item.FONT_COLOR" :my-font="item.FONT_STYLE" :my-alignment="item.ALIGNMENT" :my-size="item.FONT_SIZE+'px'" :my-data-list="item.CONTENT_TEXT.data !==undefined?item.CONTENT_TEXT.data:[]"
                               :my-header-list="item.CONTENT_TEXT.datalist!==undefined?item.CONTENT_TEXT.datalist:[]"
                               :my-name="item.CONTENT_TEXT.name!==undefined?item.CONTENT_TEXT.name:''" :my-header-class-size="item.CONTENT_TEXT.TITLE.FONT_SIZE!==undefined? item.CONTENT_TEXT.TITLE.FONT_SIZE+'px':null"
                               :my-header-class-alignment="item.CONTENT_TEXT.TITLE.ALIGNMENT!==undefined?item.CONTENT_TEXT.TITLE.ALIGNMENT:null"
                               :my-header-class-color="item.CONTENT_TEXT.TITLE.FONT_COLOR!==undefined?item.CONTENT_TEXT.TITLE.FONT_COLOR:null"  v-model:my-header-text="item.CONTENT_TEXT.TITLE.TEXT"
                               :my-header-class-font="item.CONTENT_TEXT.TITLE.FONT_STYLE!==undefined?item.CONTENT_TEXT.TITLE.FONT_STYLE:null"
              />
            </template>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import MyInput from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/common/MyInput.vue";
import MyReportTable from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/common/MyReportTable.vue";
import MyReportEchart from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/common/MyReportEchart.vue";
import {ref,nextTick} from "vue";
export default {
  name: "ReportContent",
  components: {MyReportEchart, MyReportTable, MyInput},
  props:{
    myContentList:{
    },
    reportStatus:{
    }
  },
  setup(props,{emit}){
    let mySingleInputList = ref([]);
    let mySingleInput = el => {
      if (el) {
        mySingleInputList.value.push(el)
      }
    }
    let mySingleTableList = ref([]);
    let mySingleTable = el => {
      if (el) {
        mySingleTableList.value.push(el)
      }
    }
    let mySingleChartList= ref([]);
    let mySingleChart = el => {
      if (el) {
        mySingleChartList.value.push(el)
      }
    }

    function setSingleInputContent(val){

      mySingleInputList.value.forEach(item => {
        console.log("mySingleInputList",mySingleInputList)
        if(item.id==val.UUID){

          item.setInputValue(val);
        }
      })
    }
    function setSingleTableContent(val){

      mySingleTableList.value.forEach(item => {
        if(item.id==val.UUID){

          //console.log('uuidddss',JSON.parse(JSON.stringify(val)))
          item.setTableValue(JSON.parse(JSON.stringify(val)));
        }
      })
    }
    function setSingleChartContent(val){
      mySingleChartList.value.forEach(item => {
        if(item.id==val.UUID){
          nextTick(() => {

            item.setChartValue(JSON.parse(JSON.stringify(val)));
          })
        }
      })
    }

    function getInputContent(val){
      emit('setSingleContent',val)
    }
    function getTableHeader(val){
      emit('setSingleTableHeaderSetting',val)
    }
    function chooseSingleSetting(uuid){
      emit('getSingleContent',uuid)
    }
    return{
      chooseSingleSetting,setSingleInputContent,mySingleInput,getInputContent,setSingleTableContent,mySingleTable,getTableHeader,mySingleChart,
      setSingleChartContent
    }
  },
}
</script>

<style scoped lang="scss">
.content-all{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content:center;
  align-items: center;
  .content-border{
    width: 98%;
    height: 98%;
    display: flex;
    flex-direction: column;
    .content-header{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
      color:#b3b3b3;
      font-size: 18px;
      border-bottom: solid 1px #3388FF;
      span{
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #005AD9;
      }
    }
    .content-text{
      display: flex;
      flex-direction: column;
      padding: 10px;
      overflow-x:hidden;
      overflow-y: auto;
      height: 90.5%;
      .content-single-edit{
        border: 1px solid #1c84c6;
        margin: 5px;
      }
      .content-single{
        border:none;
        margin: 5px;
      }
      &::-webkit-scrollbar {
        width: 4px;
        background-color: rgba(63, 159, 255, 0.2);
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(63, 159, 255, 0.6);
      }
    }
  }
}
.card {
  background-color: #FFFFFF;
}

</style>
