<template>
  <div class="addCoupon">
    <div class="form-box" style="margin-top: 0">
      <div>
        <span style="color: rgb(64, 158, 255);cursor: pointer;margin-left: 20px" @click="cancel">优惠券管理</span>
        <span style="margin: 0 5px;color: #C0C4CC;">/</span>
        <span>优惠券发放</span>
      </div>
    </div>

    <div class="el-card__body" style="background-color: white; padding: 0px;margin-top: 20px">
      <el-form :model="msg" style="padding:0 20px;" :rules="rules" ref="msg" label-width="160px"  size="small">
        <el-tabs v-model="activeName"  style="padding: 15px 0">
          <el-tab-pane label="基础设置" name="first">
            <div class="form-body">
              <el-form-item label="卡券名称" prop="Name" class="is-required">
                <el-input v-model="msg.Name" />
              </el-form-item>
              <el-form-item label="优惠券类型" class="is-required">
                <el-radio-group v-model="msg.CouponType" @change="msg.DiscountsPrice = 0">
                  <el-radio :label="1">满减券</el-radio>
                  <el-radio :label="2">打折券</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="指定商品类别或商品" >
                <div style="display: flex;flex-direction: row;align-items: center">
                  <div @click="getUseType(1)" style="margin-right: 15px">
                    <el-radio :label="1" v-model="msg.UseType">指定商品类型</el-radio>
                  </div>
                  <div @click='getUseType(2)' style="margin-right: 15px">
                    <el-radio :label="2" v-model="msg.UseType">指定商品</el-radio>
                  </div>
                  <el-radio :label="3" v-model="msg.UseType" @change="getUseType2" style="margin-right: 15px">全场通用</el-radio>
                  <el-radio :label="4" v-model="msg.UseType" @change="getUseType2" >当面付</el-radio>
                </div>
                <div class="splist" v-if="msg.UseType==1">
                  <div v-for="(item,index) in AppointList" :label="item.ProductId" :key="index" style="margin-right: 20px;" class="el-tag el-tag--warning el-tag--plain">
                    <span>{{item.Name}}</span>
                    <i class="el-tag__close el-icon-close" @click="deleteProduct(item,index)"></i>
                  </div>
                </div>

                <div class="splist" v-if="msg.UseType==2">
                  <div v-for="(item,index) in commoditylist" :label="item.ProductId" :key="index" style="margin-right: 20px; position: relative; cursor: pointer;" >
                    <div class="app-image" :style="{backgroundImage:'url(' + domainManager().ImageUrl+item.CoverImage + ')',backgroundSize:'cover'}" ></div>
                    <i class="el-icon-error" style="position: absolute;right: -5px;top:-5px;color: #F56C6C;font-size: 20px" @click="deletecommod(index,1)"></i>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="最低消费金额（元）" prop="MinConsumePrice" class="is-required">
                <el-tooltip class="item" effect="dark" content="购物金额（不含运费）达到最低消费金额才可使用优惠券，无门槛优惠券请填0" placement="top"
                            style="position: absolute;left: -20px;top:10px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-input v-model="msg.MinConsumePrice" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"/>
              </el-form-item>

              <el-form-item label="优惠金额（元）" prop="DiscountsPrice" class="is-required" v-if="msg.CouponType==1">
                <el-tooltip class="item" effect="dark" content="优惠券只能抵消商品金额，不能抵消运费" placement="top"
                            style="position: absolute;left: -20px;top:10px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-input v-model="msg.DiscountsPrice" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''"/>
              </el-form-item>

              <el-form-item label="优惠折扣 " prop="DiscountsPrice" class="is-required" v-if="msg.CouponType==2">
                <el-input v-model="msg.DiscountsPrice" step="1"  min="0"  onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">
                  <template slot="append">折</template>
                </el-input>
              </el-form-item>
              <el-form-item label="优惠上限" v-if="msg.CouponType==2">
                <el-input v-model="msg.MaxDiscountsPrice" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\.\d{0,2})?/) ? this.value.match(/\d+(\.\d{0,2})?/)[0] : ''">
                  <template slot="prepend">最多优惠</template>
                  <template slot="append">元</template>
                </el-input>
              </el-form-item>

              <el-form-item label="卡券有效期" class="is-required">
                <el-radio-group v-model="msg.IndateType">
                  <el-radio :label="1">领取后N天内有效</el-radio>
                  <el-radio :label="2">时间段</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="有效天数" prop="IndateDay" class="is-required" v-if="msg.IndateType==1">
                <el-input v-model="msg.IndateDay" class="el-input--small" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\d{0,2})?/) ? this.value.match(/\d+(\d{0,2})?/)[0] : ''"/>
              </el-form-item>

              <el-form-item label="有效期范围" prop="value" class="is-required" v-if="msg.IndateType==2" >
                <el-date-picker
                  @input="daterangeChange"
                  style="padding: 3px 10px;width: 450px;height: 32px"
                  v-model.trim="msg.value"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  align="right">
                </el-date-picker>
              </el-form-item>

              <el-form-item label="可领取数量" prop="TotalNum" class="is-required">
                <el-tooltip class="item" effect="dark" content="可领取数量为0则无法领取或发放,-1为不限制张数" placement="top"
                            style="position: absolute;left: -16px;top:10px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-input v-model="msg.TotalNum" class="el-input--small" :disabled="checked" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\d{0,2})?/) ? this.value.match(/\d+(\d{0,2})?/)[0] : ''"/>
                <el-checkbox v-model="checked" @change="checked==true? msg.TotalNum=-1:msg.TotalNum=0">无限制</el-checkbox>
              </el-form-item>

              <el-form-item label="排序" prop="Sort" class="is-required">
                <el-tooltip class="item" effect="dark" content="排序按升序排列" placement="top"
                            style="position: absolute;left: -20px;top:10px">
                  <i class="el-tooltip el-icon-info"></i>
                </el-tooltip>
                <el-input v-model="msg.Sort" step="1"  min="0" onkeyup="this.value= this.value.match(/\d+(\d{0,2})?/) ? this.value.match(/\d+(\d{0,2})?/)[0] : ''"/>
              </el-form-item>
              <el-form-item label="使用说明">
                <el-input
                  type="textarea"
                  :rows="2"
                  v-model="msg.Describe">
                </el-input>
              </el-form-item>
            </div>
          </el-tab-pane>
          <el-tab-pane label="领取方式设置" name="second">
            <div class="form-body">
              <el-form-item label="领取方式">
                <el-checkbox v-model="huiyuan" @change="huiyuan==false? msg.OnlyMember=0:msg.OnlyMember=1">会员专享</el-checkbox>
                <el-checkbox v-model="zhongxin" @change="zhongxin==false? msg.PickupCenter=0:msg.PickupCenter=1">领券中心</el-checkbox>
              </el-form-item>
              <el-form-item label="会员专享" v-if="huiyuan==true">
                <div style="box-sizing: border-box;width: 100%;padding-left: 20px;height: 50px;line-height: 50px;">
                  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                </div>
                <div style="padding: 10px 25px 20px;">
                  <el-checkbox-group v-model="msg.MemberLevelList" @change="handleCheckedCitiesChange">
                    <el-checkbox style="margin-bottom:10px" v-for="city in cities" :label="city.Id" :key="city.Name">{{city.Name}}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </el-form-item>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-form>

    </div>
    <el-button type="primary" style="margin: 12px 0 " @click="preserve('msg')" :loading="loading">保存</el-button>

    <!--已指定商品类别选择-->
    <el-dialog title="已指定商品类别" :visible.sync="category" width="714px">
      <el-tree
        :data="ProductCategoryTreeList"
        show-checkbox
        default-expand-all
        node-key="Id"
        ref="tree"
        :default-checked-keys="checkedkeys"
        @check="TreeList"
        :props="defaultProps">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="category = false">取 消</el-button>
        <el-button type="primary" @click="getProductList">确 定</el-button>
      </div>
    </el-dialog>

    <!--已指定商品选择-->
    <el-dialog title="已指定商品" :visible.sync="commodity" width="1024px">
      <template>
        <button class="el-button el-button--primary el-button--small" style="float: right;" @click="addcommoditybtn">新增</button>
        <el-table
          :data="commoditylist"
          style="width: 984px">
          <el-table-column
            prop="Id"
            label="ID"
            width="80">
          </el-table-column>
          <el-table-column
            label="商品图"
            width="80">
            <template slot-scope="scope">
              <img style="width:50px;height:50px;margin-right:1px" :src="domainManager().ImageUrl+scope.row.CoverImage" alt="">

            </template>
          </el-table-column>
          <el-table-column
            prop="Name"
            label="商品名称"
            width="604">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
          >
            <template slot-scope="scope">
              <div class="cell">
                <button type="button" class="el-button el-button--danger el-button--mini is-plain" @click="deletecommod(scope,2)"><span>删除</span></button>
              </div>
            </template>
          </el-table-column>
        </el-table>

      </template>

    </el-dialog>
    <!--选择的商品列表-->
    <el-dialog title="添加商品" :visible.sync="addcommodity" width="1024px">
      <template>
          <div class="el-form-item">
            <div class="el-form-item__content" >
              <div class="el-input el-input--small" style="width: 40%;" >
                <input type="text" autocomplete="off" placeholder="商品名称" class="el-input__inner" v-model="msg2.Name"
                      @clear="msg2.pageIndex=1,getProductGoodsPageList()"
                      @keyup.enter.native="msg2.pageIndex=1,getProductGoodsPageList()"
                >
              </div>
              <button type="button" class="el-button el-button--default el-button--small" style="margin-left: 15px" @click="msg2.pageIndex=1,getProductGoodsPageList()">查找商品</button>
              <button class="el-button el-button--default el-button--small" style="float: right;"  @click="batchAdd">批量添加</button>
            </div>
          </div>


        <el-table
          v-loading="loading_t"
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width: 984px">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="Id"
            label="ID"
            width="80">
          </el-table-column>
          <el-table-column
            label="商品图"
            width="80">
            <template slot-scope="scope">
              <img style="width:50px;height:50px;margin-right:1px" :src="domainManager().ImageUrl+scope.row.CoverImage" alt="">

            </template>
          </el-table-column>
          <el-table-column
            prop="Name"
            label="商品名称"
            width="333">
          </el-table-column>
          <el-table-column
            prop="address"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="primary" plain size="mini" @click="addtableData(scope)" :disabled="scope.row.disabled">{{scope.row.disabled==true? '已添加':'添加'}}</el-button>

            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align:right"
              background
              @current-change="handleCurrentChange"
              :page-size="msg2.pageSize"
              layout="prev, pager, next"
              :current-page.sync="msg2.pageIndex"
              :total="count">
        </el-pagination>
      </template>

    </el-dialog>

  </div>
