<template>
  <div class="echarts-part" ref="refEcharts">
    <template v-if="reportDataType !='result'" >
    <h3 class="small-title"><i class="single-icon"></i>
      图表类型
    </h3>
    <div class="line_style">
      <div v-for="(item,index) in echartsTypeLists" :key="index">
        <div class="line_single">
          <img :src="getUrl(item)" @click="changeUrl(item.value)" />
        </div>
      </div>
    </div>
      <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>
    <h3 class="small-title"><i class="single-icon"></i>
      背景颜色
    </h3>
    <el-color-picker  style="width: 50%" v-model="chartsSettingForm.backgroundColor" />
    <h3 class="single-part small-title"><i class="single-icon"></i>
      标题
    </h3>
    <div class="table-title">
      <h3 class="small-title"><i class="single-icon"></i>
        标题内容
      </h3>
      <el-input type="textarea" :autosize="{ minRows: 1}" v-model="chartsSettingForm.headerContent" />
      <h3 class="small-title"><i class="single-icon"></i>
        字体颜色
      </h3>
      <el-color-picker  style="width: 50%" v-model="chartsSettingForm.fontColor" />
      <h3 class="small-title"><i class="single-icon"></i>
        字号
      </h3>
      <el-input-number style="width: 100%" v-model="chartsSettingForm.fontSize" :min="1" :max="50" controls-position="right" size="middle"/>
      <h3 class="small-title"><i class="single-icon"></i>
        字体样式
      </h3>
      <el-select  filterable placeholder="请选择" style="width: 100%" v-model="chartsSettingForm.fontStyleName">
        <el-option  v-for="option in fontStyleNameLists" :key="option.prop" :label="option.label" :value="option.prop">
        </el-option>
      </el-select>
      <h3 class="small-title"><i class="single-icon"></i>
        对齐方式
      </h3>
      <div class="line_style">
        <div v-for="(item,index) in positionTitleLists" :key="index">
          <img :src="getTitleUrl(item)" @click="changeTitleUrl(item.value)" />
        </div>
      </div>
    </div>
    <h3 class="single-part small-title"><i class="single-icon"></i>
      内容
    </h3>
    <div class="table-content">
      <h3 class="small-title"><i class="single-icon"></i>
        图表宽度
      </h3>
      <el-slider v-model="chartsSettingForm.chartWidth"/>
      <h3 class="small-title"><i class="single-icon"></i>
        图表高度
      </h3>
      <el-slider v-model="chartsSettingForm.chartHeight"/>
    </div>
  </div>
</template>

