<template>
<el-dialog

  :modal="true"
  :close-on-click-modal="false"
  :close-on-press-escape="false"
  destroy-on-close
  :append-to-body="true"
  width="60%"
  title="配置规则"
  :model-value="dialogVisible"

  :before-close="handleClose"

>
  <diy-el-form v-model:model-form="form" ref="formRef" :forms="qualityCheckRuleDialogFormConfig">
    <template #gl>
      <el-button  :icon="Plus" @click="addGlgzTable"></el-button>
    </template>
    <template #set>
      <el-button  :icon="Plus" @click="addSetTable"></el-button>
    </template>
    <template #table>
      <my-table
        :operation-width="100"
        border
        :has-operation="true"
        :table-data="tableData"
        :headers="qualityCheckRuleDialogTable"

      >
        <template #glzd="{data}">
          <el-select v-model="data.glzd">
            <el-option v-for="item in filedArr" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </template>
        <template #table-rule="{data,index}">
          <el-select @change="initSet(data)" v-model="data['table-rule']">
            <el-option  v-for="item in ruleArr.filter(i =>!['C0009','C0010','C0011'].includes(i.value))" :value="item.value" :label="item.label"></el-option>
          </el-select>
        </template>
        <template #jtpz="{data,index}">
<!--          数据范围-->
          <template v-if="data['table-rule'] === 'C0005'">
            <diy-el-form  :span="8" :model-form="data" :forms="myComGet(data)"/>
          </template>
<!--          数据格式-->
          <template v-if="data['table-rule'] === 'C0004'">
            <diy-el-form  :span="10" :model-form="data" :forms="shareExchangeHomeFilterDialogSjgsFormConfig"/>
          </template>
<!--          长度-->
          <template v-if="data['table-rule'] === 'C0002'">
            <diy-el-form :span="10" :model-form="data" :forms="shareExchangeHomeFilterDialogLengthFormConfig"/>
          </template>
        </template>
        <template #operation="{data,index}">
          <el-button type="info" @click="delGlgzTable(index)">删除</el-button>
        </template>
      </my-table>
    </template>
    <template #settable>
      <my-table
        border
        :has-operation="true"
        :operation-width="100"
        :table-data="setTableData"

        :headers="qualityCheckSetRuleDialogTableJqgz"

      >
        <template #my-rule="{data,index}">
          <template v-if="form['rule'] === 'C0011'">
            <diy-el-form :span="6" :model-form="data" :forms="shareExchangeHomeFilterDialogJqrzFormConfig"/>
          </template>
          <template v-if="form['rule'] === 'C0002'">
            <diy-el-form :span="6" :model-form="data" :forms="shareExchangeHomeFilterDialogLengthFormConfig"/>
          </template>
          <template v-if="form['rule'] === 'C0009'">
            <diy-el-form :span="6"  :model-form="data" :forms="dictionArySelectForm()"/>
          </template>
          <template v-if="form['rule'] === 'C0010'">
            <diy-el-form :span="6" :model-form="data" :forms="shareExchangeHomeFilterDialogWjrzFormConfig"/>
          </template>
          <template v-if="form['rule'] === 'C0004'">
            <diy-el-form :span="6" :model-form="data" :forms="shareExchangeHomeFilterDialogSjgsFormConfig"/>
          </template>
          <template v-if="form['rule'] === 'C0005'">
            <diy-el-form :span="6"   :model-form="data" :forms="mySetComGet(data)"/>
          </template>
        </template>
        <template #operation="{data,index}">
          <el-button type="info" @click="delSetTable(index)">删除</el-button>
        </template>
      </my-table>
    </template>
  </diy-el-form>



  <template #footer v-if="dialogOperationType !=='detail'">
    <el-button :icon="SuccessFilled" @click="getCs">确定</el-button>
    <el-button @click="handleClose" :icon="Close">取消</el-button>
  </template>
</el-dialog>
</template>

<script>
import {Close, Delete, Edit, Plus, SuccessFilled} from "@element-plus/icons-vue";
import DiyElForm from "@/components/common/DiyElForm.vue";
import {computed, onBeforeMount, ref, watch} from "vue";

