<template>
  <div class="ScanPickBoxOut">
    <div class="box-header">
      <Button
        type="posdefault"
        style="margin-right:10px"
        @click="handleSave()"
      >
        保存
      </Button>
      <!-- <Button
        type="fcdefault"
        style="margin-right:10px"
      >
        单箱打印
      </Button>
      <Button
        type="fcdefault"
        style="margin-right:10px"
      >
        按单打印
      </Button> -->
      <Button
        type="fcdefault"
        style="margin-right:10px"
        @click="handleSubmit()"
      >
        拣货提交
      </Button>
      <Button
        type="fcdefault"
        style="margin-right:10px"
        @click="handleGetDetail()"
      >
        查看装箱数据
      </Button>
      <Button
        type="fcdefault"
        style="margin-right:10px"
        @click="fetchBoxData()"
      >
        刷新
      </Button>
      <Button
        type="fcdefault"
        @click="handleClosePage()"
      >
        返回
      </Button>
    </div>
    <div class="box-content">
      <Collapse v-model="collapseForScan">
        <Panel name="1">
          拣货扫描
          <div slot="content" class="box-content-scan">
            <span style="font-weight: bold;">商品条码(或国际码)/唯一码:</span>
            <Input ref="scanVInput" v-model="scanValue" placeholder="" style="width: 240px" @on-enter="handleScanVEnter"/>
            <span style="margin-left: 60px;font-weight: bold;">数量:</span>
            <Input ref="scanNInput" v-model="scanNumber" placeholder="" style="width: 60px;margin-right: 90px;" @on-enter="handleScanNEnter" />
          </div>
        </Panel>
      </Collapse>
      <div class="scan-detail">
        <div class="scan-detail__number">
          <span>总扫描合计:</span>
          <span>{{scanTotal}}</span>
          <span>总未扫描合计:</span>
          <span>{{scanTotalOver}}</span>
          <span>箱扫描合计:</span>
          <span>{{scanTotalBox}}</span>
        </div>
        <Collapse v-model="collapseForDetail">
          <Panel name="1">
              扫描详情
              <div slot="content" class="box-content-detail">
                <div class="box-content-detail__header">
                  <div class="box-content-detail__box">

                    <Button
                      v-for="(item, index) in boxData"
                      :key="index"
                      style="margin-right:10px"
                      :type="item.value === selectBox ? 'posdefault' : 'fcdefault'"
                      @click="handleCheckBox(item.value)"
                    >
                      <Icon v-if="status !== 2" type="ios-trash-outline" @click.stop="handleDeleteBox(item.value)"/>
                      {{item.label}}
                    </Button>
                    <Button
                      type="text"
                      style="margin-right:10px"
                      @click="handleAddBox()"
                      v-if="status !== 2"
                    >
                      <div class="btn-add-text">
                        <Icon type="ios-add-circle-outline" />
                        增加箱
                      </div>
                    </Button>
                  </div>
                  <Button
                    type="text"
                    @click="handleDeleteScanDetail()"
                    v-if="status !== 2"
                  >
                    <div class="btn-add-text">删除明细</div>
                  </Button>
                </div>
                <div class="box-content-detail__table">
                  <Table
                    ref="selection"
                    height="300"
                    multiple
                    border
                    :columns="returnColumns"
                    :data="returnData"
                    @on-selection-change="onSelectionChange">
                  </Table>
                </div>
              </div>
          </Panel>
        </Collapse>
      </div>
      <Collapse v-model="collapseForInfo">
        <Panel name="1">
            单据信息
            <div slot="content" class="box-bill">
              <Row>
                <Col span="6">
                  <div class="box-bill__item">
                    <div class="box-bill__item--text">单据编号：</div>
                    <Input v-model="boxOutData.DOCNO" placeholder="" disabled />
                  </div>
                </Col>
                <Col span="6">
                  <div class="box-bill__item">
                    <div class="box-bill__item--text">单据类型：</div>
                    <Input v-model="boxOutData.BILLTYPENAME" placeholder="" disabled />
                  </div>
                </Col>
                <Col span="6">
                  <div class="box-bill__item">
                    <div class="box-bill__item--text">发货方：</div>
                    <Input v-model="boxOutData.T_IESSTORE_NAME" placeholder="" disabled />
                  </div>
                </Col>
                <Col span="6">
                  <div class="box-bill__item">
                    <div class="box-bill__item--text">收货方：</div>
                    <Input v-model="boxOutData.DESTNAME" placeholder="" disabled />
                  </div>
                </Col>
                <Col span="12">
                  <div class="box-bill__item">
                    <div class="box-bill__item--text">收货地址：</div>
                    <Input v-model="boxOutData.ADDRESS" placeholder="" />
                  </div>
                </Col>
                <Col span="12">
                  <div class="box-bill__item">
                    <div class="box-bill__item--text">备注：</div>
                    <Input v-model="boxOutData.DESCRIPTION" placeholder="" />
                  </div>
                </Col>
              </Row>
            </div>
        </Panel>
      </Collapse>
    </div>

    <div class="custom-submit" v-if="status === 2">
      <i class="iconfont iconbj_docstate"></i>
      <div class="text-tip">
        <div> 已 </div>
        <div> 提 </div>
        <div> 交 </div>
      </div>
    </div>

    <div class="custom-loading" v-show="loading">
      <div class="R3-Loading loader "></div>
    </div>
  </div>
