<template>
  <div class="source-part">
    <h3 class="small-title"><i class="single-icon"></i>
      变量
    </h3>
    <h3>
      用于替换单个值的数据源列表
    </h3>
    <my-report-table :key="status" :my-data-list="keyData" :my-header-list="keyHeadData" />

    <h3 class="small-title"><i class="single-icon"></i>
      集合变量
    </h3>
    <el-select  filterable placeholder="请选择" style="width: 100%" v-model="chosenTableName">
      <el-option  v-for="option in TableNameLists" :key="option.value" :label="option.value" :value="option.value">
      </el-option>
    </el-select>
    <template v-if="chosenTableName != null">
      <h3 class="small-title"><i class="single-icon"></i>
        用于替换表格的数据源列表
      </h3>
      <my-report-table :key="status" :my-data-list="tableContent" :my-header-list="keyHeadData" />
    </template>
    <h3 class="small-title"><i class="single-icon"></i>
      图表变量
    </h3>
    <el-select  filterable placeholder="请选择"  style="width: 100%" v-model="chosenChartName">
      <el-option  v-for="option in ChartNameLists" :key="option.value" :label="option.value" :value="option.value">
      </el-option>
    </el-select>
    <template v-if="chosenChartName != null">
      <h3 class="small-title"><i class="single-icon"></i>
        用于替换表格的数据源列表
      </h3>
      <my-report-table :key="status" :my-data-list="chartContent" :my-header-list="keyHeadData" />
    </template>
  </div>
</template>

<script>
import MyReportTable from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/common/MyReportTable.vue";
import {qualityTestingJson,safetyJson,auditJson,dataCollectJson} from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/settingPart/sourceList.json"
import {nextTick, watch, ref, inject, onMounted} from "vue";
export default {
  name: "sourcePart",
  components: {MyReportTable},
  setup(props){
    let keyData = ref(null);
    let keyHeadData = ref(null);
    let TableNameLists = ref(null);
    let chosenTableName = ref(null);
    let tableContent = ref(null);
    let ChartNameLists = ref(null);
    let chosenChartName = ref(null);
    let chartContent = ref(null);
    let status = ref(false);
    let tempJson = null;
    function getTempJson(val){
      switch (val){
        case "0":{
          return qualityTestingJson;
        }
        case "1":{
          return safetyJson;
        }
        case "2":{
          return auditJson;
        }
        case "3":{
          return dataCollectJson;
        }
      }
    }
    function setJson(val){
      tempJson= getTempJson(val);
      keyData.value = setKeyData(JSON.parse(JSON.stringify(tempJson)).key);
      TableNameLists.value = getListOfTable(JSON.parse(JSON.stringify(tempJson)).list);
      ChartNameLists.value = getListOfTable(JSON.parse(JSON.stringify(tempJson)).chart_list);
      status.value = !status.value;
    }
    keyHeadData.value = [
      {
        "variable":"变量",
      },
      {
        "content":"描述"
      },
    ]
    function setKeyData(list){
      let tempList = [];
      for(let i=0;i<list.length;i++){
        for(let key in list[i]){
          let obj = {
            "variable":key,
            "content":list[i][key]
          }
          tempList.push(obj);
        }
      }
      return tempList
    }
    function getListOfTable(list){
      let tempList = [];
      for(let i=0;i<list.length;i++){
        let obj = {
          value:list[i].name
        }
        tempList.push(obj)
      }
      return tempList
    }

    watch(chosenTableName,(val)=>{
      getTableContent(val)
      status.value = !status.value;
    })
    function getTableContent(val){
      let data = tempJson.list;
      for(let i=0;i<data.length;i++){
        if(data[i].name ==val){
            tableContent.value = setKeyData(data[i].datalist);

        }
      }
    }
    watch(chosenChartName,(val)=>{
      getChartContent(val)
      status.value = !status.value;
    })
    function getChartContent(val){
      let data = tempJson.chart_list;
      for(let i=0;i<data.length;i++){
        if(data[i].name ==val){
            chartContent.value = setKeyData(data[i].datalist);
        }
      }
    }
    return{
      keyData,keyHeadData,TableNameLists,chosenTableName,getTableContent,tableContent,
      ChartNameLists,chosenChartName,chartContent,setJson,status
    }
  }
}
</script>

<style scoped lang="scss">
.small-title{
  display: flex;
  align-items: center;
}
.single-icon{
  display: inline-block;
  width: 4px;
  height: 15px;
  margin-right: 6px;
  background-color: #1c84c6;
}
.source-part{
  padding: 10px;
  height: 100%;
  h3{
    padding: 5px 0px;
  }
}

</style>
