<template >
  <div class="auto" style="overflow-y: scroll;height: 100%">
    <p class="bg-info text-left" style="padding: 8px;">基本信息</p>
    <form novalidate class="form-horizontal datapanel">
      <div class="row">
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;客户编号</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_userinfo_code" readonly/>
        </div>
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户姓名</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_user_name" readonly/>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户类型</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_user_type" readonly/>
        </div>
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户电话</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_user_phone" readonly/>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证件类型</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_credentials" readonly/>
        </div>
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;证件号码</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_idnumber" readonly/>
        </div>
      </div>


      <div class="row">
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户状态</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_user_state" readonly/>
        </div>
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;同步状态</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_sendsuccess" readonly/>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-12">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户地址</label>
          <input class="input_search" style="width:80%" type="text" v-model="watchmsg.f_address" readonly/>
        </div>
      </div>

    </form>
    <p class="bg-info text-left" style="padding: 8px;">表具信息</p>

    <form novalidate class="form-horizontal datapanel" >
      <div class="row">
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;表钢号</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_meternumber" readonly/>
        </div>
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;气表状态</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_table_state" readonly/>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;气表品牌</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_meter_brand" readonly/>
        </div>
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;气表型号</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_meter_style" readonly/>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;初始读数</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_initial_base" readonly/>
        </div>
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系统读数</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_meter_base" readonly/>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <label class="font_normal_body" >最后上报读数</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_tablebase" readonly/>
        </div>
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;剩余金额</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_balance_amount" readonly/>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <label class="font_normal_body" >最后上报日期</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_hand_date" readonly/>
        </div>
        <div class="col-sm-6">
          <label class="font_normal_body" >最后缴费日期</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_operate_date" readonly/>
        </div>
      </div>


      <div class="row">
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;阀门状态</label>
          <input class="input_search" style="width:60%" type="text" v-model="watchmsg.f_valvestate" readonly/>
        </div>
        <div class="col-sm-6">
          <label class="font_normal_body" >&nbsp;&nbsp;&nbsp;磁干扰状态</label>
          <input v-if="watchmsg.f_magneticinterference === '正常'" class="input_search" style="width:60%" type="text" v-model="watchmsg.f_magneticinterference" readonly/>
          <input v-else style="color: #c7254e;width:60%" class="input_search"  type="text" v-model="watchmsg.f_magneticinterference" readonly/>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <label class="font_normal_body" >周期关阀状态</label>
          <input v-if="watchmsg.f_cycleshutvalue === '正常'" class="input_search" style="width:60%" type="text" v-model="watchmsg.f_cycleshutvalue" readonly/>
          <input v-else style="color: #c7254e;width:60%" class="input_search"  type="text" v-model="watchmsg.f_cycleshutvalue" readonly/>
        </div>
        <div class="col-sm-6">
          <label class="font_normal_body" >关阀走气状态</label>
          <input v-if="watchmsg.f_leakageflag === '正常'" class="input_search" style="width:60%" type="text" v-model="watchmsg.f_leakageflag" readonly/>
          <input v-else style="color: #c7254e;width:60%" class="input_search" type="text" v-model="watchmsg.f_leakageflag" readonly/>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <label class="font_normal_body" >拆表报警状态</label>
          <input v-if="watchmsg.f_splitalarm === '正常'" class="input_search" style="width:60%" type="text" v-model="watchmsg.f_splitalarm" readonly/>
          <input v-else style="color: #c7254e;width:60%" class="input_search" type="text" v-model="watchmsg.f_splitalarm" readonly/>
        </div>
        <div class="col-sm-6">
          <label class="font_normal_body" >锂电低电状态</label>
          <input v-if="watchmsg.f_lowlithiumbattery === '正常'" class="input_search" style="width:60%" type="text" v-model="watchmsg.f_lowlithiumbattery" readonly/>
          <input v-else style="color: #c7254e;width:60%" class="input_search" type="text" v-model="watchmsg.f_lowlithiumbattery" readonly/>
        </div>
      </div>
    </form>
    <div class="row " style="float: left; margin-top: 30px;height: auto">
      <button class="button_search " @click="cancelmain()" >返回</button>
    </div>

    <!--异常抄表录入-->
    <modal :show.sync="watchshow" v-ref:modal backdrop="false">
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="tableFault()"><span>&times;</span></button>
        <h4 class="modal-title">表号{{row.f_meternumber}}</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="col-sm-12">
          <label class="font_normal_body">上报异常类型</label>
          <textarea name="name" rows="2" style="width: 80%"
                    class="ver-textarea"
                    placeholder='上报异常类型'
                    v-model='watchExce.f_error_type'></textarea>
        </div>
        <div class="col-sm-12">
          <label class="font_normal_body">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;异常描述</label>
          <textarea name="name" rows="2" style="width: 80%"
                    placeholder='上报异常类型'
                    class="ver-textarea"
                    v-model='watchExce.f_error_msg'></textarea>
        </div>

      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button v-show="watchshow" type="button" class="btn button_clear" @click='tableFault()'>取消</button>
        <button v-show="watchshow" type="button" class="btn button_search" @click='saveException'>确认</button>
      </footer>
    </modal>
    <!--阀控管理弹框-->
    <modal :show.sync="valve" >
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="close()"><span>&times;</span></button>
        <h4 class="modal-title" align="center">阀控管理</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="form-group " style="padding-left: 8px">
          <label class="font_normal_body">操作原因：</label>

          <textarea class="ver-textarea" v-model="operateReason" rows="4" style="width:80%" placeholder="请填写操作原因"></textarea>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button  type="button" class="button_search btn-ln fr" @click='valveoperate(true)'>开阀</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button  type="button" class="button_clear btn-ln fr" @click='valveoperate(false)'>关阀</button>
      </footer>
    </modal>

    <!--      表具信号上报趋势图弹框-->
    <modal id="xinhao" :show.sync="signal" width="1500px">
      <header slot="modal-header" class="modal-header" style="height: 60px">
        <button type="button" class="close" @click="getsignal()"><span>关闭&times;</span></button>
        <h4 class="modal-title" align="center">信号趋势图</h4>
      </header>

      <!--表具信号上报趋势图-->
      <article slot="modal-body" class="modal-body" style="height: 600px">
        <div class="span" style="height: 50px">
          <span class="col-sm-1 " style="padding-right: 15px;align-content: center" >
            <label class="font_normal_body" style="word-break:keep-all;padding-left: 30%;padding-top: 8px">年份</label>
          </span>
          <span class="col-sm-2 " style="padding-right: 15px;align-content: center"><input type="number"  class="input_search" style="width:60%" v-model="yearForSignal" placeholder=`请输入年份` ></span>
          <span class="col-sm-1 " style="padding-right: 15px;align-content: center" >
            <label class="font_normal_body" style="word-break:keep-all;padding-left: 30%;padding-top: 8px">月份</label>
          </span>
          <span class="col-sm-2 " style="padding-right: 15px;align-content: center"> <input type="number"  class="input_search" style="width:60%" v-model="monthForSignal" placeholder=`请输入月份`></span>
          <button  type="button" class="button_search btn-ln fr" @click='btnForSignal()'>查询</button>
        </div>
        <div class="span " v-show="signal" style="height: 560px">
          <meter-signal-echarts  :signalsign="signal" :meternumber="meternumberf" :startdate1="startDate2" :enddate1="endDate2"></meter-signal-echarts>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer" style="height: 70px">
        <!--          <button  type="button" class="button_search btn-ln fr" @click='userExceptionOper()'>保存</button>-->
        <button  type="button" class="btn btn-info btn-ln fr" @click='getsignal()'>关闭</button>
      </footer>
    </modal>
    <!--      表具电压上报趋势图弹框-->
    <modal :show.sync="battery" width="1500px"   left="5%"  top="5%">
      <header slot="modal-header" class="modal-header" style="height: 60px">
        <button type="button" class="close" @click="getbattery()"><span>关闭&times;</span></button>
        <h4 class="modal-title" align="center">电压趋势图</h4>
      </header>
      <!--表具电压上报趋势图-->
      <article slot="modal-body" class="modal-body" style="height: 600px">
        <div class="span" style="height: 50px">
          <span class="col-sm-1 " style="padding-right: 15px;align-content: center" >
            <label class="font_normal_body" style="word-break:keep-all;padding-left: 30%;padding-top: 8px">年份</label>
          </span>
          <span class="col-sm-2 " style="padding-right: 15px;align-content: center"><input type="number"  class="input_search" style="width:60%" v-model="yearForSignal" placeholder=`请输入年份` ></span>
          <span class="col-sm-1 " style="padding-right: 15px;align-content: center" >
            <label class="font_normal_body" style="word-break:keep-all;padding-left: 30%;padding-top: 8px">月份</label>
          </span>
          <span class="col-sm-2 " style="padding-right: 15px;align-content: center"> <input type="number"  class="input_search" style="width:60%" v-model="monthForSignal" placeholder=`请输入月份`></span>
          <button  type="button" class="button_search btn-ln fr" @click='btnForSignal()'>查询</button>
        </div>
        <div class="span " v-show="battery" style="height: 560px">
          <meter-battery-echarts  :batterysign="battery" :meternumber="meternumberf" :startdate2="startDate2" :enddate2="endDate2"></meter-battery-echarts>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer" style="height: 70px">
        <!--          <button  type="button" class="button_search btn-ln fr" @click='userExceptionOper()'>保存</button>-->
        <button  type="button" class="btn btn-info btn-ln fr" @click='getbattery()'>关闭</button>
      </footer>
    </modal>

    <!--异常信息弹框-->
    <modal :show.sync="isShowUserException" >
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="close1()"><span>&times;</span></button>
        <h4 class="modal-title" align="center">标记信息</h4>
      </header>
      <article slot="modal-body" class="modal-body">
        <div  style="padding-left: 8px" >
          <label class="font_normal_body">标记名称</label>
          <v-select
            placeholder='标记名称'
            :value.sync="model.f_parameter_name"
            v-model="model.f_parameter_name"
            :options='ExceptionType'
            close-on-select>
          </v-select>
        </div>
        <div class="form-group " style="padding-left: 8px">
          <label class="font_normal_body">备注：</label>
          <textarea class="input_search" style="width:60%" v-model="f_beizhu" rows="3" placeholder="备注信息"></textarea>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button  type="button" class="button_search btn-ln fr" @click='userExceptionOper()'>保存</button>
        <button  type="button" class="btn btn-info btn-ln fr" @click='close1()'>取消</button>
      </footer>
    </modal>
  </div>