</template>

<script>
  const R3 = window.R3;
  const { network, urlSearchParams, store } = R3;
  export default {
    components: { },
    data() {
      return {
        status: 0,
        collapseForScan: '1',
        collapseForDetail: '1',
        collapseForInfo: '1',
        scanValue: '',
        scanNumber: '1',
        returnColumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '商品编码',
            key: 'productcode',
            align: 'center'
          },
          {
            title: '条码',
            key: 'sku',
            align: 'center'
          },
          {
            title: '国际码',
            key: 'gbCode',
            align: 'center'
          },
          {
            title: '唯一码',
            key: 'mscode',
            align: 'center'
          },
          {
            title: '规格名称',
            key: 'name',
            align: 'center'
          },
          {
            title: '扫描数量',
            key: 'qty',
            align: 'center'
          }
        ],
        returnData: [],
        boxOutData: {},
        scanTotal: 0, // 总扫描合计
        scanTotalOver: 0, // 总未扫描合计
        scanTotalBox: 0, // 箱扫描合计
        scanTotalCan: 0, // 可扫描总数
        loading: false,
        selectBox: 0,
        lastBoxKey: 0,
        boxData: [],
        scanData: [],
        selectScanData: [],

        initScanData: [],
        initADDRESS: '',
        initDESCRIPTION: ''
      }
    },
    created() {
      this.fetchBoxData()
    },
    mounted() {
    },
    methods: {
      async fetchBoxData() {
        this.loading = true
        try {
          const { customizedModuleId } = this.$route.params;
          const { data } = await network.post('/p/cs/drp/getBoxOutInfo', { id: customizedModuleId })
          const { boxOut = {}, boxOutItem = [], total } = data.data
          this.boxOutData = { ...boxOut, ADDRESS: boxOut.ADDRESS || '', DESCRIPTION: boxOut.DESCRIPTION || ''}
          this.status = boxOut.STATUS
          this.scanTotalCan = total
          this.selectBox = 0
          this.scanData = boxOutItem.map(v => {
            return {
              "boxNumber": Number(v.BOXNO),
              "productcode": v.PRODUCTCODE,
              "vTIesskuId": v.V_T_IESSKU_ID,
              "sku": v.SKU,
              "gbCode": v.GBCODE,
              "mscode": v.QRCODE,
              "name": v.NAME,
              "qty": v.QTY_PICK
            }
          })
          this.initScanData = JSON.parse(JSON.stringify(this.scanData))
          this.initADDRESS = boxOut.ADDRESS || ''
          this.initDESCRIPTION = boxOut.DESCRIPTION || ''
          this.toolsRenderDom('box')
          this.toolsResetScan()
          this.loading = false
        } catch {
          this.toolsResetScan()
          this.loading = false
        }
      },
      handleClosePage() {
        if (this.status === 2) {
          return this.closePage()
        }
        let isTip = false
        if (this.boxOutData.ADDRESS !== this.initADDRESS) {
          isTip = true
        }
        if (this.boxOutData.DESCRIPTION  !== this.initDESCRIPTION) {
          isTip = true
        }
        if (this.scanData.length !== this.initScanData.length) {
          isTip = true
        }
        const initScanDataStr = JSON.stringify(this.initScanData)
        for(let i = 0; i < this.scanData.length; i++) {
          if(initScanDataStr.indexOf(JSON.stringify(this.scanData[i])) === -1) {
            isTip = true
            break
          }
        }
        if (isTip) {
          this.$Modal.fcWarning({
            title: '警告',
            mask: true,
            showCancel: true,
            content: '修改的数据未保存，确定返回？',
            onOk:()=>{
              this.closePage()
            }
          })
        } else {
          this.closePage()
        }
      },
      closePage() {
        // 关闭自定义界面，
        const { path } = this.$route;
        const { keepAliveModuleName, tableName } = this.$store.state.global.activeTab;
        this.$store.commit('global/tabCloseAppoint', {
          tableName,
          routeFullPath: path,
          keepAliveModuleName,
          stopRouterPush: false,
        });
        // 跳转
        setTimeout(() => {
          R3.store.commit('global/tabOpen', {
            type: 'S',
            tableName: 'T_BOXOUT',
            tableId: '11699',
            back: true
          });
        }, 0);
      },
      async handleScan() {
        if (this.status === 2) {
          return this.$Message.warning('单据已提交！')
        }
        this.loading = true
        let gbCodeItems = []
        const totQty = this.scanData.reduce((tot, current) => {
          if (this.scanValue === current.mscode || this.scanValue === current.sku) {
            tot += current.qty
          } else if (this.scanValue === current.gbCode) {
            tot += current.qty
            gbCodeItems.push(current)
          }
          return tot
        }, 0)
        const params = {
          skuQrcode: this.scanValue,
          qty: this.scanNumber,
          totQty: totQty,
          tBoxId: this.boxOutData.ID,
          gbCodeItems
        }
        try {
          const { data } = await network.post('/p/cs/drp/pickUpBoxOutScan', params)
          // 新增明细逻辑：录入条码/唯一码 在 当前选中的箱号中不存在
          // 更新明细数量逻辑：录入条码/唯一码 在 当前选中的箱号中存在
          const apiScanData = data.data
          const currentBoxNo = this.selectBox
          let errorMessage = ''
          // prev: 扫描数据； current: 接口返回数据item
          this.scanData = apiScanData.reduce((prev, current) => {
            let isAdd = true
            for (let i = 0; i < prev.length; i ++) {
              // 接口返回扫描数据唯一码存在， 判断唯一码是否相同
              if (!!current.mscode && current.mscode === prev[i].mscode ) {
                isAdd = false
                errorMessage = '唯一码不允许重复！'
              }
              // 接口返回扫描数据唯一码存在， 判断唯一码所属SKU是否以条码录入
              if (!!current.mscode && current.sku === prev[i].sku && !prev[i].mscode) {
                isAdd = false
                errorMessage = '该条码已经按照SKU录入，不允许录唯一码！'
              }
              // 接口返回扫描数据唯一码不存在， 判断条码是否相同
              if (!current.mscode && current.sku === prev[i].sku ) {
                // 同一个箱则判断 循环的数据是否存在唯一码
                if (Number(prev[i].boxNumber) === currentBoxNo) {
                  isAdd = false
                  if (prev[i].mscode) {
                    errorMessage = '该条码已经按照唯一码录入，不允许录SKU！'
                  } else {
                    prev[i].qty = prev[i].qty + current.qty
                  }
                }
                else {
                  if (prev[i].mscode) {
                    isAdd = false
                    errorMessage = '该条码已经按照唯一码录入，不允许录SKU！'
                  }
                }
              }
              if (!isAdd) {
                // 扫描数量为0删除item
                if (prev[i].qty === 0) {
                  prev.splice(i, 1)
                }
                break
              }
            }
            if (isAdd) {
              prev.push({
                "boxNumber": currentBoxNo,
                "productcode": current.productcode,
                "vTIesskuId": current.vTIesskuId,
                "sku": current.sku,
                "gbCode": current.gbCode,
                "mscode": current.mscode,
                "name": current.name,
                "qty": current.qty
              })
            }
            return prev
          }, this.scanData)
          if (errorMessage) {
            this.$Message.error(errorMessage)
          }
          this.toolsRenderDom()
          this.toolsResetScan()
          this.loading = false
        } catch {
          this.toolsResetScan()
          this.loading = false
        }
      },
      handleScanVEnter() {
        if (this.status === 2) {
          return this.$Message.warning('单据已提交！')
        }
        if (!this.scanValue) {
          return this.$Message.warning('请输入商品条码(或国际码)/唯一码！')
        }
        if (!this.scanNumber) {
          return this.$refs['scanNInput'].focus()
        }
        this.handleScan()
      },
      handleScanNEnter() {
        if (this.status === 2) {
          return this.$Message.warning('单据已提交！')
        }
        if (!this.scanNumber) {
          return this.$Message.warning('请输入数量')
        }
        if (!this.scanValue) {
          return this.$refs['scanVInput'].focus()
        }
        this.handleScan()
      },
      handleAddBox() {
        const boxValue = ++this.lastBoxKey
        this.boxData.push({
          label: `箱号：${boxValue}`,
          value: boxValue
        })
        this.selectBox = boxValue
        this.toolsRenderDom()
      },
      handleCheckBox(id) {
        this.selectBox = id
        this.toolsRenderDom()
      },
      handleDeleteBox(id) {
        this.$Modal.fcWarning({
          title: '警告',
          mask: true,
          showCancel: true,
          content: `确认删除${id}号箱？`,
          onOk:()=>{
            // 将该箱下的数据过滤
            this.scanData = this.scanData.filter(v => v.boxNumber !== id)
            // 删除该箱
            this.boxData = this.boxData.filter(v => v.value !== id)
            // 重置选中箱
            this.selectBox = id === this.selectBox ? 0 : this.selectBox
            this.toolsRenderDom('box')
          }
        })
      },
      handleDeleteScanDetail() {
        if (this.selectScanData.length === 0) {
          return this.$Message.warning('请勾选扫描明细！')
        }
        let scanJsonString = JSON.stringify(this.scanData)
        this.selectScanData.forEach(v => {
          const itemString = JSON.stringify(v)
          scanJsonString = scanJsonString.replace(itemString+',', '')
          scanJsonString = scanJsonString.replace(','+itemString, '')
          scanJsonString = scanJsonString.replace(itemString, '')
        })
        this.selectScanData = []
        this.scanData = JSON.parse(scanJsonString)
        this.toolsRenderDom()
      },
      async handleSave(norefresh) {
        if (this.status === 2) {
          return this.$Message.warning('单据已提交！')
        }
        this.loading = true
        try {
          const scanItems = this.scanData.map(v => {
            return {
              boxNumber: v.boxNumber,
              gbCode: v.gbCode,
              mscode: v.mscode,
              name: v.name,
              productcode: v.productcode,
              qty: v.qty,
              sku: v.sku,
              vTIesskuId: v.vTIesskuId
            }
          })
          const params = {
            T_BOXOUT: {
              ID: this.boxOutData.ID,
              ADDRESS: this.boxOutData.ADDRESS || '',
              DESCRIPTION: this.boxOutData.DESCRIPTION || ''
            },
            SCANITEMS: scanItems
          }
          const { data } = await network.post('/p/cs/drp/pickUpBoxOutScanSave', params)
          if (data.code === 0 && !norefresh) {
            this.$Message.success(data.message)
            this.fetchBoxData()
          } else {
            this.loading = false
          }
          if (data.code === 0) {
            return true
          } else {
            return false
          }
        } catch {
          this.loading = false
          return false
        }
      },
      handleSubmit() {
        if (this.status === 2) {
          return this.$Message.warning('单据已提交！')
        }
        this.$Modal.fcWarning({
          title: '警告',
          mask: true,
          showCancel: true,
          content: '确认执行提交？',
          onOk:()=>{
            this.scanDataSubmit()
          }
        })
      },
      async scanDataSubmit() {
        try {
          const res = await this.handleSave(true)
          if (res) {
            this.loading = true
            const params = {
              T_BOXOUT: {ID: this.boxOutData.ID}
            }
            const { data } = await network.post('/p/cs/drp/pickUpBoxOutScanSubmit', params)
            if (data.code === 0) {
              this.$Message.success(data.message)
              this.fetchBoxData()
            } else {
              this.loading = false
            }
          }
        } catch {
          this.loading = false
        }
      },
      async handleReverseSubmit() {
        if (this.status !== 2) {
          return this.$Message.warning('该拣货单未提交，不允许反提交！')
        }
        const params = {
          T_BOXOUT: {ID: this.boxOutData.ID}
        }
        this.loading = true
        try {
          const { data } = await network.post('/p/cs/drp/pickUpBoxOutScanUnSubmit', params)
          if (data.code === 0) {
            this.$Message.success(data.message)
            this.fetchBoxData()
          } else {
            this.loading = false
          }
        } catch {
          this.loading = false
        }
      },
      handleGetDetail() {
        window.parent.R3.store.commit('global/tabOpen', {
          type: 'tableDetailVertical'||'V',
          tableName: 'T_BOXOUT',
          tableId: '11699',
          id: this.boxOutData.ID
        })
      },
      toolsRenderDom(type) {
        // 置空数据
        this.returnData = []
        this.scanTotal = 0
        this.scanTotalOver = 0
        this.scanTotalBox = 0

        const currentBoxNo = this.selectBox = this.selectBox === 0 ? this.scanData && this.scanData[0] ? this.scanData[0].boxNumber : 1 : this.selectBox
        let scanBoxData = []
        this.scanData.forEach(v => {
          scanBoxData.push(Number(v.boxNumber))
          this.scanTotal += v.qty
          if (v.boxNumber === currentBoxNo) {
            this.scanTotalBox += v.qty
            this.returnData.push(v)
          }
        })
        this.scanTotalOver = this.scanTotalCan - this.scanTotal

        if (type === 'box') {
          // 箱号数据为空，则设置默认值
          if (scanBoxData.length === 0) {
            this.selectBox = 1
            this.lastBoxKey = 1
            this.boxData = [{label: '箱号：1',value: 1}]
          }
          // 箱号数据不为空，则处理数据
          else {
            scanBoxData = Array.from(new Set(scanBoxData))
            const scanBoxLength = scanBoxData.length
            const scanBoxSort = scanBoxData.sort((a,b) => a-b)
            this.lastBoxKey = scanBoxSort[scanBoxLength-1]
            this.boxData = []
            scanBoxSort.forEach(v => {
              this.boxData.push({
                label: `箱号：${v}`,
                value: v
              })
            })
          }
        }
      },
      toolsResetScan() {
        this.scanValue = ''
        this.scanNumber = '1'
      },
      onSelectionChange(selection) {
        this.selectScanData = selection
      }
    }
  };
