<template>
  <div class="xd-base-field-table">
    <el-form
      v-if="formStatus"
      class="xd-base-field-table-warpper"
      :ref="refID"
      :model="form"
      :rules="rules"
      label-width="0px"
      :show-message="true"
    >
      <table
        class="app-table-form"
        border="0"
        cellpadding="0"
        cellspacing="1"
        :style="{width: tableWidth}"
      >
        <colgroup>
          <col v-for="(item,index) in width" :key="index" :width="item">
        </colgroup>
        <tr v-for="(list, index) in uiList" :key="index">
          <template v-for="(item,idx) in list">
            <template v-if="item['ele'] === 'el-title'">
              <td class="app-table-form__title" :colspan="item['colspan']">
                <el-button type="text" style="cursor: default">{{item['label']}}</el-button>
              </td>
            </template>
            <template v-else-if="item['ele'] === 'el-html'">
              <td class="app-table-form__header" :rowspan="item['rowspan']">
                <span style="color: red" v-if="item.rules && item.rules.length > 0">*</span>
                <span>{{item['label']}}</span>
              </td>
              <td class="app-table-form__content" :rowspan="item['rowspan']" :colspan="item['colspan']">
                <div class="html-box" v-html="item['html']"></div>
              </td>
            </template>
            <template v-else-if="item['ele'] === 'el-btn'">
              <td class="app-table-form__btn">
                <el-button
                  @click="handleClick({list, index, item, idx})"
                  :size="item['size']"
                  :disabled="item['disabled'] || false"
                  :type="item['type'] || 'primary'"
                >{{item['label']}}</el-button>
              </td>
            </template>
            <template v-else>
              <td class="app-table-form__header" :rowspan="item['rowspan']">
                <span style="color: red" v-if="item.rules && item.rules.length > 0">*</span>
                <span>{{item['label']}}</span>
              </td>
              <td class="app-table-form__content" :rowspan="item['rowspan']" :colspan="item['colspan']">
                <el-form-item
                  v-if="item.ele === 'slot'"
                  :key="item.key"
                  :prop="getProp(item)"
                >
                  <slot :name="item.slot" :form="form"></slot>
                </el-form-item>
                <el-form-item
                  v-else
                  :key="item.key"
                  :prop="getProp(item)"
                  :class="{'app-table-form__content-item': item.ele === 'xd-range'}"
                >
                  <template v-if="item.ele === 'el-input'">
                    <el-input
                      v-model="form[item.valueKey]"
                      v-show="!isHtml"
                      :type="item['type']"
                      :class="item['className'] || 'input100'"
                      :size="size"
                      :placeholder="item['placeholder']"
                      :disabled="item['disabled'] === undefined ? false: item['disabled']"
                      clearable
                    ></el-input>
                    <div class="html-box" v-show="isHtml">{{form[item.valueKey]}}</div>
                  </template>
                  <template v-else-if="item.ele === 'xd-select-list'">
                    <xd-select-list
                      :clearable="true"
                      v-show="!isHtml"
                      v-model="form[item['valueKey']]"
                      :placeholder="item['placeholder']"
                      :default-value="item['value']"
                      :size="size"
                      :list="item['list']"
                      :multiple="item['multiple']"
                      :collapse-tags="true"
                      :class="item['className'] || 'input100'"
                      :disabled="item['disabled'] === undefined ? false: item['disabled']"
                    ></xd-select-list>
                    <div class="html-box" v-show="isHtml">{{getSelectLabel(item['list'],item['value'])}}</div>
                  </template>
                  <template v-else-if="item.ele === 'xd-select-status'">
                    <xd-select-status
                      v-show="!isHtml"
                      :default-value="item['value']"
                      v-model="form[item['valueKey']]"
                      :placeholder="item['placeholder']"
                      :type="item['list']"
                      :is-all="item['isall']"
                      :size="size"
                      class="input100"
                      :disabled="item['disabled'] === undefined ? false: item['disabled']"
                    ></xd-select-status>
                    <div class="html-box" v-show="isHtml">{{getSelectLabel(item['list'],item['value'])}}</div>
                  </template>
                  <template v-else-if="item.ele === 'xd-radio-status'">
                    <xd-radio-status
                      v-show="!isHtml"
                      :default-value="item['value']"
                      v-model="form[item['valueKey']]"
                      :placeholder="item['placeholder']"
                      :type="item['list']"
                      :type-value="item['backValueType']"
                      :disabled="item['disabled'] === undefined ? false: item['disabled']"
                    ></xd-radio-status>
                    <div class="html-box" v-show="isHtml">{{getSelectLabel(item['list'],item['value'])}}</div>
                  </template>
                  <template v-else-if="item.ele === 'xd-radio'">
                    <xd-radio-list
                      v-show="!isHtml"
                      :default-value="item['value']"
                      v-model="form[item['valueKey']]"
                      :placeholder="item['placeholder']"
                      :list="item['list']"
                      :disabled="item['disabled'] === undefined ? false: item['disabled']"
                    ></xd-radio-list>
                    <div class="html-box" v-show="isHtml">{{getSelectLabel(item['list'],item['value'])}}</div>
                  </template>
                  <template v-else-if="item.ele === 'xd-switch'">
                    <xd-switch
                      v-show="!isHtml"
                      :default-value="item['value']"
                      v-model="form[item['valueKey']]"
                      :showTips="item['showTips']"
                      :list="item['list']"
                      :type-value="item['backValueType']"
                      :color="item['color']"
                      :disabled="item['disabled'] === undefined ? false: item['disabled']"
                    ></xd-switch>
                    <div class="html-box" v-show="isHtml">{{getSelectLabel(item['list'],item['value'])}}</div>
                  </template>
                  <template v-else-if="item.ele === 'xd-check'">
                    <xd-check-list
                      v-show="!isHtml"
                      :default-value="item['value']"
                      v-model="form[item['valueKey']]"
                      :list="item['list']"
                      :size="size"
                      :disabled="item['disabled'] === undefined ? false: item['disabled']"
                    ></xd-check-list>
                    <div class="html-box" v-show="isHtml">{{getSelectLabel(item['list'],item['value'])}}</div>
                  </template>
                  <template v-else-if="item.ele === 'xd-range'">
                    <xd-range
                      v-show="!isHtml"
                      v-model="form[`xdRange__${item['valueKey'].join('__')}`]"
                      :placeholder="item['placeholder']"
                      :size="size"
                      :width="item['width'] || '100%'"
                      :disabled="item['disabled'] === undefined ? false: item['disabled']"
                    ></xd-range>
                    <div class="html-box" v-show="isHtml">
                      {{getRange(form[`xdRange__${item['valueKey'].join('__')}`])}}
                    </div>
                  </template>
                  <template v-else-if="item.ele === 'xd-date-range'">
                    <el-date-picker
                      v-model="form[`xdDate__${item['valueKey'].join('__')}`]"
                      type="datetimerange"
                      class="xd-search__datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      :size="size"
                      :start-placeholder="item['placeholder'][0]"
                      :end-placeholder="item['placeholder'][1]"
                      :value-format="item['formatValue']"
                      :format="item['format']"
                      align="right"
                      style="width: 100%"
                      :disabled="item['disabled'] === undefined ? false: item['disabled']"
                    >
                    </el-date-picker>
                  </template>
                  <template v-else-if="item.ele === 'xd-date'">
                    <el-date-picker
                      v-show="!isHtml"
                      v-model="form[item['valueKey']]"
                      type="datetime"
                      :size="size"
                      :placeholder="item['placeholder']"
                      :value-format="item['formatValue']"
                      :format="item['format']"
                      :disabled="item['disabled'] === undefined ? false: item['disabled']"
                    >
                    </el-date-picker>
                    <div class="html-box" v-show="isHtml">{{form[item['valueKey']]}}</div>
                  </template>
                  <template v-else-if="item.ele === 'xd-upload'">
                    <el-input
                      v-if="item['styleType'] === 'one' && !item['slot']"
                      class="xd-base-field__upload-input"
                      disabled
                      :class="item['elinputClassName']"
                      v-model="form[item['valueKey']]['url']"
                    ></el-input>
                    <xd-upload
                      :disabled="isHtml"
                      v-if="item.styleType === 'one'"
                      style-type="one"
                      v-model="form[item['valueKey']]"
                      :default-value="item['defaultValue']"
                      :action="item['action']"
                      :qiniu-cdn="item['qiniuCdn']"
                      :size="item['size']"
                      :type="item['type']"
                      :radius="0.5"
                      :upload-type="item['uploadType']"
                      :tips="item['tipsformet']"
                      :showtype="false"
                      @success="handleSuccess"
                      @onApiSuccessUrl="handleApiSuccessUrl"
                      @onGetParamsAndHeader="handleGetParamsAndHeader"
                    >
                      <template v-if="item['slot']" slot-scope="scope">
                        <slot :name="`upload_${item['valueKey']}`">
                          <div
                            class="app-table-form__upload"
                            :class="{has:scope.image.url}"
                            :style="{
                              width: item['oneWidth'] ? item['oneWidth'] + 'px' : '100px',
                              height: item['oneHeight'] ? item['oneHeight'] + 'px' : '100px',
                            }"
                          >
                            <xd-font-icon
                              v-if="!isHtml"
                              class="app-table-form__upload-icon"
                              icon="iconjia"
                              size="50"
                              :color="!scope.image.url?'#999': 'rgba(0,0,0,0)'"
                            ></xd-font-icon>
                            <img :src="scope.image.url"/>
                          </div>
                        </slot>
                      </template>
                    </xd-upload>
                    <xd-upload
                      :disabled="isHtml"
                      v-if="item.styleType === 'auth'"
                      style-type="auth"
                      v-model="form[item['valueKey']]"
                      :default-value="item['defaultValue']"
                      :action="item['action']"
                      :qiniu-cdn="item['qiniuCdn']"
                      :size="item['size']"
                      :type="item['type']"
                      :radius="5"
                      :upload-type="item['uploadType']"
                      :showtype="false"
                      :tips="item['tipsformet']"
                      @success="handleSuccess"
                      @onApiSuccessUrl="handleApiSuccessUrl"
                      @onGetParamsAndHeader="handleGetParamsAndHeader"
                    >
                    </xd-upload>
                    <xd-upload
                      :disabled="isHtml"
                      v-if="item.styleType === 'list'"
                      style-type="list"
                      v-model="form[item['valueKey']]"
                      :default-value="item['defaultValue']"
                      :action="item['action']"
                      :qiniu-cdn="item['qiniuCdn']"
                      :size="item['size']"
                      :type="item['type']"
                      :radius="5"
                      :upload-type="item['uploadType']"
                      :showtype="false"
                      :tips="item['tipsformet']"
                      @success="handleSuccess"
                      @onApiSuccessUrl="handleApiSuccessUrl"
                      @onGetParamsAndHeader="handleGetParamsAndHeader"
                    >
                    </xd-upload>
                  </template>
                  <span v-if="item['unit']" v-html="item['unit']"></span>
                </el-form-item>
              </td>
            </template>
          </template>

        </tr>
      </table>
    </el-form>
  </div>
