<template>
  <div class="app-container">
      <el-tabs v-model="activeName"    >
         <el-tab-pane label="CID配置" name="cidConfig">
          <el-form ref="cidConfigForm" :model="cidConfig" label-width="200px">
            <el-form-item label="是否开启手机号配置" prop="enablePhoneConfig">
              <el-switch v-model="cidConfig.enablePhoneConfig"></el-switch>
            </el-form-item>

            <template v-if="cidConfig.enablePhoneConfig">
              <el-form-item label="生成条数" prop="generateCount">
                <el-input-number
                  v-model="cidConfig.generateCount"
                  :min="1"
                  :step="1"
                  :precision="0"
                  placeholder="请输入生成条数"
                ></el-input-number>
              </el-form-item>

              <el-form-item label="开始位置" prop="startIndex">
                <el-input-number
                  v-model="cidConfig.startIndex"
                  :min="1"
                  :max="11"
                  :step="1"
                  :precision="0"
                  placeholder="例如: 1"
                ></el-input-number>
                <span class="tip-text">（从第几位开始生成）</span>
              </el-form-item>

              <el-form-item label="结束位置" prop="endIndex">
                <el-input-number
                  v-model="cidConfig.endIndex"
                  :min="1"
                  :max="11"
                  :step="1"
                  :precision="0"
                  placeholder="例如: 11"
                ></el-input-number>
                <span class="tip-text">（到第几位结束）</span>
              </el-form-item>
            </template>
            
             <el-form-item label="是否允许重复客户导入" prop="allowRepeatCustomer">
              <el-switch v-model="cidConfig.allowRepeatCustomer"></el-switch>
            </el-form-item>

            <div class="line"></div>
            <div style="float:right;margin-right:20px">
              <el-button type="primary" @click="onSubmitCidConfig">提交</el-button>
            </div>
          </el-form>
        </el-tab-pane>
          <el-tab-pane label="客户管理配置" name="sysConfig">
          <el-form ref="sysConfig" :model="sysConfig" label-width="120px">
            <el-form-item label="公海回收规则">
                <el-row>
                    <el-input-number  v-model="sysConfig.visitLimt"  :min="0" :max="100" ></el-input-number>
                </el-row>
                <el-row>
                    <span class="tip">认领后N天自动回收</span>
                </el-row>
            </el-form-item>
            <div class="line"></div>
            <div style="float:right;margin-right:20px">
              <el-button type="primary" @click="onSubmit1">提交</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="企微客服配置" name="qwkfConfig">
          <el-form ref="qwkfConfig" :model="qwkfConfig" label-width="120px">
            <el-form-item label="企业CoripID">
              <el-input v-model="qwkfConfig.corpId" style="width:400px"   ></el-input>
            </el-form-item>
            <el-form-item label="Secret">
              <el-input v-model="qwkfConfig.secret" style="width:400px" show-password ></el-input>
            </el-form-item>
            <el-form-item label="Token">
              <el-input v-model="qwkfConfig.token" style="width:400px" show-password ></el-input>
            </el-form-item>
            <el-form-item label="EncodingAESKey">
              <el-input v-model="qwkfConfig.encodingAESKey" style="width:400px" show-password ></el-input>
            </el-form-item>
            <el-form-item label="回调地接">
              <el-input disabled v-model="qwkfConfig.notifyUrl" style="width:600px"   ></el-input>
            </el-form-item>
            <div class="line"></div>
            <div style="float:right;margin-right:20px">
              <el-button type="primary" @click="onSubmit3">提交</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane  label="客户字段配置" name="customerExt">
          <el-row :gutter="10" class="mb8" style="margin:0px 0px 10px;">
            <el-col :span="1.5">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleCustomerExtAdd"
              >新增</el-button>
            </el-col>
          </el-row>
          <el-table border :data="customerExtList" >
            <el-table-column label="ID" align="center" prop="extId" />
            <el-table-column label="字段名称" align="center" prop="name" />
            <el-table-column  label="状态" align="center" prop="status">
              <template slot-scope="scope">
                  <el-tag prop="status" v-for="(item, index) in statusOptions"    v-if="scope.row.status==item.dictValue">{{item.dictLabel}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="排序号" align="center" prop="sort" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleCustomerExtUpdate(scope.row)"
                >修改</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleCustomerExtDelete(scope.row)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="line"></div>
            <div style="float:right;margin-right:20px">
              <el-button type="primary" @click="onSubmit2">提交</el-button>
            </div>
        </el-tab-pane>
<!--        <el-tab-pane label="企微配置" name="qwConfig">-->
<!--          <el-form ref="qwConfig" :model="qwConfig" label-width="200px">-->
<!--            <el-form-item label="企业CoripID">-->
<!--              <el-input v-model="qwConfig.corpId" style="width:400px"   ></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="通讯录Secret">-->
<!--              <el-input v-model="qwConfig.bookSecret" style="width:400px"   ></el-input>-->
<!--            </el-form-item>-->

<!--            <el-form-item label="应用Secret">-->
<!--              <el-input v-model="qwConfig.appSecret" style="width:400px"   ></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="应用AgentId">-->
<!--              <el-input v-model="qwConfig.AgentId" style="width:400px"   ></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="Token">-->
<!--              <el-input v-model="qwConfig.token" style="width:400px"   :readonly="true"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="EncodingAESKey">-->
<!--              <el-input v-model="qwConfig.encodingAESKey" style="width:400px"   :readonly="true"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="域名地址">-->
<!--              <el-input v-model="qwConfig.realmNameURL" style="width:600px"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="回调地接">-->
<!--              <el-input v-model="qwConfig.notifyUrl" style="width:600px"   :readonly="true"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="聊天工具栏跳转地址">-->
<!--              <el-input v-model="qwConfig.chatToolbar" style="width:600px"   :readonly="true"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="聊天工具栏实际运用地址">-->
<!--              <el-input v-model="qwConfig.chatToolbarOAuth2" :rows="2"  type="textarea" style="width:1000px;"   :readonly="true"></el-input>-->
<!--            </el-form-item>-->
<!--            <div class="line"></div>-->
<!--            <div style="float:right;margin-right:20px">-->
<!--              <el-button type="primary" @click="onSubmit4">提交</el-button>-->
<!--            </div>-->
<!--          </el-form>-->
<!--        </el-tab-pane>-->
        <el-tab-pane label="AI客服配置" name="AiKfConfig">
          <el-form ref="AiKfConfig" :model="AiKfConfig" label-width="120px">
            <el-form-item label="通用Key">
              <el-input  v-model="AiKfConfig.Key" style="width:600px" show-password  ></el-input>
            </el-form-item>
            <el-form-item label="调用地址">
              <el-input  v-model="AiKfConfig.url" style="width:600px"   ></el-input>
            </el-form-item>
            <div class="line"></div>
            <div style="float:right;margin-right:20px">
              <el-button type="primary" @click="onSubmit5">提交</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="红包商户配置" name="redPacketConfig" >
          <el-form ref="redPacketConfig" :model="redPacketConfig"  label-width="150px">
            <el-form-item   label="红包接口类型" prop="isNew">
              <el-radio-group v-model="redPacketConfig.isNew">
                <el-radio label="0">商家转账到零钱(旧)</el-radio>
                <el-radio label="1">商家转账(新)</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item   label="公众号appid" prop="appId">
              <el-input   v-model="redPacketConfig.appId"  label="请输入appId"></el-input>
            </el-form-item>
            <el-form-item   label="小程序appid" prop="appId">
              <el-input   v-model="redPacketConfig.miniappId"  label="请输入appId"></el-input>
            </el-form-item>
            <el-form-item   label="商户号" prop="mchId">
              <el-input   v-model="redPacketConfig.mchId"  label="请输入mchId"></el-input>
            </el-form-item>
            <el-form-item   label="商户密钥" prop="mchKey">
              <el-input   v-model="redPacketConfig.mchKey"  label="mchKey" show-password></el-input>
            </el-form-item>
            <el-form-item   label="p12证书路径" prop="keyPath">
              <el-input   v-model="redPacketConfig.keyPath"  label="请输入keyPath"></el-input>
            </el-form-item>
            <el-form-item   label="apiV3密钥" prop="apiV3Key">
              <el-input   v-model="redPacketConfig.apiV3Key"  label="请输入apiV3Key" show-password></el-input>
            </el-form-item>
            <el-form-item   label="公钥ID" prop="publicKeyId">
              <el-input   v-model="redPacketConfig.publicKeyId"  label="请输入公钥ID"></el-input>
            </el-form-item>
            <el-form-item   label="公钥证书" prop="publicKeyPath">
              <el-input   v-model="redPacketConfig.publicKeyPath"  label="请输入publicKeyPath"></el-input>
            </el-form-item>
            <el-form-item   label="key路径" prop="privateKeyPath">
              <el-input   v-model="redPacketConfig.privateKeyPath"  label="请输入"></el-input>
            </el-form-item>
            <el-form-item   label="cert路径" prop="privateCertPath">
              <el-input   v-model="redPacketConfig.privateCertPath"  label="请输入"></el-input>
            </el-form-item>
            <el-form-item   label="回调地址" prop="notifyUrl">
              <el-input   v-model="redPacketConfig.notifyUrl"  label="请输入"></el-input>
            </el-form-item>

            <div style="float:right;margin-right:20px">
              <el-button type="primary" @click="onSubmit4">提交</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="配置销售会员审核" name="companyUserConfig">
          <el-form ref="companyUserConfig" label-width="140px">
            <el-form-item label="会员是否小黑屋"><!--会员是否默认黑名单-->
              <el-row>
                <el-switch v-model="userIsDefaultBlack"></el-switch>
              </el-row>
            </el-form-item>
            <div style="float:right;margin-right:20px">
              <el-button type="primary" @click="onSubmit6">提交</el-button>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="配置销售端隐藏总账号" name="adminIsShowForm">
          <el-form ref="adminIsShowForm" label-width="140px">
            <el-form-item label="账号是否显示">
              <el-row>
                <el-switch v-model="adminIsShow"></el-switch>
                <span style="margin-left: 10px;">
                  <el-tag :type="adminIsShow ? 'success' : 'info'" size="mini">
                    {{ adminIsShow ? '当前显示' : '当前隐藏' }}
                  </el-tag>
                </span>
              </el-row>
            </el-form-item>
            <div style="float:right;margin-right:20px">
              <el-button type="primary" @click="onSubmit7">提交</el-button>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <el-dialog :title="customerExt.title" :visible.sync="customerExt.open" width="500px" append-to-body>
        <el-form ref="customerExtForm" :model="customerExtForm" :rules="customerExtRules" label-width="80px">
          <el-form-item label="字段名称" prop="name">
            <el-input v-model="customerExtForm.name" placeholder="请输入字段名称" />
          </el-form-item>
          <el-form-item label="状态">
            <el-radio-group v-model="customerExtForm.status">
              <el-radio label="1"  >正常</el-radio>
              <el-radio label="0">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序号" prop="sort">
            <el-input-number v-model="customerExtForm.sort" :min="1" placeholder="请输入排序号" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitCustomerExtForm">确 定</el-button>
          <el-button @click="customerExt.open=false">取 消</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCompanyInfo } from "@/api/company/company";
