<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-tabs v-model="tabType">
      <el-tab-pane label="未兑换" name="2">
        <el-input v-model="listNoQuery.search_name" type="text" style="width:250px" placeholder="请输入店铺名" />
        <el-select v-model="listNoQuery.type">
          <el-option label="工作室" value="1" />
          <el-option label="体验店" value="2" />
          <el-option label="优享店" value="3" />
        </el-select>
        <el-date-picker
          v-model="listNoQuery.month"
          type="month"
          placeholder="选择日期"
          format="yyyy-MM"
          value-format="yyyy-MM"
        />
        <el-button type="primary" @click="listNoQuery.page_index = 1; getNoList()">搜索</el-button>
        <el-table
          :data="Nolist"
          :header-cell-style="{ background: '#f8fbfc' }"
          class="tableBorder"
          border
          stripe
          style="margin:10px 0 0 0;"
        >
          <el-table-column prop="name" align="center" label="店铺名" />
          <el-table-column prop="name" align="center" label="店铺类型">
            <template slot-scope="{ row }">{{ row.type | shopType }}</template>
          </el-table-column>
          <el-table-column label="购买商品" align="left">
            <template slot-scope="{ row }">
              <div v-if="row.goods && row.goods.length > 0" class="goods_list">
                <p
                  v-for="(item, i) in row.goods"
                  :key="i"
                >{{ `${item.main_attr}-总价: ${item.account}-数量: ${item.total}-单位:${item.unit}` }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template slot-scope="{ row }">
              <el-button type="primary" size="small" @click="toExchange(row)">兑换</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination
          :total="Nototal"
          :limit="listNoQuery.page_size"
          :page="listNoQuery.page_index"
          @pagination="changeNoPagination"
          @update:limit="changeNoPagination"
        />
        <!-- 兑换 -->
        <el-dialog title="兑换商品" :visible.sync="exchangeVis">
          <div v-if="+exchangeType === 1">
            <div class="exchangeTip">
              <p class="tip" style="margin-right:20px;">可兑换现金: {{ Math.floor(exchangeGzsAccount) }}元</p>
              <p
                class="tip"
                :class="exchangeGzsWillAccount <= exchangeGzsAccount ? 'success' : 'danger'"
              >
                已兑换现金: {{ Math.floor(exchangeGzsWillAccount) }}元
              </p>
              <p v-if="exchangeGzsWillAccount > exchangeGzsAccount" class="tip danger">(已超过兑换金额上限)</p>
            </div>
            <el-table
              :data="exchangeGzsList"
              :header-cell-style="{ background: '#f8fbfc' }"
              class="tableBorder"
              border
              stripe
              style="margin-bottom:10px;"
            >
              <el-table-column prop="name" label="可兑换商品名" align="center" />
              <el-table-column prop="price" label="可兑换商品价格" align="center" />
              <el-table-column label="可兑换商品数量">
                <template slot-scope="{ row }">
                  <el-input-number v-model="row.number" style="width: 100%" :precision="0" :step="1" :min="0" :max="99999" @blur="inputBlur" />
                  <!-- <el-input v-model="row.number" type="number" /> -->
                </template>
              </el-table-column>
            </el-table>
            <el-button type="primary" size="small" @click="submitGZSExchange">兑换</el-button>
          </div>
          <div v-else-if="+exchangeType === 2">
            <el-table
              :data="exchangeTydList"
              :header-cell-style="{ background: '#f8fbfc' }"
              class="tableBorder"
              border
              stripe
              style="margin-bottom:10px;"
            >
              <el-table-column prop="name" label="商品名" align="center" />
              <el-table-column prop="total" label="总数量" align="center" />
              <el-table-column prop="unit" label="单位" align="center" />
              <el-table-column label="可兑换数量" align="center">
                <template slot-scope="{ row }">
                  <!-- <el-input v-model="row.number" type="text" /> -->
                  <el-input-number v-model="row.number" style="width: 100%" size="small" :precision="0" :step="1" :min="0" :max="99999" @blur="inputBlur" />
                </template>
              </el-table-column>
              <el-table-column prop="price" label="每件/套提成1" align="center" />
            </el-table>
            <el-button type="primary" size="small" @click="submitTydExchange">兑换</el-button>
          </div>
          <div v-else-if="+exchangeType === 3">
            <p class="exchange_title">兑换物品</p>
            <div class="exchangeTip">
              <p class="tip" style="margin-right:20px;">可兑换现金: {{ exchangeYxdAccount }}</p>
              <p
                class="tip"
                :class="exchangeYxdWillAccount <= exchangeYxdAccount ? 'success' : 'danger'"
              >已兑换现金: {{ exchangeYxdWillAccount }}</p>
              <p v-if="exchangeYxdWillAccount > exchangeYxdAccount" class="tip danger">(已超过兑换金额上限)</p>
            </div>
            <el-table
              :data="yxdExchangeList1"
              :header-cell-style="{ background: '#f8fbfc' }"
              class="tableBorder"
              border
              stripe
              style="margin-bottom:10px;"
            >
              <el-table-column prop="name" label="可兑换商品名" align="center" />
              <el-table-column prop="price" label="可兑换商品价格" align="center" />
              <el-table-column label="可兑换商品数量">
                <template slot-scope="{ row }">
                  <!-- <el-input v-model="row.number" type="text" /> -->
                  <el-input-number v-model="row.number" style="width: 100%" :precision="0" :step="1" :min="0" :max="99999" @blur="inputBlur" />
                </template>
              </el-table-column>
            </el-table>
            <div class="line" />
            <p class="exchange_title">兑换现金</p>
            <el-table
              :data="yxdExchangeList2"
              :header-cell-style="{ background: '#f8fbfc' }"
              class="tableBorder"
              border
              stripe
              style="margin-bottom:10px;"
            >
              <el-table-column prop="name" label="商品名" align="center" />
              <el-table-column prop="total" label="总数量" align="center" />
              <el-table-column prop="unit" label="单位" align="center" />
              <el-table-column v-if="exchangeYxdPriceType !== 2" label="可兑换数量1" align="center">
                <template slot-scope="{ row }">
                  <!-- <el-input v-model="row.number1" type="text" /> -->
                  <el-input-number v-model="row.number1" style="width: 100%" :precision="0" :step="1" :min="0" :max="99999" @blur="inputBlur" />
                </template>
              </el-table-column>
              <el-table-column
                v-if="exchangeYxdPriceType !== 2"
                prop="price1"
                label="每件/套提成1"
                align="center"
              />
              <el-table-column v-if="exchangeYxdPriceType !== 1" label="可兑换数量2" align="center">
                <template slot-scope="{ row }">
                  <!-- <el-input v-model="row.number2" type="text" /> -->
                  <el-input-number v-model="row.number2" style="width: 100%" :precision="0" :step="1" :min="0" :max="99999" @blur="inputBlur" />
                </template>
              </el-table-column>
              <el-table-column
                v-if="exchangeYxdPriceType !== 1"
                prop="price2"
                label="每件/套提成2"
                align="center"
              />
            </el-table>
            <el-button type="primary" size="small" @click="submitYxdExchange">兑换</el-button>
          </div>
        </el-dialog>
        <!-- 优享店兑换类型 -->
        <el-dialog title="优享店兑换" :visible.sync="yxdExchangeTypeVis" :before-close="resetYxd">
          <el-form label-width="120px">
            <el-form-item label="兑换类型:">
              <el-radio-group v-model="yxdExchangeType">
                <el-radio :label="1">兑换物</el-radio>
                <el-radio :label="2">兑换现金</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" @click="sureYxdType">确认</el-button>
              <el-button size="small" @click="resetYxd">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="已兑换" name="1">
        <el-input v-model="listQuery.search_name" type="text" style="width:250px" placeholder="请输入店铺名" />
        <el-select v-model="listQuery.type">
          <el-option label="工作室" value="1" />
          <el-option label="体验店" value="2" />
          <el-option label="优享店" value="3" />
        </el-select>
        <el-date-picker
          v-model="listQuery.month"
          type="month"
          placeholder="选择日期"
          format="yyyy-MM"
          value-format="yyyy-MM"
        />
        <el-button type="primary" @click="listQuery.page_index = 1; getList()">搜索</el-button>
        <el-table
          :data="list"
          :header-cell-style="{ background: '#f8fbfc' }"
          class="tableBorder"
          border
          stripe
          style="margin:10px 0 0 0;"
        >
          <el-table-column prop="name" align="center" label="店铺名" />
          <el-table-column prop="name" align="center" label="店铺类型">
            <template slot-scope="{ row }">{{ row.type | shopType }}</template>
          </el-table-column>
          <el-table-column label="当月业绩" align="left">
            <template slot-scope="{ row }">
              <div v-if="row.rewards && row.rewards.length > 0" class="goods_list">
                <div v-for="(item, i) in row.rewards.slice(0, 1)" :key="i">
                  <p
                    v-for="(btem, bi) in JSON.parse(item.content)"
                    :key="bi"
                  >
                    {{ `${btem.main_attr}-总价: ${btem.account}-数量: ${btem.total}-单位:${btem.unit}` }}
                  </p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="+exchangedType !== 1" label="已兑换现金" align="center">
            <template slot-scope="{ row }">
              {{ +exchangedType === 2 ? row.rewards[0].money : (row.rewards[1].money ? row.rewards[1].money : row.rewards[0].money) || 0 }}
            </template>
          </el-table-column>
          <el-table-column v-if="+exchangedType !== 2" label="已兑换商品" align="center">
            <template slot-scope="{ row }">
              <el-button type="text" @click="seeExchangeInfo(row)">查看兑换详情</el-button>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            width="120"
          >
            <template slot-scope="{ row }">
              <!-- :disabled="Date.now() > new Date(listQuery.month).getTime() + 24 * 3600 * 1000 * 30" -->
              <el-button type="primary" size="small" @click="cancelExchange(row)">撤销兑换</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <pagination
          :total="total"
          :limit="listQuery.page_size"
          :page="listQuery.page_index"
          @pagination="changePagination"
          @update:limit="changePagination"
        />
      </el-tab-pane>
    </el-tabs>
    <!-- 兑换详情 -->
    <el-dialog title="兑换商品" :visible.sync="exchangedInfoVis">
      <div
        v-for="(item, i) in exchangedInfo"
        :key="i"
      >
        <!-- <p class="exchange_title">{{ item.type === 1 ? '兑换物' : '兑换现金' }}</p> -->
        <el-table
          v-if="item.type === 1"
          :data="item.rewards"
          :header-cell-style="{ background: '#f8fbfc' }"
          class="tableBorder"
          border
          stripe
          style="margin-bottom:10px;"
        >
          <el-table-column prop="name" label="兑换商品名" align="center" />
          <el-table-column prop="price" label="兑换商品金额" align="center" />
          <el-table-column prop="number" label="兑换商品数量" align="center">
            <template slot-scope="{ row }">
              {{ Number(row.number) || 0 }}
            </template>
          </el-table-column>
        </el-table>
        <div v-if="+item.type === 2 && +listQuery.type !== 3">
          <!-- <el-table
            v-if="+listQuery.type === 2"
            :data="item.rewards"
            :header-cell-style="{ background: '#f8fbfc' }"
            class="tableBorder"
            border
            stripe
            style="margin-bottom:10px;"
          >
            <el-table-column prop="name" label="商品名" align="center" />
            <el-table-column prop="total" label="总数量" align="center" />
            <el-table-column prop="price" label="价格" align="center" />
            <el-table-column prop="number" label="兑换数量" align="center" />
          </el-table> -->
          <el-table
            v-if="+listQuery.type === 3"
            :data="item.rewards"
            :header-cell-style="{ background: '#f8fbfc' }"
            class="tableBorder"
            border
            stripe
            style="margin-bottom:10px;"
          >
            <el-table-column prop="name" label="商品名" align="center" />
            <el-table-column prop="total" label="总数量" align="center" />
            <el-table-column prop="number1" label="兑换数量1" align="center" />
            <el-table-column prop="price1" label="每件/套提成1" align="center" />
            <el-table-column prop="number2" label="兑换数量2" align="center" />
            <el-table-column prop="price2" label="每件/套提成2" align="center" />
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getList,
  getExchangePrice,
  submitGzsExchange,
  getNoList,
  cancelExchange
} from '@/api/shop/exchange'
import { formatter } from '@/filters/index'
export default {
  name: 'ShopExchange',
  filters: {
    shopType(num) {
      let out
      switch (+num) {
        case 1:
          out = '工作室'
          break
        case 2:
          out = '体验店'
          break
        case 3:
          out = '优享店'
          break
        default:
          out = '未知类型'
          break
      }
      return out
    }
  },
  data() {
    return {
      listQuery: {
        page_index: 1,
        page_size: 10,
        month: formatter(new Date(), 'yyyy-MM'),
        search_name: '',
        type: '1'
      },
      listNoQuery: {
        page_index: 1,
        page_size: 10,
        month: formatter(new Date(), 'yyyy-MM'),
        search_name: '',
        type: '1'
      },
      total: 0,
      list: [],
      exchangeVis: false,
      exchangeId: '',
      exchangeType: '',
      exchangeInfo: null,
      exchangeTydList: [],
      exchangeGzsList: [],
      exchangeGzsAccount: 0,
      loadingFull: false,
      yxdExchangeTypeVis: false,
      yxdExchangeType: 1,
      yxdExchangeItem: {},
      yxdExchangeList1: [],
      yxdExchangeList2: [],
      exchangeYxdAccount: 0,
      exchangeYxdPriceType: null,
      tabType: '2',
      Nolist: [],
      Nototal: 0,
      exchangedInfo: {},
      exchangedInfoVis: false,
      willExchangeItem: {},
      exchangedType: '1'
    }
  },
  computed: {
    exchangeGzsWillAccount() {
      return Math.floor(this.exchangeGzsList.reduce(
        (a, b) => a + ((Number(b.number) || 0) * Number(b.price)),
        0
      ))
    },
    exchangeYxdWillAccount() {
      return Math.floor(this.yxdExchangeList1.reduce(
        (a, b) => a + ((Number(b.number) || 0) * Number(b.price)),
        0
      ))
    }
  },
  watch: {
    tabType(a, b) {
      if (a === '1') {
        this.getList()
      } else {
        this.getNoList()
      }
    }
  },
  created() {
    this.getNoList()
  },
  methods: {
    inputBlur(e) {
      e.target.value = e.target.value ? e.target.value : 0
    },
    // 取消兑换
    cancelExchange(item) {
      this.$confirm('确认取消该兑换记录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        cancelExchange({
          month: this.listQuery.month,
          store_id: item.id
        }).then(res => {
          if (res.code === 200) {
            this.$message.success(res.message)
            this.getList()
          }
        })
      }).catch(() => {
      })
    },
    // 查看兑换详情
    seeExchangeInfo(item) {
      this.exchangedInfo = item.rewards.map(data => ({
        type: data.type ? data.type : +this.listQuery.type,
        rewards: data.rewards ? JSON.parse(data.rewards) : []
      }))
      console.log(this.exchangedInfo)
      this.exchangedInfoVis = true
    },
    getNoList() {
      this.loadingFull = true
      getNoList(this.listNoQuery)
        .then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.Nolist = res.data.list
            this.Nototal = res.data.total
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.loadingFull = false
          this.$message.error('获取兑换列表失败')
        })
    },
    getList() {
      this.exchangedType = this.listQuery.type
      this.loadingFull = true
      getList(this.listQuery)
        .then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.list = res.data.list
            this.total = res.data.total
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.loadingFull = false
          this.$message.error('获取兑换列表失败')
        })
    },
    // 分页页码变化
    changePagination(data) {
      const { page, limit } = data
      this.listQuery.page_size = limit
      this.listQuery.page_index = page
      this.getList()
    },
    changeNoPagination(data) {
      const { page, limit } = data
      this.listNoQuery.page_size = limit
      this.listNoQuery.page_index = page
      this.getNoList()
    },
    toExchange(item) {
      if (!item.goods || item.goods.length === 0) {
        this.$message.error('不存在可兑换商品')
        return false
      }
      this.willExchangeItem = item
      // 优享店可兑换2种
      // if(item.type === 3) {
      //   this.yxdExchangeItem = item
      //   this.yxdExchangeTypeVis = true
      // } else {
      this.getWillExchangeInfo(item)
      // }
    },
    // 优享店确认类型
    sureYxdType() {
      this.yxdExchangeItem.type = this.yxdExchangeType
      this.getWillExchangeInfo(this.yxdExchangeItem)
    },
    resetYxd() {
      this.yxdExchangeType = 1
      this.yxdExchangeItem = {}
      this.yxdExchangeTypeVis = false
    },
    // 获取兑换详情
    getWillExchangeInfo(item) {
      getExchangePrice({
        month: this.listNoQuery.month
      })
        .then(res => {
          if (res.code === 200) {
            if (res.data.goods && res.data.goods.length > 0) {
              // 区分类型
              this.exchangeType = item.type
              this.exchangeId = item.id
              this.exchangeInfo = item.goods
              if (+item.type === 1) {
                this.exchangeGzsList = res.data.goods.map(btem => ({
                  name: btem.name,
                  price: btem.price,
                  number: 0,
                  id: btem.id
                }))
                this.exchangeGzsAccount =
                  item.account * Number(res.data.account_rate)
              } else if (+item.type === 2) {
                this.exchangeTydList = item.goods.map(btem => ({
                  name: btem.main_attr,
                  total: btem.total,
                  unit: btem.unit,
                  number: 0,
                  price:
                    btem.main_attr.indexOf('精装') !== -1
                      ? res.data.experience_hard
                      : res.data.experience_other
                }))
              } else if (+item.type === 3) {
                // 物
                this.yxdExchangeList1 = res.data.goods.map(btem => ({
                  name: btem.name,
                  price: btem.price,
                  number: 0,
                  id: btem.id
                }))
                this.exchangeYxdAccount =
                  item.account * Number(res.data.account_rate)
                // 钱
                const goodsMax = item.goods.reduce(
                  (a, b) => {
                    const price = b.main_attr.indexOf('精装') !== -1
                      ? Number(b.total) * Number(res.data.enjoy_hard)
                      : Number(b.total) * Number(res.data.enjoy_other)
                    return a + price
                  },
                  0
                )
                if (Number(item.store_account) >= Number(item.decorate_account)) {
                  this.exchangeYxdPriceType = 2
                } else {
                  if (goodsMax + Number(item.store_account) > Number(item.decorate_account)) {
                    this.exchangeYxdPriceType = 3
                  } else {
                    this.exchangeYxdPriceType = 1
                  }
                }
                this.yxdExchangeList2 = item.goods.map(btem => ({
                  name: btem.main_attr,
                  total: btem.total,
                  unit: btem.unit,
                  number1: 0,
                  price1:
                    btem.main_attr.indexOf('精装') !== -1
                      ? res.data.enjoy_hard
                      : res.data.enjoy_other,
                  number2: 0,
                  price2:
                    btem.main_attr.indexOf('精装') !== -1
                      ? res.data.over_enjoy_hard
                      : res.data.over_enjoy_other
                }))
              }
              this.exchangeVis = true
            } else {
              this.$message.error('该月份没有设置可兑换')
            }
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(e => {
          console.log(e)
          this.$message.error('兑换失败')
        })
    },
    // 工作室提交兑换
    submitGZSExchange() {
      if (this.exchangeGzsWillAccount === 0) {
        this.$message.error('请填写兑换商品数量')
        return false
      }
      if (this.exchangeGzsWillAccount > this.exchangeGzsAccount) {
        this.$message.error('兑换商品数量已超过兑换金额上限')
        return false
      }
      submitGzsExchange({
        store_id: this.exchangeId,
        month: this.listNoQuery.month,
        info: this.exchangeInfo,
        goods: this.exchangeGzsList
      })
        .then(res => {
          if (res.code === 200) {
            this.$message.success(res.message)
            this.resetExchange()
            this.getNoList()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$message.error('兑换失败')
        })
    },
    // 体验店提交兑换
    submitTydExchange() {
      const isNull = this.exchangeTydList.every(
        item => Number(item.number) === 0
      )
      if (isNull) {
        this.$message.error('请填写兑换数量')
        return false
      }
      const isMore = this.exchangeTydList.some(
        item => Number(item.number) > Number(item.total)
      )
      if (isMore) {
        this.$message.error('可兑换数量超过最大数量')
        return false
      }
      submitGzsExchange({
        store_id: this.exchangeId,
        month: this.listNoQuery.month,
        info: this.exchangeInfo,
        goods: this.exchangeTydList
      })
        .then(res => {
          if (res.code === 200) {
            this.$message.success(res.message)
            this.resetExchange()
            this.getNoList()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$message.error('兑换失败')
        })
    },
    // 重置
    resetExchange() {
      this.exchangeId = ''
      this.exchangeType = ''
      this.exchangeInfo = null
      this.exchangeTydList = []
      this.exchangeGzsList = []
      this.exchangeGzsAccount = 0
      this.yxdExchangeList1 = []
      this.yxdExchangeList2 = []
      this.exchangeYxdAccount = 0
      this.exchangeYxdPriceType = null
      this.exchangeVis = false
    },
    // 优享店提交兑换
    submitYxdExchange() {
      if (this.exchangeYxdWillAccount === 0) {
        this.$message.error('兑换物: 请填写兑换商品数量')
        return false
      }
      if (this.exchangeYxdWillAccount > this.exchangeYxdAccount) {
        this.$message.error('兑换物: 超过兑换商品数量已超过兑换金额上限')
        return false
      }
      let isMore
      if (this.exchangeYxdPriceType === 1) {
        isMore = this.yxdExchangeList2.some(
          item => Number(item.number1) > Number(item.total)
        )
      } else if (this.exchangeYxdPriceType === 2) {
        isMore = this.yxdExchangeList2.some(
          item => Number(item.number2) > Number(item.total)
        )
      } else if (this.exchangeYxdPriceType === 3) {
        isMore = this.yxdExchangeList2.some(
          item =>
            Number(item.number1) + Number(item.number2) > Number(item.total)
        )
      }
      if (isMore) {
        this.$message.error('兑换现金: 超过可兑换数量超过最大数量')
        return false
      }
      if (this.exchangeYxdPriceType === 3) {
        const max = this.yxdExchangeList2.reduce((a, b) => {
          const price = Number(b.number1) * Number(b.price1) + Number(b.number2) * Number(b.price2)
          return a + price
        }, 0)
        if (max + Number(this.willExchangeItem.store_account) < Number(this.willExchangeItem.decorate_account)) {
          this.$message.error('临界状态下,兑换现金, 金额必须超过临界上限')
          return false
        }
      }
      submitGzsExchange({
        store_id: this.exchangeId,
        month: this.listNoQuery.month,
        info: this.exchangeInfo,
        goods: this.yxdExchangeList1,
        goods_price: this.yxdExchangeList2
      })
        .then(res => {
          if (res.code === 200) {
            this.$message.success(res.message)
            this.resetExchange()
            this.getNoList()
          } else {
            this.$message.error(res.message)
          }
        })
        .catch(() => {
          this.$message.error('兑换失败')
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.goods_list {
  p {
    margin: 0;
    line-height: 30px;
  }
}
.exchangeTip {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .tip {
    font-size: 20px;
    color: #409eff;
  }
  .success {
    color: #67c23a !important;
  }
  .danger {
    color: #f56c6c !important;
  }
}
.exchange_title {
  font-size: 30px;
}
.line {
  width: 100%;
  height: 1px;
  margin: 20px 0;
  background: #000;
}
</style>