</template>

<script>
    export default {
        name: "addCoupon",
      data(){
          return{
              msg:{
                ID:0,
                Name:'',
                CouponType:1,
                UseType:3,
                MinConsumePrice:0,
                DiscountsPrice:0, //优惠金额/折扣
                MaxDiscountsPrice:0,
                IndateDay:1,
                IndateType:1,
                TotalNum:-1,
                Sort:100,
                Describe:'',
                OnlyMember:0,
                PickupCenter:1,
                MemberLevelList:[],
                ProductList:[],//指定商品类型的数组
                StartDate:'',
                EndDate:'',
                value:[],
              },
            checkedkeys:[],//默认选中的
            huiyuan:false,
            zhongxin:true,
            checked:true,
            loading:false,
            activeName:'first',
            commodity:false,
            addcommodity:false,
            rules:{
              Name:[
                {required: true, message: "优惠券名称不能为空", trigger: "blur"}
              ],
              MinConsumePrice:[
                {required: true, message: "最低消费金额不能为空", trigger: "blur"}
              ],
              DiscountsPrice:[
                { validator: this.DiscountsPrice, trigger: 'blur' }
              ],
              IndateDay:[
                {required: true, message: "优惠券有效天数不能为空", trigger: "blur"}
              ],
              TotalNum:[
                {required: true, message: "发放总数不能为空", trigger: "blur"}
              ],
              Sort:[
                {required: true, message: "排序必须在9位整数内", trigger: "blur"}
              ],
              value:[
                { type: 'array', required: true, message: '优惠券有效期不能为空', trigger: 'change' }

              ]
            },
            cityOptions:[],
            cities: [],
            checkAll: false,
            isIndeterminate: false,
            category:false,
            ProductCategoryTreeList:[],
            commoditylist:[],//商品的list
            AppointList:[],//指定商品分类
            defaultProps: {
              children: 'ChildList',
              label: 'Name'
            },
            eData:{},
            msg2:{
              pageIndex:1,
              pageSize:15,
              Name:'',
              GoodsStatus:0,
              IsSelectSellOut:0,
              CategoryIds:'',
              Id:0,
              StartTime:'',
              EndTime:'',
            },
            tableData:[],
            loading_t:false,
            count:0,
            multipleSelection:[],
            AppointList2:[],
          }
      },
      created(){
        this.getMemberGradeList()



      },
      methods:{
        getMemberGradeList(){
          this.cityOptions=[];
          this.apipost("/api/User/GetMemberGradeList",{}, res => {
            this.cities=res.data.data;
            let data=res.data.data;
            data.forEach(item=>{
              this.cityOptions.push(item.Id)
            })

          })
          this.getProductCategoryTreeList()

        },
        getDiscountCouponDetail(ID){
          this.apipost("/api/Coupon/GetDiscountCouponDetail",{'ID':ID} , res => {
            if (res.data.resultCode == 1) {
              this.msg = res.data.data
              this.msg.value = []
              if(res.data.data.IndateType==2){
                this.msg.value.push(res.data.data.StartDate.replace("T", " "))
                this.msg.value.push(res.data.data.EndDate.replace("T", " "))
              }
              if(res.data.data.TotalNum!=-1){
                this.checked=false
              }
              if(res.data.data.OnlyMember==0){
                this.huiyuan=false
              }else {
                this.huiyuan=true
              }
              if(res.data.data.PickupCenter==0){
                this.zhongxin=false
              }else {
                this.zhongxin=true
              }
              this.msg.MemberLevelList=res.data.data.MemberLevelList?res.data.data.MemberLevelList:[];
              if(this.msg.MemberLevelList){ //设置全选状态
                if(this.msg.MemberLevelList.length == this.cities.length){
                    this.checkAll=true
                }

              }
             if(res.data.data.UseType==1){
                let ProductList = res.data.data.ProductList;
                let newData = []
               for(let i= 0;i<ProductList.length;i++){
                  this.checkedkeys.push(ProductList[i].ProductId)
                  for(let j=0;j<this.ProductCategoryTreeList.length;j++){
                    if(ProductList[i].ProductId == this.ProductCategoryTreeList[j].Id){
                      newData.push(this.ProductCategoryTreeList[j])
                    }
                    if(this.ProductCategoryTreeList[j].ChildList.length>0){
                      this.getReturn(ProductList[i],this.ProductCategoryTreeList[j].ChildList)
                    }
                  }
                }
                this.AppointList = this.AppointList2.concat(newData)

             }
              if(res.data.data.UseType==2){
                let ProductList = res.data.data.ProductList;
                let newData = []
                for(let i= 0;i<ProductList.length;i++){
                  for(let j=0;j<this.tableData.length;j++){
                    if(ProductList[i].ProductId == this.tableData[j].Id){
                      newData.push(this.tableData[j])
                    }
                  }
                }
                this.commoditylist = newData
              }
            } else {
              this.Info(res.data.message);
            }
          })
        },
        getReturn(ProductList,data){
            for(let i=0;i<data.length;i++){
              if(ProductList.ProductId == data[i].Id){
                  this.AppointList2.push(data[i])
              }
              if(data[i].ChildList.length>0){
                this.getReturn(ProductList,data[i].ChildList)
              }
            }

        },
        getProductCategoryTreeList(){
          this.apipost("/api/AppletGoods/GetProductCategoryTreeList",{}, res => {

            if (res.data.resultCode == 1) {
                  this.ProductCategoryTreeList = res.data.data
              this.getProductGoodsPageList()
            } else {
              // this.Info(res.data.message);
            }

          })
        },
        getProductGoodsPageList(){
          this.loading_t =true
          this.apipost("/api/product/GetProductGoodsPageList", this.msg2, res => {
            this.loading_t=false;
            if(res.data.resultCode==1){
              let pageData= res.data.data.pageData;
              for(let i= 0;i<pageData.length;i++){
                pageData[i].disabled=false
              }
                this.tableData = pageData
                this.count = res.data.data.count
            }

            setTimeout(()=>{
              if(this.$route.query.ID){
                this.getDiscountCouponDetail(this.$route.query.ID)
              }
            },10)

          })
        },
        cancel(){
          this.$router.go(-1)
        },
        DiscountsPrice(rule, value, callback) {
          if(this.msg.CouponType==1){
            if(value>0){
              return callback();
            }else {
              return callback(new Error('优惠金额需大于零'));
            }
          }else {
            if(value>=0.1 && value<=10){
              return callback();
            }else  {
              return callback(new Error('优惠折扣范围为0.1~10'));

            }
          }
        },
        handleCheckAllChange(val) {
          this.msg.MemberLevelList = val ? this.cityOptions : [];
          this.isIndeterminate = false;
        },
        handleCheckedCitiesChange(value) {
          let checkedCount = value.length;
          this.checkAll = checkedCount === this.cities.length;
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },

        addtableData(data){
          this.tableData[data.$index].disabled=true;
          this.commoditylist.push(data.row)
          this.Success('添加成功');

        },
        batchAdd(){ //批量添加
          let newdata=[]
          for(let i=0;i<this.multipleSelection.length;i++){
            if(this.commoditylist.length>0){
              for(let j=0;j<this.commoditylist.length;j++){
                if(this.multipleSelection[i].Id!=this.commoditylist[j].Id){
                  newdata.push(this.multipleSelection[i])
                  for(let z =0;z<this.tableData.length;z++){
                    if(this.tableData[z].Id==this.multipleSelection[i].Id){
                      this.tableData[z].disabled=true;
                      break
                    }
                  }
                }
              }
            }else {
              newdata.push(this.multipleSelection[i])
              for(let z =0;z<this.tableData.length;z++){
                if(this.tableData[z].Id==this.multipleSelection[i].Id){
                  this.tableData[z].disabled=true;
                  break

                }
              }
            }

          }

          if(newdata.length>0){
            this.Success('添加成功');
          }
          this.commoditylist =  this.commoditylist.concat(newdata)
        },
        addcommoditybtn(){
          this.addcommodity=true;
          for(let i=0;i<this.tableData.length;i++){
            this.tableData[i].disabled= false;
            for(let j=0;j<this.commoditylist.length;j++){
              if(this.commoditylist[j].Id== this.tableData[i].Id){
                this.tableData[i].disabled=true
              }

            }
          }
        },
        deletecommod(data,type){
          if(type==1){
            this.commoditylist.splice(data,1)

          }else {
            this.commoditylist.splice(data.$index,1)

          }
        },
        handleSelectionChange(val) {

          this.multipleSelection=val
        },
        getUseType(val){
          if(val ==1){
            this.category=true;
            this.$nextTick(() => {//在弹出dialog之前执行$nextTick回调函数，确保el-tree已经渲染
              this.$refs.tree.setCheckedKeys(this.checkedkeys);
            });
          }else if(val==2){
            this.checkedkeys=[]
            this.commodity =true
          }
        },
        daterangeChange(e){
          let _this =this
          _this.$nextTick(() => {
            _this.$set(_this.msg, "value", [e[0], e[1]]);
            _this.$forceUpdate();
          });
        },
        getUseType2(){
          this.checkedkeys=[]
        },
        deleteProduct(item,index){
          this.AppointList.splice(index,1)
          for(let i = 0;i<this.checkedkeys.length;i++){
            if(this.checkedkeys[i]==item.ProductId){
              this.checkedkeys.splice(i,1)
            }
          }
        },
        handleCurrentChange(val) {
          this.msg2.pageIndex = val;
          this.getProductGoodsPageList();
        },
        TreeList(val,e){
            this.eData = e
        },
        preserve(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.loading= true
              if(this.msg.IndateType==2){
                this.msg.StartDate=this.msg.value[0];
                this.msg.EndDate=this.msg.value[1];
                this.msg.IndateDay=0
              }
              if(this.msg.UseType==2){
                let ProductList= []
                for(let i = 0;i<this.commoditylist.length;i++){
                  ProductList.push({'ProductId':this.commoditylist[i].Id,})
                }
                this.msg.ProductList =ProductList
              }else if(this.msg.UseType==1){
                let ProductList= []
                for(let i = 0;i<this.AppointList.length;i++){
                  ProductList.push({'ProductId':this.AppointList[i].ProductId,})
                }
                this.msg.ProductList =ProductList
              }
              this.apipost("/api/Coupon/AddOrUpdateDiscountCoupon",this.msg , res => {
                this.loading= false
                if (res.data.resultCode == 1) {
                  this.Success(res.data.message);
                  this.$router.go(-1);//返回上一层

                } else {
                  this.Info(res.data.message);
                }
              })
            } else {
              return false;
            }
          });
        },
        getProductList(){

          this.category = false;
          let e = this.eData;
          let ProductList = this.msg.ProductList;
          ProductList=[]
          this.checkedkeys = e.checkedKeys;
          if(e.checkedNodes.length>0){
            for(let i= 0;i<e.checkedNodes.length;i++){
              if(e.checkedNodes[i].ChildList.length==0){
                ProductList.push({'ProductId':e.checkedNodes[i].Id,'Name':e.checkedNodes[i].Name})
              }
            }
          }
          this.AppointList= ProductList
        },


      },
      mounted(){

      }
    }
</script>

<style >
  .addCoupon .form-box {
    background: #fff;
    padding: 20px 50% 20px 0;
    margin-top: 10px;
  }
  .addCoupon .el-input--small .el-input__inner{
    height: 32px;
    line-height: 32px;
  }
  .addCoupon .img_yuan{
    width: 80px;
    height: 80px;
    margin-top: 5px;
    position: relative;
  }
  .addCoupon .img_yuan img{
    width: 100%;
    height: 100%;
  }
  .addCoupon .el-date-editor .el-range__icon {
    line-height: 24px;
  }
  .addCoupon .el-date-editor .el-range-separator{
    line-height: 24px;

  }
  .addCoupon .el-date-editor .el-range__close-icon{
    line-height: 24px;

  }
  .addCoupon .el-form-item__label{
    padding: 0 20px 0 0;
  }
  .addCoupon .form-body{
    background-color: #fff;
    padding: 10px 50% 10px 20px;
    min-width: 1000px;
  }
  .addCoupon .splist{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .addCoupon .app-image{
    width: 50px;
    height: 50px;
    border-radius: 0%;
    background-position: center center;
  }
</style>
