<template>
  <div>
    <Form :model="searchForm" onsubmit="return false" inline>
      <!-- --------------------------------------------------待加入模板------------------------------------------------------------------------ -->
      <Form-item v-if="this.common" style="width:200px;margin-right: 10px;margin-bottom: 1px">
        <Select v-model="commonly" placeholder="常用筛选" clearable @on-clear="clearCommonly">
          <OptionGroup label="常用筛选">
            <Option v-for="item in commonList" :value="item.id" :key="item.id"
                    @click.native="commonFind(item)">{{ item.label }}
            </Option>
          </OptionGroup>
          <OptionGroup label="自定义常用筛选">
            <Option v-for="(item,index) in selfList" :value="item.findItem" :key="item.id"
                    @click.native="selfFind(item)">
              {{ item.label }}
              <div style="float:right;color:rgba(6,18,34,0.46)">
                <Icon type="ios-create-outline" size="16" @click.native="selfEdit(item)"/>
                <Modal v-model="modalDelete"
                       title="提示"
                       @on-ok="deleteSelfList(item,index)"
                       @on-cancel="cancelDelete">
                  确定要删除 {{commonName}} 吗？
                </Modal>
                <Icon style="margin-left: 5px" size="16" type="ios-trash" @click.native="deleteClick(item.label)"/>
              </div>
            </Option>
          </OptionGroup>
          <OptionGroup label="- - - - - - - - - - - - - - - - - - - - - - - - -">
            <Option value="customize" @click.native="selfAdd">添加自定义筛选</Option>
          </OptionGroup>
        </Select>
      </Form-item>
      <!-- 组件换为搜索框，根据页面主要查询字段自行设置-->
      <Form-item v-if="keyValue2" style="margin-bottom: 1px; max-width: 260px">
        <Input v-model="keyValue" search enter-button placeholder="请输入关键词进行查询" @on-search="searchBtn"/>
      </Form-item>
      <Form-item style="margin-bottom: 1px" v-if="this.clear">
        <Button @click="clearAll" type="info" ghost>
          重置
        </Button>
      </Form-item>
      <Form-item style="margin-bottom: 1px" v-if="this.senior">
        <Button type="text" style="font-size: 10px;text-align: left" @click="seniorShow">
          <Icon type="ios-funnel-outline" size="15"/>
          高级
        </Button>
      </Form-item>
    </Form>

    <Modal
      v-model="modal1"
      title="高级筛选"
      footer-hide
      width="600"
      @on-cancel="cancel"
    >
        <Form ref="formDynamic" :model="formDynamic" style="width: 580px" :label-width="30">
          <p v-if="type=='edit'">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;自定义筛选名称</p>
          <FormItem v-if="type=='edit'" prop="label"
                    :rules="{required: true, message:'筛选条件不能为空!', trigger: 'blur'}">
            <Input v-model="formDynamic.label" style="width: 160px" placeholder="请输入常用筛选名称"></Input>
          </FormItem>
          <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: red;font-size: 10px">*</span>&nbsp;筛选条件</p>
          <template v-for="(item, index) in formDynamic.items">
            <FormItem
              v-if="item.status"
              :key="index"
              :prop="'items.' + index + '.field'"
              :rules="{required: true, message:'筛选条件不能为空！', trigger: 'blur'}">
              <Row>
                <!-- 查询字段选择 -->
                <Col span="8">
                  <Select v-model="formDynamic.items[index].field" style="width:160px" placeholder="请选择查询字段">
                    <Option v-for="item in fieldList" :value="item.field" :key="item.field"
                            @click.native="fieldClick(item,index)">{{ item.label }}
                    </Option>
                  </Select>
                </Col>
                <!-- 判断条件选择 -->
                <Col span="5">
                  <Select v-model="formDynamic.items[index].judge" style="width:100px" placeholder="条件">
                    <Option v-for="item in formDynamic.judgeList[index]" :value="item.value" :key="item.value"
                            @click.native="judgeClick(item.value,index)">{{ item.label }}
                    </Option>
                  </Select>
                </Col>
                <!-- 判断值选择 -->
                <Col span="6">
                  <!-- 单项选择框，type设置为select即可，需要设置selectList属性 -->
                  <Select v-if="otherIsTrue&&formDynamic.TypeList[index]=='select'"
                          v-model="formDynamic.items[index].value"
                          style="width:160px" placeholder="请选择字段值">
                    <Option v-for="item in formDynamic.selectList[index]" :value="item.value" :key="item.value" :disabled="nullJudge[index]">
                      {{item.name
                      }}
                    </Option>
                  </Select>
                  <!-- 多项选择框，当判断值选择in的时候会自动切换为多项选择，需要设置selectList属性 -->
                  <Select v-else-if="inIsTrue && formDynamic.TypeList[index]=='in'"
                          v-model="formDynamic.items[index].value"
                          style="width:160px" multiple placeholder="请选择字段值">
                    <Option v-for="item in formDynamic.selectList[index]" :value="item.value" :key="item.value" :disabled="nullJudge[index]">
                      {{item.name
                      }}
                    </Option>
                  </Select>
                  <!-- 时间组件，type设置为time即可，当判断条件不为between时自动切换为时间组件 -->
                  <DatePicker v-else-if="timeIsTrue && formDynamic.TypeList[index]=='time1'"
                              :value="formDynamic.items[index].value"
                              @on-change="formDynamic.items[index].value=$event"
                              type="date"
                              format="yyyy.MM.dd"
                              placement="bottom-end"
                              placeholder="请选择时间"
                              style="width: 160px"
                              :disabled="nullJudge[index]"
                  >
                  </DatePicker>
                  <!-- 时间范围组件，type设置为time即可，当判断条件为between时自动切换为时间范围 -->
                  <DatePicker v-else-if="timeIsTrue && formDynamic.TypeList[index]=='between'"
                              :value="formDynamic.items[index].value"
                              @on-change="formDynamic.items[index].value=$event"
                              type="daterange"
                              format="yyyy.MM.dd"
                              :options="options2"
                              placement="bottom-end"
                              placeholder="请选择时间范围"
                              style="width: 160px"
                              :disabled="nullJudge[index]"
                  >
                  </DatePicker>
                  <!-- 数字输入组件，type设置为number即可 -->
                  <InputNumber v-else-if="otherIsTrue&&formDynamic.TypeList[index]=='number'"
                              v-model="formDynamic.items[index].value"
                              style="width:160px" placeholder="请输入数值" :disabled="nullJudge[index]"></InputNumber>
                  <!-- 普通输入框，默认组件，type设置为input,防止切换为普通框时延迟设立 -->
                  <Input v-else-if="otherIsTrue&&formDynamic.TypeList[index]=='input'"
                        v-model="formDynamic.items[index].value" style="width: 160px" placeholder="请输入筛选值" :disabled="nullJudge[index]"></Input>
                  <!-- 普通输入框，默认组件 -->
                  <Input v-else v-model="formDynamic.items[index].value" style="width: 160px"
                        placeholder="请输入筛选值" :disabled="nullJudge[index]"></Input>
                </Col>
                <Col span="1" offset="1">
                  <Button v-if="index>0" @click="handleRemove(index)" type="text" size="small">
                    <Icon type="md-close-circle" size="25"/>
                  </Button>
                </Col>

              </Row>
            </FormItem>
          </template>
          <Row style="text-align: left">
            <Button type="text" @click="handleAdd" style="text-align: left;color: #348EED">
              <Icon type="md-add"/>
              添加筛选条件
            </Button>
          </Row>
          <Divider dashed/>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <Checkbox v-if="this.saveToCommon&&type!='edit'" v-model="saveToCommonly">保存为常用筛选</Checkbox>
          <FormItem v-if="saveToCommonly"
                    prop="label"
                    :rules="{required: true, message: '筛选条件不能为空!', trigger: 'blur'}">
            <Input v-model="formDynamic.label" style="width: 160px" placeholder="请输入常用筛选名称"></Input>
          </FormItem>
        </Form>
        <template #footer>
          <div style="text-align: right">
            <Button type="text" @click="cancel" style="margin-right: 10px">取消</Button>
            <Button type="info" @click="resetForm" style="margin-right: 10px">重置</Button>
            <Button type="primary" @click="ok"><p v-if="type=='add'">查询</p>
              <p v-else>保存并查询</p></Button>
          </div>
        </template>
    </Modal>
  </div>