</template>

<script>
  import XdSelectList from "@/components/XdSelectList";
  import XdSelectStatus from "@/components/XdSelectStatus";
  import XdRange from "@/components/XdRange";
  import XdRadioStatus from "@/components/XdRadioStatus";
  import XdRadioList from "@/components/XdRadioList";
  import XdSwitch from "@/components/XdSwitch";
  import XdTransfer from "@/components/XdTransfer";
  import XdUpload from "@/components/XdUpload";
  import XdFontIcon from "@/components/XdFontIcon";
  import XdCheckList from "@/components/XdCheckList";
  import XdOverAddPrice from "@/components/XdOverAddPrice";
  import XdSelectWeekTime from "@/components/XdSelectWeekTime";
  import XdJsonView from "@/components/XdJsonView";
  import XdRangeGroup from "@/components/XdRangeGroup";


  export default {
    name: "XdTableForm",
    components: {
      XdRangeGroup,
      XdJsonView,
      XdCheckList,
      XdSwitch,
      XdRadioStatus,
      XdSelectList,
      XdSelectStatus,
      XdRange,
      XdRadioList,
      XdTransfer,
      XdUpload,
      XdFontIcon,
      XdOverAddPrice,
      XdSelectWeekTime
    },
    props:{
      size: {type: String, default: 'medium'}, //medium / small / mini
      list: {type: Array | null, default: null},
      pickerOptions: {
        type: Object,
        default() {
          return {
            shortcuts: [
              {
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              },
              {
                text: '最近六个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一年',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                  picker.$emit('pick', [start, end]);
                }
              }
            ],
          }
        }
      },
      timeType: {
        type: Boolean,
        default: false //false=> 毫秒 true=>秒
      },
      width: {
        type: Array,
        default(){
          return []
        }
      },
      tableWidth: {
        type: Number| String,
        default: '100%'
      },
      isHtml: {
        type: Boolean,
        default: false //false=> 毫秒 true=>秒
      },
    },


    watch: {
      form: {
        handler(val) {
          this.$emit('input', this.getParams())
        },
        deep: true
      },

      list(){
        this.formStatus = false;
        this.init();
      },
    },

    data(){
      return {
        refID: null,
        formStatus: false, //初始化完成
        form: {}, //绑定数据字段
        rules: {}, //验证规则
        uiList: [], //ui列表
        oneUiList: [],
      }
    },


    created() {
      this.refID = `Xd-${this.$xdHelper.randomChar(20)}`;
      this.init();
    },

    methods: {

      getRange(value){
       if(this.$xdHelper.checkVarType(value) === 'array') {
         if(!value[0] && !value[1]) return  '';
         else return value.join(' - ')
       }else{
         return ''
       }

      },

      getSelectLabel(list, value){
        if(!value) return '';
        if(this.$xdHelper.checkVarType(value) === 'string'
          || this.$xdHelper.checkVarType(value) === 'number'
        ) {
          value = [value];
        }
        let temp = this.$xdHelper.getValuesForList(list, value, 'value', false);
        return temp.map(item=>{
          return item.label;
        }).join('，');
      },

      /**
       * @description 上传成功
       */
      handleSuccess(res){
        this.$emit('success', res)
      },

      /**
       * @description 上传到本地服务器成功返回值时刻触发，设置url字段
       * @param result
       * @param resolve
       */
      handleApiSuccessUrl(result, resolve) {
        this.$emit('onApiSuccessUrl', result, (url)=>{
          resolve(url);
        })
      },

      /**
       * @description 单文件上传参数设置
       * @param file
       * @param resolve
       */
      handleGetParamsAndHeader(file, resolve){
        this.$emit('onGetParamsAndHeader', file, (params) => {
          resolve(params);
        })
      },

      /**
       * @description 对象获取form键值
       * @param item  插件对象
       * @param prefix 前缀
       */
      getItemToFormKey(item, prefix){
        let key = [];
        if(this.$xdHelper.checkVarType(item.valueKey) === 'array') {
          key = [...item['valueKey']];
        }
        if (this.$xdHelper.checkVarType(item.valueKey) === 'object') {
          Object.keys(item.valueKey).map((k) => {
            key.push(`${k}$${item.valueKey[k]}`)
          });
        }
        return `${prefix}__${key.join('__')}`
      },

      /**
       * @description 设置form item prop属性
       * @param item 插件对象
       */
      getProp(item){
        if (item.ele === 'xd-range') {
          return  this.getItemToFormKey(item, 'xdRange');
        }
        else if (item.ele === 'xd-date-range') {
          return this.getItemToFormKey(item, 'xdDate');
        }
        else if(item.ele === 'xd-over-add-price'){
          return  this.getItemToFormKey(item, 'xdOverAddPrice')
        }
        else if (item.ele === 'xd-select-week-time') {
          return this.getItemToFormKey(item, 'xdSelectWeekTime')
        }
        else {
          return item['valueKey']
        }
      },

      /**
       * @description 获取表单数据
       */
      getParams() {
        let form = this.$xdHelper.cloneDeep(this.form);
        let temp = {};
        Object.keys(form).map(key => {
          //区间输入值
          if (/^(xdRange__|xdDate__)(.*)$/.test(key)) {
            let range = key.split('__');
            if(form[key] && form[key].length > 0) {
              range.splice(0, 1);
              temp[range[0]] = form[key][0];
              temp[range[1]] = form[key][1];

              //时间毫秒转秒处理
              if (/^(xdDate__)(.*)$/.test(key) && this.timeType) {
                temp[range[0]] = form[key][0] ? Math.floor(form[key][0] / 1000) : form[key][0];
                temp[range[1]] = form[key][1] ? Math.floor(form[key][1] / 1000) : form[key][1];
              }
            }
            else{
              range.splice(0, 1);
              temp[range[0]] = null;
              temp[range[1]] = null;
            }


          }
          else if(/^(xdOverAddPrice__|xdSelectWeekTime__)(.*)$/.test(key)){
            temp = {...temp, ...form[key]}
          }
          else {
            if (this.$xdHelper.checkVarType(form[key]) === 'array' && this.dateFilter) {
              if (form[key].length > 0) {
                temp[key] = form[key];
              }
            }
            else {
              let ele = this.$xdHelper.isKeyInLists(this.oneUiList, key, 'valueKey');
              if(ele.ele === 'xd-date' && this.timeType) {
                temp[key] =  form[key] ? Math.floor(form[key] / 1000) : form[key];
              }
              else {
                temp[key] = form[key];
              }

            }

          }
        });
        if (this.dateFilter) return this.$xdHelper.deleteParamEmptyKey(temp);
        else return temp
      },

      /**
       * @description 初始化表单
       */
      init() {
        if (this.list === null) {
          this.uiList = this.testList;
        } else this.uiList = this.list;

        this.uiList = this.uiList.map((list)=>{
          return list.map(item=>{
            let temp = {...item, key: this.$xdHelper.randomChar(20)};
            this.oneUiList.push(temp)
            return temp
          });
        });


        //初始化form表单
        this.uiList.map(list => {
          list.map(item=>{
            //xd-range
            if (item.ele === 'xd-range') {
              if (item['rules']) {
                this.$set(this.rules, this.getItemToFormKey(item, 'xdRange'), item['rules'])
              }
              this.$set(this.form, this.getItemToFormKey(item, 'xdRange'), item['value'])
            }

            //xd-date-range
            else if (item.ele === 'xd-date-range') {
              if (item['rules']) {
                this.$set(this.rules, this.getItemToFormKey(item, 'xdDate'), item['rules'])
              }
              this.$set(this.form, this.getItemToFormKey(item, 'xdDate'), item['value']);
            }

            //xd-over-add-price
            else if (item.ele === 'xd-over-add-price') {
              if (item['rules']) {
                this.$set(this.rules, this.getItemToFormKey(item, 'xdOverAddPrice'), item['rules'])
              }
              this.$set(this.form, this.getItemToFormKey(item, 'xdOverAddPrice'), '');
            }

            //xd-select-week-time
            else if (item.ele === 'xd-select-week-time') {
              if (item['rules']) {
                this.$set(this.rules, this.getItemToFormKey(item, 'xdSelectWeekTime'), item['rules'])
              }
              this.$set(this.form, this.getItemToFormKey(item, 'xdSelectWeekTime'), '');
            }

            //插槽
            else if (item.ele === 'slot') {
              //todo
            }

            //默认
            else {
              if (item['rules']) {
                this.$set(this.rules, item['valueKey'], item['rules'])
              }
              this.$set(this.form, item['valueKey'], item['value']);
            }
          })
        });
        this.formStatus = true;
      },

      /**
       * @description 提交前验证数据
       */
      submit(){
        return new Promise((resolve, reject)=>{
          this.$refs[this.refID].validate((valid, error) => {
            if(valid) resolve(valid);
            else reject(valid, error);
          })
        });
      },

      handleClick({list, index, item, idx}){
        this.$emit('onBtn', {list, index, item, idx})
      },
    }
  }
