<style>
  .info_title {
    padding: 0 22px;
    margin-bottom: 20px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    font-family: Microsoft YaHei, Avenir, Helvetica, Arial, sans-serif !important;
  }

  .customer_info_component {
    width: 100%;
  }

  .customer_info_Stage {
    width: 100%;
    padding: 0 7px;
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 22px;
    justify-content: space-between;
  }

  .stage_label {
    color: #606266;
    flex-shrink: 0;
    width: 65px;
    text-align: right;
  }

  .stage_value {
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .info_content {
    margin-bottom: 30px;
  }

  .info_item {
    position: relative;
    display: flex;
    padding: 12px 22px;
    align-items: center;
  }

  .item_value {
    flex: 1;
    font-size: 14px;
    word-break: break-all;
    overflow: hidden;
  }

  .item_label {
    color: #606266;
    flex-shrink: 0;
    width: 120px;
    font-size: 14px;
  }

  .student_require {
    color: red;
  }

  .stuHeadImg {
    width: 80px;
    height: 80px;
    position: relative;
  }

</style>
<template>
  <div>
    <div class="info_title">客户管理</div>
    <div class="info_content" style="margin-bottom:0;">
      <div class="customer_info_component">
        <div class="customer_info_Stage">
          <div class="stage_label">头像</div>
          <div class="stage_value">
            <div class="stuHeadImg">
              <el-upload :before-upload="uploadFile" :multiple="false" action='' :show-file-list="false">
                <q-avatar size="80px" font-size="36px" text-color="white">
                  <img :src="customObj.StuIcon" v-if="customObj.StuIcon">
                  <img v-else src="../../../assets/images/administration/litheader.png" alt="" />
                </q-avatar>
              </el-upload>
            </div>
          </div>
        </div>
      </div>
      <div class="customer_info_component">
        <div class="customer_info_Stage">
          <div class="stage_label">
            <span class="student_require">*</span>客户名称
          </div>
          <div class="stage_value">
            <q-input filled v-model="customObj.StuName" style="width:185px;" ref="StuName" dense :disable="noEdit">
            </q-input>
          </div>
        </div>
      </div>
      <div class="customer_info_component">
        <div class="customer_info_Stage">
          <div class="stage_label">
            客户电话
          </div>
          <div class="stage_value">
            <q-input filled v-model="customObj.StuTel" style="width:185px;" @blur="CheckExistsStu(1)" ref="StuTel"
              :disable="noEdit" dense>
            </q-input>
          </div>
        </div>
      </div>
      <div class="customer_info_component">
        <div class="customer_info_Stage">
          <div class="stage_label">
            QQ
          </div>
          <div class="stage_value">
            <q-input filled v-model="customObj.QQ" style="width:185px;" @blur="CheckExistsStu(2)" :disable="noEdit"
              @keyup.native="checkInteger(customObj,'QQ')" ref="QQ" dense></q-input>
          </div>
        </div>
      </div>
      <div class="customer_info_component">
        <div class="customer_info_Stage">
          <div class="stage_label">
            微信号
          </div>
          <div class="stage_value">
            <q-input filled v-model="customObj.WeChatNo" @blur="CheckExistsStu(3)" style="width:185px;" ref="WeChatNo"
              :disable="noEdit" dense></q-input>
          </div>
        </div>
      </div>
      <div class="customer_info_component">
        <div class="customer_info_Stage items-center">
          <div class="stage_label">
            <span class="student_require">*</span>客户状态
          </div>
          <div class="stage_value">
            <q-select filled v-model="customObj.StuStage" dense :options="customState" option-label="Name"
              :disable="noEdit" style="width:185px;" option-value="Id" emit-value map-options label="客户状态" />
          </div>
        </div>
      </div>
      <template v-if="BelongType!=3">
        <div class="customer_info_component">
          <div class="customer_info_Stage">
            <div class="stage_label">
              <span class="student_require">*</span>客户来源
            </div>
            <div class="stage_value">
              <q-select filled v-model="customObj.CreateType" @change="clearStuMsg()" style="width:185px;"
                :disable="(noEdit || isHaveOrder)" @input="resetStuSource()" dense :options="customFromList"
                option-label="Name" option-value="Id" emit-value map-options label="客户来源" />
            </div>
          </div>
        </div>
        <div class="customer_info_component" v-if="customObj.CreateType==3">
          <div class="customer_info_Stage">
            <div class="stage_label">
              <span class="student_require">*</span>介绍人
            </div>
            <div class="stage_value">
              <q-select filled v-model="customObj.StuSourceId" style="width:185px;" dense @filter="filterEmployee"
                :disable="(noEdit || isHaveOrder)" use-input :options="myEmployeeList" option-label="EmployeeName"
                option-value="Id" emit-value map-options />
            </div>
          </div>
        </div>
        <div class="customer_info_component" v-if="customObj.CreateType==4">
          <div class="customer_info_Stage">
            <div class="stage_label">
              <span class="student_require">*</span>转介人
            </div>
            <div class="stage_value">
              <q-select filled v-model="customObj.StuSourceId" style="width:185px;" use-input @filter="filterStudent"
                :disable="(noEdit || isHaveOrder)" dense :options="MyTransListData" option-label="StuName"
                option-value="StuId" emit-value map-options />
            </div>
          </div>
        </div>
        <div class="customer_info_component" v-if="customObj.CreateType==1">
          <div class="customer_info_Stage">
            <div class="stage_label">
              <span class="student_require">*</span>收客渠道
            </div>
            <div class="stage_value">
              <q-select filled v-model="customObj.StuChannel" style="width:185px;" dense :options="StuChannelList"
                :disable="(noEdit || isHaveOrder)" option-label="Name" option-value="Id" emit-value map-options
                use-input @filter="filterStuChannel">
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      未找到相关数据
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>
          </div>
        </div>
        <div class="customer_info_component" v-if="customObj.CreateType==2">
          <div class="customer_info_Stage">
            <div class="stage_label">
              <span class="student_require">*</span>关联同行
            </div>
            <div class="stage_value">
              <q-select filled v-model="customObj.CustomerId" style="width:185px" dense :options="customList" use-input
                :disable="(noEdit || isHaveOrder)" @filter="filterFn" option-label="CustomerName"
                option-value="CustomerId" emit-value map-options>
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      未找到相关数据
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>
          </div>
        </div>
        <template v-if="customObj.CreateType==1">
          <div class="info_item" v-if="customObj.StuChannel==6">
            <div class="item_label">第三方平台名称</div>
            <div class="item_value">
              <q-input filled v-model="customObj.PlatformName" dense :disable="noEdit"></q-input>
            </div>
          </div>
          <div class="info_item" v-if="customObj.StuChannel==7">
            <div class="item_label">其他平台名称</div>
            <div class="item_value">
              <q-input filled v-model="customObj.PlatformName" dense :disable="noEdit"></q-input>
            </div>
          </div>
        </template>
      </template>
      <div class="customer_info_component">
        <div class="customer_info_Stage">
          <div class="stage_label">
            <span class="student_require">*</span>客户类型
          </div>
          <div class="stage_value">
            <q-select filled v-model="customObj.StuType" style="width:185px" dense :options="customTypeList"
              :disable="noEdit" option-label="Name" option-value="Id" emit-value map-options label="客户类型" />
          </div>
        </div>
      </div>
      <div class="customer_info_component">
        <div class="customer_info_Stage">
          <div class="stage_label">
            客户需求
          </div>
          <div class="stage_value">
            <q-select filled v-model="customObj.StuNeeds" style="width:185px" dense :options="NeedData"
              :disable="noEdit" option-label="Name" option-value="Id" emit-value map-options label="客户需求" />
          </div>
        </div>
      </div>
      <div class="custom_Line"></div>
      <div class="info_title">基本资料</div>
      <div class="info_content">
        <div class="info_item">
          <div class="item_label">性别</div>
          <div class="item_value">
            <q-radio v-model="customObj.StuSex" :val="0" label="男" :disable="noEdit" />
            <q-radio v-model="customObj.StuSex" :val="1" label="女" :disable="noEdit" />
          </div>
        </div>
        <div class="info_item studentDate">
          <div class="item_label">出生日期</div>
          <div class="item_value">
            <q-field filled dense>
               <template v-slot:control>
                <el-date-picker v-model="customObj.StuBirth" size="mini" style="width:150px" type="date"
                  :disabled="noEdit" placeholder="选择日期">
                </el-date-picker>
              </template>
            </q-field>
          </div>
        </div>

        <div class="info_item">
          <div class="item_label">日语基础</div>
          <div class="item_value">
            <q-select filled v-model="customObj.JapanBaseInfo" dense :options="basicList" option-label="Name"
              :disable="noEdit" option-value="Id" emit-value map-options />
          </div>
        </div>
        <div class="info_item">
          <div class="item_label">职业</div>
          <div class="item_value">
            <q-input filled v-model="customObj.StuProfession" dense :disable="noEdit"></q-input>
          </div>
        </div>
        <div class="info_item">
          <div class="item_label">学历</div>
          <div class="item_value">
            <q-select filled v-model="customObj.StuEducation" dense :options="educationList" option-label="Name"
              :disable="noEdit" option-value="Id" emit-value map-options />
          </div>
        </div>
        <div class="info_item">
          <div class="item_label">学习目的</div>
          <div class="item_value">
            <q-select filled v-model="customObj.StuPurpose" dense :options="goalsList" option-label="Name"
              :disable="noEdit" option-value="Id" emit-value map-options />
          </div>
        </div>
        <!-- <div class="info_item">
          <div class="item_label">创建人</div>
          <div class="item_value">
            <q-select filled v-model="customObj.CreateBy" dense disable @filter="filterEmployee" use-input
              :options="myEmployeeList" option-label="EmployeeName" option-value="Id" emit-value map-options />
          </div>
        </div> -->
        <div class="info_item" v-if="!noEdit">
          <q-btn color="accent" class="q-mr-md" label="保存" @click="saveStu()" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import {
    getStudentInfo, //获取学员客户信息
    queryStuStageList, //获取客户阶段列表
    saveStudent, //保存学员信息
    GetStudentTypeList,
    getStudentDorpDownList,
    GetNeedsList
  } from '../../../api/school/index';
  import {
    getGuestBasicsEnumList,
    getGuestEducationEnumList,
    getGuestLearningGoalsEnumList,
    GetStuChannelList,
    CreateTypeList,
    CheckExistsStu,
    GetCustomerList
  } from '../../../api/sale/sale'
  import {
    queryEmployee
  } from '../../../api/users/user'
  import {
    queryStuOrderPage, //学员订单分页列表
  } from '../../../api/customerstudent/customerstudent';
  import {
    UploadSelfFile
  } from '../../../api/common/common'


  export default {
    meta: {
      title: "学员管理"
    },
    components: {

    },
    props: {
      stuData: {
        type: Object,
        default: null
      },
      saveObj: {
        type: Object,
        default: null
      },
      AddType: {
        type: Number,
        default: null
      },
      BelongType: {
        type: Number,
        default: null
      }
    },
    data() {
      return {
        //客户阶段状态列表
        customState: [],
        customMsg: {
          StuId: 0,
        },
        //客户对象
        customObj: {
          StuId: 0,
          StuIcon: '', //学院头像
          StuName: '', //客户名称
          StuTel: '', //客户电话
          CreateType: '', //客户来源
          StuSourceId: '', //介绍人
          StuChannel: '', //收客渠道
          PlatformName: '', //平台名称
          StuSex: 0, //性别
          StuBirth: '', //出生日期
          StuStage: '', //客户阶段状态
          JapanBaseInfo: '', //日语基础
          StuProfession: '', //职业
          StuEducation: '', //学历
          StuPurpose: '', //学习目的
          CreateBy: '', //创建人
          CustomerId: 0, //关联同行
          QQ: '', //qq
          WeChatNo: '', //微信号
          StuType: '', //客户类型
          StuNeeds: 0 //客户需求
        },
        //日语基础列表
        basicList: [],
        //学历列表
        educationList: [],
        //学习目的列表
        goalsList: [],
        //员工列表
        employeeList: [],
        myEmployeeList: [],
        StuChannelList: [], //收客渠道
        allStuChannelList: [], //所有收客渠道
        AssistDropList: [], //协助人员
        customFromList: [], //客户来源
        customTypeList: [], //客户类型
        customList: [], //同行列表
        allCustomList: [], //所有同行列表
        TransListData: [], //转介人数据
        MyTransListData: [],
        checkMsg: {
          StuId: 0,
          StuTel: '',
          QQ: '',
          WeChatNo: ''
        },
        NeedData: [],
        noEdit: false,
        isHaveOrder: false
      }
    },
    created() {

      this.getStuStageList();
      this.getBasicList();
      this.queryGuestEducationEnumList();
      this.queryGoalsList();
      this.getEmployeeList();
      this.GetStuChannelList();
      this.getCustomFrom();
      this.GetCustomerList();
      this.getCustomTypeList();
      this.getStudentDorpDown();
      this.getGetNeedsList();
      this.getStuOrderPage();
      if (this.saveObj && this.saveObj.StuId > 0) {
        this.customMsg.StuId = this.saveObj.StuId;
        this.checkMsg.StuId = this.saveObj.StuId;
        if (this.saveObj.noEdit && this.saveObj.noEdit == true) {
          this.noEdit = true
        }
      }
      if (this.BelongType == 3) {
        this.noEdit = true
      }

    },
    watch: {
      stuData() {
        this.init();
      }
    },
    methods: {
      uploadFile(files) {
        UploadSelfFile("studentIcon", files, res => {
          if (res.Code == 1) {
            this.customObj.StuIcon = res.FileUrl;
          }
        });
      },
      //获取客户需求
      getGetNeedsList() {
        GetNeedsList().then(res => {
          if (res.Code == 1) {
            this.NeedData = res.Data;
          }
        })
      },
      //保存学员信息
      saveStu() {
        if (this.customObj.StuName == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请输入客户名称`
          })
          return
        }
        if (this.customObj.StuTel == '' && this.customObj.QQ == '' && this.customObj.WeChatNo == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请输入电话QQ微信至少一个`
          })
          return
        }
        if (this.customObj.CreateType == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择客户来源`
          })
          return
        }
        if (this.customObj.CreateType == 1 && !this.customObj.StuChannel) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择收客渠道`
          })
          return
        }
        if (this.customObj.CreateType == 2 && !this.customObj.CustomerId) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择关联同行`
          })
          return
        }
        if (this.customObj.CreateType == 3 && !this.customObj.StuSourceId) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择介绍人`
          })
          return
        }
        if (this.customObj.CreateType == 4 && !this.customObj.StuSourceId) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择转介人`
          })
          return
        }
        if (this.customObj.StuStage == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择客户状态`
          })
          return
        }
        if (this.customObj.StuType == '') {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择客户类型`
          })
          return
        }
        if (this.customObj.StuTel != '') {
          var myreg = /^[1][3-9][\d]{9}/;
          if (!myreg.test(this.customObj.StuTel)) {
            this.$q.notify({
              type: 'negative',
              position: "top",
              message: `请输入正确的电话号码`
            })
            return
          }
        }
        saveStudent(this.customObj).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              color: 'accent',
              timeout: 2000,
              message: '数据保存成功！',
              position: 'top'
            })
            this.$emit('update');
            this.$emit('success');
            this.$emit('getrecord');
            if (this.AddType == 1) {
              this.$emit('close');
            }
          }
        })
      },
      //获取员工列表
      getEmployeeList() {
        queryEmployee({
          IsLeave: 1
        }).then(res => {
          this.employeeList = res.Data;
          this.myEmployeeList = res.Data;
        })
      },
      //获取收客渠道
      GetStuChannelList() {
        GetStuChannelList({}).then(res => {
          if (res.Code == 1) {
            this.StuChannelList = res.Data;
            this.allStuChannelList = res.Data;
          }
        })
      },
      //筛选渠道
      filterStuChannel(val, update, ) {
        update(() => {
          if (val === "") {
            this.StuChannelList = JSON.parse(JSON.stringify(this.allStuChannelList));
          } else {
            const needle = val.toLowerCase();
            this.StuChannelList = this.allStuChannelList.filter(
              (v) => v.Name.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //筛选员工
      filterEmployee(val, update, abort) {
        update(() => {
          this.myEmployeeList = this.employeeList.filter(
            v => v.EmployeeName.indexOf(val) > -1
          );
        });
      },
      //获取日语基础列表
      getBasicList() {
        getGuestBasicsEnumList({}).then(res => {
          this.basicList = res.Data;
        })
      },
      //获取客户来源
      getCustomFrom() {
        CreateTypeList({}).then(res => {
          if (res.Code == 1) {
            this.customFromList = res.Data;
          }
        })
      },
      //获取学历列表
      queryGuestEducationEnumList() {
        getGuestEducationEnumList({}).then(res => {
          this.educationList = res.Data;
        })
      },
      //获取学习目的列表
      queryGoalsList() {
        getGuestLearningGoalsEnumList({}).then(res => {
          this.goalsList = res.Data;
        })
      },
      //获取客户阶段列表
      getStuStageList() {
        queryStuStageList().then(res => {
          this.customState = res.Data;
        })
      },
      //获取客户下拉数据
      GetCustomerList() {
        let msg = {
          QCreateBy: 0
        }
        GetCustomerList(msg).then(res => {
          if (res.Code == 1) {
            this.customList = res.Data;
            this.allCustomList = res.Data;
          }
        })
      },
      //筛选客户
      filterFn(val, update) {
        update(() => {
          if (val === "") {
            this.customList = JSON.parse(JSON.stringify(this.allCustomList));
          } else {
            const needle = val.toLowerCase();
            this.customList = this.allCustomList.filter(
              (v) => v.CustomerName.toLowerCase().indexOf(needle) > -1
            );
          }
        });
      },
      //获取客户类型
      getCustomTypeList() {
        GetStudentTypeList().then(res => {
          if (res.Code == 1) {
            this.customTypeList = res.Data;
          }
        })
      },
      //获取转介人下拉
      getStudentDorpDown() {
        getStudentDorpDownList().then(res => {
          if (res.Code == 1) {
            this.TransListData = res.Data;
            this.MyTransListData = res.Data;
          }
        })
      },
      //筛选转介人
      filterStudent(val, update, abort) {
        update(() => {
          this.MyTransListData = this.TransListData.filter(
            v => v.StuName.indexOf(val) > -1
          );
        });
      },
      // queryStuInfo() {
      //   getStudentInfo({
      //     StuId: this.customMsg.StuId
      //   }).then(res => {
      //     if (res.Code == 1) {
      //       var tempDate = res.Data;
      //       this.customObj.StuId = tempDate.StuId;
      //       this.customObj.StuName = tempDate.StuName;
      //       this.customObj.StuTel = tempDate.StuTel;
      //       this.customObj.CreateType = tempDate.CreateType;
      //       this.customObj.StuSourceId = tempDate.StuSourceId;
      //       this.customObj.StuChannel = tempDate.StuChannel;
      //       this.customObj.PlatformName = tempDate.PlatformName;
      //       this.customObj.StuSex = tempDate.StuSex;
      //       this.customObj.StuBirth = tempDate.StuBirth;
      //       this.customObj.StuStage = tempDate.StuStage;
      //       this.customObj.JapanBaseInfo = tempDate.JapanBaseInfo;
      //       this.customObj.StuProfession = tempDate.StuProfession;
      //       this.customObj.StuEducation = tempDate.StuEducation;
      //       this.customObj.StuPurpose = tempDate.StuPurpose;
      //       this.customObj.CreateBy = tempDate.CreateBy;
      //       this.customObj.CustomerId = tempDate.CustomerId;
      //       this.customObj.StuType = tempDate.StuType;
      //       this.customObj.QQ = tempDate.QQ;
      //       this.customObj.WeChatNo = tempDate.WeChatNo;
      //       this.customObj.StuNeeds = tempDate.StuNeeds;
      //     }
      //   });
      // },
      init() {
        const tempDate = this.stuData;
        this.customObj.StuId = tempDate.StuId;
        this.customObj.StuName = tempDate.StuName;
        this.customObj.StuIcon = tempDate.StuIcon;
        this.customObj.StuTel = tempDate.StuTel;
        this.customObj.CreateType = tempDate.CreateType;
        this.customObj.StuSourceId = tempDate.StuSourceId;
        this.customObj.StuChannel = tempDate.StuChannel;
        this.customObj.PlatformName = tempDate.PlatformName;
        this.customObj.StuSex = tempDate.StuSex;
        this.customObj.StuBirth = tempDate.StuBirth;
        this.customObj.StuStage = tempDate.StuStage;
        this.customObj.JapanBaseInfo = tempDate.JapanBaseInfo;
        this.customObj.StuProfession = tempDate.StuProfession;
        this.customObj.StuEducation = tempDate.StuEducation;
        this.customObj.StuPurpose = tempDate.StuPurpose;
        this.customObj.CreateBy = tempDate.CreateBy;
        this.customObj.CustomerId = tempDate.CustomerId;
        this.customObj.StuType = tempDate.StuType;
        this.customObj.QQ = tempDate.QQ;
        this.customObj.WeChatNo = tempDate.WeChatNo;
        this.customObj.StuNeeds = tempDate.StuNeeds;
        if (this.customObj.StuId > 0) {
          this.isHaveOrder = true
        }
      },
      //新增协助人员
      addAssist() {
        let obj = {
          Id: 0, //编号
          AssistId: 1, //员工编号
          AssistType: 1, //类型
          StuId: 1, //学员编号
        }
        this.customObj.AssistList.push(obj);
      },
      //删除协助人员
      delAssist(index) {
        this.customObj.AssistList.splice(index, 1);
      },
      //验证手机号
      CheckExistsStu(type) {
        if (type == 1) {
          if (this.customObj.StuTel && this.customObj.StuTel.length == 11) {
            this.checkMsg.StuTel = this.customObj.StuTel
            this.checkMsg.QQ = '';
            this.checkMsg.WeChatNo = '';
            CheckExistsStu(this.checkMsg).then(r => {});
          }
        }
        if (type == 2) {
          if (this.customObj.QQ) {
            this.checkMsg.StuTel = '';
            this.checkMsg.QQ = this.customObj.QQ;
            this.checkMsg.WeChatNo = '';
            CheckExistsStu(this.checkMsg).then(r => {});
          }
        }
        if (type == 3) {
          if (this.customObj.WeChatNo) {
            this.checkMsg.StuTel = ''
            this.checkMsg.QQ = '';
            this.checkMsg.WeChatNo = this.customObj.WeChatNo;
            CheckExistsStu(this.checkMsg).then(r => {});
          }
        }
      },
      //切换客户来源重置
      resetStuSource() {
        this.customObj.StuChannel = '';
        this.customObj.CustomerId = '';
        this.customObj.StuSourceId = '';
        this.customObj.PlatformName = '';
      },
      getStuOrderPage() {
        let customMsg = {
          pageIndex: 1,
          pageSize: 10,
          StuId: 0
        }
        if (this.saveObj) {
          customMsg.StuId = this.saveObj.StuId;
        }
        queryStuOrderPage(customMsg).then(res => {
          if (res.Code == 1) {
            if (this.customObj.StuId > 0) {
              if (res.Data.PageData.length > 0) {
                this.isHaveOrder = true;
              } else {
                this.isHaveOrder = false;
              }
            }
          }
        });
      },

    }
  }

</script>
<style scoped>
  ::v-deep .el-input__inner {
    background: transparent;
    border: none;
  }

</style>