</template>
<script>
  import {addBaseSenior, editBaseSenior, getBaseSeniorList, deleteBaseSenior} from './senior'

  export default {
    name: 'bcSenior',
    props: {
      common: Boolean,//是否显示常用查询
      keyValue2: Boolean,//是否显示关键字查询
      senior: Boolean,//是否显示高级查询
      clear: Boolean,//是否显示重置按钮
      saveToCommon: Boolean,//是否显示保存为常用筛选选项
      pageName: String,
      fieldList: Array,
      commonList: Array,
      item: Object,//用来和父组件同步筛选条件
    },
    data() {
      return {
        cacheForm:{},
        cacheCommon:{},
        cacheSenior:{},
        type: '',
        modal1: false,
        modalDelete:false,
        commonName:'',
        on: false,//用来控制自定义筛选的标记按钮的显示
        commonly: '',
        keyValue: '',
        searchForm: {},
        selfList: [],
        index: 2,//当前行，用来增加表单行数
        typeTransfer: [],//中转类型
        timeIsTrue: false,
        inIsTrue: false,
        otherIsTrue: true,
        nullJudge:[],
        formDynamic: {//表单相关数据
          id: '',
          label: '',//保存为常用时常用名称
          items: [//表单数据
            {
              field: '',//字段
              judge: '',//判断条件
              value: null,//判断值
              index: 0,//标记
              status: 1//状态
            },
          ],
          judgeList: [],//用来存放判断条件，里面的元素为list
          TypeList: [],//用来存放筛选值组件的类型，里面元素为string
          selectList: []//当筛选值组件为select的时候的选择值列表，元素类型为list，切需要固定格式{label:'',value:''}
        },
        judgeMap: {//判断条件可选值及对应关系对象
          '=': {label: '等于', value: 'eq'},
          '>': {label: '大于', value: 'gt'},
          '>=': {label: '大于等于', value: 'gte'},
          '<': {label: '小于', value: 'lt'},
          '<=': {label: '小于等于', value: 'lte'},
          '!=': {label: '不等于', value: 'ne'},
          'like': {label: '包含（像）', value: 'like'},
          'between': {label: '区间（范围）', value: 'between'},
          'in': {label: '包括', value: 'in'},
          'unin': {label: '不包括', value: 'unin'},
          'isNull':{label: '为空', value: 'null'},
          'isNotNull':{label: '不为空', value: 'notnull'}
        },
        saveToCommonly: false,
        options2: {//选择时间范围时快捷选择的时间段的设置
          shortcuts: [
            {
              text: '最近一周',
              value() {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
              }
            },
            {
              text: '最近一个月',
              value() {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
              }
            },
            {
              text: '最近三个月',
              value() {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                return [start, end]
              }
            }
          ]
        },
      }
    },
    methods: {
      seniorShow(e) {//高级查询
        this.saveToCommonly = false;
        this.type = 'add';
        this.modal1 = true;
      },
      selfEdit(e) {
        this.formDynamic = {//表单相关数据
          id: '',
          label: '',//保存为常用时常用名称
          items: [],
          judgeList: [],//用来存放判断条件，里面的元素为list
          TypeList: [],//用来存放筛选值组件的类型，里面元素为string
          selectList: []//当筛选值组件为select的时候的选择值列表，元素类型为list，切需要固定格式{label:'',value:''}
        }
        this.saveToCommonly = false;
        this.type = 'edit';
        this.formDynamic.id = e.id;
        this.formDynamic.label = e.label;
        let param = JSON.parse(e.findItem);
        if (param && param.length > 0) {
          this.formDynamic.items = [];
          for (let i = 0; i < param.length; i++) {
            this.formDynamic.items.push({field: '', index: '', judge: '', value: '', status: ''});
            this.formDynamic.items[i].field = param[i].field;
            this.autoClick(param[i].field, i);
            this.formDynamic.items[i].index = param[i].index;
            this.formDynamic.items[i].judge = param[i].judge;
            this.judgeClick(param[i].judge, i);
            this.formDynamic.items[i].value = param[i].value;
            this.formDynamic.items[i].status = 1;
          }
        }
        this.modal1 = true;
      },
      selfAdd() {
        this.formDynamic = {//表单相关数据
          id: '',
          label: '',//保存为常用时常用名称
          items: [//表单数据
            {
              field: '',//字段
              judge: '',//判断条件
              value: null,//判断值
              index: 0,//标记
              status: 1//状态
            },
          ],
          judgeList: [],//用来存放判断条件，里面的元素为list
          TypeList: [],//用来存放筛选值组件的类型，里面元素为string
          selectList: []//当筛选值组件为select的时候的选择值列表，元素类型为list，切需要固定格式{label:'',value:''}
        }
        this.saveToCommonly = true
        this.commonly = '';
        this.type = 'add2';
        this.modal1 = true;
      },
      selfFind(e) {
        this.commonly = e.findItem;
        this.getDifferent(this.item,this.cacheCommon)
        let param = JSON.parse(e.findItem);
        this.cacheCommon = this.montage(param);
        let finFind=Object.assign({},this.cacheCommon,this.item);
        this.$emit('update:item', finFind);
        this.$emit('seniorFind');
      },
      getSelfList(userId, userName) {//获取常用查询列表
        let params = {
          userId: userId,
          pageName: userName
        };
        getBaseSeniorList(params).then(res => {
          this.selfList = res.data.result
        }).catch(err => {
          console.log(err);
          this.$Message.error('自定义常用筛选查询失败！')
        })
      },
      cancelDelete(){this.modalDelete=false},
      deleteClick(e){
        this.modalDelete=true;
        this.commonName=e
      },
      deleteSelfList(e, index) {
        deleteBaseSenior(e.id).then(data => {
          this.selfList.splice(index, 1);
        }).catch(err => {
          console.log(err);
          this.$Message.error('删除失败！')
        });
        let findItem=this.item;
        if(findItem.commonly){
          findItem.commonly=null;
        }
        this.$emit('update:item', findItem);
        this.$emit('seniorFind');
        this.modalDelete=false;
      },
      clearAll() {
        //拼接三个部分的查询数据
        let cache=Object.assign({},this.cacheCommon,this.cacheForm,this.cacheSenior);
        let searchForms=this.item;
        this.getDifferent(searchForms,cache);//从查询条件中删除高级查询所涉及到的条件
        this.$emit('update:item', searchForms);
        //清空条件记录
        this.cacheForm={};
        this.cacheCommon={};
        this.cacheSenior={};
        this.keyValue = '';
        this.commonly='';
        this.$emit('seniorFind');
      },
      searchBtn() {
        if (this.keyValue) {
          let findItem = this.item;
          this.cacheForm.commonlyKey=this.keyValue;
          findItem.commonlyKey=this.keyValue;
          this.$emit('update:item', findItem);//更新筛选条件
          this.$emit('seniorFind');//执行查询
        } else {
          delete this.cacheForm['commonlyKey']
          let findItem=this.item;
          if(findItem.commonlyKey || findItem.commonlyKey==0){
            delete findItem['commonlyKey']
          }
          this.$emit('update:item', findItem);//更新筛选条件
          this.$emit('seniorFind');//执行查询
        }
      },
      commonFind(e) {//常用筛选查询
        this.commonly = e.id;
        this.getDifferent(this.item,this.cacheCommon)
        this.cacheCommon = this.montage(e.findItem);
        let finFind=Object.assign({},this.cacheForm,this.item,this.cacheCommon);
        this.$emit('update:item', finFind);//更新筛选条件
        this.$emit('seniorFind');//执行查询
      },
      clearCommonly(){
        this.commonly='';
        let findItems = {};
        if(this.item.commonlyKey){
          findItems.commonlyKey=this.item.commonlyKey
        }
        let searchForms=this.item;
        this.getDifferent(searchForms,this.cacheCommon);
        this.cacheCommon={};
        let finFind=Object.assign({},searchForms,findItems)
        this.$emit('update:item', finFind);//更新筛选条件
        this.$emit('seniorFind');//执行查询
      },
      ok() {//确定按钮
        if (this.formDynamic.items <= 0) {
          this.$Message.error('筛选条件不能为空！')
          return
        }
        this.$refs['formDynamic'].validate((valid) => {
          if (valid) {
            if (this.formDynamic.items && this.formDynamic.items.length > 0) {
              if (this.type != 'edit') {
                this.commonly=null;
                this.keyValue='';
                this.getDifferent(this.item,this.cacheSenior)
                this.cacheSenior = this.montage(this.formDynamic.items);
                let finFind=Object.assign({},this.cacheSenior,this.item);
                this.$emit('update:item', finFind);//更新筛选条件
                this.$emit('seniorFind');//执行查询
                if (this.saveToCommonly) {//保存时执行
                  let findItem = JSON.stringify(this.formDynamic.items);//将判断条件表单转为string存储
                  let params = {
                    label: this.formDynamic.label,//常用查询的名称
                    userId: this.$store.state.user.userId,//用户id
                    pageName: this.pageName,//页面名称
                    findItem: findItem//查询条件
                  }
                  this.save(params);
                  if(this.type!='add'){
                    this.commonly=findItem;
                  }
                }
              } else {
                let findItem = JSON.stringify(this.formDynamic.items);//将判断条件表单转为string存储
                let params = {
                  id: this.formDynamic.id,//id值
                  label: this.formDynamic.label,//常用查询的名称
                  userId: this.$store.state.user.userId,//用户id
                  pageName: this.pageName,//页面名称
                  findItem: findItem//查询条件
                }
                this.edit(params);
                this.getDifferent(this.item,this.cacheSenior)
                this.cacheSenior = this.montage(this.formDynamic.items);
                let finFind=Object.assign({},this.cacheSenior,this.item);
                this.$emit('update:item', finFind);//更新筛选条件
                this.$emit('seniorFind');//执行查询
                this.commonly=findItem;
              }
              this.modal1 = false;
            } else {
              this.$Message.error('筛选条件不能为空！')
            }
          } else {
            this.$Message.error('请检查填写信息是否正确！')
          }
        })
      },
      montage(items) {//查询条件拼接
        let findItems = {};
        if (items && items.length > 0) {//查询条件拼接
          for (let i = 0; i < items.length; i++) {
            if (items[i].judge == 'between') {
              findItems[items[i].field + '__' + 'gte']= items[i].value[0]
              findItems[items[i].field + '__' + 'lte']=items[i].value[1]
            } else if (items[i].judge == 'in') {
              if (items[i].value && items[i].value.length > 0) {
                let value = '';
                for (let j = 0; j < items[i].value.length; j++) {
                  if (j == 0) {
                    value = items[i].value[j]
                  } else {
                    value += '|' + items[i].value[j]
                  }
                }
                findItems[items[i].field + '__' + items[i].judge]= value
              }
            } else if (!items[i].judge){
              findItems[items[i].field] =items[i].value
            }else {
              findItems[items[i].field + '__' + items[i].judge]= items[i].value
            }
          }
        }
        return findItems;
      },
      save(params) {//保存为常用筛选
        addBaseSenior(params).then(data => {
          this.$Message.success('保存为常用筛选成功！');
          this.getSelfList(this.$store.state.user.userId, this.pageName);
        }).catch(err => {

          console.log(err)
          this.$Message.error('保存为常用筛选失败！')
        })
      },
      edit(params) {
        editBaseSenior(params).then(data => {
          this.$Message.success('修改常用筛选成功！')
          this.getSelfList(this.$store.state.user.userId, this.pageName);
        }).catch(err => {
          console.log(err);
          let selfParams = {
            userId: this.$store.state.user.userId,
            pageName: this.pageName
          };
          this.$Message.error('修改常用筛选失败！')
        })
      },
      cancel() {
        this.modal1 = false;
      },
      resetForm() {
        this.formDynamic = {//表单相关数据
          id: '',
          label: '',//保存为常用时常用名称
          items: [//表单数据
            {
              field: '',//字段
              judge: '',//判断条件
              value: null,//判断值
              index: 0,//标记
              status: 1//状态
            },
          ],
          judgeList: [],//用来存放判断条件，里面的元素为list
          TypeList: [],//用来存放筛选值组件的类型，里面元素为string
          selectList: []//当筛选值组件为select的时候的选择值列表，元素类型为list，切需要固定格式{label:'',value:''}
        }
      },
      handleAdd() {//添加筛选条件时执行
        this.index++
        this.formDynamic.items.push({
          value: null,
          index: this.index,
          status: 1
        })
      },
      handleRemove(index) {//删除筛选条件
        this.formDynamic.items.splice(index, 1);
        this.formDynamic.TypeList.splice(index, 1);
        this.formDynamic.selectList.splice(index, 1);
        this.formDynamic.judgeList.splice(index, 1)
      },
      fieldClick(e, index) {//选择字段时执行
        this.formDynamic.TypeList.push('');
        this.formDynamic.selectList.push([]);
        this.formDynamic.judgeList.push([]);
        let judges = [];
        if (e.flags && e.flags.length > 0) {
          for (let i = 0; i < e.flags.length; i++) {
            judges.push(this.judgeMap[e.flags[i]])
          }
        }
        this.formDynamic.TypeList[index] = e.fieldType;
        this.formDynamic.selectList[index] = e.selectList;
        this.formDynamic.judgeList[index] = judges;
        this.formDynamic.items[index].judge = judges[0].value;
        this.formDynamic.items[index].value = null;
        if (this.formDynamic.items[index].judge) {
          this.judgeClick(this.formDynamic.items[index].judge, index)
        }
      },
      judgeClick(e, index) {//选择判断条件时执行
        let a = this.formDynamic.TypeList[index];
        this.typeTransfer.push('');
        this.nullJudge.splice(index,1);
        if(this.nullJudge[index]){
          this.nullJudge[index]=false
        }else{
          this.nullJudge.push(false);
          this.nullJudge[index]=false
        }
        if (e == 'in') {
          this.inIsTrue = false;//加锁，防止两个组件切换延迟问题
          this.typeTransfer[index] = this.formDynamic.TypeList[index];//存儲多选框前的类型，方便切换掉多选时恢复原来类型
          this.formDynamic.TypeList[index] = 'in';
          this.inIsTrue = true;
        } else if ((a == 'time' || a == 'time1' || a == 'between')&& (e!='null' && e!='notnull')) {
          this.timeIsTrue = false;//加锁，防止两个组件切换延迟问题
          this.formDynamic.TypeList[index] = 'time';
          if (e == 'between') {
            this.formDynamic.TypeList[index] = 'between'
          } else {
            this.formDynamic.TypeList[index] = 'time1'
          }
          this.timeIsTrue = true
        } else if (this.formDynamic.TypeList[index] && this.formDynamic.TypeList[index] == 'in' && e != 'in') {//多选切换时恢复原来的类型
          this.otherIsTrue = false;
          if (this.typeTransfer[index] && this.typeTransfer[index] != '') {
            this.formDynamic.TypeList[index] = this.typeTransfer[index]
          }
          this.otherIsTrue = true
        }else if(e=='null' || e=='notnull'){
          if(this.formDynamic.TypeList[index]=='time'){
            this.timeIsTrue=false;
            this.otherIsTrue = false;
            this.formDynamic.TypeList[index] = 'input';
            this.otherIsTrue = true;
          }
          this.nullJudge[index]=true;
          if(this.formDynamic.TypeList[index]=='number'){
            this.formDynamic.items[index].value=0
          }else{
            this.formDynamic.items[index].value=' '
          }
        }
      },
      autoClick(value, index) {
        if (this.fieldList && this.fieldList.length > 0) {
          let a = false;
          for (let i = 0; i < this.fieldList.length; i++) {
            if (this.fieldList[i].field == value) {
              this.fieldClick(this.fieldList[i], index)
              a = true;
            }
          }
          if (!a) {
            this.$Message.error(value + '已是不支持查询的字段！')
          }
        } else {
          this.$Message.error('可查询字段列表为空！')
        }

      },
      //删除重复数据方法
      getDifferent(obj1,obj2){
        if(Object.keys(obj2).length>0){
          let data=Object.keys(obj2);  //获取键值
          data.forEach(item=>{
            delete obj1[item]
          });
        }

      }

    },
    mounted() {
      this.getSelfList(this.$store.state.user.userId, this.pageName)
    },

  }
</script>
