<template>
<div class="setting-all card">
  <div class="setting-border">
    <div class="setting-header">
      <span>属性</span>
    </div>
    <div class="setting-text">
      <div class="text-tab">
        <el-tabs v-model="activeType" type="card" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="文本" name="1">
            <input-part :report-data-type="reportDataType"  :input-setting="singleSetting" ref="singleInput" @getInputSetting="getInputSetting" />
          </el-tab-pane>
          <el-tab-pane label="图表" name="2">
            <echarts-part :report-data-type="reportDataType"     ref="singleChart" :key="tempID"  @getChartSetting="getChartSetting" />
          </el-tab-pane>
          <el-tab-pane label="表格" name="3">
            <table-part :report-data-type="reportDataType"     ref="singleTable"   @getTableSetting="getTableSetting" />
          </el-tab-pane>
          <el-tab-pane v-if="reportDataType !='result'"  label="数据源" name="4">
            <source-part   ref="singleOrigin"  />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="setting-bottom">
        <el-button type="primary" @click="addSingleInput">插入文本</el-button>
        <el-button type="primary" @click="addSingleChart">插入图表</el-button>
        <el-button type="primary" @click="addSingleTable">插入表格</el-button>
      </div>
      <div class="setting-bottom">
        <el-button type="warning" @click="deleteSingleSetting">删除行</el-button>
        <el-button type="warning" @click="resetReport">重置</el-button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {nextTick, ref, toRefs, inject,watch} from "vue";
import TablePart from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/settingPart/tablePart.vue";
import SourcePart from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/settingPart/sourcePart.vue";
import InputPart from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/settingPart/inputPart.vue";
import {uuidv4} from "@/unit/code";
import EchartsPart from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/settingPart/echartsPart.vue";
import {ElMessageBox} from "element-plus";
export default {
  name: "ReportSetting",
  components: {EchartsPart, InputPart, SourcePart, TablePart},
  props:{
    reportDataType:{

    },
    reportType:{

    }
  },
  setup(props,{emit}){
    let activeType = ref('1');
    let singleSetting = ref(null);
    let singleInput = ref(null);
    let singleTable = ref(null);
    let singleChart = ref(null);
    let tempID = ref(null);
    let singleOrigin = ref(null);
    function setSingleSetting(val,type){

      singleSetting.value = val;
      activeType.value = val.TYPE;
      tempID.value = val.UUID;
      switch (val.TYPE){
        case '1':{
          singleInput.value.singleInputSetting(val,props.reportType);
          break
        }
        case '2':{
          nextTick(()=>{
            singleChart.value.singleChartSetting(val,props.reportType);
          })
          break
        }
        case '3':{
          singleTable.value.singleTableSetting(val,props.reportType);
          break
        }
      }

    }

    const handleClick = (tab,event) =>{
      console.log("asdfghjk")
      nextTick(()=>{
        singleOrigin.value.setJson(props.reportType)
      })
    }
    function getInputSetting(value){
      emit('changeSingleSetting',value)
    }
    function getChartSetting(value){
      emit('changeSingleSetting',value)
    }
    function getTableSetting(value){
      emit('changeSingleSetting',value)
    }
    function addSingleInput(){   //items添加新的内容
      let obj;
      if(singleSetting.value == null){    //未选中任何内容
        obj = {
          UUID:'',
          TYPE:'1'
        }
      }else{       //已选中某一内容
        obj = {
          UUID:singleSetting.value.UUID,
          TYPE:'1'
        }
      }
      emit('addSingleSetting',obj)
    }
    function addSingleTable(){
      let obj;
      if(singleSetting.value == null){    //未选中任何内容
        obj = {
          UUID:'',
          TYPE:'3'
        }
      }else{       //已选中某一内容
        obj = {
          UUID:singleSetting.value.UUID,
          TYPE:'3'
        }
      }
      emit('addSingleSetting',obj)
    }
    function deleteSingleSetting(){
      if(singleSetting.value == null){    //未选中任何内容
        ElMessageBox.alert('请选中一行进行删除！', '提示', {
          confirmButtonText: '确定'
        });
      }else{       //已选中某一内容
        emit('deleteSingleSetting',singleSetting.value.UUID)
      }
    }
    function resetReport(){
      emit('resetReport')
    }
    function addSingleChart(){
      let obj;
      if(singleSetting.value ==null){
        obj = {
          UUID:'',
          TYPE:'2'
        }
      }else{
        obj = {
          UUID:singleSetting.value.UUID,
          TYPE:'2'
        }
      }
      emit('addSingleSetting',obj)
    }
    return{
      activeType,handleClick,getInputSetting,singleSetting,setSingleSetting,singleInput,addSingleInput,singleTable,getTableSetting,addSingleTable,singleChart,getChartSetting,
      addSingleChart,tempID,deleteSingleSetting,resetReport,singleOrigin
    }
  }
}
</script>

<style scoped lang="scss">
:deep(.el-tabs){
  height: 100%;
  overflow-y: hidden;
}
:deep(.el-tabs__content){
  height: 93%;
  overflow-y: auto !important;
  &::-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);
  }
}
.setting-all{
  height: 100%;
  width: 100%;
  display: flex;
  justify-content:center;
  align-items: center;
  .setting-border{
    width: 98%;
    display: flex;
    flex-direction: column;
    height: 98%;
    .setting-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;
      }
    }
    .setting-text{
      display: flex;
      flex-direction: column;
      flex: 1;
      overflow: hidden;
      margin: 10px;
      background-color: aliceblue;
      .text-tab{
        :deep {
          .el-tabs{
            display: flex;
            flex-direction: column;
          }
        }
       flex: 1;
        overflow: hidden;
        padding-bottom: 10px;
      }
      .setting-bottom{
        margin: 5px;
        display: flex;
        justify-content: space-between
      }
    }
  }
}
.card {
  background-color: #FFFFFF;
}
</style>
