playlet/project/src/components/channelCode/createChanne...

<template>
  <div>
    <div class="backBox" @click="$router.go(-1)">
     <div class="back">
       <i class="el-icon-back"></i>
       <span>返回</span>
     </div>
   </div>
    <div v-loading="loading" class="bg-ffffff createMassMsg" style="padding: 15px 30px;">
      <div class="self-hint" style="margin-top:10px;width:730px">
        <i class="el-icon-message-solid"></i>
        <div>
          <div>1.新建渠道活码最多可发送10条消息（包含1条文字消息和9条附加消息）</div>
          <div>2.附加消息包括图片、连接、小程序</div>
          <div>3.渠道欢迎语将在客户加为好友后20秒内发送，网络延迟可能造成发送失败</div>
        </div>
      </div>
      <div class="line" style="margin-top:20px"></div>
      <h3 class="bigTitle">基础信息</h3>
      <div class="regulations">
        <label><em>*</em>渠道名称</label>
        <el-input placeholder="请输入渠道名称" style="width:300px" v-model.trim="channelName"
                  maxlength="32"
                  show-word-limit
                  clearable size="small"></el-input>
      </div>
      <div class="regulations" style="align-items: center">
        <label><em style="opacity: 0;">*</em>选择分组</label>
        <el-select v-model="group_val" size="small" clearable filterable placeholder="请选择分组" style="width: 300px">
          <el-option
            v-for="item in groupArrs"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        <div class="newGroupCss" @click="$refs.dialogGroupRef.dialogVisible = true">新建分组</div>
      </div>
      <div class="regulations">
        <label><em>*</em>使用客服</label>
        <self-customerservice v-if="detialFlag" title='' width="300px"
                              source="channelCode"
                              ref="selfKefu"
                              :afferent_users='user_id_list'
                              @customerDefine="(val,arrName)=>{user_id_list=val;user_idName=arrName}" style="margin:0;"></self-customerservice>
      </div>
      <div class="regulations">
        <label><em style="opacity: 0;">*</em>选择标签</label>
        <enterprise-tag v-if="detialFlag" title="" width="300px"
                        ref="tagRef"
                        :afferent_obj='afferent_tag_obj'
                        :reset='resetFlag' @tagDefine="tagDefine" style="margin:0;"></enterprise-tag>
      </div>
      <div class="regulations">
        <label><em>*</em>渠道欢迎语</label>
        <edit-con v-if="detialFlag" source="welcom"
                  :afferent_content='main_msg_data.content'
                  :afferent_attachments='main_msg_data.attachments'
                  @editContent="(val)=>{main_msg_data.content = val}"
                  @changeAttachment='getAttachment'></edit-con>
      </div>
      <h3 class="bigTitle" style="margin-top:20px">
        分时段欢迎语:
        <el-switch v-model="is_day_parting"
                   @change="switchChange" active-color="#13ce66"
                   inactive-color="#ddd"></el-switch>
      </h3>
      <template v-if="is_day_parting">
        <div class="self-hint" style="margin-top:10px;width:750px;margin-left:70px;margin-top:20px">
          <p>分时段欢迎语 ：</p>
          <div>
            <p>1、员工上下班不同时间段可设置不同欢迎语；</p>
            <p>2、分时段之外的时间将发送欢迎语。</p>
          </div>
        </div>
        <div class="regulations regulations2" v-for="(item,index) in timeIntervalList" :key="item.key_val">
          <label style="margin-top:30px;text-align:right">时段{{index+1}}：</label>
          <welcom-edit :deleteFlag='timeIntervalList.length==1?false:true'
                       :editInfo="item"
                       @welcomEditCon='(val)=>{getWelcomEdit(val,index)}'
                       @deleteWelcomCon='deleteWelcomCon(item.key_val,item)'></welcom-edit>
        </div>
        <div class="add_welcom_hint" @click="addWelcom">
          <i class="el-icon-circle-plus-outline"></i>
          <span>添加分时段欢迎语</span>
        </div>
      </template>
      <div class="line" style="margin-top:20px"></div>
      <h3 class="bigTitle" style="margin-top:20px">高级设置: </h3>
      <div class="regulations">
        <label><em>*</em>客户备注</label>
        <customerNote v-if="detialFlag" :propsVal="{'noteVal':customerNote_val,'radioval':customer_prefix_type}"
                      @changeVal="(noteVal,radioVal)=>{customerNote_val=noteVal;customer_prefix_type=radioVal}"></customerNote>
      </div>

      <div class="regulations" style="align-items: center">
        <label>客服添加上限</label>
        <div @click="tipsClick" class="limitBox">
          <el-switch v-model="add_limit"
                     :disabled="user_id_list&&user_id_list.length==0"
                     @change="switchLimit" active-color="#13ce66"
                     inactive-color="#ddd"></el-switch>
        </div>
      </div>

      <div v-if="add_limit&&detialFlag">
        <div class="regulations">
          <label><em>*</em>预警人</label>
          <customerServiceCorp title=''
                               :afferent_users='warn_user'
                               :icon_arrow_bg='false'
                               width="300px"
                               style="margin:0;width:100%"
                               @customerDefine="(val)=>{get_djuser_list=val}"></customerServiceCorp>
        </div>
        <div class="listBox">
          <el-button type="primary" size="mini" @click="batch_setting" style="margin: 5px 0">批量设置</el-button>
          <el-table v-loading="loading" ref="multipleTable"
                    border
                    :data="tableData"
                    tooltip-effect="dark"
                    @selection-change="handleSelectionChange"
                    :header-cell-style="()=>{return { backgroundColor: '#f9f9f9 !important' }}"
                    style="width: 100%">
            <el-table-column width="40px" type="selection"></el-table-column>
            <el-table-column label="全部成员" align="center">
              <template slot-scope="scope">
                <div>{{scope.row.name ? scope.row.name : '-'}}</div>
              </template>
            </el-table-column>
            <el-table-column label="每日添加客户上限" align="center">
              <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.toplimit"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="今日添加客户数" align="center">
              <template slot-scope="scope">
                <div>{{scope.row.assign_count||scope.row.assign_count==0 ? scope.row.assign_count : '-'}}</div>
              </template>
            </el-table-column>
            <el-table-column label="是否分配客户" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.is_open"
                           :active-value="1"
                           :inactive-value="0"
                           active-color="#13ce66"
                           inactive-color="#ddd"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="80px">
              <template slot-scope="scope">
                <div class="c-00B38A pointer lMar8" @click="deleKefu(scope.row.user_id)">删除</div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog
          title="设置添加上限"
          :center="true"
          :visible.sync="dialogVisible"
          width="20%">
          <div style="display: flex;align-items: center;justify-content: center">
            <div>每日添加客户上限: </div>
            <div style="width: 100px;margin-left: 20px"><el-input size="mini" v-model="batchVal"></el-input></div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
            <el-button size="mini" type="primary" @click="batchValSave">确 定</el-button>
          </span>
        </el-dialog>
      </div>