</script>

<style lang="scss">

  .xd-base-field-table {
    .input100 {width: 100%;}
    .input80 {width: 80%;}
    .input70 {width: 70%;}
    .input60 {width: 60%;}
    .input50 {width: 50%;}
    .input40 {width: 40%;}
    .input30 {width: 30%;}
    .input20 {width: 20%;}


    & .el-form-item__error {
      left: 0;
      top: calc(100% + 15px);
      transform: translateY(-50%);
      width: auto;
      background: rgba(0,0,0,.6);
      border-radius: 4px;
      white-space: nowrap;
      padding: 5px 10px;
      z-index: 100;
      font-size: 12px;
      box-shadow: 0 0 3px rgba(0,0,0,0.2);
      color: #fff;

      &:before {
        width: 10px;
        height: 10px;
        position: absolute;
        top: -10px;
        left: 10px;
        background: rgba(0, 0, 0, .6);
        content: '';
      }
    }
  }



  .app-table-form {
    background-color: #95B8E7;
    width: 100%;

    &__upload {
      border: #999 dashed 2px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      border-radius: 6px;

      &-input {
        margin-bottom: 10px;
      }

      &-icon {
        position: absolute;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
      }

      & > img {
        max-width: 100%;
        max-height: 100%;
      }

      &:hover, &:hover.has {
        border: #42B983 dashed 2px;
      }

      &:hover.has &-icon {
        color: rgba(255, 255, 255, .7) !important;
        background: rgba(0, 0, 0, .05);
      }
    }

    & .el-form-item__content {

      & > *:first-child {

      }

      & > *:nth-child(2) {
        flex-shrink: 0;
        margin-left: 5px;
      }
    }

    & .el-form-item {
      margin-bottom: 0 !important;
      display: flex;
      flex-flow: nowrap;
      justify-content: flex-start;
      align-items: center;



    }


    & > tr {
    }


    & > tr > td, & > tr > th {
      padding: 5px 10px;
      background-color: #fff;
      line-height: 25px;
      vertical-align: middle;
      text-align: left;
      font-size: 14px;
      color: #666;


     & div.html-box {
        line-height: 20px !important;
        color: #333 !important;
        font-size: 14px !important;
        margin: 0 !important;
        padding: 8px 0;

     }

      &.right {
        text-align: right;
      }

      &.left {
        text-align: right;
      }

      &.center {
        text-align: center;
      }

      &.vCenter {
        vertical-align: middle;
      }

      &.vTop {
        vertical-align: top;
      }

      &.w5 {
        width: 5%;
      }

      &.w10 {
        width: 10%;
      }

      &.w15 {
        width: 15%;
      }

      &.w20 {
        width: 15%;
      }

      &.w25 {
        width: 5%;
      }

      &.w30 {
        width: 10%;
      }

      &.w35 {
        width: 15%;
      }

      &.w40 {
        width: 15%;
      }

      &.w45 {
        width: 15%;
      }

      &.w50 {
        width: 15%;
      }
    }

    & > tr > th {
      background-color: #E0ECFF;
    }

    &__header {
      background-color: #E0ECFF !important;
      text-align: right !important;
      color: #111 !important;
    }

    &__title {
      font-size: 16px;
      font-weight: bold;
      color: #00a9e1!important;
    }


    &__content {
      max-width: 20%;
      padding: 4px 5px !important;

      &-item {
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }

      & .xd-checkbox-box {
        line-height: 24px!important;
      }
    }

  }

  .app-table-form__content-item .el-form-item__content {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  @media screen and (max-width: 768px) {
    .xd-base-field {
      .input100, .input20, .input30, .input40, .input50, .input60, .input80, .input70 {width: 100%;}

      .el-form-item {
        margin-bottom: 20px;

        & .el-date-editor {
          width: 100% !important;
        }
      }
    }
  }


</style>
