<template>
  <div class="input-part" ref="refInput">
    <h3 class="small-title"><i class="single-icon"></i>
      内容
    </h3>

    <el-input type="textarea" :autosize="{ minRows: 3}" @blur="inputContentBlur" v-model="inputSettingForm.inputContent">

    </el-input>
    <template v-if="reportDataType !='result'" >
      <h3 class="small-title"><i class="single-icon"></i>
        插入指标
      </h3>
      <el-select  filterable placeholder="请选择" @change="insertTarget" style="width: 100%" v-model="targetName">
        <el-option  v-for="option in targetNameLists" :key="option.prop" :label="option.label" :value="option.prop">
        </el-option>
      </el-select>
    </template>
    <h3 class="small-title"><i class="single-icon"></i>
      字号
    </h3>
    <el-input-number style="width: 100%"
        v-model="inputSettingForm.myFontSize"
        :min="1"
        :max="50"
        controls-position="right"
        size="middle"
        @change="fontSizeChange"
    />
    <h3 class="small-title"><i class="single-icon"></i>
      字体样式
    </h3>
    <el-select  filterable placeholder="请选择" style="width: 100%" v-model="inputSettingForm.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>
    <el-color-picker  style="width: 50%" v-model="inputSettingForm.myFontColor" />
    <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>
    <h3 class="small-title"><i class="single-icon"></i>
      是否为目录
    </h3>
    <el-select  filterable placeholder="请选择" style="width: 100%" v-model="inputSettingForm.menuName">
      <el-option  v-for="option in menuNameLists" :key="option.prop" :label="option.label" :value="option.prop">
      </el-option>
    </el-select>
    <h3 class="small-title"><i class="single-icon"></i>
      目录级别
    </h3>
    <el-select  filterable placeholder="请选择" style="width: 100%" v-model="inputSettingForm.menuLevel">
      <el-option  v-for="option in menuLevelLists" :key="option.prop" :label="option.label" :value="option.prop">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import MyInput from "@/view/other/c-views/data-handle/zsk/qualityTestingReport/common/MyInput.vue";
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: "inputPart",
  components: {MyInput},
  props:{
    reportType:{
      default:"0"
    },
    reportDataType:{

    }
  },
  setup(props,{emit}){
    let inputSettingForm = ref({
      inputContent:null,
      myFontSize:null,
      fontStyleName:null,
      myFontColor:null,
      myAlignment:null,
      menuName:null,
      menuLevel:null
    })
    //let inputContent = ref(null);  //内容
    let targetNameLists = ref(null);
    let targetName = ref(null);
    //let myFontSize = ref(null);   //字号
    //let fontStyleName = ref(null);  //字体样式
    //let myFontColor = ref(null);   //字体颜色
    let fontStyleNameLists = ref([
      {
        label:'正常',
        prop:'0'
      },
      {
        label:'加粗',
        prop:'1'
      }
    ]);
    let menuNameLists = ref([
      {
        label:'否',
        prop:'0'
      },
      {
        label:'是',
        prop:'1'
      }
    ]);
    let menuLevelLists = ref([
      {
        label:'一级',
        prop:'1'
      },
      {
        label:'二级',
        prop:'2'
      }
    ]);
    let positionLists = ref([
      {
        name:'left',
        value:'0',
        chosen:true
      },
      {
        name:'center',
        value:'1',
        chosen:false
      },
      {
        name:'right',
        value:'2',
        chosen:false
      },
    ]);
    //let tempPosition = ref('0')  //对其方式
    //let menuName = ref(null);  //是否为目录
    //let menuLevel = ref(null);  //目录级别
    let tempJson = ref(null);
    function getTempJson(val){
      switch (val){
        case "0":{
          return qualityTestingJson;
        }
        case "1":{
          return safetyJson;
        }
        case "2":{
          return auditJson;
        }
        case "3":{
          return dataCollectJson;
        }
      }
    }
    function singleInputSetting(val,type){
      tempJson.value = getTempJson(type);
      inputSettingForm.value.inputContent = val.CONTENT_TEXT;
      inputSettingForm.value.myFontSize = val.FONT_SIZE;
      inputSettingForm.value.fontStyleName = val.FONT_STYLE;
      inputSettingForm.value.myFontColor = val.FONT_COLOR;
      changeUrl(val.ALIGNMENT);
      inputSettingForm.value.menuName = val.IS_DIR !==undefined?val.IS_DIR:null;
      inputSettingForm.value.menuLevel = val.LEVEL_DIR!==undefined?val.LEVEL_DIR:null;
      inputSettingForm.value.uuid = val.UUID;
      targetNameLists.value = getTargetNameList(JSON.parse(JSON.stringify(tempJson.value)).key);
    }
    watch(()=>inputSettingForm.value,(val)=>{

          emit('getInputSetting',JSON.parse(JSON.stringify(val)))
        },
        {deep: true}
    )
    let inputContentIndex;
    function inputContentBlur(e){
      inputContentIndex = e.srcElement.selectionStart;
    }
    function insertTarget(val){

      if(!inputContentIndex){
        inputContentIndex = inputSettingForm.value.inputContent.length
      }
      inputSettingForm.value.inputContent = inputSettingForm.value.inputContent.slice(0,inputContentIndex) + "${{"+val+"}}" + inputSettingForm.value.inputContent.slice(inputContentIndex);
    }
    function getTargetNameList(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 fontSizeChange(val){
    }
    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;
          inputSettingForm.value.myAlignment = positionLists.value[i].value;
        }else{
          positionLists.value[i].chosen = false;
        }
      }
    }

    return{
      targetNameLists,targetName,fontSizeChange,fontStyleNameLists,inputSettingForm,menuNameLists,menuLevelLists,positionLists,getUrl,changeUrl,singleInputSetting,insertTarget,inputContentBlur
    }
  }
}
</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;
}
.input-part{
  padding: 10px;
  height: 100%;
  .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;
    }
  }
  h3{
    padding: 5px 0px;
  }
}
</style>