</script>
<style lang='less'>
  .custom-submit {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 84px;
    z-index: 1000;
    color: rgb(232, 0, 0);
    i {
      font-size: 84px;
    }
    .text-tip {
      position: absolute;
      transform: rotate(-30deg);
      font-size: 16px;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      top: 33px;
      left: 12px;
      width: 60px;
    }
  }
  .custom-loading {
    z-index: 1010;
    transition: opacity .3s;
    background-color: rgba(255, 255, 255, 0.8);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    .loader {
      position: absolute;
      width: 2.5em;
      height: 2.5em;
      z-index: 1041;
      transform: rotate(165deg);
      top: calc(50% - 1.25em);
      left: calc(50% - 1.25em);
    }
    .loader:before, .loader:after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      width: 0.5em;
      height: 0.5em;
      border-radius: 0.25em;
      transform: translate(-50%, -50%);
    }
    .loader:before {
      animation: cbefore 2s infinite;
    }
    .loader:after {
      animation: cafter 2s infinite;
    }
  }
  @keyframes cbefore {
    0% {
      width: 0.5em;
      box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
    }
    35% {
      width: 2.5em;
      box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
    }
    70% {
      width: 0.5em;
      box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
    }
    100% {
      box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
    }
  }
  @keyframes cafter {
    0% {
      height: 0.5em;
      box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
    }
    35% {
      height: 2.5em;
      box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
    }
    70% {
      height: 0.5em;
      box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
    }
    100% {
      box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
    }
  }
  .ScanPickBoxOut {
    padding: 0px 5px;
    box-sizing: border-box;
    width: 100%;
    // position: relative;
    .box-header {
      font-size: 0;
      padding: 20px 0 10px;
      button {
        padding: 7px 9px;
      }
    }
    .box-content {
      &-scan {
        padding: 8px 10px;
        background: #ECF2FF;
        display: inline-block;
      }
      &-detail {
        &__header {
          display: flex;
          justify-content: space-between;
        }
        &__box {
          font-size: 0;
          flex: 1;
          width: 0;
          button {
            padding: 7px 9px;
            .ark-icon {
              margin-right: 2px;
            }
          }
        }
        .btn-add-text {
          color: var(--primary-color);
          display: flex;
          align-items: center;
        }
        &__table {
          margin-top: 10px;
        }
      }
      .scan-detail {
        position: relative;
        &__number {
          position: absolute;
          top: 10px;
          left: 50%;
          right: 0;
          line-height: 35px;
          background-color: transparent;
          padding: 0 8px;
          box-sizing: border-box;
          z-index: 99;
          text-align: right;
          span {
            color: rgba(255, 0, 0, 1);
            font-size: 12px;
            font-weight: bold;
            &:nth-child(2n) {
              margin-right: 8px;
              margin-left: 8px;
              display: inline-block;
              width: 60px;
              text-align: left;
            }
          }
        }
      }
      .ark-collapse {
        margin-bottom: 0;
        border-radius: 0;
        border: none;
        background-color: transparent;
      }
      .ark-collapse > .ark-collapse-item {
        border-top: none;
        margin-bottom: 0px;
        padding: 10px 0;
        background-color: #fff;
      }
      .ark-collapse > .ark-collapse-item > .ark-collapse-header {
        text-align: left;
        padding: 0 20px;
        background: #f7f8fa;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom: none;
        height: 35px !important;
        line-height: 36px !important;
        font-size: 14px;
        color: #1f2d3d;
        border-bottom: none !important;
      }
      .ark-collapse > .ark-collapse-item > .ark-collapse-header > i {
        position: absolute;
        top: 50%;
        left: 8px;
        transform: translateY(-50%);
      }
      .ark-collapse > .ark-collapse-item > .ark-collapse-header > i.ark-icon:before {
        display: block;
        content: "";
        width: 8px;
        height: 4px;
        border-radius: 3px;
        background: var(--primary-color);
        transition: all 0.5s;
      }
      .ark-collapse > .ark-collapse-item.ark-collapse-item-active > .ark-collapse-header > i {
        position: absolute;
        top: 50%;
        left: 8px;
        transform: translateY(-50%);
      }
      .ark-collapse > .ark-collapse-item.ark-collapse-item-active > .ark-collapse-header > i.ark-icon:before {
        width: 3px;
        height: 14px;
        border-radius: 3px;
        background: var(--primary-color) !important;
      }
      .ark-collapse > .ark-collapse-item > .ark-collapse-content {
        padding: 18px 16px 0px;
      }
      .ark-collapse > .ark-collapse-item > .ark-collapse-content .ark-collapse-content-box {
        padding-bottom: 0px;
      }
    }
    .box-bill {
      &__item {
        display: flex;
        margin-bottom: 8px;
        &--text {
          width: 100px;
          text-align: right;
          line-height: 26px;
        }
        .ark-input-wrapper {
          flex: 1;
          width: 0;
        }
      }
    }
  }
</style>