<script>
import {ref,watch} from 'vue';
import {qualityTestingJson,safetyJson,auditJson,dataCollectJson} from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/settingPart/sourceList.json"
export default {
  name: "echartsPart",
  props:{
    reportType:{

    },
    reportDataType:{

    }
  },
  setup(props,{emit}){
    let chartsSettingForm = ref({
      chartType:null,
      fontColor:null,
      headerContent:null,
      backgroundColor:null,
      fontSize:null,
      fontStyleName:null,
      alignment:null,
      chartWidth:null,
      chartHeight:null,
    })
    let echartsTypeLists = ref([
      {
        name:'zhuzhuangtu',
        value:'1',
        chosen:false
      },
      {
        name:'pie',
        value:'2',
        chosen:false
      },
      {
        name:'zhexiantu',
        value:'3',
        chosen:false
      },
      {
        name:'duijimianjitu',
        value:'4',
        chosen:false
      },
      {
        name:'huanxingtu',
        value:'5',
        chosen:false
      },
      // {
      //   name:'leidatu',
      //   value:'6',
      //   chosen:false
      // }
    ]);
    let fontStyleNameLists = ref([
      {
        label:'正常',
        prop:400
      },
      {
        label:'加粗',
        prop:600
      }
    ]);
    let positionTitleLists = ref([
      {
        name:'left',
        value:'left',
        chosen:true
      },
      {
        name:'center',
        value:'center',
        chosen:false
      },
      {
        name:'right',
        value:'right',
        chosen:false
      },
    ]);
    let chosenChartName = ref(null);  //content里面的图表名称
    let ChartNameLists = ref(null);
    let tempJson = ref(null);
    let CHART_CONTENT_TEXT = ref("");
    function getTempJson(val){
      switch (val){
        case "0":{
          return qualityTestingJson;
        }
        case "1":{
          return safetyJson;
        }
        case "2":{
          return auditJson;
        }
        case "3":{
          return dataCollectJson;
        }
      }
    }
    function singleChartSetting(val,type){
      // console.log("新增chart报错val的值",val);

      tempJson.value = getTempJson(type);
      changeUrl(val.CHART_TYPE!==undefined?val.CHART_TYPE:'');
      chartsSettingForm.value.tableContent = val.CONTENT_TEXT!==undefined?val.CONTENT_TEXT:'';
      // chartsSettingForm.value.fontSize = val.FONT_SIZE;
      // chartsSettingForm.value.fontStyleName = val.FONT_STYLE;
      // chartsSettingForm.value.fontColor = val.FONT_COLOR;
      chartsSettingForm.value.backgroundColor = val.CHART_CONTENT_TEXT.backgroundColor!==undefined?val.CHART_CONTENT_TEXT.backgroundColor:'#fff';
      if(val.CHART_CONTENT_TEXT){
        CHART_CONTENT_TEXT.value = val.CHART_CONTENT_TEXT;
      }
      if(val.CHART_CONTENT_TEXT.title){
        chartsSettingForm.value.headerContent = val.CHART_CONTENT_TEXT.title?.text!==undefined?val.CHART_CONTENT_TEXT.title?.text:'';
        chartsSettingForm.value.fontColor = val.CHART_CONTENT_TEXT.title?.textStyle?.color;
        chartsSettingForm.value.fontSize = val.CHART_CONTENT_TEXT.title?.textStyle?.fontSize;
        chartsSettingForm.value.fontStyleName = val.CHART_CONTENT_TEXT.title?.textStyle?.fontWeight;
        changeTitleUrl(val.CHART_CONTENT_TEXT.title.left)
      }else{
        chartsSettingForm.value.headerContent = '';
      }
      chosenChartName.value = JSON.parse(val.CONTENT_TEXT).name !==undefined?JSON.parse(val.CONTENT_TEXT).name:'';
      chartsSettingForm.value.uuid = val.UUID;
      changeTitleUrl(val.ALIGNMENT);
      chartsSettingForm.value.chartWidth = val.CHART_WIDTH!==undefined?Number(val.CHART_WIDTH):90;
      chartsSettingForm.value.chartHeight = val.CHART_HEIGHT!==undefined?Number(val.CHART_HEIGHT):90;
    }
    watch(()=>chartsSettingForm.value.chartWidth,(val)=>{
      if(chartsSettingForm.value.chartType =='2'||chartsSettingForm.value.chartType =='5'){
        chartsSettingForm.value.chartHeight = chartsSettingForm.value.chartWidth;
      }
    })
    watch(()=>chartsSettingForm.value.chartHeight,(val)=>{
      if(chartsSettingForm.value.chartType =='2'||chartsSettingForm.value.chartType =='5'){
        chartsSettingForm.value.chartWidth = chartsSettingForm.value.chartHeight;
      }
    })
    watch(()=>chartsSettingForm.value,(val)=>{
          if(props.reportDataType == "result"){
            // CHART_CONTENT_TEXT.value.title.text = chartsSettingForm.value.headerContent;
            // CHART_CONTENT_TEXT.value.backgroundColor = chartsSettingForm.value.backgroundColor;
            val.CHART_CONTENT_TEXT = CHART_CONTENT_TEXT.value;
            emit('getChartSetting',JSON.parse(JSON.stringify(val)))
          }else{
            emit('getChartSetting',JSON.parse(JSON.stringify(val)))
          }
        },
        {deep: true}
    )
    watch(chosenChartName,(val)=>{
      chartsSettingForm.value.tableContent= getContentText(JSON.parse(JSON.stringify(tempJson.value)).chart_list,val);
    })
    function getContentText(list,val){
     for(let i =0;i < list.length;i++){
       if(list[i].name ==val){
         return JSON.stringify(list[i]);
       }
     }
     return null;
    }
    function getListOfTable(list,type){
      let tempList = [];
      for(let i=0;i<list.length;i++){
        if(list[i].type==type){
          let obj = {
            value:list[i].name,
            type:list[i].type,
          }
          tempList.push(obj)
        }
      }
      return tempList
    }
    function getUrl(item){
      if(item.chosen){
        return new URL(`../../../../../../../assets/font/iconfont/png/${item.name}.png`, import.meta.url).href
      }else{
        // return new URL('../../../../../../../assets/font/iconfont/png/'+item.name+'_unchosen.png', import.meta.url).href
        return new URL(`../../../../../../../assets/font/iconfont/png/${item.name}_unchosen.png`, import.meta.url).href
      }
    }
    function getTitleUrl(item){
      if(item.chosen){
        // return new URL('../../../../../../../assets/font/iconfont/png/text_'+item.name+'.png', import.meta.url).href
        return new URL(`../../../../../../../assets/font/iconfont/png/text_${item.name}.png`, import.meta.url).href
      }else{
        return new URL(`../../../../../../../assets/font/iconfont/png/text_${item.name}_unchosen.png`, import.meta.url).href
        // return new URL('../../../../../../../assets/font/iconfont/png/text_'+item.name+'_unchosen.png', import.meta.url).href
      }
    }
    function changeUrl(value){
      for(let i = 0;i< echartsTypeLists.value.length;i++){
        if(value == echartsTypeLists.value[i].value){
          echartsTypeLists.value[i].chosen = true;
          chartsSettingForm.value.chartType = echartsTypeLists.value[i].value;
          ChartNameLists.value = getListOfTable(JSON.parse(JSON.stringify(tempJson.value)).chart_list,echartsTypeLists.value[i].value);
          chosenChartName.value = null;
        }else{
          echartsTypeLists.value[i].chosen = false;
        }
      }
    }
    function changeTitleUrl(value){
      for(let i = 0;i< positionTitleLists.value.length;i++){
        if(value == positionTitleLists.value[i].value){
          positionTitleLists.value[i].chosen = true;
          chartsSettingForm.value.alignment = positionTitleLists.value[i].value;
        }else{
          positionTitleLists.value[i].chosen = false;
        }
      }
    }
    return {
      chartsSettingForm,echartsTypeLists,getUrl,changeUrl,fontStyleNameLists,positionTitleLists,changeTitleUrl,getTitleUrl,
      chosenChartName,ChartNameLists,singleChartSetting
    }
  }
}
</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;
}
:deep(.el-slider){
  padding-left: 2%;
  width: 96%;
}
.echarts-part{
  padding: 10px;
  height: 100%;
  .table-title, .table-content{
    border: 1px solid #c0c4cc;
    padding: 10px;
    border-radius: 10px;
    .line_style{
      display: flex;
      div{
        border: 1px solid #1c84c6;
        border-radius: 4px;
        padding: 6px 10px;
        margin-right: 20px;
      }
      .line_single{
        margin: 10px;
        padding: 5px;
        border:1px dashed #093165;

      }
      img{
        height: 20px;
        width: 20px;
        margin: 0px 5px;
        cursor: pointer;
      }
    }
  }
  .line_style{
    display: flex;
    .line_single{
      margin: 10px;
      padding: 5px;
      border:1px dashed #093165;

    }
    img{
      height: 20px;
      width: 20px;
      cursor: pointer;
    }
  }
  .single-part{
    padding-top: 20px;
  }
  h3{
    padding: 5px 0px;
  }
}
</style>
