<template>
  <ifbp-page>
    <ifbp-breadcrumb name="员工信息设置"></ifbp-breadcrumb>
    <ifbp-main-area type="detail">
      <ifbp-panel-group>
    <ifbp-panel title="员工信息" :icons="staffEditIcons" :mainTitle="true">
      <ifbp-template ref="staffFormRef"
                      tplId="staffFormTemplate"
                      :funnode="funNode"
                      :nexuskey="nexusKey"
                      show-type="form"
                      :tplData="tplData"
                      :methods="staffMethods"
                      :editable="staffEdit"
                      :form-show-message="staffEdit">
      </ifbp-template>
      <div class="button-area" v-if="staffEdit">
        <el-button type="default" @click="cancalStaff">取消</el-button>
        <el-button type="primary" @click="confirmStaff">确定</el-button>
      </div>
      <!-- <div style="clear: both"></div> -->
    </ifbp-panel>
    <!--工作经历列表-->
    <ifbp-panel title="员工工作列表" :icons="staffWorkIcons">
        <ifbp-template ref="staffWorkRef"
                      tpl-id="staffWorkTableId"
                      :tpl-data="staffWorkTableData"
                      show-type="table-form"
                      :funnode="workFunnode"
                      :nexuskey="workNexuskey"
                      :tpl-reset-fun="staffWorkTableResetFun"
                      :methods="staffWorkMethods"
                      @edit-table-click="workEditTableRow"
                      @delete-table-click="workDeleteTableRow"
                      @form-confirm-click="workFormConfirm"
                      @form-cancel-click="workFormCancel">
        </ifbp-template>
    </ifbp-panel>
    <ifbp-panel title="银行账户" :icons="bankIcons">
      <ifbp-template ref="bankTableRef"
                    tpl-id="bankTableId"
                    show-type="table-form"
                    :funnode="bankFunnode"
                    :nexuskey="bankNexuskey"
                    :methods="bankMethods"
                    :tpl-data="bankTplData"
                    :tpl-reset-fun="bankTableResetFun"
                    :form-show-message="bankTableEdit"
                    @edit-table-click="editBankTableRow"
                    @delete-table-click="deleteBankTableRow"
                    @form-cancel-click="bankCancel"
                    @form-confirm-click="bankConfirm">
      </ifbp-template>
    </ifbp-panel>
  </ifbp-panel-group>

    <!-- 删除提示框 -->
    <!-- <ifbp-del-dialog
      title="提示"
      v-model="delDialogVisible"
      :modal="true"
      size="tiny">
      <span>确认删除该条记录？删除后无法恢复。</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteClick">确 定</el-button>
        <el-button @click="delDialogVisible = false">取 消</el-button>
      </span>
    </ifbp-del-dialog>
    <ifbp-panel title="银行账户" :icons="bankIcons">
      <ifbp-template ref="bankTableRef"
                    tpl-id="bankTableId"
                    show-type="table"
                    :funnode="bankFunnode"
                    :nexuskey="bankNexuskey"
                    :tpl-data="bankTplData"
                    :tpl-reset-fun="bankTableResetFun"
                    @edit-table-click="editBankTableRow"
                    @delete-table-click="deleteBankTableRow">
      </ifbp-template>
      <el-dialog
          title="增加银行账户"
          size="large"
          v-model="showBankForm"
          :before-close="closeBankForm"
          @update:visible="val => multiDelDialogVisible = val">
          <ifbp-template ref="bank-form-ref"
                        tpl-id="bankTableIdForm"
                        show-type="form"
                        :methods="bankMethods"
                        :tpl-data="bankTplData"
                        :tpl-reset-fun="bankFormResetFun"
                        :funnode="bankFunnode"
                        :nexuskey="bankNexuskey"
                        :editable="isEditBankForm"
                        :form-show-message="isEditBankForm">
          </ifbp-template>
          <div class="button-area" v-if="!isEditBankForm">
            <el-button @click="showBankForm = false">返 回</el-button>
            <el-button  type="primary" @click="isEditBankForm = true">编 辑</el-button>
          </div>
          <span v-else slot="footer" class="button-area">
            <el-button @click="showBankForm = false">取 消</el-button>
            <el-button type="primary" @click="addBankForm">确 定</el-button>
          </span>
        </el-dialog>
    </ifbp-panel> -->
    </ifbp-main-area>
  </ifbp-page>
