<template>
  <div class="app-container">
    <div class="app-container__title">
      <div>订单详情 {{subOrderData['sub_order_number']}}（{{subOrderData['status_name']}}）
        <i style="cursor: pointer" class="el-icon-copy-document" @click="copyOrderId"></i>
      </div>
      <div>
        <order-button
          :events="detailData.events"
          :order-number="subOrderData.order_number"
          :sub-order-number="subOrderData.sub_order_number"
          @completed="handleCompleted"
        ></order-button>
      </div>
    </div>
    <div class="app-container__step" style="margin-bottom: 10px">
      <el-card>
        <el-steps :active="1" finish-status="success">
          <el-step title="商家买单" description="2022-09-10 03：11：06"></el-step>
          <el-step title="买家付款" description="2022-09-10 03：11：06"></el-step>
          <el-step title="商家接单" description="2022-09-10 03：11：06"></el-step>
          <el-step title="商家发货" description="2022-09-10 03：11：06"></el-step>
          <el-step title="交易完成" description="2022-09-10 03：11：06"></el-step>
        </el-steps>
      </el-card>
    </div>
    <div class="app-container__base" style="margin-bottom: 10px">
      <el-card>
        <div slot="header" class="clearfix">
          <span>订单信息</span>
        </div>
        <xd-detail
          label-width="100"
          :is-border="isBorder"
          :list="baseList"
          size=""
          @onCustom="handleCustom"
        >
        </xd-detail>
      </el-card>
    </div>
    <div class="app-container__pack" style="margin-bottom: 10px">
      <el-card>
        <div slot="header" class="clearfix">
          <span>物流信息</span>
        </div>
        <div class="app-container__pack-title">
          <div class="app-container__pack-title-tab" style="font-size: 18px" v-if="packsData.length>0">
            <div v-for="(item,index) in packsData" :key="index" :style="{color:index===tabIndex?'red':'#333'}"
                 @click="changeTab(index)">
              包裹{{index+1}}
            </div>
          </div>
          <div>
            <el-button type="primary" size="mini" @click="handleEdit" v-if="isUpdate&&packsData.length>0">修改</el-button>
            <el-button type="primary" size="mini" @click="handleCreate" v-if="isCreate">新增</el-button>
            <el-button type="danger" size="mini" @click="handleDelete" v-if="isDelete&&packsData.length>0">删除
            </el-button>
          </div>
        </div>
        <div class="app-container__pack-base">
          <div v-if="packsRowData['express_info']">快递公司：{{packsRowData['express_info']['express_name']}}</div>
          <div v-if="packsRowData['express_info']">快递单号：{{packsRowData['express_info']['express_number']}}</div>
        </div>
        <div style="display: flex;justify-content: space-between">
          <xd-detail
            label-width="100"
            :is-border="isBorder"
            :list="packsRowTest"
            size=""
          >
            <template slot="images" slot-scope="scope">
              <div class="image_list" v-for="(item,index) in imagesData" :key="index"><img :src="item"/></div>
              <div>共2件商品</div>
            </template>
            <template slot="tips" slot-scope="scope">
              <div style="color:#A6A6A6 ">买家6天23小时29分内未确认收货，系统将自动确认收货</div>
            </template>
          </xd-detail>
          <div>
            <el-button type="primary" v-if="!showStep" @click="handleShowStep">查看物流</el-button>
          </div>
          <div style="display: flex" v-if="showStep">
            <div style="height: 100%;max-height: 290px;overflow-y: auto;min-width:300px;margin-right: 100px;">
              <el-steps direction="vertical" :active="1" :space="50">
                <el-step title="步骤 1" description="2020-10-12"></el-step>
                <el-step title="步骤 2" description="2020-10-12"></el-step>
                <el-step title="步骤 3" description="2020-10-12"></el-step>
                <el-step title="步骤 1" description="2020-10-12"></el-step>
                <el-step title="步骤 2" description="2020-10-12"></el-step>
                <el-step title="步骤 3" description="2020-10-12"></el-step>
                <el-step title="步骤 1" description="2020-10-12"></el-step>
                <el-step title="步骤 2" description="2020-10-12"></el-step>
                <el-step title="步骤 3" description="2020-10-12"></el-step>
                <el-step title="步骤 1" description="2020-10-12"></el-step>
                <el-step title="步骤 2" description="2020-10-12"></el-step>
                <el-step title="步骤 3" description="2020-10-12"></el-step>
              </el-steps>
            </div>
            <div>
              <el-button type="primary" size="small" @click="handeleSelfPacks">自定义物流信息</el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>

    <div class="app-container__list-table">
      <div v-for="(item,index) in orderData" :key="index" style="margin-bottom: 10px;">
        <el-card>
          <div slot="header" class="clearfix">
            <div style="display: flex;justify-content: space-between">
              <div>拆单号： {{subOrderData['sub_order_number']}}
                <i style="cursor: pointer" class="el-icon-copy-document" @click="copyOrderId"></i>
              </div>
              <div>
                <el-tooltip effect="dark" content="编辑" placement="top">
                  <router-link target="_blank" :to="toLink(123)">
                    <el-button type="primary" size="small">查看拆单信息</el-button>
                  </router-link>
                </el-tooltip>
              </div>
            </div>
          </div>
          <el-table
            class="app-table"
            :data="item.products" border fit highlight-current-row
            style="width: 100%"
          >
            <el-table-column align="center" label="商品ID" prop="product_id"></el-table-column>
            <el-table-column align="center" label="商品信息" prop="">
              <template slot-scope="scope">
                <div style="display: flex">
                  <img src="" alt="">
                  <div>
                    <div>商品名称商品名称商品名称</div>
                    <div>商品规格（例如xxl-红色）</div>
                    <div style="color: #E33C64">售后中</div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="单价&数量" prop="">
              <template slot-scope="scope">
                <div>¥0.00</div>
                <div>1件</div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="扩展信息" prop="remake"></el-table-column>
            <el-table-column align="center" label="供货商" prop="company"></el-table-column>
          </el-table>
          <xd-detail
            label-width="100"
            :is-border="isBorder"
            :list="subBaseData"
            size=""
          >
          </xd-detail>
        </el-card>
      </div>
    </div>
    <div class="app-container__list-card" style="margin-bottom: 10px;">
      <el-card>
        <div slot="header" class="clearfix">
          <span>卡消费信息</span>
        </div>
        <div class="app-container__list-table">
          <xd-table
            :headers="headers"
            :list="tables"
            is-border
          ></xd-table>
        </div>
      </el-card>
    </div>
    <div class="app-container__list-card" style="margin-bottom: 10px;">
      <el-card>
        <div slot="header" class="clearfix">
          <span>操作记录</span>
        </div>
        <div class="app-container__list-table">
          <xd-table
            :headers="historyHeaders"
            :list="historyTables"
            is-border
          ></xd-table>
        </div>
        <div class="app-container__list-pagination">
          <xd-pagination
            :total="total"
            :limit.sync="limit"
            :page="pageSize"
            :auto-scroll="false"
            @onPagination="handlePagination"
          ></xd-pagination>
        </div>
      </el-card>
    </div>
    <xd-dialog
      title="上传快递单号"
      v-if="expressDialog"
      :show.sync="expressDialog"
      width="50%"
      @onConfirm="handleUploadEXpress"
      @onClose="handleClose"
      @onCancel="handleClose"
    >
      <el-table
        class="app-table"
        :data="needProducts" border fit highlight-current-row
        style="width: 100%"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column width="100px" align="center" label="商品图片">
          <xd-table-image
            slot-scope="scope"
            :thumb="scope.row.thumb"
            :width="80"
            :height="80"
          ></xd-table-image>
        </el-table-column>
        <el-table-column align="center" label="商品名称" prop="product_name"></el-table-column>
        <el-table-column align="center" width="250" label="数量" prop="weight">
          <template slot-scope="scope">
            <el-input-number
              v-model="scope.row.num"
              @change="handleChange()"
              :min="min"
              :max="max"
            ></el-input-number>
          </template>
        </el-table-column>
      </el-table>
      <el-form style="margin-top: 10px" :model="experssForm" label-width="100px">
        <el-form-item label="快递信息">
          <xd-add-express
            v-model="xdAddExpressValue"
            :express="expressList"
            :defaultValue="expressDatas"
            btn-name="提交"
            width="450px"
            :is-submit="false"
            :isComment="true"
          ></xd-add-express>
        </el-form-item>
      </el-form>
    </xd-dialog>
    <xd-dialog
      title="请输入退款金额"
      :show.sync="priceDialog"
      width="50%"
      @onConfirm="handleUploadPrice"
      @onClose="handleClosePrice"
      @onCancel="handleClosePrice"
    >
      <el-form style="margin-top: 10px" :model="priceForm" label-width="100px">
        <div style="margin-bottom: 20px;">可退款金额：123</div>
        <el-form-item label="退款金额">
          <el-input
            ref="price"
            v-model="priceForm.price"
            placeholder="请输入退款金额"
          />
        </el-form-item>
      </el-form>
    </xd-dialog>
    <xd-dialog
      title="快递内容添加"
      :show.sync="selfDialog"
      width="50%"
      @onConfirm="handleSelf"
      @onClose="handleCloseSelf"
      @onCancel="handleCloseSelf"
    >
      <el-form style="margin-top: 10px" :model="selfForm" label-width="100px">
        <el-form-item label="时间">
          <el-input
            ref="price"
            v-model="selfForm.time"
            placeholder="请输入时间"
          />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            ref="price"
            type="textarea"
            v-model="selfForm.remake"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
    </xd-dialog>
  </div>