import { getConfigKey,updateConfig,configUserCheck } from "@/api/company/companyConfig";
import { listCustomerExt, getCustomerExt, delCustomerExt, addCustomerExt, updateCustomerExt } from "@/api/crm/customerExt";

export default {
  name: "config",
  watch: {
    qwConfig: {
      handler(newValue) {
        // 根据新值更新
        this.qwConfig.chatToolbarOAuth2="https://open.weixin.qq.com/connect/oauth2/authorize?" +
          "appid="+newValue.corpId+"" +
          "&redirect_uri="+newValue.chatToolbar+"" +
          "&response_type=code" +
          "&scope=snsapi_base" +
          "&state=STATE" +
          "&agentid="+newValue.AgentId+"#wechat_redirect";

        this.qwConfig.notifyUrl=newValue.realmNameURL+"/qw/data/"+this.company.companyId;
      },
      deep: true
    }
  },
  data() {
    return {
      cidConfig: {
        enablePhoneConfig: false,
        generateCount: 0,
        startIndex: 1,
        endIndex: 5
      },
      adminIsShow: false,
      company:null,
      statusOptions:[],
      customerExt:{
        open:false,
        title:"扩展字段"
      },
      customerExtForm:{
        name:"",
        status:"1",
        sort:"1",
      },
      customerExtRules:{

      },
      customerExtList: [],
      activeName: 'sysConfig',
      customerConfig:{
          rlLimit: 1,
          txLimit: 1,
          hsLimit: 1
      },
      sysConfig:{
          tel:"18900000000",
          noticeType:1,
          visitLimt:0,
          contractLimt:0
      },
      sysConfigForm:{},
      customerConfigForm:{},
      qwkfConfig:{

      },
      AiKfConfig:{},
      AiKfConfigForm:{},

      qwConfig:{
      },
      qwConfigForm:{},
      qwkfConfigForm:{},
      companyUserConfig: {},
      adminIsShowForm:{},
      userIsDefaultBlack: null,
      redPacketConfig:{},

      redPacketConfigForm:{},
      cidConfigForm:{}
    };
  },
  created() {
    this.getCompanyInfo();
    this.getConfigKey("sys:config");
    this.getConfigKey("qw:config");
    this.getConfigKey("sys:qw:config");
    this.getConfigKey("customer:config");
    this.getConfigKey("sys:AiKf:config");
    this.getConfigKey("company:admin:show");
    this.getConfigKey("redPacket:config");
    this.getConfigKey("cId.config");
    this.getDicts("sys_company_status").then((response) => {
      this.statusOptions = response.data;
    });
    this.getCustomerExt()
  },
  mounted() {

  },

  methods: {
    getCompanyInfo(){
      getCompanyInfo().then(response => {
        this.company = response.data;
        if(response.data.fsUserIsDefaultBlack != null){
          const userIsDefaultBlack = response.data.fsUserIsDefaultBlack
          if(userIsDefaultBlack == 1){
            this.userIsDefaultBlack = true
          } else{
            this.userIsDefaultBlack = false
          }
        }
      });
    },
    /** 新增按钮操作 */
    handleCustomerExtAdd() {
      this.customerExt.open = true;
      this.customerExt.title = "添加客户字段";
      this.customerExtForm={
        name:"",
        status:"1",
        sort:"1",
      }
    },
    /** 修改按钮操作 */
    handleCustomerExtUpdate(row) {
      const extId = row.extId
      getCustomerExt(extId).then(response => {
        this.customerExtForm = response.data;
        this.customerExt.open = true;
        this.customerExtForm.status = response.data.status.toString();
        this.customerExt.title = "修改客户字段";
      });
    },
    /** 提交按钮 */
    submitCustomerExtForm() {
      this.$refs["customerExtForm"].validate(valid => {
        if (valid) {
          if (this.customerExtForm.extId != null) {
            updateCustomerExt(this.customerExtForm).then(response => {
              if (response.code === 200) {
                this.getCustomerExt("修改成功");
                this.customerExt.open = false;
                this.getList();
              }
            });
          } else {
            addCustomerExt(this.customerExtForm).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
                this.customerExt.open = false;
                this.getCustomerExt();
              }
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleCustomerExtDelete(row) {
      const extIds = row.extId || this.ids;
      this.$confirm('是否确认删除客户字段扩展编号为"' + extIds + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delCustomerExt(extIds);
        }).then(() => {
          this.getCustomerExt();
          this.msgSuccess("删除成功");
        }).catch(function() {});
    },
    getCustomerExt() {
      var data={}
      listCustomerExt(data).then(response => {
        this.customerExtList = response.data;
      });
    },
    getConfigKey(key){
        getConfigKey(key).then((response) => {
            if(key=="sys:config"){
                this.sysConfigForm=response.data;
                if(response.data.configValue!=null){
                    this.sysConfig=JSON.parse(response.data.configValue);
                }
            }
            else if(key=="qw:config"){
                this.qwkfConfigForm=response.data;
                if(response.data.configValue!=null){
                    this.qwkfConfig=JSON.parse(response.data.configValue);
                    this.qwkfConfig.notifyUrl="http://kf.qw.ifeiyu100.com/app/common/weixinkfAuth/"+this.company.companyId;
                }
            }
            else if(key=="customer:config"){
                this.customerConfigForm=response.data;
                if(response.data.configValue!=null){
                    this.customerConfig=JSON.parse(response.data.configValue);
                }
            }
            else if(key=="sys:qw:config"){
                this.qwConfigForm=response.data;
                if(response.data.configValue!=null){
                    this.qwConfig=JSON.parse(response.data.configValue);

                }
                // token和encodingAESKey从后端配置获取，不再硬编码
                // 如果后端配置中没有，则提示管理员在后端配置中设置
                if(!this.qwConfig.token){
                    this.qwConfig.token = '';
                }
                if(!this.qwConfig.encodingAESKey){
                    this.qwConfig.encodingAESKey = '';
                }
                this.qwConfig.notifyUrl=this.qwConfig.realmNameURL?this.qwConfig.realmNameURL+"/qw/data/"+this.company.companyId:'';
                this.qwConfig.chatToolbar=this.company?"https://company.his.cdwjyyh.com/qwh5/?companyId="+this.company.companyId:'';
                this.qwConfig.chatToolbarOAuth2="https://open.weixin.qq.com/connect/oauth2/authorize?" +
                  "appid="+this.qwConfig.corpId+"" +
                  "&redirect_uri="+this.qwConfig.chatToolbar+"" +
                  "&response_type=code" +
                  "&scope=snsapi_base" +
                  "&state=STATE" +
                  "&agentid="+this.qwConfig.AgentId+"#wechat_redirect";
            }else if (key=="sys:AiKf:config"){
              this.AiKfConfigForm=response.data;
              if(response.data.configValue!=null){
                this.AiKfConfig=JSON.parse(response.data.configValue);
              }
            }else if (key=="companyUser:config"){
              this.companyUserConfig=response.data;
              if(response.data.configValue != null){
                this.userIsDefaultBlack = JSON.parse(response.data.configValue);
              }
            }else if(key == "company:admin:show"){
              this.adminIsShowForm = response.data;
              if(response.data.configValue != null){
                this.adminIsShow = JSON.parse(response.data.configValue);
              }
            }else if(key=="redPacket:config"){
              this.redPacketConfigForm=response.data;
              if(response.data.configValue!=null){
                this.redPacketConfig=JSON.parse(response.data.configValue);
              }
            }else if(key == "cId.config"){
              this.cidConfigForm = response.data;
              if(response.data.configValue != null){
                this.cidConfig = JSON.parse(response.data.configValue);
              }
            }
        });
    },
    onSubmit1() {
      this.sysConfigForm.configValue=JSON.stringify(this.sysConfig);
      updateConfig(this.sysConfigForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.getConfigKey("sys:config");
        }
      });
    },
    onSubmit2() {
      this.customerConfigForm.configValue=JSON.stringify(this.customerConfig);
      updateConfig(this.customerConfigForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.getConfigKey("customer:config");
        }
      });
    },
    onSubmit3() {
      this.qwkfConfigForm.configValue=JSON.stringify(this.qwkfConfig);
      updateConfig(this.qwkfConfigForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.getConfigKey("sys:config");
        }
      });
    },
    // onSubmit4() {
    //   this.qwConfigForm.configValue=JSON.stringify(this.qwConfig);
    //   updateConfig(this.qwConfigForm).then(response => {
    //     if (response.code === 200) {
    //       this.msgSuccess("修改成功");
    //       this.getConfigKey("sys:qw:config");
    //     }
    //   });
    // },
    onSubmit4() {
      this.redPacketConfigForm.configValue=JSON.stringify(this.redPacketConfig);
      updateConfig(this.redPacketConfigForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.getConfigKey("redPacket:config");
        }
      });
    },
    onSubmit5() {
      this.AiKfConfigForm.configValue=JSON.stringify(this.AiKfConfig);
      updateConfig(this.AiKfConfigForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.getConfigKey("sys:AiKf:config");
        }
      });
    },
    onSubmit6() {
      this.companyUserConfig.configValue=JSON.stringify(this.userIsDefaultBlack);
      configUserCheck({userIsDefaultBlack: this.userIsDefaultBlack}).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.getConfigKey("companyUser:config");
        }
      });
    },
    onSubmit7() {
      // 实现提交逻辑
      this.adminIsShowForm.configValue=JSON.stringify(this.adminIsShow);
      updateConfig(this.adminIsShowForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.getConfigKey("company:admin:show");
        }
      })
    },
    onSubmitCidConfig() {
      if (this.cidConfig.enablePhoneConfig) {
        if (!this.cidConfig.generateCount || this.cidConfig.generateCount < 1) {
          this.msgError('生成条数不能为空且不能小于1');
          return;
        }
        if (!this.cidConfig.startIndex || this.cidConfig.startIndex < 1 || this.cidConfig.startIndex > 11) {
          this.msgError('开始位置不能为空，且必须在1到11之间');
          return;
        }
        if (!this.cidConfig.endIndex || this.cidConfig.endIndex < 1 || this.cidConfig.endIndex > 11) {
          this.msgError('结束位置不能为空，且必须在1到11之间');
          return;
        }
        if (this.cidConfig.startIndex > this.cidConfig.endIndex) {
          this.msgError('开始位置不能大于结束位置');
          return;
        }

        if (this.cidConfig.endIndex - this.cidConfig.startIndex < 4) {
          this.msgError('开始和结束位置之间的位数不能少于4位');
          return;
        }
      }

      this.cidConfigForm.configValue = JSON.stringify(this.cidConfig);
      updateConfig(this.cidConfigForm).then(response => {
        if (response.code === 200) {
          this.msgSuccess("修改成功");
          this.getConfigKey("cId.config");
        }
      });
    },
  }
};
</script>
<style scoped lang="scss">
.tip{
  color:indianred;
}
.line{
  margin: 10px 0;
  background-color:gainsboro;
  height:1px;
}
.el-row {
  margin-bottom: 0px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>

