<template>
  <div class="my-report-table">
    <my-input :my-report-status="myReportStatus" v-show="HeaderText !=''" ref="headerInput" :id="id" :my-color="myHeaderClassColor" :my-font="myHeaderClassFont" :my-alignment="myHeaderClassAlignment"  @getInputContent="getInputContent"  :my-size="myHeaderClassSize" :my-value="HeaderText !==undefined?HeaderText:''"/>
    <el-table :data="DataList" border style="width: 100%"
              :header-cell-style="{color:myColor,fontWeight:FontWeight,fontSize:mySize,textAlign:TextAlign}"
              :cell-style="{textAlign:TextAlign}"
              :style="{'--tableColor':myColor,'--tableFontWeight':FontWeight,'--tableFontSize':mySize,'--tableTextAlign':TextAlign}" >
      <el-table-column
          :key="index"
          v-for="(header, index) in HeaderList"
          :prop="header.prop"
          :label="header.label"
      >
        <template #default="scope">
          <slot :name="header.prop" :data="scope.row">
            {{ scope.row[header.prop] }}
          </slot>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {ref,watch} from "vue";
import MyInput from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/common/MyInput.vue";

export default {
  name: "MyReportTable",
  components: {MyInput},
  props:{
    id:{

    },
    myReportStatus: {

    },
    myColor:{
      type:String,
      default:'black'
    },
    mySize:{
      type:String,
      default:'14px'
    },
    myFont:{
      type:String,
      default:'0'
    },
    myAlignment:{
      type:String,
      default:'0'
    },
    myHeaderList:{
    },
    myDataList:{
      default:null
    },
    myName:{
      type:String,
      default:''
    },
    myHeaderClassSize:{
      type:String,
      default:'14px'
    },
    myHeaderClassAlignment:{
      type:String,
      default:'0'
    },
    myHeaderClassColor:{
      type:String,
      default:'black'
    },
    myHeaderText:{
      type:String,
      default:''
    },
    myHeaderClassFont:{
      type:String,
      default:'0'
    },

  },
  setup(props,{emit}){
    let HeaderText = ref(props.myHeaderText);
    let headerInput = ref(null);
    let FontWeight = ref(props.myFont);
    FontWeight.value = setBold(FontWeight.value);
    function setBold(value){
      if(value =='0'){
        return 'normal';
      }else if(value =='1'){
        return 'bold';
      }
    };
    let TextAlign = ref(props.myAlignment);
    TextAlign.value = setAlignment(TextAlign.value);
    function setAlignment(value){
      if(value =='0'){
        return 'left';
      }else if(value =='1'){
        return 'center';
      }else if(value =='2'){
        return 'right';
      }
    };
    let HeaderList = ref(props.myHeaderList);
    let originData = ref(null);
    let DataList = ref(props.myDataList);
    HeaderList.value = setHeadList(HeaderList.value);

    originData.value = setOriginDataList(HeaderList.value);

    if(DataList.value ==null || DataList.value.length ==0){
      console.log("11122323452345243345")
      DataList.value = originData.value;
    }
    function setOriginDataList(List){
      let tempList = [];
      let obj = {};
      console.log("length",List)
      for(let i=0;i<List.length;i++){
        for(let key in List[i]){
          obj[List[i].prop] = List[i].prop
        }
      }
      tempList.push(obj);
      return tempList
    }
    function setHeadList(List){
      let tempList = [];
      for(let i=0;i<List.length;i++){
        for(let key in List[i]){
          let obj = {
            prop:key,
            label:List[i][key]
          }
          tempList.push(obj);
        }
      }
      return tempList
    }
    function setTableValue(val){

      HeaderText.value = val.CONTENT_TEXT.TITLE.TEXT;
      FontWeight.value = setBold(val.FONT_STYLE);
      TextAlign.value = setAlignment(val.ALIGNMENT);
      HeaderList.value = setHeadList(val.CONTENT_TEXT.datalist!==undefined?val.CONTENT_TEXT.datalist:[]);
      DataList.value = [];
      if(val.CONTENT_TEXT.data){
        DataList.value = val.CONTENT_TEXT.data;
      }
      originData.value = setOriginDataList(HeaderList.value);
      console.log("123543265345634",DataList.value)
      if(DataList.value ==null||DataList.value.length ==0){
        DataList.value = originData.value;
      }
      let obj = {
        CONTENT_TEXT:val.CONTENT_TEXT.TITLE.TEXT,
        FONT_STYLE:val.CONTENT_TEXT.TITLE.FONT_STYLE,
        ALIGNMENT:val.CONTENT_TEXT.TITLE.ALIGNMENT,
      }
      headerInput.value.setInputValue(obj)
      // console.log(val.FONT_STYLE,val.ALIGNMENT)
      // FontWeight.value = setBold(val.FONT_STYLE);
      // TextAlign.value = setAlignment(val.ALIGNMENT);
    }
    function getInputContent(val){
      emit('getTableHeader',val)
    }
    return{
      HeaderList,DataList,HeaderText,FontWeight,TextAlign,originData,setTableValue,getInputContent,headerInput
    }
  }
}
</script>

<style scoped lang="scss">
.el-table{
  color:var(--tableColor);
  font-weight: var(--tableFontWeight);
  font-size: var(--tableFontSize);
  min-height: 30px;
}
</style>