</template>

<script>
  import XdContentInfo from "@/components/XdContentInfo";
  import XdDialog from "@/components/XdDialog";
  import checkPermission from "@/utils/permission";
  import roles from '@/constant/permissions';
  import {mapActions} from 'vuex'
  import XdTableImage from "@/components/XdTableImage";
  import XdAddExpress from "./compontents/expressCopy";
  import OrderButton from "./compontents/OrderInfoButton";
  import {Loading} from 'element-ui';
  import XdDetail from "@/components/XdDetail";
  import XdTable from "@/components/XdTable";
  import XdPagination from "@/components/XdPagination.vue";

  export default {
    name: "order_detail",
    components: {
      XdContentInfo,
      XdDialog,
      XdTableImage,
      XdAddExpress,
      OrderButton,
      XdDetail,
      XdTable,
      XdPagination
    },


    data() {
      return {
        list: [],
        sub_order_number: null, //订单id
        detailData: {},
        needProducts: [],
        addressData: {
          receipt_username: '',
          receipt_phone: '',
          receipt_address: '',
        },
        tabIndex: 0,
        expressDialog: false,
        expressList: null,
        expressData: [{
          expressNumber: '',
          expressId: '',
        }],
        xdAddExpressValue: [],
        expressDatas: [],
        experssForm: {},
        multipleSelection: [], //选择列表对象
        min: 1,
        max: 100,
        value: null,
        subOrderData: {},
        resourceShopInfoData: {},
        shopInfoData: {},
        priceDialog: false,
        priceForm: {
          price: '',
        },
        cardInfoData: [],
        expressData: [],
        expressName: null,
        productsStr: '',
        packsData: [],
        packsRowData: [],
        isEdit: false,
        ifCreate: false,
        baseList: [{
          title: '',
          items: [
            {label: '买家昵称', value: '张三', type: 'normal', field: 'name'},
            {
              label: '买家账号',
              value: '123***123', type: 'normal',
              field: 'number',
              params: {
                handle: true,
                name: '查看用户信息',
                type: 'default'
              }
            },
            {
              label: '联系电话',
              value: '186****1245', type: 'normal',
              field: 'iPhone',
              params: {
                handle: true,
                name: '查看联系电话',
                type: 'default'
              }
            },
            {label: '订单总额', value: '100', type: 'normal', field: 'type'},
            {label: '配送费用', value: '22', type: 'normal', field: 'type'},
            {label: '卡支付', value: '22', type: 'normal', field: 'type'},
            {label: '补差金额', value: '22', type: 'normal', field: 'type'},
          ],
        },],
        packsRowTest: [{
          title: '',
          items: [
            {label: '发货状态', value: '已完成', type: 'normal', field: 'status'},
            {label: '发货时间', value: '2022-10-11 10：10：10', type: 'normal', field: 'time'},
            {label: '快递公司', value: '顺丰', type: 'normal', field: 'company'},
            {label: '商品信息', value: '', type: 'normal', field: 'images'},
            {label: '提示', value: '', type: 'normal', field: 'tips'},
          ],
        },],
        isBorder: false,
        imagesData: ["https://admin-cake-jufubao-cn.oss-cn-beijing.aliyuncs.com/images/code.png", "https://admin-jufubao-cn.oss-cn-beijing.aliyuncs.com/images/auth-f.jpg"],
        selfForm: {
          time: '',
          remake: ''
        },
        selfDialog: false,
        orderData: [
          {
            products: [{product_id: 1}, {product_id: 2}, {product_id: 3},],
          }, {
            products: [{product_id: 1}, {product_id: 2}, {product_id: 3},],
          }
        ],
        subBaseData: [{
          title: '',
          items: [
            {label: '配送方式', value: '快递/同城配送', type: 'normal', field: 'type'},
            {label: '配送费用', value: '20', type: 'normal', field: 'price'},
            {label: '送达时间', value: '2月12日 13:30', type: 'normal', field: 'time'},
            {label: '收货人姓名', value: '张三', type: 'normal', field: 'name'},
            {label: '收货地址', value: '河北省三河市燕郊经济开发区润旭商城2单元', type: 'normal', field: 'address'},
            {label: '渠道订单号', value: '534869498411654968484', type: 'normal', field: 'order_id'},
            {label: '买家备注', value: '撒打算大撒大网啊我啊我爱我', type: 'normal', field: 'remake'},
            {label: '祝福语', value: '世界和平', type: 'normal', field: 'wish'},
          ],
        },],
        headers: [{
          "type": "normal",
          "prop": "number",
          "align": "left",
          "width": 200,
          "label": "卡号"
        }, {
          "type": "normal",
          "prop": "num",
          "align": "center",
          "minWidth": 200,
          "label": "消费点（次）"
        }, {
          "type": "normal",
          "prop": "type",
          "align": "center",
          "minWidth": 200,
          "label": "卡类型"
        }, {
          "type": "normal",
          "prop": "isSuccess",
          "align": "center",
          "minWidth": 200,
          "label": "卡消费是否成功"
        }],
        tables: [],
        historyHeaders: [{
          "type": "normal",
          "prop": "name",
          "align": "left",
          "width": 200,
          "label": "操作人"
        }, {
          "type": "normal",
          "prop": "content",
          "align": "center",
          "minWidth": 200,
          "label": "操作内容"
        }, {
          "type": "normal",
          "prop": "remake",
          "align": "center",
          "minWidth": 200,
          "label": "备注"
        }, {
          "type": "normal",
          "prop": "time",
          "align": "center",
          "minWidth": 200,
          "label": "操作时间"
        }],
        historyTables: [],
        pageSize: 1, //当前页面数量
        hasNextPage: true, //是否有下一页
        limit: 20, //搜索参数
        total: 200,
        showStep:false,
      }
    },


    created() {
      this.sub_order_number = this.$route.params['id']
      // this.getDetail()
      // this.getPackagesData()
      // this.getUploadExpressList();
      this.tables = [{
        "number": "10001",
        "num": "1",
        "type": "类型1",
        "isSuccess": "是",
      }, {
        "number": "10001",
        "num": "1",
        "type": "类型1",
        "isSuccess": "是",
      },];
      this.historyTables = [{
        "name": "张三",
        "content": "内容",
        "remake": "备注",
        "time": "时间",
      }, {
        "name": "张三",
        "content": "内容",
        "remake": "备注",
        "time": "时间",
      },];
    },
    computed: {
      isCreate() {
        if (this.detailData.events) {
          return this.detailData.events.includes('add_package');
        }
      },
      isUpdate() {
        if (this.detailData.events) {
          return this.detailData.events.includes('upd_package');
        }
      },
      isDelete() {
        if (this.detailData.events) {
          return this.detailData.events.includes('del_package');
        }
      },
    },
    methods: {
      ...mapActions('order', ['subOrderInfo', 'getPackages', 'addPackage', 'getExpressList', 'delPackage']),

      getDetail() {
        let data = {
          sub_order_number: this.sub_order_number
        }
        this.subOrderInfo(data).then(res => {
          this.detailData = res;
          this.needProducts = this.$xdHelper.cloneDeep(res.products);
          if (res['address']) {
            this.addressData = res['address'];
          }
          if (res['sub_order']) {
            this.subOrderData = res['sub_order'];
          }
          if (res['card_info']) {
            this.cardInfoData = res['card_info']
          }
          if (res['resource_shop_info']) {
            this.resourceShopInfoData = res['resource_shop_info']
          }
          if (res['shop_info']) {
            this.shopInfoData = res['shop_info']
          }
        })
          .catch(err => {
            console.log(err)
          })
      },
      /**
       * @description 拆单详情
       * @param item 列表对象
       */
      toLink(item) {
        return `/corders/sub_detail/${item}`;
      },
      getPackagesData() {
        console.log(this.ifCreate, 'this.ifCreate')
        this.packsData = [];
        this.packsRowData = [];
        this.getPackages({sub_order_number: this.sub_order_number})
          .then(res => {
            console.log(res, 'ress')
            this.packsData = res;
            if (res.length > 0) {
              this.packsRowData = res[0];
            }
            if (this.ifCreate) {
              this.packsRowData = res[res.length - 1];
              this.tabIndex = res.length - 1;
              console.log(this.tabIndex, 'this.tabIndex')
              this.ifCreate = false;
            }
          })
          .catch(err => {
            console.log(err)
          })
      },
      changeTab(index) {
        this.tabIndex = index;
        this.packsRowData = this.packsData[index];
      },

      getUploadExpressList() {
        console.log('this.expressName', this.expressNumName)
        this.getExpressList().then(res => {
          this.expressData = res;
          this.expressList = res.map(item => {
            return {
              label: item['express_name'],
              value: item['express_id']
            }
          });
        }).catch(err => {

        })
      },
      handleUploadEXpress() {
        console.log(this.xdAddExpressValue, 'xdAddExpressValue')
        if (this.multipleSelection.length > 0) {
          this.productsStr = JSON.stringify(this.multipleSelection);
        } else {
          this.$message({
            message: '请选择商品',
            type: 'error'
          });
          return;
        }
        if (this.xdAddExpressValue[0].company === '') {
          this.$message({
            message: '请选择快递公司',
            type: 'error'
          });
          return;
        }
        if (this.xdAddExpressValue[0].number === '') {
          this.$message({
            message: '请输入快递单号',
            type: 'error'
          });
          return;
        }

        this.expressData.map(item => {
          if (item.express_id === this.xdAddExpressValue[0].company) {
            this.expressName = item.express_name
          }
        })
        let params;
        if (this.isEdit === true) {
          params = {
            main_order_number: this.subOrderData['order_number'],
            sub_order_number: this.sub_order_number,
            express_name: this.expressName,
            express_id: this.xdAddExpressValue[0].company,
            express_number: this.xdAddExpressValue[0].number,
            notice: this.xdAddExpressValue[0].comment,
            products: this.productsStr,
            id: this.packsRowData['id']
          };
        } else {
          params = {
            main_order_number: this.subOrderData['order_number'],
            sub_order_number: this.sub_order_number,
            express_name: this.expressName,
            express_id: this.xdAddExpressValue[0].company,
            express_number: this.xdAddExpressValue[0].number,
            products: this.productsStr,
            notice: this.xdAddExpressValue[0].comment,
          };
        }
        console.log(params, 'params')
        let loading = Loading.service({});
        this.addPackage(params)
          .then(res => {
            if (!this.isEdit) {
              this.ifCreate = true;
            } else {
              this.tabIndex = 0;
            }
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            this.getPackagesData();
            this.multipleSelection = [];
            loading.close();
            this.expressDialog = false;
          }).catch(err => {
          console.log(err, 'err')
          loading.close();
        })
      },
      handleClose() {
        this.expressDialog = false;
      },
      handleClosePrice() {
        this.priceDialog = false;
      },
      handleUploadPrice() {

      },
      handleChange() {
        console.log(this.multipleSelection, 'eee')
      },
      handleSelectionChange(value) {
        this.multipleSelection = value;
        console.log(value, 'value')
      },

      handleEdit() {
        this.isEdit = true;
        this.expressDatas = [];
        this.needProducts = this.$xdHelper.cloneDeep(this.packsRowData['products']);
        let expressDatas = this.$xdHelper.cloneDeep(this.packsRowData['express_info'])
        // expressDatas.map(item => {
        //   item.company = item.express_id;
        //   item.number = item.express_number;
        // })
        expressDatas.company = expressDatas.express_id;
        expressDatas.number = expressDatas.express_number;
        expressDatas.comment = expressDatas.notice;
        console.log(expressDatas, 'expressDatas')
        this.expressDatas.push(expressDatas);
        console.log(this.expressDatas, 'this.expressDatas')
        this.expressDialog = true;
        this.$nextTick(() => {
          this.needProducts.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        });
      },
      handleCreate() {
        this.isEdit = false;
        this.needProducts = this.$xdHelper.cloneDeep(this.detailData['products']);
        this.expressDatas = [];
        this.expressDialog = true;
      },

      handleCompleted() {
        this.getDetail();
      },

      handleDelete() {
        this.$confirm('是否删除此包裹？', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(() => {
          let params = {
            id: this.packsRowData['id']
          }
          this.delPackage(params).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getPackagesData();
            this.tabIndex = 0;
          }).catch(err => {

          })
        });
      },

      copyOrderId() {
        this.copy(this.subOrderData['sub_order_number']);
      },
      copy(data) {
        let url = data
        let oInput = document.createElement('input')
        oInput.value = url
        document.body.appendChild(oInput)
        oInput.select() // 选择对象
        document.execCommand("Copy") // 执行浏览器复制命令
        this.$message({
          message: '复制成功',
          type: 'success'
        })
        oInput.remove()
      },
      handleCustom({row, btn}) {
        console.log(row, btn)
      },
      /**自定义物流信息**/
      handeleSelfPacks() {
        this.selfDialog = true;
      },
      /**自定义物流信息确定**/
      handleSelf() {

      },
      /**自定义物流信息取消**/
      handleCloseSelf() {
        this.selfDialog = false;
      },

      /**
       * @description 翻页处理方法
       * @param page {Number} 访问页面页码数
       */
      handlePagination(page) {
        this.pageSize = page;
        // this.getList();
      }, //todo
      /**查看物流**/
      handleShowStep(){
        this.showStep = true;
      },
    }
  }