</template>

<script>
  import * as Util from '../../../Util'
  import Vue from 'vue'
  export default {
    title: 'NewWatchMsg',
    name: 'NewWatchMsg',
    // 表相关信息1
    props: {
      'meternumberf': '',
      'watchmsg': {}

    },

    data () {
      return {
        // 根据表编号查用户信息
        model: null,
        valveLimit: false,
        row: {},
        // 抄表录入开关
        watchshow: false,
        watchExce: {
          // 异常对象
          exceobj: {},
          // 异常类型
          f_error_type: '',
          // 异常描述
          f_error_msg: ''
        },
        // 开关阀操作原因
        operateReason: '',
        startDate2: Util.toStandardTimeStringForFirstDay(),
        endDate2: Util.toStandardTimeStringForLastDay(),
        yearForSignal: '',
        monthForSignal: '',
        valve: false,
        signal: false,
        battery: false,
        isShowUserException: false,
        // 保存弹出框的值
        f_beizhu: ''
        // f_parameter_name : '',
      }
    },

    ready () {
      this.search()
      this.valveLimit = this.$login.r.includes('开关阀权限')
    },
    methods: {
      // 保存输入
      saveException () {
        // 准备数据
        var Exejson = {}
        // 抄表记录id
        Exejson.data_id = '无抄表记录id'
        // 异常表档案ID
        Exejson.f_user_id = this.watchExce.exceobj.f_user_id
        // 异常户档案ID
        Exejson.f_userinfo_id = this.watchExce.exceobj.f_userinfo_id
        // 异常表号
        Exejson.f_meternumber = this.watchExce.exceobj.f_meternumber
        // 分公司
        Exejson.f_filiale = this.watchExce.exceobj.f_filiale
        // 分公司编号
        Exejson.f_filialeids = this.watchExce.exceobj.f_filialeids
        // 营业网点
        Exejson.f_outlets = this.watchExce.exceobj.f_outlets
        // 组织机构
        Exejson.f_orgstr = this.watchExce.exceobj.f_orgstr
        // 异常类型
        Exejson.f_error_type = this.watchExce.f_error_type
        // 异常说明
        Exejson.f_error_msg = this.watchExce.f_error_msg
        console.log('提交异常数据')
        console.log(Exejson)
        let param = {
          tablename: 't_exception',
          basedata: Exejson
        }
        try {
          this.$resetpost('rs/logic/iot_saveTable', param, {resolveMsg: null, rejectMsg: null}).then((req) => {
            this.watchExce = {}
            console.log('提交成功')
          }).then(() => {
            this.$showMessage('异常保存成功！')
          })
        } catch (e) {
          this.watchExce = {}
          console.log('提交失败')
          this.$showMessage('异常保存失败！')
        }
        this.watchshow = false
      },
      // 返回
      cancelmain (val) {
        this.$emit('cancel-main', val)
      },

      getsignal () {
        this.signal = !this.signal
        this.yearForSignal = ''
        this.monthForSignal = ''
      },

      getbattery () {
        this.battery = !this.battery
        this.yearForSignal = ''
        this.monthForSignal = ''
      },

      // 表故障
      tableFault (val) {
        if (val) {
          console.log('开启弹窗')
          this.watchExce.exceobj = val
        } else {
          console.log('返回置空')
          this.watchExce = {}
        }
        this.watchshow = !this.watchshow
      },
      // 发送请求去数据
      search () {
        // this.condition = `f_meternumber='${this.meternumberf}'`
        // console.log(val)
        this.$resetpost('rs/sql/iot_getNewUserSignal',
          {data: {condition: `f_meternumber='${this.meternumberf}'`, meternumber: this.meternumberf, startDate: this.startDate2, endDate: this.endDate2}},
          {resolveMsg: null, rejectMsg: null}).then((res) => {
            this.row = res.data[0]
            console.log('====================================')
            console.log(res.data)
          })
      },
      // 阀控管理
      valvecontrol () {
        this.valve = true
      },
      close () {
        this.valve = false
        this.operateReason = ''
      },
      // 开关阀操作
      async valveoperate (oper) {
        let msg = oper ? '开阀' : '关阀'
        console.log('开发操作，开发。关阀')
        console.log('this.watchmsg.f_alias', this.watchmsg.f_alias)
        let datas = {
          instructType: '阀门控制',
          instructTitle: `手动${msg}`,
          condition: `t_userfiles.f_meternumber='${this.meternumberf}'`,
          meterBrandName: this.watchmsg.f_alias,
          inputtor: Vue.$login.f.name,
          f_instruct_state: '待发送',
          reasonInfo: this.operateReason,
          meternumberf: this.meternumberf,
          contentData: {isOpen: oper ? 1 : 0}
        }
        await this.$resetpost('rs/logic/iot_saveInstruct',
          // await this.$resetpost('rs/logic/saveInstruct',
          {
            data: datas
          },
          {warnMsg: `确定要进行${msg}操作吗？`, resolveMsg: `${msg}成功`, rejectMsg: `${msg}失败`}).then(res => {
            this.valve = false
            this.operateReason = ''
          })
      },
      // 异常信息弹出框
      userexception () {
        this.isShowUserException = !this.isShowUserException
      },
      close1 () {
        this.f_beizhu = ''
        this.model.f_parameter_name = null
        this.isShowUserException = false
      },
      // 异常信息操作
      userExceptionOper () {
        if (this.model.f_parameter_name[0]) {
          let userdata = null
          // 在数据库中查
          let send = {

            data: {
              tablename: 't_userparameter',
              condition: `f_meternumber ='${this.row.f_meternumber}' and f_parameter_state = '待处理' and f_parameter_name = '${this.model.f_parameter_name[0]}'`
            }
          }
          this.$resetpost('rs/sql/saleSingleTable', send, {resolveMsg: null, rejectMsg: null}).then((res) => {
            userdata = res.data
            console.log('====================================')
            console.log(userdata)
            if (userdata.length === 0) {
              this.writeForUserPara()
              this.f_beizhu = ''
              this.model.f_parameter_name = null
              this.isShowUserException = !this.isShowUserException
            } else if (userdata.length > 0) {
              // 数据库中有该条记录
              this.$showAlert('该用户此标记类型已标记！', 'warning', 3000)
              this.isShowUserException = !this.isShowUserException
              this.f_beizhu = ''
              this.model.f_parameter_name = null
            } else {
              this.f_beizhu = ''
              this.model.f_parameter_name = null
              this.$showAlert('返回数据异常，该操作执行失败！', 'warning', 3000)
              this.isShowUserException = !this.isShowUserException
            }
          })
        } else {
          // 操作类型为空
          this.f_beizhu = ''
          this.model.f_parameter_name = null
          this.$showAlert('标记类型或标记名称未选！', 'warning', 3000)
        }
      },
      // 写入用户标记表
      writeForUserPara () {
        let send = {
          f_meternumber: this.watchmsg.f_meternumber,
          f_parameter_state: '待处理',
          f_operator: Vue.$login.f.name,
          f_parameter_type: '自定义参数',
          f_parameter_name: this.model.f_parameter_name[0],
          f_beizhu: this.f_beizhu,
          // f_filiale: this.watchmsg.f_filiale,
          // f_filialeids: this.watchmsg.f_filialeids,
          // f_outlets: this.watchmsg.f_outlets,
          // f_orgstr: this.watchmsg.f_orgstr,
          f_orgid: this.watchmsg.f_orgid,
          f_orgname: this.watchmsg.f_orgname,
          f_depid: this.watchmsg.f_depid,
          f_depname: this.watchmsg.f_depname
        }
        let param = {
          tablename: 't_userparameter',
          basedata: send
        }
        this.$resetpost('rs/logic/iot_saveTable', param).then(() => {
          console.log('更新成功！')
        })
      },
      btnForSignal () {
        if (this.yearForSignal === '') {
          window.alert('请输入正确年份！')
        } else if (this.monthForSignal < 0 || this.monthForSignal > 12) {
          window.alert('请输入正确月份！')
        } else if (this.monthForSignal === '') {
          let date = new Date(this.yearForSignal, 0, 1)
          let date1 = new Date(this.yearForSignal, 11, 0)
          console.log('选择日期', date)
          this.startDate2 = Util.dateToStandardTimeStringStart(date)
          this.endDate2 = Util.dateToStandardTimeStringEnd(date1)
        } else {
          let date = new Date(this.yearForSignal, this.monthForSignal - 1, 1)
          let date1 = new Date(this.yearForSignal, this.monthForSignal, 0)
          console.log('选择日期', date)
          this.startDate2 = Util.dateToStandardTimeStringStart(date)
          this.endDate2 = Util.dateToStandardTimeStringEnd(date1)
        }
      }
    },
    watch: {
      'watchmsg' (val) {
        this.watchmsg = val
      },
      'watchdata' (val) {
        this.watchdata = val
      },
      'searchNumber' (val) {
        this.searchNumber = val
      },
      'meternumberf' (val) {
        this.meternumberf = val
        if (this.meternumberf != null) {
          this.search()
        }
      }
    },
    computed: {
      ExceptionType () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('标记名称')]
      }
    }
  }
</script>
<style scoped>
  .datapanel {
    color: #333;
    background-color: white;
    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
    padding: 10px 30px 10px 30px;
    border-radius:15px;
  }
  .mystyleboder{
    border: 0px;
    text-align: left;
    background-color: white;
    padding-left: 3px;
  }
</style>