<!--      <addLimit v-if="add_limit&&detialFlag"-->
<!--                :user_id_list="user_id_list"-->
<!--                :afferentVal="afferent_limit"-->
<!--                :afferent_warn_val="warn_user"-->
<!--                @deleUserId="(val)=>{deleUserId(val)}"-->
<!--                @getTableData="(val)=>{afferent_limit=val}"-->
<!--                @getVal="(val)=>{warn_user=val}"></addLimit>-->

      <div class="line" style="margin-top:20px"></div>
      <div style="margin-top: 20px">
<!--        <el-button type="primary" @click="newCode_click">{{$route.query.id ? ($route.query.type =='copy' ? '复制' : '编辑') : '新建'}}活码</el-button>-->
        <el-button type="primary" @click="newCode_click">保存</el-button>
      </div>
    </div>

    <dialogGroup
      ref="dialogGroupRef"
      @init="initGroupList"
      :propsData="{
      dialogTitle:'新建'
    }"></dialogGroup>
  </div>
</template>

<script>
import dialogGroup from './dialogGroup.vue'
// import addLimit from './addLimit.vue'
import customerNote from './customerNote.vue'
import selfCustomerservice from '@/components/assembly/screen/customerService.vue'
import enterpriseTag from '@/components/assembly/screen/enterpriseTagFC.vue'
import editCon from '@/components/assembly/editCon.vue'
import welcomEdit from '@/components/assembly/welcom_edit.vue'
import customerServiceCorp from '@/components/assembly/screen/customerServiceCorp.vue'
export default {
  name: "createChannelCode",
  components:{
    dialogGroup,
    selfCustomerservice,
    enterpriseTag,
    editCon,
    welcomEdit,
    // addLimit,
    customerNote,
    customerServiceCorp
  },
  data(){
    return{
      loading:false,
      channelName:'',
      is_day_parting: false,
      group_val:'',
      groupArrs:[],
      user_id_list: [],
      user_idName: [],
      afferent_tag_obj: {
        tag_id_list: []
      },
      resetFlag: false,
      init_welcom_con: {
        is_day_parting: 1,//是否为分时段欢迎语 0:否 1:是
        weeks: [1, 2, 3, 4, 5, 6, 0],
        start_time: '',
        end_time: '',
        content: '',
        attachments: [],
        msg_id:''
      },
      main_msg_data: {
        "is_day_parting": 0,
        "weeks": [],
        "start_time": "",
        "end_time": "",
        "content": '',
        "attachments": []
      },
      deleteTimeIntervalList: [],//删除的分时段列表
      timeIntervalList: [],//分时段列表
      add_limit:false,
      customerNote_val:'',
      customer_prefix_type:'',
      warn_user:[],
      tag_info:[],
      detialFlag:false,
      afferent_limit:[],

      tableData:[],
      noChooseFlag:false,
      user_ids:[],
      dialogVisible:false,
      batchVal:'',
      get_djuser_list: []
    }
  },
  watch:{
    user_id_list:{
      immediate:false,
      handler(newVal,oldVal){
        if(this.user_id_list&&this.user_id_list.length==0){
          this.add_limit=false
        }else{
          // this.add_limit=true
          let uids=[]
          let new_table_data=[]
          this.tableData.forEach(item=>{
            uids.push(item.user_id)
          })
          this.user_id_list.forEach((user,uidx)=>{
            let idx = uids.indexOf(user)
             if(idx>-1){
               new_table_data.push(this.tableData[idx])
             }else{
               new_table_data.push({
                 toplimit:'',
                 user_id:user,
                 assign_count:0,
                 is_open:1,
                 name:this.user_idName[uidx]
               })
             }
          })
          this.tableData = new_table_data
        }
      }

    },
  },
  created(){
    this.initGroupList()

  },
  methods:{
    deleKefu(user_id){
      this.tableData.forEach((item,idx)=>{
        if(user_id == item.user_id){
          this.tableData.splice(idx,1)
        }
      })
      // this.$emit('deleUserId',user_id)
      this.deleUserId(user_id)
    },
    batchValSave(){
      if(this.batchVal==''){
        this.$message({
          type: 'error',
          message: '上限不能为空!'
        });
        return
      }
      this.user_ids.forEach((item,idx)=>{
        item.toplimit = this.batchVal
      })
      this.dialogVisible = false
    },
    noChooseCustomeTips(){//没有选择客户提示
      this.noChooseFlag = false
      if( this.user_ids){
        if(this.user_ids.length==0){
          this.$message({
            type: 'error',
            message: '请选择成员!'
          });
          this.noChooseFlag = true
        }
        if(this.user_ids.length>=4){
          this.$message({
            type: 'error',
            message: '最多可选3个成员!'
          });
          this.noChooseFlag = true
        }
      }

    },
    handleSelectionChange(val){//列表选择人员
      this.user_ids = val
    },
    batch_setting(){//批量设置
      this.noChooseCustomeTips()
      if(this.noChooseFlag){return}
      this.dialogVisible = true
    },
    goDataAanlyse(id){
      this.$router.push('/dataAnalyse/'+id)
    },

    //分割线,以上是客服上限

    deleUserId(id){
      this.user_id_list.splice(this.user_id_list.indexOf(id),1)
      this.$refs.selfKefu.afferent_init()
    },
    initGroupList(){//分组列表
      this.loading = true;
      this.$axios.get(this.URL.BASEURL + this.URL.channel_groupList, {
        params:{
          page: 1,
          pagesize: 500,
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          this.groupArrs = res.rst.data
          if (this.$route.query.id) {//详情
            this.detail()
          } else {
            this.detialFlag = true
            this.loading = false;
          }
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
          this.loading = false
        }
      })
    },
    detail () {//详情
      this.loading = true
      this.$axios.get(this.URL.BASEURL + this.URL.channel_codeDetial, {
        params: {
          id: this.$route.query.id
        }
      }).then((res) => {
        var res = res.data
        if (res && res.errno == 0) {
          let dataInfo = res.rst
          this.channelName = dataInfo.name;
          this.customerNote_val = dataInfo.customer_prefix
          this.customer_prefix_type = dataInfo.customer_prefix_type

          let groupIds = []
          this.groupArrs.forEach(item=>{
            groupIds.push(Number(item.id))
          })
          if(groupIds.indexOf(Number(dataInfo.group_id))>-1){
            this.group_val = Number(dataInfo.group_id)
          }else{
            this.group_val = ''
          }

          if(dataInfo.staff_users&&dataInfo.staff_users.length>0){
            dataInfo.staff_users.forEach(item=>{
              this.user_id_list.push(item.user_id)
              // this.afferent_limit.push({
              //   toplimit:item.toplimit,
              //   user_id:item.user_id,
              //   assign_count:item.user_add_count,
              //   is_open:item.is_open
              // })
              this.tableData.push({
                toplimit:item.toplimit,
                user_id:item.user_id,
                name:item.staff_name,
                assign_count:item.user_add_count,
                is_open:item.is_open
              })
            })
          }

          if(dataInfo.up_toplimit==1){
            this.add_limit = true
            if(JSON.parse(dataInfo.warn_user)&&JSON.parse(dataInfo.warn_user).length>0){
              this.warn_user = JSON.parse(dataInfo.warn_user)
              this.get_djuser_list = JSON.parse(dataInfo.warn_user)
            }
          }else{
            this.add_limit = false
          }

          this.afferent_tag_obj.tag_id_list = JSON.parse(dataInfo.tag_list)
          this.tag_info = JSON.parse(dataInfo.tag_list)

          let msg_list = dataInfo.welcomeMsg;
          msg_list.forEach((item) => {
            item.content = item.content ? item.content.replace('%NICKNAME%', '「客户昵称」') : '';
            item.attachments = item.attachments && item.attachments != '' ? JSON.parse(item.attachments) : [];
            if(item.weeks){
              item.weeks = item.weeks.split(',')
            }else{
              item.weeks = []
            }
            // item.weeks = item.weeks ? item.weeks.split(',') : []
          })
          let main_msg_data = msg_list.filter((v) => {//特定有一个主欢迎语内容
            return v.is_day_parting == 0
          })
          this.main_msg_data = main_msg_data && main_msg_data.length > 0 ? main_msg_data[0] : {};

          this.timeIntervalList = msg_list.filter((v) => {//分时段欢迎语内容
            return v.is_day_parting == 1
          })

          if (msg_list.length > 1) {
            this.is_day_parting = true
          }
          this.detialFlag = true//等待详情接口加载完毕后,再加载子组件created,否则无数据
          this.loading = false
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
          this.$router.go(-1)
        }
      }).catch((err) => {
        this.loading = false
      });
    },
    tipsClick(){//添加客服上限前的提示
      if(this.user_id_list&&this.user_id_list.length==0){
        this.$message({
          type: 'error',
          message: '请先选择使用客服!'
        })
      }
    },
    newCode_click(){//新建活码
      if(this.channelName == ''){
        this.$message({
          type: 'error',
          message: '渠道名称不能为空!'
        });
        return
      }
      if(this.user_id_list&&this.user_id_list.length==0){
        this.$message({
          type: 'error',
          message: '使用客服不能为空!'
        });
        return
      }
      if(this.customerNote_val==''){
        this.$message({
          type: 'error',
          message: '客户备注不能为空!'
        });
        return
      }
      if (this.main_msg_data.content == '' && (!this.main_msg_data.attachments || this.main_msg_data.attachments == '' || this.main_msg_data.attachments.length == 0)) {
        this.$message({
          message: '请输入【主】欢迎语内容！',
          type: "warning"
        })
        return
      }
      if (this.main_msg_data.content != '' && this.$getStrBytes(this.main_msg_data.content) > 4000) {
        this.$message({
          message: '请检查【主】欢迎语内容，最多4000个字节，已超出！',
          type: "error"
        })
        return
      }
      if(this.add_limit){
        if(this.get_djuser_list&&this.get_djuser_list.length==0){
          this.$message({
            message: '预警人不能为空',
            type: "error"
          })
          return
        }
      }

      let warn_user_json = []//预警人
      this.get_djuser_list.forEach(item=>{
        warn_user_json.push({
          corpid:item.corpid,
          user_id:item.user_id
        })
      })

      let user_json=[]//客服数据
      if(this.add_limit){//如果有客服上限
        // user_json = this.afferent_limit
        user_json = this.tableData
      }else{
        this.user_id_list.forEach(item=>{
          user_json.push({
            toplimit:0,
            is_open:1,
            user_id:item
          })
        })
      }
      //时段欢迎语和分时段欢迎语
      let msg_data = []

      if (this.is_day_parting) {//开启分段欢迎语
        for (let i = 0; i < this.timeIntervalList.length; i++) {
          let item = this.timeIntervalList[i];
          if (item.content == '' && (!item.attachments || item.attachments == '' || item.attachments.length == 0)) {
            this.$message({
              message: `请输入【时段${i + 1}】欢迎语内容！`,
              type: "warning"
            })
            return
          }
          if (item.content != '' && this.$getStrBytes(item.content) > 4000) {
            this.$message({
              message: `请检查【时段${i + 1}】欢迎语内容，最多4000个字节，已超出！`,
              type: "error"
            })
            return
          }
          if (!item.weeks || item.weeks.length == 0) {
            this.$message({
              message: `请选择【时段${i + 1}】发送日期！`,
              type: "warning"
            })
            return
          }
          if (!item.start_time || item.start_time == '') {
            this.$message({
              message: `请输入【时段${i + 1}】发送开始时间！`,
              type: "warning"
            })
            return
          }
          if (!item.end_time || item.end_time == '') {
            this.$message({
              message: `请输入【时段${i + 1}】发送结束时间！`,
              type: "warning"
            })
            return
          }
          if (this.$date_compatible(('2020-04-01 ' + item.start_time)).getTime() > this.$date_compatible(('2020-04-01 ' + item.end_time)).getTime()) {
            this.$message({
              message: `请正确输入【时段${i + 1}】发送时间！`,
              type: "warning"
            })
            return
          }
        }
        if(this.$route.query.type =='copy'){ //复制的时候，清空id
          this.timeIntervalList.forEach(timeItem=>{
            timeItem.id=''
            timeItem.msg_id=''
            timeItem.sq_id=''
          })
        }
        msg_data = msg_data.concat(this.timeIntervalList)
      } else {//关闭分段欢迎语

        let delete_arr = JSON.parse(JSON.stringify(this.timeIntervalList));
        delete_arr = delete_arr.filter((v) => {
          return v.msg_id
        })
        delete_arr.forEach((item) => {
          item.operate = 'del'
        })
        this.deleteTimeIntervalList = this.deleteTimeIntervalList.concat(delete_arr)
      }
      msg_data = msg_data.concat(this.deleteTimeIntervalList);//删除的分时段内容

      if(this.$route.query.type =='copy'){//复制的时候，清空id
        this.main_msg_data.id=''
        this.main_msg_data.msg_id=''
        this.main_msg_data.sq_id=''
      }
      msg_data.push(this.main_msg_data)
      msg_data.forEach((item) => {
        if(item.weeks&&item.weeks.length>0){
          if(typeof item.weeks == 'string'){
            item.weeks = item.weeks.split(',')
          }
          let now_weeks=''
          item.weeks.forEach(n=>{
            now_weeks += n +','
          })
          item.weeks = now_weeks.slice(0,now_weeks.length-1)
        }else{
          item.weeks = ''
        }
        item.content = item.content.replaceAll('「客户昵称」', '%NICKNAME%')
        item.attachments = item.attachments == '' || item.attachments&&item.attachments.length == 0 ? '' : JSON.stringify(item.attachments)
      })
      this.$loading(this.$loadingConfig)

      let api
      if(!this.$route.query.type&&this.$route.query.id){
        api = this.URL.channel_codeEdit
      }else{
        api = this.URL.channel_createCode
      }
      this.$axios.post(this.URL.BASEURL + api, {
        id: this.$route.query.id ? (this.$route.query.type =='copy' ? '' : this.$route.query.id) : '',
        name: this.channelName,
        group_id:this.group_val,
        user_json:JSON.stringify(user_json),
        tag_list:JSON.stringify(this.tag_info),
        customer_prefix:this.customerNote_val,
        customer_prefix_type:this.customer_prefix_type,
        msg_data: msg_data,
        warn_user:JSON.stringify(warn_user_json),
        up_toplimit:this.add_limit ? 1 : 0
      }).then((res) => {
        var res = res.data
        this.$loading(this.$loadingConfig).close()
        if (res && res.errno == 0) {
          this.$router.go(-1)
        } else if (res.errno != 4002) {
          this.$message({
            message: res.err,
            type: "warning"
          })
        }
      this.welcomEditShow=true
      }).catch((err) => {
        this.$loading(this.$loadingConfig).close()
      });
    },
    tagDefine (data) {//标签选择回调
      if (data.tag_id_list && data.tag_id_list.length != 0) {
        this.tag_info = data.tag_id_list
      } else {
        this.tag_info = []
      }
    },
    getAttachment (val) {
      this.main_msg_data.attachments = val;
    },
    switchChange () {//分时段开关打开
      if (this.is_day_parting && this.timeIntervalList.length == 0) {
        let addMsg_id = new Date().getTime()
        let obj = {
          is_day_parting: 1,//是否为分时段欢迎语 0:否 1:是
          weeks: [1, 2, 3, 4, 5, 6, 0],
          start_time: '',
          end_time: '',
          content: '',
          attachments: [],
          key_val:addMsg_id,
        }
        this.timeIntervalList.push(obj)
      }
    },
    getWelcomEdit (val, index) {//分时段编辑
      this.$set(this.timeIntervalList, index, val)
    },
    deleteWelcomCon (key_val,item) {//删除分时段
      if (this.$route.query.id && item.msg_id) {//删除的分时段内容
        let obj = JSON.parse(JSON.stringify(item))
        obj.operate = 'del';
        this.deleteTimeIntervalList.push(obj)
      }
      this.timeIntervalList.forEach((item,index)=>{
        if(item.key_val == key_val){
          this.timeIntervalList.splice(index, 1)
        }
      })
    },
    addWelcom () {//添加分时段
      let addMsg_id = new Date().getTime()
      let obj = {
        is_day_parting: 1,//是否为分时段欢迎语 0:否 1:是
        weeks: [1, 2, 3, 4, 5, 6, 0],
        start_time: '',
        end_time: '',
        content: '',
        attachments: [],
        key_val:addMsg_id,
      }
      this.timeIntervalList.push(obj)
    },
    switchLimit(){
      if(this.user_id_list&&this.user_id_list.length==0){
        this.$message({
          type: 'error',
          message: '使用客服不能为空!'
        });
        return
      }

    }
  }
}
</script>
<style lang="scss">
.appendOnly{
  .el-input-group__append{
    padding: 0 20px;
  }
}
.limitBox{
  .el-switch.is-disabled .el-switch__core{
    cursor: pointer;
  }
}

</style>
<style lang="scss" scoped>
@import "../customOperate/create.scss";
.listBox{
  margin-left: 90px;
  width: 730px;
  margin-top: 10px;
  background-color: #fbfbfb;
  padding: 10px;
}
.newGroupCss{
  color: #00b38a;
  font-size: 14px;
  margin-left: 10px;
  cursor: pointer;
}
.add_welcom_hint {
  color: #00b38a;
  font-size: 16px;
  font-weight: bold;
  margin-left: 90px;
  margin-top: 10px;
  margin-bottom: 20px;
  cursor: pointer;
  display: inline-block;
}
</style>