</script>

<style scoped lang="scss">
  .app-container {
    font-size: 14px;
    color: #606266;
  }

  .app-container__title {
    font-size: 16px;
    line-height: 24px;
    padding: 0 0 10px;
    font-weight: bold;
  }

  @media screen and (max-width: 768px) {
    .app-container__title {
      padding: 0 0 10px;
    }
  }

  .list {
    div {
      margin: 10px 0;
    }
  }

  image {
    width: 100px;
    height: 80px;
  }

  .app-container__base {
    /*padding: 10px;*/

    &-title {
      font-size: 20px;
    }

    &-ul {
      width: 100%;
    }

    &-li {
      margin: 10px;
      display: inline-block;
      width: 30%;
    }
  }

  .app-container__list-table {
    padding: 5px 0;

    &-title {
      margin: 10px 0;
    }

    &-wish {
      margin: 5px 0;
    }
  }

  .app-container__pack {
    &-title {
      font-size: 20px;
      margin: 10px 0;
      display: flex;
      justify-content: space-between;
      padding-bottom: 5px;
      border-bottom: 1px solid #333333;

      &-tab {
        display: flex;

        & > div {
          margin-right: 10px;
          cursor: pointer;
        }
      }

    }

    &-base {
      display: flex;

      & > div {
        margin-right: 30px;
        margin-bottom: 10px;
      }
    }
  }

  .app-container__pay {
    &-title {
      font-size: 20px;
      margin: 10px 0;
    }
  }

  .image_list {
    width: 50px;
    height: 50px;
    display: inline-block;
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .app-container__pack-title{
    border-bottom: none!important;
  }
</style>
