<template>
  <div id="meterInfoTest">
    <div style="flex: 1.5" class="flex"  >
      <div class="flex">
        <criteria-paged :model="model" v-ref:paged>
          <criteria partial='criteria' v-ref:criteria @condition-changed="$parent.selfSearch"
                    v-show="$parent.searchshow">
            <div novalidate class="form-inline auto" partial>
              <div class="row">
                <res-select-group  :show-component="['company']" :initres="$parent.$parent.initres"  @re-res="$parent.$parent.getRes" v-ref:sel></res-select-group>
                <div class="col-sm-2 form-group" >
                  <label for="f_input_date" class="font_normal_body">开始日期</label>
                  <datepicker  placeholder="开始日期" style="width:60%"
                               v-model="model.f_startDate"
                               :value.sync="model.f_startDate"
                               :format="'yyyy-MM-dd HH:mm:ss'"
                               class="datepicker"
                               cond-value="h.f_input_date >= '{}'"
                               :show-reset-button="true"
                               class="select"
                  >
                  </datepicker>
                </div>
                <div class="col-sm-2 form-group" >
                  <label for="f_input_date" class="font_normal_body">结束日期</label>
                  <datepicker  placeholder="结束日期" style="width:60%"
                               v-model="model.f_endDate"
                               :value.sync="model.f_endDate"
                               :format="'yyyy-MM-dd HH:mm:ss'"
                               class="datepicker"
                               cond-value="h.f_input_date <= '{}'"
                               :show-reset-button="true"
                  >
                  </datepicker>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">客户编号</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_userinfo_code"
                         cond-value="h.f_userinfo_code = '{}'" placeholder='客户编号'>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">客户姓名</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_user_name"
                         condition="f_user_name = '{}'" placeholder='客户姓名'>
                </div>
                <div class="span" style="float:right;">
                  <button class="button_spacing button_search" title="批量维护抄表记录" :disabled="!this.$login.r.includes('批量维护抄表记录')" @click="$parent.$parent.updateAll()">批量维护</button>
                  <button class="button_search" @click="search()">查 询</button>
                  <export-excel :data="{condition: $parent.$parent.condition,condValue: $parent.$parent.condValueStr}"
                                :field="$parent.$parent.getfield"
                                sqlurl="rs/logic/saleExport" sql-name="handFiles"
                                template-name='抄表记录'
                                :choose-col="true"></export-excel>
                  <div
                    :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}"
                    @click="$parent.$parent.hidden()" class="button_spacing" style="float: right"></div>
                </div>

              </div>
              <div class="row" v-show="$parent.$parent.criteriaShow">
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body" for="f_meter_classify">气表类型</label>
                  <v-select :options='$parent.$parent.meterType'
                            :value.sync="model.f_meter_classify"
                            close-on-select cond-value="h.f_meter_classify = '{}'"
                            placeholder='气表类型' value-single="true"
                            style="width: 60%"  v-model="model.f_meter_classify"></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body" for="f_gasbrand">气表品牌</label>
                  <v-select :value.sync="model.f_gasbrand"
                            :options='$parent.$parent.getMeterBrands(model.f_meter_classify)'
                            placeholder='气表品牌' close-on-select
                            cond-value="h.f_meter_brand = '{}'"
                            search v-model='model.f_gasbrand' v-ref:brand></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body" for="f_meter_classify">图像识别</label>
                  <v-select :options='$parent.$parent.haspic'
                            :value.sync="model.f_haspic"
                            close-on-select condition="(f_notified_path {}"
                            placeholder='图像识别'
                            style="width: 60%"  v-model="model.f_haspic"></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">是否缴费</label>
                  <v-select id="f_user_tye"
                            v-model="model.f_whether_pay"
                            placeholder='是否缴费'
                            style="width: 60%"
                            :value.sync="model.f_whether_pay"
                            :options='$parent.$parent.whetherPay'
                            condition="f_whether_pay = '{}'"
                            close-on-select></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">审核状态</label>
                  <v-select id="f_user_tye"
                            v-model="model.f_audit_state"
                            placeholder='审核状态'
                            style="width: 60%"
                            :value.sync="model.f_audit_state"
                            :options='$parent.$parent.f_audit_state'
                            condition="f_audit_state {}"
                            close-on-select></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">审核人&nbsp;&nbsp;&nbsp;</label>
                  <input type="text" class="input_search"  style="width: 60%" v-model="model.f_audit_person"
                         condition="f_audit_person like '%{}%'" placeholder='客户姓名'>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">抄&ensp;表&ensp;员</label>
                  <v-select :value.sync="model.f_inputtor" v-model='model.f_inputtor'
                            style="width:60%"
                            cond-value="h.f_inputtor = '{}'"
                            :options='$parent.$parent.inputtores' placeholder='抄表员'
                            close-on-select
                            v-el:cc></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body" for="f_meter_classify">自报表数</label>
                  <v-select :options='$parent.$parent.handplanImage'
                            :value.sync="model.f_handplan_image"
                            close-on-select condition="(f_handplan_image {}"
                            placeholder='自报表数图片'
                            style="width: 60%"  v-model="model.f_handplan_image"></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">气量大于</label>
                  <input type="number" class="input_search"  style="width: 60%" v-model="model.f_start_oughtfee"
                         condition="f_oughtamount >= '{}'" placeholder='用气量大于'>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body">气量小于</label>
                  <input type="number" class="input_search"  style="width: 60%" v-model="model.f_end_oughtfee"
                         condition="f_oughtamount <= '{}'" placeholder='用气量小于'>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body" for="f_hand_state">表单状态</label>
                  <v-select :value.sync="model.f_hand_state"
                            :options='$parent.$parent.handstate'
                            placeholder='状态' close-on-select
                            cond-value="h.f_hand_state = '{}'"
                            search v-model='model.f_hand_state' v-ref:brand></v-select>
                </div>
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body" for="f_tablebase_source">底数来源</label>
                  <v-select :options='$parent.$parent.baseSource'
                            :value.sync="model.f_tablebase_source"
                            close-on-select condition=" {}"
                            placeholder='抄表底数来源' value-single="true"
                            style="width: 60%"  v-model="model.f_tablebase_source"></v-select>
                </div>
                <div class="col-sm-2">
                  <label class="font_normal_body" title="参数:抄表状态">抄表状态</label>
                  <v-select :value.sync="model.f_meter_state"
                            v-model="model.f_meter_state"
                            :value-single="true"
                            :options='$parent.$parent.meterstate'
                            placeholder='抄表状态' cond-value="h.f_meter_state = '{}'"
                            close-on-select ></v-select>
                </div>

                <!--
                <div class="col-sm-2 form-group">
                  <label class="font_normal_body" for="f_meter_classify">上传图片</label>
                  <v-select :options='$parent.$parent.hasfile'
                            :value.sync="model.is_has_file"
                            close-on-select condition="is_has_file = '{}'"
                            placeholder='是否上传图片'
                            style="width: 60%"  v-model="model.is_has_file"></v-select>
                </div>-->

              </div>
            </div>
          </criteria>
          <data-grid :model="model" v-ref:grid class="list_area table_sy" partial='list'>
            <template partial='head'>
              <tr>
                <th>
                  <nobr>全选</nobr>
                  <input @keyup.enter="search" style="width:60%" type="checkbox" v-model='checked1' :checked="$parent.$parent.$parent.checked1"
                         @click="$parent.$parent.$parent.checkedALL()"></th>
                <th><nobr>客户编号</nobr></th>
                <th><nobr>客户姓名</nobr></th>
                <th><nobr>客户地址</nobr></th>
                <th><nobr>抄表数据来源</nobr></th>
                <th><nobr>是否有效</nobr></th>
                <th><nobr>录入时间</nobr></th>
                <th><nobr>上期结余</nobr></th>
                <th><nobr>上期底数</nobr></th>
                <th><nobr>本期底数</nobr></th>
                <th><nobr>底数来源</nobr></th>
                <th><nobr>应交气量</nobr></th>
                <th><nobr>应交金额</nobr></th>
                <th><nobr>是否缴费</nobr></th>
                <th><nobr>抄表结果状态</nobr></th>
                <th><nobr>抄表员</nobr></th>
                <th><nobr>审核状态</nobr></th>
                <th><nobr>审核人</nobr></th>
                <th><nobr>审核时间</nobr></th>
                <th><nobr>审核原因</nobr></th>
                <th><nobr>财务核算日期</nobr></th>
                <th><nobr>所属部门</nobr></th>
                <th><nobr>所属公司</nobr></th>
                <th><nobr>自报表数图片</nobr></th>
                <th><nobr>附件</nobr></th>
              </tr>
            </template>
            <template partial='body'>
              <td style="text-align: center;">
                <input @keyup.enter="search" style="width:60%" type="checkbox" checked="checked" name="opertioninput"
                       @click="$parent.$parent.$parent.checked(row)"></td>
              <td style="text-align: center;"><nobr>{{row.f_userinfo_code}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_user_name}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_address}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_meter_source}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_hand_state}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_input_date}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_balance}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_last_tablebase}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_tablebase}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_tablebase_source=='自动识别'?'自动识别':'手动录入'}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_oughtamount}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_oughtfee}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_whether_pay}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_result_state}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_inputtor}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_audit_state}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_audit_person}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_audit_date}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_examinereason}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_accounting_date}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_depname}}</nobr></td>
              <td style="text-align: center;"><nobr>{{row.f_orgname}}</nobr></td>
              <td style="text-align:center">
                <img-self :src="row.f_handplan_image" v-if="row.f_handplan_image" :width="50" :height="50"></img-self>
              </td>
              <td style="text-align: center;"><nobr>
                <button v-if="row.is_has_file=='是'" class="btn btn-link" @click.stop="$parent.$parent.$parent.view(row)">查看</button>
                <button v-if="row.f_notified_path" class="btn btn-link" @click.stop="$parent.$parent.$parent.imgShow(row.f_notified_path)">图像识别</button>
              </nobr></td>
            </template>
          </data-grid>
        </criteria-paged>
        <split-price :showdata="splitdata" :pricesplit="priceSplit" v-if="priceSplit" ></split-price>
      </div>
    </div>
  </div>
  <modal :show.sync="imgshow" v-ref:modal backdrop="true">
    <header slot="modal-header" class="modal-header">
     抄表图像识别照片
    </header>
    <article slot="modal-body" class="modal-body">
      <div class="from-group">
        <img-self :src="imgfilename"   width="500" height="500"></img-self>
      </div>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button type="button" class="btn btn-success" @click='imgclose'>关闭</button>
    </footer>
  </modal>
  <modal  :show.sync="updateall" width="800px" backdrop="true">
    <header slot="modal-header" class="modal-header">
      <h3 style="color:black" class="modal-title">批量维护</h3>
    </header>
    <article slot="modal-body" class="modal-body">
      <validator name='v'>
        <form class="form-horizontal  select-overspread">
          <div class="row">
            <div class="col-sm-2">
              <label class="font_normal_body">&emsp;财务核算日期</label>
            </div>
            <div class="col-sm-3">
              <datepicker placeholder="财务核算日期"
                          v-model="updatemodel.f_accounting_date"
                          :value.sync="updatemodel.f_accounting_date"
                          :format="'yyyy-MM-dd HH:mm:ss'"
              ></datepicker>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-2">
              <label class="font_normal_body">违约金开始日期</label>
            </div>
            <div class="col-sm-3">
              <datepicker placeholder="违约金开始日期"
                          v-model="updatemodel.f_start_date"
                          :value.sync="updatemodel.f_start_date"
                          :format="'yyyy-MM-dd 00:00:00'"
              ></datepicker>
            </div>
          </div>
        </form>
      </validator>
    </article>
    <footer slot="modal-footer" class="modal-footer">
      <button class="button_search btn-gn" @click="confirm">确认</button>
      <button class="button_clear btn-gn" @click="cancel">取消</button>
    </footer>
  </modal>
