<template>
  <div class="table-part" ref="refTable">
    <template v-if="reportDataType !='result'" >
    <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>
    <h3 class="single-part small-title"><i class="single-icon"></i>
      标题内容
    </h3>
    <el-input type="textarea" :autosize="{ minRows: 1}" v-model="tableTitle.Content" />
    <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-color-picker  style="width: 50%" v-model="tableTitle.FontColor" />
      <h3 class="small-title"><i class="single-icon"></i>
        字号
      </h3>
      <el-input-number style="width: 100%" v-model="tableTitle.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="tableTitle.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="getUrl(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-color-picker  style="width: 50%" v-model="tableSettingForm.myFontColor" />
      <h3 class="small-title"><i class="single-icon"></i>
        字号
      </h3>
      <el-input-number style="width: 100%" v-model="tableSettingForm.myFontSize" :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="tableSettingForm.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 positionLists" :key="index">
          <img :src="getUrl(item)" @click="changeUrl(item.value)" />
        </div>
      </div>
    </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: "tablePart",
  props:{
    reportType:{

    },
    reportDataType:{

    }
  },
  setup(props,{emit}){
    let tableSettingForm = ref({
      tableContent: {},
      myFontSize:null,
      fontStyleName:null,
      myFontColor:null,
      myAlignment:null,
    })
    let tableTitle = ref({   //content里面的表头
      Content:null,
      FontSize:null,
      FontStyleName:null,
      FontColor:null,
      Alignment:null,
    })

    let chosenTableName = ref(null);  //content里面的表名称
    let tempJson =  ref(null);
    let TABLE_DATA = ref([]);
    function getTempJson(val){
      switch (val){
        case "0":{
          return qualityTestingJson;
        }
        case "1":{
          return safetyJson;
        }
        case "2":{
          return auditJson;
        }
        case "3":{
          return dataCollectJson;
        }
      }
    }

    function singleTableSetting(val,type){

      tempJson.value = getTempJson(type);
      TableNameLists.value = getListOfTable(JSON.parse(JSON.stringify(tempJson.value)).list);
     // tableSettingForm.value.tableContent = val.CONTENT_TEXT;
      tableSettingForm.value.myFontSize = val.FONT_SIZE;
      tableSettingForm.value.fontStyleName = val.FONT_STYLE;
      tableSettingForm.value.myFontColor = val.FONT_COLOR;
      changeUrl(val.ALIGNMENT);
      if(val.CONTENT_TEXT.data){
        TABLE_DATA.value = val.CONTENT_TEXT.data;
      }
      tableSettingForm.value.uuid = val.UUID;
      chosenTableName.value = val.CONTENT_TEXT.name;
      tableTitle.value.FontColor = val.CONTENT_TEXT.TITLE.FONT_COLOR;
      tableTitle.value.Content = val.CONTENT_TEXT.TITLE.TEXT;
      tableTitle.value.FontSize = val.CONTENT_TEXT.TITLE.FONT_SIZE;
      tableTitle.value.FontStyleName = val.CONTENT_TEXT.TITLE.FONT_STYLE;
      changeTitleUrl(val.CONTENT_TEXT.TITLE.ALIGNMENT);
    }
    let fontStyleNameLists = ref([
      {
        label:'正常',
        prop:'0'
      },
      {
        label:'加粗',
        prop:'1'
      }
    ]);
    let positionLists = ref([
      {
        name:'left',
        value:'0',
        chosen:true
      },
      {
        name:'center',
        value:'1',
        chosen:false
      },
      {
        name:'right',
        value:'2',
        chosen:false
      },
    ]);
    let positionTitleLists = ref([
      {
        name:'left',
        value:'0',
        chosen:true
      },
      {
        name:'center',
        value:'1',
        chosen:false
      },
      {
        name:'right',
        value:'2',
        chosen:false
      },
    ]);
    let TableNameLists = ref(null);
    function getListOfTable(list){
      let tempList = [];
      for(let i=0;i<list.length;i++){
        let obj = {
          value:list[i].name
        }
        tempList.push(obj)
      }
      return tempList
    }
    function getUrl(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< positionLists.value.length;i++){
        if(value == positionLists.value[i].value){
          positionLists.value[i].chosen = true;
          tableSettingForm.value.myAlignment = positionLists.value[i].value;
        }else{
          positionLists.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;
          tableTitle.value.myAlignment = positionTitleLists.value[i].value;
        }else{
          positionTitleLists.value[i].chosen = false;
        }
      }
    }
    function getTableHeader(list,val){
      for(let i=0;i<list.length;i++){
        if(list[i].name == val){
          return list[i].datalist;
        }
      }
    }
    watch(chosenTableName,(val)=>{
      tableSettingForm.value.tableContent.name = val;
      tableSettingForm.value.tableContent.datalist = getTableHeader(JSON.parse(JSON.stringify(tempJson.value)).list,val);
    })
    watch(tableTitle,(val)=>{
      let obj = {
        "TEXT": val.Content,
        "FONT_SIZE": val.FontSize,
        "FONT_STYLE": val.FontStyleName,
        "FONT_COLOR": val.FontColor,
        "ALIGNMENT": val.myAlignment,
      }
      tableSettingForm.value.tableContent.TITLE =obj
    },{deep:true})
    watch(tableSettingForm,(val) =>{
      if(props.reportDataType == "result"){

        val.tableContent.data = TABLE_DATA.value;
        emit('getTableSetting',JSON.parse(JSON.stringify(val)))
      }else{
        emit('getTableSetting',JSON.parse(JSON.stringify(val)))
      }
    },{deep:true})
    return {
      tableSettingForm,tableTitle,fontStyleNameLists,TableNameLists,chosenTableName,getUrl,positionLists,changeUrl,positionTitleLists,changeTitleUrl,singleTableSetting
    }
  }
}
</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;
}
.table-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;
      }
      img{
        height: 20px;
        width: 20px;
        margin: 0px 5px;
        cursor: pointer;
      }
    }
  }
  .single-part{
    padding-top: 20px;
  }
  h3{
    padding: 5px 0px;
  }
}
</style>