</template>
<script>
  export default {
    data(){
       var vm = this;
       var patterns = {
          identity: /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/, // 身份证[17位数字校验+1位数字或字母X]
          residence: /^([0-9]){9}$/, // 户口簿[9位数字校验]
          passport: /^[a-z|A-Z]{1}[0-9]{8}$/, // 中国护照[1位字母+8位数字校验]
          officers: /^[0-9]{8}$/, // 军官证[8位数字校验]
          driving: /^[0-9]{18}$/, // 驾驶证[18位数字校验]
          macaoPermit: /^[a-z|A-Z]{1}[0-9]{8}$/, // 港澳通行证[1位字母+8位数字校验]
          taiwanPermit: /^[a-z|A-Z]{1}[0-9]{8}$/, // 台湾通行证[1位字母+8位数字校验]
          returnCard: /^[a-z|A-Z]{1}[0-9]{10}$/, // 返乡证[1位字母+10位数字校验]
          soldbuch: /^[0-9]{7}$/, // 士兵证[7位数字校验]
      };
      var documentidValidator = function(rule, val, callback) {
        var formData = vm.$refs.staffFormRef.getFormData();
        if(formData && formData.idtype) {
          var typeName = vm.documentTypeMap[formData.idtype];
          if(typeName) {
            var pattern = vm.patterns[typeName];
            if(!pattern.test(val)) {
              callback(new Error("证件号格式未匹配到 pattern: ") + pattern);
              return;
            }
          }
        }
        callback();
      }
      return {
        /* ===========  staff detail Form data  =============== */
        funNode: 'YGGL',
        nexusKey: 'STAFF_INFO',
        staffEditIcons: [{
          icon: 'edit',
          show: true,
          click: function() {
            vm.staffEdit = true;
            vm.staffEditIcons[0].show = false;
          }
        }],
        tplData: {
          psndoc: {},
          rules:{
            id_num: [{
              validator: documentidValidator,
              trigger: 'blur',
              message: '证件号格式错误'
            }]
          }
        },
        staffMethods: {
          avatarUploadSuccess(res) {
            var formData = vm.$refs.staffFormRef.comp.psndoc;
            formData.avatar = res.data;
          }
        },

        /* ===========  staff-work Table data  =============== */
        workFunnode:'YGGL',
        workNexuskey:'STAFF_WORK_INFO',
        // staffWorkBaseData: {}, // 备份数据
        staffWorkEditIndex: -1,
        staffWorkIcons: [{
          icon: 'plus',
          click: function() {
            // 关闭表格展开列
            vm.$refs.staffWorkRef.getTableComp().closeExpandRow();
            // 隐藏表格
            // 重置新增数据
            vm.$refs.staffWorkRef.resetFormData();
            vm.$refs.staffWorkRef.getFormData().ismainjob = '';
            // 
            vm.$refs.staffWorkRef.setData("pk_dept_queryparams", {});
            // 显示新增区域
            vm.$refs.staffWorkRef.tableShow = false;
            vm.$refs.staffWorkRef.formShow = true;
          }
        }],
        staffWorkTableResetFun($node) {
            //获取table,此id为ui模板上面的表格Id
            let $table = $node.find("el-table");
            //定义操作
            let operateArr = [
                {
                    icon: 'edit',
                    title: "查看"
                },
                {
                    title: "删除",
                    icon: "delete"
                }
            ];
            //获取操作按钮html片段
            let operateHtml = this.getTableOperateHtml(operateArr);
            $table.append(operateHtml);

            // 获取form元素
            let $form = $node.find("el-form");
            var $checkboxGroup = $form.find("el-checkbox-group[v-model='psnjob.ismainjob']");
            $checkboxGroup.attr("v-model", "ismainjobCheckedList");
            $checkboxGroup.attr("v-on:change", "checkboxChange");

            var $orgRef = $form.find("el-ref[field='pk_org']");
            $orgRef.attr("v-on:trigger", "orgRefChange");

            var $deptRef = $form.find("el-ref[field='pk_dept']");
            $deptRef.attr("v-bind:before-query", "deptRefBeforeQuery");

            return $node[0].outerHTML;
        },
        staffWorkMethods: {
          checkboxChange(v) {
            var value = v.join(',');
            this.psnjob.ismainjob = value;
          },
          orgRefChange(type, value) {
            if(type === "change") {
              console.log('pk_org has changed:'+value.value[0].id);
              vm.$refs.staffWorkRef.setData("pk_dept_queryparams", {pk_corp: value.value[0].id})
            }
          },
          
        },
        staffWorkTableData: {
          psnjob_t: [],
          psnjob: {
            ismainjob: []
          },
          ismainjobCheckedList: [], // ismainjob
          pk_dept_queryparams: {}, // 所在部门queryparams
          deptRefBeforeQuery() {
            if(this.field === 'pk_dept'){
              if(!vm.$refs.staffWorkRef.getFormData().pk_org){
                vm.$message('请选择任职公司');
                return false;
              }
            }
            return true;
          },
        },

        /* ===========  bank Table data  =============== */
        bankFunnode: 'YGGL',
        bankNexuskey: 'STAFF_BANK',
        bankTableEdit: false,
        bankIcons: [{
          icon: 'plus',
          click: function() {
            // 关闭展开的列
            vm.$refs.bankTableRef.getTableComp().closeExpandRow();
            // 重置新增的表单
            vm.$refs.bankTableRef.resetFormData();
            vm.$refs.bankTableRef.setData("",{});
            // 显示表单新增区域
            vm.$refs.bankTableRef.tableShow = false;
            vm.$refs.bankTableRef.formShow = true;
            // 设置为编辑态
            vm.bankTableEdit = true;
            vm.isAddBankForm = true;
          }
        }],
        bankTableResetFun($node) {
          debugger;
          //获取table,此id为ui模板上面的表格Id
          let $table = $node.find("el-table");
          //定义操作
          let operateArr = [
              {
                  icon: 'edit',
                  title: "查看"
              },
              {
                  title: "删除",
                  icon: "delete"
              }
          ];
          //获取操作按钮html片段
          let operateHtml = this.getTableOperateHtml(operateArr);
          $table.append(operateHtml);

          let $form = $node.find("el-form");
          var $banktypeRef = $node.find("el-ref[field='pk_banktype']");
          $banktypeRef.attr("v-on:trigger", "banktypeRefChange");

          var $bankdocRef = $node.find("el-ref[field='pk_bankdoc']");
          $bankdocRef.attr("v-bind:before-query", "bankdocBeforeQuery");

          return $node[0].outerHTML;
        },
        // bankFormResetFun($node) {
        //   let $form = $node.find("el-form");
        //   var $banktypeRef = $node.find("el-ref[field='pk_banktype']");
        //   $banktypeRef.attr("v-on:trigger", "banktypeRefChange");

        //   var $bankdocRef = $node.find("el-ref[field='pk_bankdoc']");
        //   $bankdocRef.attr("v-bind:before-query", "bankdocBeforeQuery");
        // },
        bankTplData: {
          BankAccBas_t: [],
          BankAccBas: {},
          bankdocQueryParams: {},
          bankdocBeforeQuery: function() {
            if(this.field === 'pk_bankdoc'){
              if(!vm.$refs.bankTableRef.getFormData().pk_banktype){
                vm.$message('请选择银行类别');
                return false;
              }
            }
            return true;
          }
        },
        bankMethods: {
          banktypeRefChange(type, val) {
            var banktypeId = val.value[0].id;
            if(type="change") {
              vm.$refs.bankTableRef.setData("bankdocQueryParams", {pk_banktype: banktypeId});
            }
          },
        },
        psnId:'',
        isCreate: false, //主表是否已经保存
        isEditBankForm: false, //是否是编辑状态
        showBankForm: false, //显示银行账户表单
        isAddBankForm:false,
        delDialogVisible: false,
        isNew: true,
        record_status: 'table',
        originalValue: '',
        currentValue: '',
        recordOriginalValue: '',
        recordCurrentValue: '',
        staffEdit: false,
        recordEdit: false,
        patterns: patterns,
        documentTypeMap: { // document_type to document_id Map
          '0': 'identity', // 身份证
          '1': 'residence',// 户口簿
          '2':'passport', // 中国护照
          '3':'officers', // 军官证
          'D':'driving', // 驾驶证
          'B':'macaoPermit', // 港澳通行证
          'C':'taiwanPermit', // 台湾通行证
          'E':'returnCard', // 返乡证
          '4':'soldbuch' // 士兵证
        },
      };
    },
    created(){
      // 获取员工信息表单数据
      this.requestStaffFormData();
      // 获取员工工作信息列表数据
      this.requestStaffWorkTableData();
      this.psnId = this.$root.$router.currentRoute.params.id;
      // 获取银行账户列表数据
      this.requestBankValues();
    },
    methods: {
      /* new UItemplate */
      // createWorkInfo() {
      //       // 关闭表格展开列
      //       this.$refs.staffWorkRef.getTableComp().closeExpandRow();
      //       // 隐藏表格
      //       // 重置新增数据
      //       this.$refs.staffWorkRef.resetFormData();
      //       this.$refs.staffWorkRef.getFormData().ismainjob = '';
      //       // 
      //       this.$refs.staffWorkRef.setData("pk_dept_queryparams", {});
      //       // 显示新增区域
      //       this.$refs.staffWorkRef.tableShow = false;
      //       this.$refs.staffWorkRef.formShow = true;
      // },

      // //点击新增银行账户按钮
      // addBankRow() {
      //   // if (!this.isCreate) {
      //   //   this.$message('请先新增并保存主表数据');
      //   //   return;
      //   // }
      //   this.isAddBankForm = true;
      //   this.isEditBankForm = true;
      //   this.showBankForm = true;
      //   this.$nextTick(() => {
      //     this.$refs['bank-form-ref'].resetFormData();
      //     this.$refs.staffWorkRef.comp.ismainjobCheckedList = [];
      //   });
      // },
      //请求银行信息
      requestBankValues(){
        this.$http({
          url:'/ifbp-app-bd/bd/psn/psndoc/bank?id='+this.psnId,
          type:'get'
        }).then((res) => {
          if(res.data.success === true){
            this.$nextTick(() => {
              if(this.$refs.bankTableRef) {
                this.$refs.bankTableRef.setTableData(res.data.data);
              } else {
                this.$set(this.bankTplData, 'uitemplateTableData', res.data.data);
              }
            });
          }
        }).catch(() => {
          this.$message.error('请求银行信息失败');
        });
      },
      
       //点击新增银行账户按钮
      bankConfirm () {
        debugger;
        const self = this;
        var submitData = {};
        var bankaccbas = this.$refs.bankTableRef.getFormData();
        this.$set(submitData,'id',self.psnId);
        this.$refs.bankTableRef.validate((valid) => {
          if(valid){
            this.$set(submitData,'BankAccBas',bankaccbas);
            self.$http({
            url: '/ifbp-app-bd/bd/psn/psndoc/addBank',
            method: 'post',
            dataType: 'json',
            data: submitData
          }).then((res) => {
              if(res.data.success === true) {
                var tableData = self.$refs.bankTableRef.getTableData();
                if(self.isAddBankForm){
                  tableData.unshift(res.data.data);
                  
                  self.$message({
                    message:'保存成功',
                    type: 'success'
                  });
                } else {
                  tableData.splice(self.bankRowId, 1, res.data.data);
                  self.$message({
                    message:'修改成功',
                    type: 'success'
                  });
                }
                self.$refs.bankTableRef.formShow = false;
                self.$refs.bankTableRef.tableShow = true;
                self.bankTableEdit = false;
                // self.showBankForm = false;
              } else {
                self.$message.error(res.data.error.errorMessage);
              }
          }).catch(() => {
              self.$message({
                message: '请求出错！',
                type: 'error'
              });
            });
          } else {
            self.$message({
              message: '校验未通过',
              type: 'success'
            });
          }
        });
      },
      //点击银行账户编辑按钮
      editBankTableRow (scope) {
        debugger;
        var bankRecordForm = JSON.parse(JSON.stringify(scope.row));
        this.$refs.bankTableRef.formShow = true;
        this.$refs.bankTableRef.tableShow = false;
        this.bankTableEdit = true;
        this.isAddBankForm = false;
        // this.showBankForm = true;
        // this.isEditBankForm = true;
        this.bankRowId = scope.$index;
        // this.bankRecordCurrentValue = bankRecordForm;
        this.$nextTick(() => {
          this.$refs.bankTableRef.setFormData(bankRecordForm);
        });
      },
      //点击银行账户删除数据
      deleteBankTableRow (scope) {
        const self = this;
        self.$confirm('是否删除当前记录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: '/ifbp-app-bd/bd/psn/psndoc/deleteBank?id=' + scope.row.pk_bankaccbas,
            method: 'DELETE',
          }).then((res) => {
            if (res.data.success === true) {
              var tableData = this.$refs.bankTableRef.getTableData();
              tableData.splice(scope.$index, 1);
              self.$message('删除成功');
            } else {
              self.$message('删除失败');
            }
          }).catch(() => {
            self.$message('删除失败');
          });
        }).catch(() => {
          self.$message('已取消删除');
        });
      },
      bankCancel(type){
        debugger;
        if(type === 'form'){
          this.$refs.bankTableRef.formShow = false;
          this.$refs.bankTableRef.tableShow = true;
          this.bankTableEdit = false;
        } else{
          this.$refs.bankTableRef.formShow = false;
          this.$refs.bankTableRef.tableShow = true;
          this.bankTableEdit = false;
          this.$refs.bankTableRef.getTableComp().closeExpandRow();
        }
      },
      closeBankForm(done){
        done();
        this.showBankForm = false;
      },

      // 获取员工信息表单数据
      requestStaffFormData() {
        this.$http({
          url: '/ifbp-app-bd/bd/psn/psndoc/' + this.$root.$router.currentRoute.params.id,
          method: 'get'
        }).then((res) => {
          if (res.data.success) {
            this.originalValue = res.data.data;
            if(this.originalValue && this.originalValue.avatar === null) {
              this.originalValue.avatar = 'null';
            }
            if(this.originalValue) {
              this.currentValue = JSON.parse(JSON.stringify(this.originalValue));
              this.$nextTick(() => {
                if(this.$refs["staffFormRef"]) {
                  this.$refs["staffFormRef"].setData(
                    "psndoc",
                    JSON.parse(JSON.stringify(this.currentValue))
                  );
                } else {
                  this.$set(this.tplData, 'uitemplateFormData', JSON.parse(JSON.stringify(this.currentValue)));
                }
              });
            }
          } else {
            this.$message({
              message: res.data.data,
              type: 'error'
            });
          }
        }).catch((e) => {
          console.log(e);
          this.$message({
            message: '用户信息获取失败',
            type: 'error'
          });
        });
      },

      
      // 获取员工工作列表数据
      requestStaffWorkTableData() {
        this.$http({
          url: '/ifbp-app-bd/bd/psn/psnjob/pageList?pn=1&ps=10&sortColumn=auto&pkPsndoc=' + this.$root.$router.currentRoute.params.id,
          method: 'get'
        }).then((res) => {
          if (res.data.success) {
            var staffWorkList = JSON.parse(JSON.stringify(res.data.data.content));
            this.$nextTick(() => {
              if(this.$refs["staffWorkRef"]) {
                this.$refs["staffWorkRef"].setData(
                  "psnjob_t",
                  staffWorkList
                );
              } else {
                this.$set(this.staffWorkTableData, 'uitemplateTableData', staffWorkList);
              }
            });
          } else {
            this.$message({
              message: res.data.data,
              type: 'error'
            });
          }
        }).catch((e) => {
          console.log(e);
          this.$message({
            message: '用户工作信息获取失败',
            type: 'error'
          });
        });
      },

      /**
       *  一些控制页面状态的方法
       *  都在按钮上绑着
       **/
      // 返回list页面
      backInfo() {
        this.$context.destroyCurrentTile();
        this.$router.push('/staff');
      },
      // 详情变为可编辑态
      setStaff() {
        this.staffEdit = true;
      },
      setRecord() {
        this.recordEdit = true;
      },
      cancalStaff() {
        this.staffEdit = false;
        this.$refs.staffFormRef.setData(
          "psndoc",
          JSON.parse(JSON.stringify(this.originalValue))
        );
        this.staffEditIcons[0].show = true;
      },
      /**
       *  修改员工信息
       *
       **/
      // 确认修改
      confirmStaff(){
        this.$refs.staffFormRef.getFormComp().validate((valid) => {
          if(valid) {
            var submitData = this.$refs.staffFormRef.getData("psndoc");
            this.$http({
              url: '/ifbp-app-bd/bd/psn/psndoc/update',
              method: 'put',
              data: submitData,
            }).then((res) => {
              if (res.data.success) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                this.staffEdit = false;
                this.staffEditIcons[0].show = true;
              } else {
                this.$message({
                  message: res.data.error.errorMessage,
                  type: 'error'
                });
              }
            }).catch(() => {
              this.$message({
                message: '用户信息更新失败',
                type: 'error'
              });
            });
          }else {
            // 验证失败
          }
        });

      },

      ////////
      workEditTableRow(scope){
        this.$refs.staffWorkRef.tableShow = true;
        this.$refs.staffWorkRef.getTableComp().expandRow(scope.row);
        this.$refs.staffWorkRef.formShow = false;
        var row = JSON.parse(JSON.stringify(scope.row));
        this.$refs.staffWorkRef.setFormData(row);
        // 处理是否主职字段
        this.$refs.staffWorkRef.comp.ismainjobCheckedList = row.ismainjob.split(",");
        // 所在部门根据任职公司级联
        if(row.pk_org) {
          this.$refs.staffWorkRef.setData("pk_dept_queryparams", {pk_corp: row.pk_org});
        }
        // 备份数据
        // this.staffWorkBaseData = row;
        this.staffWorkEditIndex = scope.$index;
      },
      
      //////
      workDeleteTableRow(scope) {
        console.log('delete', scope.row);
        this.delDialogVisible = true;
        this.delId = scope.row.id;
      },

      ////////
      workFormConfirm(type) {
        this.$refs.staffWorkRef.validate((valid) => {
          if (valid) {
            var data = this.$refs.staffWorkRef.getFormData();
            data.pk_psndoc = this.$root.$router.currentRoute.params.id;
            var method, url;
            if (type === 'form') {
              method = 'post';
              url = '/ifbp-app-bd/bd/psn/psnjob/create';
            } else {
              method = 'put';
              url = '/ifbp-app-bd/bd/psn/psnjob/update';
            }

            this.$http({
              url: url,
              method: method,
              data: data
            }).then((res) => {
              if (res.data.success) {
                this.record_status = 'table';
                this.isNew = false;
                this.recordEdit = false;
                this.$refs.staffWorkRef.formShow = false;
                this.$refs.staffWorkRef.tableShow = true;
                this.requestStaffWorkTableData();
                this.$message({
                  message: '成功',
                  type: 'success'
                });
              } else {
                this.recordEdit = true;
                this.$message({
                  message: res.data.error.errorMessage,
                  type: 'error'
                });
              }
            }).catch(() => {
              if (this.isNew) {
                this.$message({
                  message: '工作记录新增失败',
                  type: 'error'
                });
              } else {
                this.$message({
                  message: '工作记录更新失败',
                  type: 'error'
                });
              }
              this.record_status = 'table';
            });
          } else {
            this.$message('校验未通过');
          }
        }, type);
      },

      workFormCancel(type) {
        if (type === "form") {
          this.$refs.staffWorkRef.tableShow = true;
          this.$refs.staffWorkRef.formShow = false;
          this.recordEdit = false;
        } else {
          this.$refs.staffWorkRef.getTableComp().closeExpandRow();
        }
      },

      deleteClick() {
        this.$http({
          url: '/ifbp-app-bd/bd/psn/psnjob/' + this.delId,
          method: 'delete'
        }).then((res) => {
          if (res.data.success === true) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.delDialogVisible = false;
            this.requestStaffWorkTableData();
          } else {
            this.$message({
              message: res.data.error.errorMessage,
              type: 'error'
            });
          }
        }).catch(() => {
          this.$message({
            message: '删除接口调用失败',
            type: 'error'
          });
        });
      }
    }
  };

</script>
<style scoped>
.button-area{
    box-sizing: border-box;
    height: 48px;
    margin-top: 6px;
    padding-top: 16px;
    text-align: right;
    border-top: 1px solid #E6E6EB;
}
</style>