</template>

<script>
  import {PagedList} from 'vue-client'
const myMap = new Map()
  export default {
    'title': '111',
    data () {
      return {
        model: new PagedList('rs/sql/handFiles', 20),
        pj: this.$appdata.getParam('是否有附件') ? [{label: '全部', value: ''}, ...this.$appdata.getParam('是否有附件')] : [],
        // 控制查询条件显示
        searchshow: true,
        whetherPay: [{label: '全部', value: ''}, {label: '是', value: '是'}, {label: '否', value: '否'}],
        f_audit_state: [{label: '全部', value: ''}, {label: '已审核', value: `= '已审核'`}, {label: '审核中', value: `= '审核中'`}, {label: '其他', value: 'is null'}],
        da: {
          rows: []
        },
        baseSource: [{label: '全部', value: ''}, {label: '手动录入', value: " (f_tablebase_source='手动录入' or f_tablebase_source is null)"}, {label: '自动识别', value: "f_tablebase_source ='自动识别'"}],
        f_meternumber: '',
        splitdata: '',
        // 公司下拉
        initres: {
          org: [this.$login.f.orgid],
          dep: [],
          user: []
        },
        f_filialeid: this.$login.f.f_orgid,
        allorgid: [],
        f_orgid: '',
        checked1: true,
        map: new Map(),
        updateall: false,
        updatemodel: {
          f_accounting_date: null,
          f_start_date: null
        },
        priceSplit: false,
        criteriaShow: false,
        imgshow: false,
        imgfilename: '',
        excelTable: true,
        condition: '',
        getfield: {
          'f_userinfo_code': '客户编号',
          'f_user_name': '客户姓名',
          'f_address': '客户地址',
          'f_meter_source': '抄表数据来源',
          'f_hand_state': '是否有效',
          'f_input_date': '录入时间',
          'f_balance': '上期结余',
          'f_last_tablebase': '上期底数',
          'f_tablebase': '本期底数',
          'f_oughtamount': '应交气量',
          'f_oughtfee': '应交金额',
          'f_whether_pay': '是否缴费',
          'f_accounting_date': '财务核算日期',
          'f_inputtor': '抄表员',
          'f_audit_state': '审核状态',
          'f_audit_person': '审核人',
          'f_audit_date': '审核时间',
          'f_examinereason': '审核原因',
          'f_depname': '所属部门',
          'f_orgname': '所属公司'
        },
        hasfile: [{label: '全部', value: ''}, {label: '是', value: '是'}, {label: '否', value: '否'}],
        haspic: [{label: '全部', value: ''},
          {label: '有', value: `is not null and f_notified_path != '')`},
          {label: '无', value: `is null or f_notified_path  = '')`}],
        handplanImage: [
          {label: '全部', value: ''},
          {label: '有', value: `is not null and f_handplan_image != '')`},
          {label: '无', value: `is null or f_handplan_image  = '')`}
        ],
        meterType: [{label: '金额卡表', value: '金额卡表'}, {label: '气量卡表', value: '气量卡表'}, {label: '机表', value: '机表'}, {label: '物联网表', value: '物联网表'}],
        inputtores: [{label: '全部', value: ''}],
        orgCondtionStr: '',
        condValueStr: ''
      }
    },
    async ready () {
      this.$refs.paged.$refs.criteria.model.f_startDate = this.$login.toStandardDateString() + ' 00:00:00'
      this.$refs.paged.$refs.criteria.model.f_endDate = this.$login.toStandardDateString() + ' 23:59:59'
      this.search()
      await this.getinputtores()
      readyGen(this)
      this.$refs.paged.$refs.criteria.search()
      // this.getwarehouse()
    },
    props: ['showMessage'],
    methods: {
      updateAll () {
        this.updateall = true
      },
      checkedALL () {
        this.checked1 = !this.checked1
        let box = document.getElementsByName('opertioninput')
        for (var i = 0; i < box.length; i++) {
          box[i].checked = this.checked1
        }
      },
      checked (val) {
        let id = val.id
        if (this.map.has(id)) {
          this.map.delete(id)
        } else {
          this.map.set(id, {id: id})
        }
      },
      mapset (array) {
        this.map.clear()
        for (let i = 0; i < array.length; i++) {
          let id = array[i].id
          this.map.set(id, {id: id})
        }
      },
      cancel () {
        this.updateall = false
        this.updatemodel = {
          f_accounting_date: null,
          f_start_date: null
        }
      },
      async confirm () {
        let array = []
        this.map.forEach((value, key, map) => {
          array.push(map.get(key))
        })
        console.log('asdasd', array)
        if (array.length > 0) {
          let condition = `id in (''`
          array.forEach((row) => {
            condition = condition + `,'${row.id}'`
          })
          condition = condition + `)`

          console.log('asdasd', condition)
          let param = {}
          if (this.updatemodel.f_start_date) {
            param.f_start_date = this.updatemodel.f_start_date
          }
          if (this.updatemodel.f_accounting_date) {
            param.f_accounting_date = this.updatemodel.f_accounting_date
          }
          await this.$resetpost('rs/logic/updatehandplan', {updatemodel: param, condition: condition})
          this.search()
          this.cancel()
        } else {
          this.$showMessage('当前未勾选用户，将为所有查询出来的用户进行批量修改，确定要操作吗？', ['confirm', 'cancel']).then(async (res) => {
            if (res === 'confirm') {
              await this.$resetpost('rs/logic/updatehandplan', {updatemodel: param, condition: this.condition})
              this.search()
              this.cancel()
            }
          })
        }
      },
      async updateParams () {
        console.log('重新加载抄表员！！！！！', this.f_filialeid)
        await this.$LoadParams.loadParam(this.f_filialeid)
        await this.$GetSaleParam.initinputtor()
        this.inputtores = []
        this.inputtores.push({label: '全部', value: ''})
        this.inputtores.push({label: '微信公众号', value: '微信公众号'})
        if (this.allorgid != null) {
          this.allorgid.forEach((res) => {
            this.inputtores = this.inputtores.concat(this.$GetSaleParam.getresinputtor(res))
          })
        }
      },

      async getinputtores () {
        // 获取抄表员
        let rs = []
        if (this.$login.f.f_gasman.length > 0) {
          for (let i = 0; i < this.$login.f.f_gasman.length; i++) {
            let temp = {
              label: this.$login.f.f_gasman[i].name,
              value: this.$login.f.f_gasman[i].name
            }
            rs.push(temp)
          }
        }
        this.inputtores = [{label: '全部', value: ''}, ...rs]
        await this.$LoadParams.loadParam(this.$login.f.orgid)
      },
      async getRes (condition, obj) {
        this.orgCondtionStr = condition
      },
      imgclose () {
        this.imgshow = false
      },
      getMeterBrands (meterType) {
        let res = []
        if (meterType.length > 0) {
          this.meterbrands.forEach((item) => {
            if (item.value.f_meter_type === meterType[0]) {
              res.push({label: item.value.f_meter_brand, value: item.value.f_meter_brand})
            }
          })
        }
        return res
      },
      imgShow (val) {
        this.imgfilename = `rs/image/file/` + val
        this.imgshow = true
      },
      hidden () {
        this.criteriaShow = !this.criteriaShow
      },
      fileterprice (row) {
        this.splitdata = row
        this.priceSplit = true
        console.log('row==>', row)
      },
      init () {
        this.f_meternumber = ''
        this.da.rows = []
        myMap.clear()
      },
      view (row) {
        this.$parent.showupload = true
        this.$parent.row = row
      },
      cancelSet () {
        this.showSetModal = false
        this.init()
      },

      jump () {
        this.joinshow2 = false
        this.showSetModal = true
      },
      async getwarehouse () {

      },

      join1 (row) {
        this.joinrow = row
        this.joinshow = true
      },

      joinclose () {
        this.joinshow = false
      },
      joinclose2 () {
        this.joinshow2 = false
      },

      search () {
        this.$refs.paged.$refs.criteria.search()
      },
      importFile () {
        this.show = true
      },
      selfSearch (args) {
        console.log('>>> args = ', args)
        if (!this.f_orgid) {
          this.f_orgid = this.$login.f.orgid
        }
        let f_orgstr = this.orgCondtionStr ? this.orgCondtionStr : "and h.f_orgid in ('" + this.f_orgid + "')"
        args.condValueStr = `${args.condValueStr === undefined ? '1=1' : args.condValueStr} ` + f_orgstr
        this.model.search(args.condition, args.model, args.condValueStr)
        this.condition = args.condition
        this.condValueStr = args.condValueStr
      }
    },
    watch: {
      'model.pageIndex' () {
        this.checked1 = false
        this.mapset(this.model.rows)
        this.checkedALL()
      },
      'model.rows' () {
        this.checked1 = false
        this.mapset(this.model.rows)
        this.checkedALL()
      },
      'checked1' (val) {
        if (val) {
          this.mapset(this.model.rows)
        } else {
          this.map.clear()
        }
      },
      async 'orgCondtionStr' (val) {
        let res = val.match(/'(.*?)'/)
        this.$refs.paged.$refs.criteria.model.f_inputtor = []
        console.log('正则提取:', res && res[1])
        if (res) {
          this.f_filialeid = res[1]
          if (res.input != null) {
            let resorgid = res.input.substring(res.input.indexOf("'"))
            if (resorgid != null && resorgid != '') {
              resorgid = resorgid.substring(0, resorgid.lastIndexOf("'") + 1)
              // resorgid = resorgid.replaceAll("'","");
              resorgid = resorgid.replace(/'/g, '')
              this.allorgid = resorgid.split(',')
            }
          }
          this.updateParams()
        }
      }
    },
    computed: {
      meterbrands () {
        return this.$GetSaleParam.getGasbrand()
      },
      meterstate () {
        return this.$appdata.getParam('抄表状态')
      },
      ischecked () {
        return function (index, i) {
          // console.log("计算属性")
          if (!this.radio[index]) {
            return false
          }
          return this.radio[index][i]
        }
      },
      handstate () {
        return [{label: '全部', value: ''}, ...this.$appdata.getParam('表单状态')]
      },
      distributionstate () {
        return [{label: '全部', value: ''}, {label: '待分配', value: 'is null'}, {label: '已入库', value: 'is not null'}]
      }
    }
  }
</script>
<style >
  .datapanel {
    color: #333;
    background-color: white;
    padding: 10px 20px;
    border-radius: 15px;
  }
</style>

