<template>
  <div>
    <div class="main">
      <div class="maintop">
        <div class="mainbtn">
          <el-button
            v-hasButtons="['DeliveryUnhandledAllMerge']"
            size="small"
            class="thebtn2"
            @click="mergeHd(0)"
          >全部合单</el-button>
          <el-button
            v-hasButtons="['DeliveryUnhandledMerge']"
            size="small"
            class="thebtn3"
            :disabled="multiple"
            @click="mergeHd(1)"
          >合单</el-button>
          <!-- <el-button
            size="small"
            class="thebtn3"
            :disabled="multiple"
            @click="mergeHd(2)"
            v-hasButtons="['DeliveryUnhandledSelf']"
            >{{ '自提' }}</el-button
          > -->

          <el-button
            v-hasButtons="['DeliveryUnhandledExport']"
            size="small"
            class="thebtn1"
            @click="handleExport"
          >
            {{ '导出' }}</el-button>
          <!-- <el-button
            size="small"
            :disabled="selRow.length == 0 || selRow.length > 1"
            class="thebtn2"
            @click="orderDk"
            v-hasButtons="['OrderDeductionBtn']"
            >订单抵扣</el-button
          > -->
        </div>
      </div>
      <el-table
        :data="tableData"
        height="540px"
        style="width: 100%"
        :header-cell-style="{ background: '#EEEEEE' }"
        @selection-change="handleSelectionChange"
      >
        <!-- :row-class-name="tableRowClassName"
         -->
        <el-table-column type="selection" width="55" />
        <el-table-column
          align="center"
          min-width="200px"
          prop="orderCode"
          :label="'订单编号'"
        />
        <el-table-column
          align="center"
          prop="orderTypeVal"
          :label="'订单类型'"
        />
        <el-table-column
          align="center"
          min-width="120px"
          prop="memberCode"
          :label="'会员编号'"
        />

        <el-table-column
          align="center"
          min-width="120px"
          prop="memberName"
          :label="'会员姓名'"
        />

        <el-table-column
          align="center"
          min-width="120px"
          prop="phone"
          :label="'联系方式'"
        />

        <el-table-column
          align="center"
          min-width="120px"
          prop="productCode"
          :label="'产品编号'"
        />
        <el-table-column
          align="center"
          min-width="120px"
          prop="productName"
          :label="'产品名称'"
        />
        <el-table-column
          align="center"
          min-width="120px"
          prop="specsName"
          :label="'产品规格'"
        />
        <el-table-column align="center" prop="unitName" :label="'产品单位'" />
        <el-table-column align="center" prop="quantity" :label="'产品数量'" />
        <el-table-column
          align="center"
          prop="isGiftVal"
          :label="'销售类型'"
        />
        <el-table-column
          align="center"
          prop="orderAmount"
          :label="'订单金额'"
        >
          <template slot-scope="scope">
            {{ scope.row.orderAmount | numFilter }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="recName" :label="'收货人'" />
        <el-table-column
          align="center"
          min-width="120px"
          prop="recPhone"
          :label="'收货电话'"
        />
        <el-table-column
          align="center"
          min-width="180px"
          prop="recAddress"
          :label="'收货地址'"
        >
          <template slot-scope="scope">
            {{ scope.row.recProvinceVal }}{{ scope.row.recCityVal
            }}{{ scope.row.recCountyVal }}{{ scope.row.recAddress }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="shippingChannelVal"
          :label="'发货类型'"
          min-width="100px"
        />
        <el-table-column
          min-width="100px"
          align="center"
          prop="storehouseName"
          :label="'发货仓库'"
        />
        <el-table-column
          min-width="150px"
          align="center"
          prop="payTime"
          :label="'支付日期'"
        />
        <el-table-column
          min-width="100px"
          align="center"
          prop="orderStatusVal"
          :label="'订单状态'"
        />
        <el-table-column
          align="center"
          min-width="100px"
          prop="deliveryWayVal"
          :label="'发货方式'"
        />
        <el-table-column
          align="center"
          min-width="100px"
          prop="operateScopeVal"
          :label="'供应方式'"
        />

        <el-table-column
          align="center"
          min-width="100px"
          prop="tranTypeVal"
          :label="'运输方式'"
        />
        <el-table-column
          align="center"
          prop="preSaleStatusVal"
          :label="'预售状态'"
        />
        <el-table-column
          align="center"
          prop="originalOrderCode"
          :label="'原单号'"
        />
        <el-table-column
          min-width="100px"
          align="center"
          prop="remark"
          :label="'备注'"
        />
        <el-table-column
          align="center"
          prop="vertexName"
          :label="$t('隶属体系')"
        />
        <!-- <el-table-column
          align="center"
          prop="systemType"
          :label="$t('系统类型')"
        >
          <template slot-scope="scope">
            <div
              v-for="item in systemTypes"
              :key="item.value"
              v-if="scope.row.systemType == item.value"
            >
              {{ item.label }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column
          min-width="150px"
          align="center"
          prop="creationTime"
          :label="'创建日期'"
        />
      </el-table>
    </div>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="params.pageNum"
      :limit.sync="params.pageSize"
      :page-sizes="pageSizes"
      @pagination="getList"
    />
    <!-- 合单 -->
    <el-dialog
      :title="'合单'"
      :close-on-click-modal="false"
      :visible.sync="hdShow"
      width="40%"
      append-to-body
    >
      <div>
        <div class="main_title">
          <div class="bluekuai" />
          <div class="title_word">{{ '选择合并匹配条件' }}</div>
        </div>
        <div>
          <el-form
            ref="hdform"
            :rules="hdrules"
            :model="hdform"
            label-width="80px"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item :label="'收货人'" prop="recNameBool">
                  <el-radio-group v-model="hdform.recNameBool">
                    <el-radio
                      v-for="(item, index) in yesornoList"
                      :key="index"
                      :label="item.value"
                    >{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="'收货电话'" prop="recPhoneBool">
                  <el-radio-group v-model="hdform.recPhoneBool">
                    <el-radio
                      v-for="(item, index) in yesornoList"
                      :key="index"
                      :label="item.value"
                    >{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  :label="
                    '省' +
                      '/' +
                      '市' +
                      '/' +
                      '区/县'
                  "
                  prop="recAreaBool"
                >
                  <el-radio-group v-model="hdform.recAreaBool">
                    <el-radio
                      v-for="(item, index) in yesornoList"
                      :key="index"
                      :label="item.value"
                    >{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="'详细地址'" prop="recAddressBool">
                  <el-radio-group v-model="hdform.recAddressBool">
                    <el-radio
                      v-for="(item, index) in yesornoList"
                      :key="index"
                      :label="item.value"
                    >{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="'产品名称'" prop="productNameBool">
                  <el-radio-group v-model="hdform.productNameBool">
                    <el-radio
                      v-for="(item, index) in yesornoList"
                      :key="index"
                      :label="item.value"
                    >{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item :label="'供应方式'" prop="operateScope">
                  <el-radio-group v-model="hdform.operateScope">
                    <el-radio :label="''">{{ '全部' }}</el-radio>
                    <el-radio
                      v-for="(item, index) in supplyWayList"
                      :key="index"
                      :label="item.value"
                    >{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label="'预售状态'" prop="preSaleStatus">
                  <el-radio-group v-model="hdform.preSaleStatus">
                    <el-radio :label="''">{{ '全部' }}</el-radio>
                    <el-radio
                      v-for="(item, index) in presaleStatusList"
                      :key="index"
                      :label="item.value"
                    >{{ item.label }}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col>
                <el-form-item
                  required
                  :label="'运输方式'"
                  prop="transportTypeList"
                >
                  <el-checkbox-group v-model="hdform.transportTypeList">
                    <el-checkbox
                      v-for="item in transportTypeList"
                      :key="item.value"
                      :label="item.value"
                    >{{ item.label }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item
                  required
                  :label="'发货方式'"
                  prop="deliveryWayList"
                >
                  <el-checkbox-group v-model="hdform.deliveryWayList">
                    <el-checkbox
                      v-for="item in deliveryWayList"
                      :key="item.value"
                      :label="item.value"
                    >{{ item.label }}</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="main_title">
          <div class="bluekuai" />
          <div class="title_word">{{ '选择不合并产品' }}</div>
        </div>
        <div>
          <el-table
            :data="unproductData"
            style="width: 100%"
            height="300px"
            :header-cell-style="{ background: '#EEEEEE' }"
            @selection-change="handleSelectionChange2"
          >
            <!-- :row-class-name="tableRowClassName"
         -->
            <el-table-column type="selection" width="55" />
            <el-table-column
              align="center"
              prop="productName"
              :label="'产品名称'"
            />
            <el-table-column
              align="center"
              prop="specsName"
              :label="'产品规格'"
            />
            <el-table-column
              align="center"
              prop="quantity"
              :label="'产品订单总量'"
            />
            <el-table-column
              align="center"
              prop="productStock"
              :label="'实际库存数量'"
            />
          </el-table>
        </div>
        <div class="footer" style="text-align: center; margin-top: 20px">
          <el-button @click="hdShow = false">
            {{ '取消' }}</el-button>
          <el-button type="primary" @click="sureHd('hdform')">{{
            '确定'
          }}</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 自提 -->
    <el-dialog
      :title="ztTitle"
      :close-on-click-modal="false"
      :visible.sync="zitiShow"
      width="900px"
      append-to-body
    >
      <div>
        <el-form
          ref="ztForm"
          label-width="80px"
          :model="ztForm"
          class="demo-ruleForm"
        >
          <el-form-item :label="'邮费返还'" prop="postage">
            <el-input v-model="ztForm.postage" style="width: 166px" />
          </el-form-item>
        </el-form>
        <div class="menuList">
          <div
            v-for="item in qhList"
            :key="item.id"
            :class="['menu_i', isMenu == item.id ? 'actMenu' : '']"
            @click="isMenu = item.id"
          >
            {{ item.text }}
          </div>
        </div>
        <div>
          <el-table
            v-if="isMenu == 0"
            :data="ztData.productList"
            height="400px"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
          >
            <el-table-column
              align="center"
              prop="orderCode"
              :label="'订单编号'"
            />
            <el-table-column
              align="center"
              prop="productName"
              :label="'产品名称'"
            />
            <el-table-column
              align="center"
              prop="specsName"
              :label="'产品规格'"
            />
            <el-table-column
              align="center"
              prop="quantity"
              :label="'产品数量'"
            />
          </el-table>
          <el-table
            v-if="isMenu == 1"
            :data="ztData.barCodeList"
            height="400px"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
          >
            <!-- :row-class-name="tableRowClassName"
         -->
            <el-table-column
              align="center"
              prop="orderCode"
              :label="'订单编号'"
            />
            <el-table-column
              align="center"
              prop="productName"
              :label="'产品名称'"
            />
            <el-table-column
              align="center"
              prop="specsName"
              :label="'产品规格'"
            />
            <el-table-column
              align="center"
              prop=""
              :label="'产品数量'"
            ><template>
              <span>1</span>
            </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="barCode"
              :label="'追溯码'"
            ><template slot-scope="scope">
              <el-input v-model="scope.row.barCode" />
            </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="footer" style="text-align: center; margin-top: 20px">
          <el-button @click="zitiShow = false">
            {{ '取消' }}</el-button>
          <el-button type="primary" @click="sureTh">{{
            '确定'
          }}</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 订单抵扣弹窗 -->
    <el-dialog
      title="订单抵扣"
      :close-on-click-modal="false"
      :visible.sync="orderDkShow"
      width="900px"
      append-to-body
    >
      <div>
        <div>
          <el-table
            :data="pkOrderNewData"
            height="140px"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
          >
            <el-table-column
              align="center"
              prop="orderCode"
              :label="'订单编号'"
            />
            <el-table-column
              align="center"
              prop="orderAmount"
              :label="'金额'"
            />
            <el-table-column
              align="center"
              prop="orderAchieve"
              :label="`${'业绩'}($)`"
            />
            <el-table-column align="center" prop="orderAssAchieve" label="BV" />
          </el-table>
        </div>
        <el-form
          ref="orderDkForm"
          label-width="120px"
          :model="orderDkForm"
          class="demo-ruleForm"
        >
          <el-row :gutter="10">
            <el-col :span="12">
              <el-form-item label="抵扣订单编号" prop="orderCode">
                <el-input v-model="orderDkForm.orderCode" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-button type="primary" @click="getOldOrderDk">
                {{ '搜索' }}</el-button>
            </el-col>
          </el-row>
        </el-form>
        <div>
          <el-table
            :data="pkOrderOldData"
            height="140px"
            style="width: 100%"
            :header-cell-style="{ background: '#EEEEEE' }"
          >
            <el-table-column
              align="center"
              prop="orderCode"
              label="抵扣订单编号"
            />
            <el-table-column
              align="center"
              prop="orderAmount"
              :label="'金额'"
            />
            <el-table-column
              align="center"
              prop="orderAchieve"
              :label="`${'业绩'}($)`"
            />
            <el-table-column align="center" prop="orderAssAchieve" label="BV" />
          </el-table>
        </div>
        <div class="footer" style="text-align: center; margin-top: 20px">
          <el-button @click="orderDkShow = false">
            {{ '取消' }}</el-button>
          <el-button type="primary" @click="sureOrderDk">{{
            '确定'
          }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getDeliveryUnhandledList } from "@/api/delivery";
import * as del from '@/api/delivery'
import { Loading } from 'element-ui'
export default {
  name: 'Unhandeled',
  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      const realVal = parseFloat(value).toFixed(2)
      return realVal
    }
  },
  props: {
    params: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      qhList: [
        {
          text: '提货商品',
          id: 0
        },
        {
          text: '绑定追溯码',
          id: 1
        }
      ],
      tableData: [],
      total: 0,
      // 非多个禁用
      multiple: true,
      hdShow: false, // 合单弹框
      hdform: {
        mergeType: '', // 合单类型
        recNameBool: 0, // 收货人
        recPhoneBool: 0, // 收货电话
        recAreaBool: 0, // 收货省市区
        recAddressBool: 0, // 收货详细地址
        operateScope: 0, // 供应方式
        preSaleStatus: 0, // 预售状态
        productNameBool: 1,
        transportTypeList: [], // 运输方式
        deliveryWayList: [], // 发货方式
        idList: [], // 订单明细ID列表
        excludeIdList: [] // 排序产品ID
      },
      hdrules: {
        transportTypeList: [
          { required: true, message: '请选择运输方式', trigger: 'change' }
        ],
        deliveryWayList: [
          { required: true, message: '请选择发货方式', trigger: 'change' }
        ]
      },
      yesornoList: [],
      supplyWayList: [], // 供应方式
      deliveryWayList: [], // 发货方式
      transportTypeList: [], // 运输方式
      presaleStatusList: [], // 预售状态
      unproductData: [],
      zitiShow: false,
      ztTitle: '自提',
      isMenu: '0',
      ztData: {},
      ztForm: {
        postage: ''
      },
      orderIdList: [], // 自提用到orderIdList
      pageSizes: [100, 500, 1000, 2000, 4000],
      selRow: [],
      orderDkShow: false,
      orderDkForm: {
        orderCode: ''
      },
      pkOrderNewData: [],
      pkOrderOldData: []
    }
  },
  created() {
    this.getList()
    this.getOther()
  },
  methods: {
    sureOrderDk() {
      if (this.pkOrderNewData.length > 0 && this.pkOrderOldData.length > 0) {
        const theform = {
          pkOrderNewData: this.pkOrderNewData,
          pkOrderOldData: this.pkOrderOldData
        }
        // 发起签呈
        this.$router.push({
          path: 'deductionZxqc',
          query: {
            data: JSON.stringify(theform),
            index: 254
          }
        })
      }
    },
    // 订单抵扣
    orderDk() {
      this.orderDkShow = true
      del
        .getNewDeductionData({ pkOrder: this.selRow[0].pkOrder })
        .then((res) => {
          if (res.code == 200) {
            this.pkOrderNewData = [res.data]
          }
        })
    },
    getOldOrderDk() {
      del
        .getOldDeductionData({
          orderCode: this.orderDkForm.orderCode
        })
        .then((res) => {
          if (res.code == 200) {
            this.pkOrderOldData = [res.data]
          }
        })
    },
    getOther() {
      del.getDealerYesNo().then((res) => {
        this.yesornoList = res.data
      })
      del.getSupplyWay().then((res) => {
        this.supplyWayList = res.data
      })
      del.getPresaleStatus().then((res) => {
        this.presaleStatusList = res.data
      })
      del.getDeliveryWayList().then((res) => {
        this.deliveryWayList = res.data
        if (this.deliveryWayList.length > 0) {
          this.hdform.deliveryWayList = [this.deliveryWayList[0].value]
        }
      })
      del.getTransportType().then((res) => {
        this.transportTypeList = res.data
        if (this.transportTypeList.length > 0) {
          this.hdform.transportTypeList = [this.transportTypeList[0].value]
        }
      })
    },
    // 确定提货
    sureTh() {
      this.$router.push({
        path: 'ztZxqc',
        query: {
          postage: this.ztForm.postage,
          itemIdList: JSON.stringify(this.hdform.idList),
          barCodeList: JSON.stringify(this.ztData.barCodeList),
          productList: JSON.stringify(this.ztData.productList),
          businessType: 251
        }
      })
    },
    // 合单
    mergeHd(index) {
      this.hdform.mergeType = index

      if (index == 1) {
        this.hdShow = true
        // const theidList = this.hdform.idList.join()
        del
          .getExcludeProduct({ mergeType: 1, idList: this.hdform.idList })
          .then((res) => {
            this.unproductData = res.data
          })
      } else if (index == 0) {
        this.$confirm('是否确定进行全部合单操作?').then((_) => {
          del
            .deliverUnhandeldMerge(
              Object.assign({}, this.params, {
                mergeType: this.hdform.mergeType
              })
            )
            .then((res) => {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.getList()
            })
          const loading = Loading.service({
            lock: true,
            text: '处理中...',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          setTimeout(() => {
            loading.close()
          }, 2000)
        })
      } else if (index == 2) {
        this.zitiShow = true
        del
          .getUnhandeldSelfData({ orderIdList: this.orderIdList.join() })
          .then((res) => {
            this.ztData = res.data
          })
      }
    },
    // 确认合单
    sureHd(formName) {
      const loading = Loading.service({
        lock: true,
        text: '处理中...',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(() => {
        loading.close()
      }, 2000)
      this.$refs[formName].validate((valid) => {
        this.hdform.recAddressBool = Boolean(!this.hdform.recAddressBool)
        this.hdform.recAreaBool = Boolean(!this.hdform.recAreaBool)
        this.hdform.recNameBool = Boolean(!this.hdform.recNameBool)
        this.hdform.recPhoneBool = Boolean(!this.hdform.recPhoneBool)
        this.hdform.productNameBool = Boolean(!this.hdform.productNameBool)
        if (valid) {
          del.deliverUnhandeldMerge(this.hdform).then((res) => {
            if (res.code == 200) {
              this.$message({
                message: res.msg,
                type: 'success'
              })
              this.getList()
              this.hdShow = false
            }
          })
        }
      })
    },
    handleSelectionChange(selection) {
      this.hdform.idList = selection.map((item) => item.pkId)
      this.orderIdList = selection.map((item) => item.pkOrder)
      this.multiple = !selection.length
      this.selRow = selection
    },
    handleSelectionChange2(sele) {
      this.hdform.excludeIdList = sele.map((item) => item.pkProduct)
    },
    // 导出
    handleExport() {
      this.params.pkIdList = this.hdform.idList
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((_) => {
        this.download(
          '/sale/manage/deliver-unhandled/export',
          // {pkIdList:this.hdform.idList},
          { ...this.params },
          `${'未合单'}${new Date().getTime()}.xlsx`
        )
      })
    },
    getList() {
      this.params.pkIdList = []
      del.getDeliveryUnhandledList(this.params).then((res) => {
        this.tableData = res.rows
        this.total = res.total
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  margin-top: 6vh !important;
}
::v-deep .el-table .warning-row {
  background: #f9f9f9;
}

::v-deep .el-table .success-row {
  background: #ffffff;
}
::v-deep .el-table thead {
  color: #000000;
}
.menuList {
  display: flex;
  box-sizing: border-box;

  .menu_i {
    margin-right: 70px;
    line-height: 50px;
    cursor: pointer;
  }
  .actMenu {
    border-bottom: 5px solid #b42b2a;
  }
}
// .xian {
//   height: 5px;
//   background: rgba(0, 0, 0, 0.05);
//   margin-top: -5px;
// }
.main_title {
  display: flex;
  align-items: center;
  padding: 10px 0;
  // padding-bottom: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  .bluekuai {
    width: 5px;
    height: 19px;
    background: #4391fd;
    margin-right: 20px;
  }
  .title_word {
    font-size: 14px;
    font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
    font-weight: bold;
    color: #333333;
  }
}
.main {
  // margin-top: 20px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);

  .main_content {
    padding: 20px 25px;
  }

  .maintop {
    display: flex;
    // padding: 10px 20px;
    padding-bottom: 10px;
    justify-content: space-between;
    align-items: center;
    .mainbtn {
      .thebtn1 {
        color: #ffffff;
        background: rgba(243, 169, 0, 1);
      }
      .thebtn2 {
        color: #ffffff;
        background: rgba(16, 142, 233, 1);
      }
      .thebtn3 {
        color: #ffffff;
        background: rgba(0, 155, 88, 1);
      }
      .thebtn4 {
        color: #ffffff;
        background: rgba(167, 116, 176, 1);
      }
      .thebtn5 {
        color: #ffffff;
        background: rgba(0, 155, 88, 1);
      }
      .thebtn6 {
        color: #ffffff;
        background: rgba(236, 108, 0, 1);
      }
    }
  }
}
</style>