import MyTable from "@/components/common/MyTable.vue";
import {
  qualityCheckRuleDialogForm, shareExchangeHomeFilterDialogDataDictionaryForm,
  shareExchangeHomeFilterDialogJqrzForm, shareExchangeHomeFilterDialogLengthForm,
  shareExchangeHomeFilterDialogSjfwForm1, shareExchangeHomeFilterDialogSjgsForm, shareExchangeHomeFilterDialogWjrzForm
} from "@/data/all-forms";
import {qualityCheckRuleDialogTable, qualityCheckSetRuleDialogTableJqgz} from "@/data/all-table-header";
import {useRootStore} from "@/stores/useStore";
import {validDataDictionary} from "@/service/zsk/quality-check-rule";
import {elAlert} from "@/unit/element-ui/tip";



export default {
  name: "QualityCheckSetingDialog",
  components: { MyTable, DiyElForm},
  computed: {
    Delete() {
      return Delete
    },
    Edit() {
      return Edit
    },
    Plus() {
      return Plus
    },
    SuccessFilled() {
      return SuccessFilled
    },
    Close() {
      return Close
    }
  },
  props:{
    filedArr:{

    },
    dialogVisible:{

    },
    ruleArr:{

    },
    currentOpObj:{

    },
    currentDialogObj:{

    },
    dialogOperationType:{

    },
    allDictionaryArr:{

    }

  },
  setup(props,{emit}){
    const form= ref({

    })
   const dictionArySelectForm = computed(
     () => {
       return function ()  {
         console.log('重新获取compy',shareExchangeHomeFilterDialogDataDictionaryForm)
         const myC = shareExchangeHomeFilterDialogDataDictionaryFormConfig.value
         let findFormZd = myC.formItemsArr.find(i => i.modelValue === 'chooseDictionary')
         let setBtnForm = qualityCheckRuleDialogFormConfig.value.formItemsArr.find(i => i.slotName ==='settable')
         findFormZd.options =[
           {value:'',label:'请选择'},
         ]
         const s = form.value.field[0]

         if (!s){
           return myC
         }

         let regT = new RegExp(`^${s}$`,'i')
         let findI= props.allDictionaryArr.findLast(it => regT.test(it.XX_NAME))?.DICTIONARY_VALUE
          (setBtnForm.isHide =  Boolean(findI))
         if (findI){

           let findZd = store.paraArr.find(i => +i.PARA_CODE === +findI)
           if (findZd) {
             findFormZd.options = [
               {value:'',label:'请选择'},
               {value:findZd.PARA_CODE +'',label:findZd.PARA_NAME},
             ]
           }
         }
         return myC
       }
     }
   )
    const formRef = ref(null)
    const myComGet = computed(() => {
      return function (data) {
        let config = shareExchangeHomeFilterDialogSjfwForm1Config.value
        let findI = config.formItemsArr.find(i => i.modelValue === 'gllxgz')
        let findLx = config.formItemsArr.find(i => i.modelValue === 'gllx')
        findLx.events = {
          change(val){
            console.log('辩护萨达萨达')
            data['gllxgz'] = ''
          }
        }
        if (!+data.gllx){
          findI.options = [{value:'',label:'请选择'}].concat(store.paraArr.filter(i => +i.PARA_CODE ===90))
          return  config
        }
        else if (data.gllx === '1' || data.gllx === '6' || data.gllx === '99'){


          console.log('config',config)
          findI.options =[{value:'',label:'请选择'}].concat(store.paraArr.filter(i => +i.PARA_CODE ===90).filter(i => i.CODE ==='1' || i.CODE === '6'))

          return  config
        }else {



          console.log('config',config)

          findI.options = [{value:'',label:'请选择'}].concat(store.paraArr.filter(i => +i.PARA_CODE ===90).filter(i => i.CODE !=='1' && i.CODE !== '6'))

          return  config

        }


      }
    })
    const mySetComGet = computed(() => {
      return function (data) {
        let config = shareSetExchangeHomeFilterDialogSjfwForm1Config.value
        let findI = config.formItemsArr.find(i => i.modelValue === 'gllxgz')
        let findLx = config.formItemsArr.find(i => i.modelValue === 'gllx')
        findLx.events = {
          change(val){
            console.log('辩护萨达萨达')
            data['gllxgz'] = ''
          }
        }
        if (data.gllx === '1' || data.gllx === '6' || data.gllx === '99'){


          console.log('config',config)
          findI.options = store.paraArr.filter(i => +i.PARA_CODE ===90).filter(i => i.CODE ==='1' || i.CODE === '6')

          return  config
        }else {



          console.log('config',config)

          findI.options = store.paraArr.filter(i => +i.PARA_CODE ===90).filter(i => i.CODE !=='1' && i.CODE !== '6')

          return  config

        }


      }
    })


    function getLxOptions(data,index) {
      if (data.gllx === '1' || data.gllx === '6' || data.gllx === '99'){
        let config = shareExchangeHomeFilterDialogSjfwForm1Config.value
        let findI = config.formItemsArr.find(i => i.modelValue === 'gllxgz')

        findI.options = store.paraArr.filter(i => +i.PARA_CODE ===90).filter(i => i.CODE ==='1' || i.CODE === '6')
        findI.events = {
          change(val){

            console.log('changel',val,data.gllx)
          }
        }

        return  config
      }else {
        let config = shareExchangeHomeFilterDialogSjfwForm1Config.value
        let findI = config.formItemsArr.find(i => i.modelValue === 'gllxgz')

        findI.options = store.paraArr.filter(i => +i.PARA_CODE ===90).filter(i => i.CODE !=='1' && i.CODE !== '6')
        findI.events = {
          change(){
            console.log('changel',val,data.gllx)
          }
        }
        return  config

      }


    }
   const store = useRootStore()
   const qualityCheckRuleDialogFormConfig = ref({...qualityCheckRuleDialogForm()})
   const shareExchangeHomeFilterDialogSjfwForm1Config = ref({...shareExchangeHomeFilterDialogSjfwForm1})
   const shareSetExchangeHomeFilterDialogSjfwForm1Config = ref({...shareExchangeHomeFilterDialogSjfwForm1})
   const shareExchangeHomeFilterDialogSjgsFormConfig = ref({...shareExchangeHomeFilterDialogSjgsForm})
   const shareExchangeHomeFilterDialogLengthFormConfig = ref({...shareExchangeHomeFilterDialogLengthForm})
   const shareExchangeHomeFilterDialogDataDictionaryFormConfig = ref({...shareExchangeHomeFilterDialogDataDictionaryForm})
   const shareExchangeHomeFilterDialogJqrzFormConfig = ref({...shareExchangeHomeFilterDialogJqrzForm})
   const shareExchangeHomeFilterDialogWjrzFormConfig = ref({...shareExchangeHomeFilterDialogWjrzForm})
    const tableData = ref([

    ])
    function initSet(data) {
      Object.keys(data).forEach(key => {
        if (key!=='glzd' && key !== 'table-rule'){
          data[key] = ''
        }

      })
    }
    function getE(val,item){
      item = val
    }
    const setTableData = ref([

    ])
    function changeSetModel(form,index) {

      // let gllxgz = form.gllxgz
      //  if (form.gllx !== tableData.value[index].gllx){
      //    console.log('不扽故意')
      //    gllxgz = ''
      //  }

      // setTableData.value.splice(index,1, form)

      // console.log('changeModel',form)
    }
   function changeModel(form,index) {

    // let gllxgz = form.gllxgz
    //  if (form.gllx !== tableData.value[index].gllx){
    //    console.log('不扽故意')
    //    gllxgz = ''
    //  }
     console.log('拿到model',form)
     // tableData.value.splice(index,1, form)

     // console.log('changeModel',form)
   }
   function delGlgzTable(index) {
     tableData.value.splice(index,1)
   }
    function delSetTable(index) {
      setTableData.value.splice(index,1)
    }
    function addSetTable(){
      if (form.value.rule === 'C0009'){
        if (form.value.field.length !== 1 || !form.value.field[0]){
          elAlert('设置数据字典时,只能选择一个字段')
          return;
        }else if (!(dictionArySelectForm.value().formItemsArr.find(i =>i.modelValue === 'chooseDictionary')?.options.length > 1)){
         elAlert('当前字段未配置数据字典,只能选择一个字段')
          return;
        }
      }
      console.log('新增表格')

      let setBtnForm = qualityCheckRuleDialogFormConfig.value.formItemsArr.find(i => i.slotName ==='settable')
      setBtnForm.isHide = false
      let obj = {}
      qualityCheckSetRuleDialogTableJqgz.forEach(i => obj[i.prop] = '')
      setTableData.value.push(obj)
    }
    function addGlgzTable(){
      console.log('新增表格2')
      let setBtnForm = qualityCheckRuleDialogFormConfig.value.formItemsArr.find(i => i.slotName ==='table')
      setBtnForm.isHide = false
      let obj = {}
      qualityCheckRuleDialogTable.forEach(i => obj[i.prop] = '')
      tableData.value.push(obj)
    }
    function getCs(){
      let RELATION_FIELD_ARR = []
      tableData.value.forEach(i =>{
        let obj = {
          gl_id_name:i.glzd,
          gl_id_rules:i['table-rule'],
          gl_rules_part:[]
        }
        if (i['table-rule'] === 'C0001'){
          // 非空
          obj.gl_rules_part.push({
            rules:'1'
          })
        }else if (i['table-rule'] === 'C0002'){
          // 长度
          obj.gl_rules_part.push({
            chack_type:i.lengthRule,
            chack_value:i.content,
          })
        }else if (i['table-rule'] === 'C0003'){
          // 唯一
          obj.gl_rules_part.push({
            chack_type:''
          })
        }else if (i['table-rule'] === 'C0004'){
          // 数据格式
          obj.gl_rules_part.push({
            data_format:i.sjgs
          })
        }else if (i['table-rule'] === 'C0005'){
          // 数据格式
          obj.gl_rules_part.push({
            data_type:i.gllx,
            chack_type:i.gllxgz,
            value:i.gllxnr,

          })
        }else {
          obj.gl_rules_part.push({

          })
        }
        RELATION_FIELD_ARR.push(obj)
      })

      let QUALITY_RULE_ARR = []
      setTableData.value.forEach(i => {
        let obj = {}

        if (form.value['rule'] === 'C0011'){
          obj = {
            "start_field_sub": i.start_jq,
            "end_field_choose": i.jqField,
            "end_field_sub": i.end_jq
          }
        }
        else if (form.value['rule'] === 'C0001'){
          obj = {
            "NOT_NULL":'1'
          }
        }
        else if (form.value['rule'] === 'C0002'){
          obj = {
            "CHACK_TYPE":i.lengthRule,
            "CHACK_VALUE":i.content,
          }
        }
        else if (form.value['rule'] === 'C0003'){
          obj = {
            "ONLY": '1'
          }
        }
        else if (form.value['rule'] === 'C0004'){
          obj = {
            "DATA_FORMAT":i.sjgs
          }
        }
        else if (form.value['rule'] === 'C0005'){
          obj = {
            "DATA_TYPE":i.gllx,
            "CHACK_TYPE":i.gllxgz,
            "VALUE":i.gllxnr,
          }
        }
        else if (form.value['rule'] === 'C0007'){
          obj = {
            "VALUE":'',

          }
        }
        else if (form.value['rule'] === 'C0009'){
          obj = {
            "DATA_ZD":form.value.chooseDictionary,

          }
        }
        else if (form.value['rule'] === 'C0010'){
          obj = {
            "file_start_url":i.fileUrl,
            "save_file_url":i.saveUrl,
            "file_ftp_choose":i.address,
            "file_suffix_url":i.wjhz,

          }
        }else {
          obj = {}
        }
        QUALITY_RULE_ARR.push(obj)
      })
      if (form.value['rule'] === 'C0001'){
        QUALITY_RULE_ARR=  [{
          "NOT_NULL":'1'
        }]
      }else if(form.value['rule'] === 'C0003'){
        QUALITY_RULE_ARR=  [{
          "ONLY": "1"
        }]
      }
      formRef.value.refEl.validate(isValid => {
        if (isValid){
          emit('changeOrAddDataD',form.value,RELATION_FIELD_ARR,QUALITY_RULE_ARR)
        }
      })

      console.log('RELATION_FIELD_ARR',RELATION_FIELD_ARR,QUALITY_RULE_ARR)
      // if (form.value.rule === 'Z0013')
    }
    onBeforeMount(() => {

      if (props.dialogOperationType !== 'add'){
        let findTableForm = qualityCheckRuleDialogFormConfig.value.formItemsArr.find(i => i.slotName ==='table')
        form.value = {
          ...props.currentDialogObj,
          rule:props.currentDialogObj.TYPE_CODE,
          field:(props.currentDialogObj.FIELD_NAME || '').split(','),
        }
        try {

          let qualityObj2 = JSON.parse(form.value.QUALITY_RULE)
          if ((qualityObj2.length > 0)){
            setTableData.value =  qualityObj2.map(it => {
              switch (form.value.rule){
                case "C0011":
                  return {
                    ...it,
                    start_jq:it.start_field_sub,
                    jqField:it.end_field_choose,
                    end_jq:it.end_field_sub,
                  }
                case "C0002":
                  return {
                    ...it,
                    CHACK_VALUE:it.CHACK_TYPE,
                    content:it.CHACK_VALUE,
                  }
                case "C0004":
                  return {
                    ...it,
                    sjgs:it.DATA_FORMAT,

                  }
                case "C0005":
                  return {
                    ...it,
                    gllx:it.DATA_TYPE,
                    gllxgz:it.CHACK_TYPE,
                    gllxnr:it.VALUE,

                  }
                case "C0009":
                  return {
                    ...it,
                    chooseDictionary : it.DATA_ZD

                  }
                case "C0010":
                  return {
                    ...it,
                    fileUrl:it.file_start_url,
                    saveUrl:it.save_file_url,
                    address:it.file_ftp_choose,
                    wjhz:it.file_suffix_url,

                  }
                default:
                  return {
                    ...it
                  }
              }
            })
            console.log(setTableData.value,'tableD')
          }

        }catch {
          setTableData.value = []
        }

        try {
          let qualityObj = JSON.parse(form.value.RELATION_FIELD)
          console.log('form.value.RELATION_FIELD',form.value.RELATION_FIELD)
         if ((qualityObj.length > 0)){
           tableData.value =  qualityObj.map(it => {
             let obj = {
               'table-rule':it.gl_id_rules,
               glzd:it.gl_id_name,
             }
             switch (it.gl_id_rules){


               case "C0002":
                 obj.lengthRule = it.gl_rules_part[0]?.chack_type
                 obj.content = it.gl_rules_part[0]?.chack_value
                 break
               case "C0004":
                 obj.sjgs= it.gl_rules_part[0]?.data_format
                 break
               case "C0005":
                 obj.gllx= it.gl_rules_part[0]?.data_type
                 obj.gllxgz= it.gl_rules_part[0]?.chack_type
                 obj.gllxnr= it.gl_rules_part[0]?.value
                 break
               case "C0009":
                 obj.chooseDictionary= it.gl_rules_part[0]?.DATA_ZD

                 break

             }
             return obj
           })
         }else {
           tableData.value = []
         }

          console.log(setTableData.value,'tableD')
        }catch {

        }
        findTableForm.isHide = !(tableData.value.length >0)
      }
      let findRuleForm = qualityCheckRuleDialogFormConfig.value.formItemsArr.find(i => i.modelValue ==='rule')
      let setBtnForm = qualityCheckRuleDialogFormConfig.value.formItemsArr.find(i => i.slotName ==='set')
      let findSetTableForm = qualityCheckRuleDialogFormConfig.value.formItemsArr.find(i => i.slotName ==='settable')

      findRuleForm.events = {
        change(val){
          setBtnForm.isHide =!['C0011','C0010','C0004','C0002','C0005','C0009'].includes(val)
          findSetTableForm.isHide = !['C0011','C0010','C0004','C0002','C0005','C0009'].includes(val) || !(setTableData.value.length > 0)
          setTableData.value = []
        }
      }
      // watch(() =>form.value.rule,(val) => {
      //   let findTableForm = qualityCheckRuleDialogFormConfig.value.formItemsArr.find(i => i.slotName ==='table')
      //   let setBtnForm = qualityCheckRuleDialogFormConfig.value.formItemsArr.find(i => i.slotName ==='set')
      //   let findSetTableForm = qualityCheckRuleDialogFormConfig.value.formItemsArr.find(i => i.slotName ==='settable')
      //   // 数据格式
      //
      //   // findTableForm.isHide = true
      //   // findSetTableForm.isHide = true
      //
      //
      //   console.log('隐藏发生边比划',!['C0011','C0010','C0004','C0002','C0005','C0009'].includes(val))
      //   //  C0011截取验证
      //   setBtnForm.isHide =!['C0011','C0010','C0004','C0002','C0005','C0009'].includes(val)
      //   findSetTableForm.isHide = !['C0011','C0010','C0004','C0002','C0005','C0009'].includes(val) || !(setTableData.value.length > 0)
      //   if (!['C0011','C0010','C0004','C0002','C0005','C0009'].includes(val)){
      //     setTableData.value = []
      //   }
      // },{
      //   immediate:true
      // })
      let findGllx=  shareExchangeHomeFilterDialogSjfwForm1Config.value.formItemsArr.find(i => i.modelValue === 'gllx')
      let findFh=  shareExchangeHomeFilterDialogSjfwForm1Config.value.formItemsArr.find(i => i.modelValue === 'gllxgz')
      let sjgsForm = shareExchangeHomeFilterDialogSjgsFormConfig.value.formItemsArr.find(i => i.modelValue ==='sjgs')
      let lengthRuleForm = shareExchangeHomeFilterDialogLengthFormConfig.value.formItemsArr.find(i => i.modelValue ==='lengthRule')
      findGllx.options = store.paraArr.filter(i => +i.PARA_CODE ===91)
      findFh.options = store.paraArr.filter(i => +i.PARA_CODE ===90)
      lengthRuleForm.options = [{value:'',label:'请选择'}].concat(store.paraArr.filter(i => +i.PARA_CODE ===90 && +i.CODE !==6))
      sjgsForm.options = [{value:'',label:'请选择'}].concat(store.paraArr.filter(i => +i.PARA_CODE ===92))

      console.log('store.paraArr.filter(i => i.PARA_CODE === \'91\')',store.paraArr.filter(i => +i.PARA_CODE === 91))
      let findFiled = qualityCheckRuleDialogFormConfig.value.formItemsArr.find(i => i.modelValue ==='field')
      let findjqField = shareExchangeHomeFilterDialogJqrzFormConfig.value.formItemsArr.find(i => i.modelValue ==='jqField')
      let addressForm = shareExchangeHomeFilterDialogWjrzFormConfig.value.formItemsArr.find(i => i.modelValue ==='address')
      let wjhzForm = shareExchangeHomeFilterDialogWjrzFormConfig.value.formItemsArr.find(i => i.modelValue ==='wjhz')
      findjqField.options = findFiled.options = props.filedArr.filter(i => i.value)
      addressForm.options = [{value:'',label:'请选择'}].concat(store.paraArr.filter(i => +i.PARA_CODE ===230))
      wjhzForm.options = props.filedArr
      let findRule = qualityCheckRuleDialogFormConfig.value.formItemsArr.find(i => i.modelValue ==='rule')
      findRule.options = props.ruleArr


    })

   function handleClose() {
      emit('update:dialogVisible',false)
    }
    return {
     handleClose,
      form,
      qualityCheckRuleDialogFormConfig,
      tableData,
      qualityCheckRuleDialogTable,
      qualityCheckSetRuleDialogTableJqgz,
      setTableData,
      addSetTable,
      shareExchangeHomeFilterDialogJqrzForm,
      addGlgzTable,
      shareExchangeHomeFilterDialogSjfwForm1Config,
      changeModel,
      getLxOptions,
      delGlgzTable,
      delSetTable,
      initSet,
      myComGet,
      shareExchangeHomeFilterDialogSjgsFormConfig,
      shareExchangeHomeFilterDialogLengthFormConfig,
      shareExchangeHomeFilterDialogJqrzFormConfig,
      shareExchangeHomeFilterDialogWjrzFormConfig,
      changeSetModel,
      mySetComGet,
      shareSetExchangeHomeFilterDialogSjfwForm1Config,
      getCs,
      shareExchangeHomeFilterDialogDataDictionaryFormConfig,
      dictionArySelectForm,
      getE,
      formRef

    }
  }
}
</script>

<style scoped lang="scss">
.my-block{
  .b-title{
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    line-height: 40px;
    color: #676a6c;
    border-bottom: 1px solid var(--el-border-color-light);
  }
}
.form{
  padding-left: 10%;
  padding-right: 10%;
}
.set-content{
  margin-top: 10px;

}
.add-div{
  margin-bottom: 10px;
  text-align: right;
}
</style>
