<!--首页-->
<template>
  <div class="box">
    <div class="top-fn-view">
      <div style="line-height: 42px; border-bottom: 1px solid #d8d8d8">
        <span class="ph_title">常用功能</span>
      </div>
      <ul class="nav-btn-ul">
        <li
          v-for="(item, index) in top_btn_list"
          :key="index"
          class="nav-btn-li"
          @click="$router.push(item.path)"
        >
          <span
            :style="{ background: item.color }"
            class="iconfont nav-btn-icon"
            :class="[item.icon]"
          ></span>
          <span style="color: #24365c; margin-left: 10px">
            {{ item.label }}
          </span>
        </li>
      </ul>
    </div>
    <ul class="top-data-ul">
      <li class="top-data-li clearfix">
        <div class="btn">
          <el-button
            type="primary"
            @click="$router.push('/Finance/MultipleStore/WithdrawLogs')"
          >
            收支记录
          </el-button>
          <el-button
            type="danger"
            @click="$router.push('/Finance/MultipleStore/WithdrawLogs')"
          >
            提现
          </el-button>
        </div>
        <div class="float_left">
          <p class="card-label" style="position: relative">
            <i
              class="el-icon-s-help"
              style="
                color: #0668f0;
                font-size: 10px;
                position: relative;
                top: -2px;
                left: 0;
              "
            ></i>
            可提现金额
          </p>
          <p class="card-des">
            <i class="el-icon-edit" style="color: transparent"></i>
            当前可提现金额
          </p>
          <p class="card-num">
            <i
              class="el-icon-edit"
              style="font-size: 13px; color: transparent"
            ></i>
            <span class="money">
              {{ $_common.formattedNumber(balance) }}
            </span>
          </p>
        </div>
        <div class="float_left">
          <el-tooltip
            effect="dark"
            content="当前可提现金额"
            placement="top-start"
          >
            <i class="el-icon-question mark"></i>
          </el-tooltip>
        </div>
      </li>
    </ul>

    <el-row v-if="false" :gutter="12">
      <el-col :span="16">
        <div class="model-view">
          <div class="total">合计：¥400.00</div>
          <div class="title">
            <span>财务实时数据</span>
            <el-tooltip class="item" effect="dark" placement="top-start">
              <div slot="content">
                1、待出库商品：客户已下单商品未出库商品数量；
                <br />
                2、待结算金额：商品已出库，结算单财务未审核金额；
                <br />
                3、可提现金额：商品已出库，已审核结算单，未提现金额；
                <br />
                4、可用库存金额：目前剩余的库存*当前商品单价=预计库存剩余金额；
                <br />
                5、合计金额：代配送金额+待结算金额+可提现金额+可用库存金额=合计金额；
                <br />
                6、以上所有字段点击查看分仓明细数据
              </div>
              <i class="el-icon-question"></i>
            </el-tooltip>
            <span class="desc">更新时间（2020-09-09 11:11:11）</span>
          </div>
          <ul class="content-view">
            <li class="data-li">
              <p class="money">¥0.00</p>
              <p class="label">待出库金额</p>
            </li>
            <li class="data-li">
              <p class="money">¥0.00</p>
              <p class="label">待结算金额</p>
            </li>
            <li class="data-li">
              <p class="money">¥0.00</p>
              <p class="label">可提现金额</p>
            </li>
            <li class="data-li">
              <p class="money">¥0.00</p>
              <p class="label">可用库存金额</p>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="model-view">
          <div class="total">
            <span>可提现金额:0元</span>
            <el-button
              style="border: 0px; color: #0e0eff; font-size: 14px"
              @click="$router.push('/Finance/MultipleStore/WithdrawLogs')"
            >
              提现
            </el-button>
          </div>
          <div class="title">商品管理</div>
          <div class="goods">
            <div class="goods_item">
              <p class="num">500</p>
              <p class="label">商品总数</p>
            </div>
            <div class="goods_item">
              <p class="num">80</p>
              <p class="label">上架数</p>
            </div>
            <div class="goods_item">
              <p class="num">0</p>
              <p class="label">下架数</p>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--    <el-row :span="24">-->
    <!--      <div class="model-data">-->
    <!--        <div class="time_date">-->
    <!--          <span>实时数据</span>-->
    <!--          <el-tooltip-->
    <!--            class="item"-->
    <!--            effect="dark"-->
    <!--            content="Top Left 提示文字"-->
    <!--            placement="top-start"-->
    <!--          >-->
    <!--            <i class="el-icon-question"></i>-->
    <!--          </el-tooltip>-->
    <!--          <span class="desc">更新时间（2020-09-09 11:11:11）</span>-->
    <!--          <div class="select">-->
    <!--            <span style="margin-right: 4px">全部:</span>-->
    <!--            <el-select v-model="value" placeholder="请选择">-->
    <!--              <el-option-->
    <!--                v-for="item in options"-->
    <!--                :key="item.value"-->
    <!--                :label="item.label"-->
    <!--                :value="item.value"-->
    <!--              ></el-option>-->
    <!--            </el-select>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--        <div class="content">-->
    <!--          <div class="conten-item">-->
    <!--            <p class="label">流水额</p>-->
    <!--            <p class="money">0.00</p>-->
    <!--            <p>昨日0</p>-->
    <!--          </div>-->
    <!--          <div class="conten-item">-->
    <!--            <p class="label">成交订单数</p>-->
    <!--            <p class="money">0</p>-->
    <!--            <p>昨日0</p>-->
    <!--          </div>-->
    <!--          <div class="conten-item">-->
    <!--            <p class="label">到点访客数</p>-->
    <!--            <p class="money">0</p>-->
    <!--            <p>昨日0</p>-->
    <!--          </div>-->
    <!--          <div class="conten-item">-->
    <!--            <p class="label">商品浏览量</p>-->
    <!--            <p class="money">0.00</p>-->
    <!--            <p>昨日0</p>-->
    <!--          </div>-->
    <!--          <div class="conten-item">-->
    <!--            <p class="label">平均订单价</p>-->
    <!--            <p class="money">0.00</p>-->
    <!--            <p>昨日0</p>-->
    <!--          </div>-->
    <!--          <div class="conten-item">-->
    <!--            <p class="label">成交客户数</p>-->
    <!--            <p class="money">0.00</p>-->
    <!--            <p>昨日0</p>-->
    <!--          </div>-->
    <!--          <div class="conten-item content-special">-->
    <!--            <p class="label">成交转化率</p>-->
    <!--            <p class="money">0.00</p>-->
    <!--            <p>昨日0%</p>-->
    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </el-row>-->
  </div>
</template>

<script>
  import { getInfoMerchant } from "@/api/Merchants";
  import { mapGetters } from "vuex";
  export default {
    name: "MerchIndex",
    components: {},
    data() {
      return {
        value: "",
        options: [],
        top_btn_list: [],
        balance: "0.00",
        btn_list: [
          {
            label: "商品列表",
            path: "/goods/sale/MerchantsGoods",
            icon: "icon-mofang",
            color: "linear-gradient(270deg,#4B9EFF 0%,#3D89FF 100%)",
          },
          {
            label: "调价表",
            path: "/goods/sale/PriceTable",
            icon: "icon-36",
            color: "linear-gradient(270deg,#739EFF 0%,#3F64FF 100%)",
          },
          {
            label: "商户入库单",
            path: "/Purchase/ManageP/Merchant",
            icon: "icon-icon_function_ruku",
            color: "linear-gradient(270deg,#73CDFF 0%,#3F9FFF 100%)",
          },
          {
            label: "库存查询",
            path: "/stock/WarehouseAdmin/query",
            icon: "icon-shenhe",
            color: "linear-gradient(270deg,#5AA4FF 0%,#3884FF 100%)",
          },
          {
            label: "库存汇总",
            path: "/stock/summary/WarehouseStockSummary",
            icon: "icon-kucun",
            color: "linear-gradient(270deg,#48C9DD 0%,#36B5CF 100%)",
          },
          {
            label: "结算记录",
            path: "/Settlement/SettlementLogs",
            icon: "icon-zhijiandan-",
            color: "linear-gradient(270deg,#5AA4FF 0%,#3884FF 100%)",
          },
          {
            label: "收支记录",
            path: "/Finance/MultipleStore/InAndOutLogs",
            icon: "icon-shouzhizongbiao",
            color: "linear-gradient(270deg,#739EFF 0%,#3F64FF 100%)",
          },
          {
            label: "提现记录",
            path: "/Finance/MultipleStore/WithdrawLogs",
            icon: "icon-tixian",
            color: "linear-gradient(270deg,#C26DD2 0%,#8E3BA6 100%)",
          },
        ],
      };
    },
    computed: {
      ...mapGetters({ storeData: "MUser/storeData" }),
    },
    created() {
      this.getInfoMerchant();
    },
    mounted() {
      // 常用功能权限判断
      this.top_btn_list = this.btn_list.filter((item) => {
        return this.$accessCheck(this.$Access[item.access]);
      });
    },
    methods: {
      async getInfoMerchant() {
        const { data } = await getInfoMerchant(this.storeData.merchantData.id);
        this.balance = data.balance;
      },
    },
  };
</script>
<style scoped lang="scss">
  .top-fn-view {
    padding: 0 24px;
    background: #ffffff;
    margin-bottom: 16px;
    border-radius: 10px;
    .ph_title {
      font-weight: 700;
      font-size: 16px;
      color: #1b2d54;
    }

    .nav-btn-ul {
      display: flex;
      padding: 20px 0;
      .nav-btn-li {
        flex: 10;
        cursor: pointer;
        font-size: 16px;
        .nav-btn-icon {
          display: inline-block;
          width: 48px;
          height: 48px;
          text-align: center;
          color: #fff;
          background-color: #409eff;
          border-radius: 100%;
          line-height: 48px;
          font-size: 24px;
        }
      }
    }
  }
  .top-data-ul {
    font-size: 16px;
    .top-data-li {
      width: 30%;
      min-height: 158px;
      padding: 12px 17px 12px 17px;
      border-radius: 6px;
      margin-bottom: 10px;
      background-color: #fff;
      box-shadow: 0px 2px 6px 0px rgba(76, 80, 88, 0.16);
      position: relative;
      .el-icon-question {
        font-size: 14px;
        color: #c0c5cf;
        margin-left: 5px;
      }
      .btn {
        position: absolute;
        bottom: 12px;
        right: 17px;
      }
      .card-label {
        padding-bottom: 4px;
        font-weight: 700;
        font-size: 16px;
      }
      .card-des {
        font-size: 12px;
        color: #848890;
      }
      .card-num {
        font-size: 20px;
        color: #24365c;
        margin-top: 50px;
      }
    }
  }

  .model-data {
    margin-top: 20px;
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(76, 80, 88, 0.16);
    border-radius: 6px;
    padding: 14px 24px;
    .time_date {
      font-size: 16px;
      font-weight: 600;
      color: #1b2d54;
      line-height: 22px;
      position: relative;
      .select {
        position: absolute;
        top: -9px;
        right: 2px;
      }
      .el-icon-question {
        font-size: 14px;
        color: #c0c5cf;
        margin-left: 5px;
      }
      .desc {
        margin-left: 10px;
        font-size: 12px;
        font-weight: 400;
        color: #848890;
        line-height: 17px;
      }
    }
    .content {
      margin-top: 5px;
      display: flex;
      height: 140px;
      //border: 1px solid #d3d3d3;
      padding: 15px 10px;
      border-radius: 5px;
      .conten-item {
        width: 15%;
        height: 110px;
        border-right: 1px solid #d3d3d3;
        padding-left: 20px;
        .money {
          font-size: 20px;
          font-weight: 500;
          color: #24365c;
          line-height: 26px;
        }
        .label {
          font-size: 14px;
          font-weight: 400;
          color: #99a0b0;
          line-height: 20px;
        }
        p {
          margin-top: 10px;
        }
      }
      .content-special {
        border: 0;
      }
    }
  }
  .model-view {
    background: #ffffff;
    box-shadow: 0px 2px 6px 0px rgba(76, 80, 88, 0.16);
    border-radius: 6px;
    padding: 14px 24px;
    position: relative;
    .total {
      font-size: 14px;
      position: absolute;
      top: 14px;
      right: 24px;
    }
    .txt {
      padding-top: 10px;
      margin-top: 6px;
      height: 35px;
      color: #696969;
      border-radius: 2px;
    }
    .goods {
      display: flex;
      flex: 3;
      justify-content: space-between;
      padding: 20px 0;
      .goods_item {
        padding-top: 4px;
        text-align: center;
        width: 25%;
        height: 50px;
        //border: 1px solid #f6f8f9;
        font-weight: 600;
        line-height: 20px;
        .label {
          font-size: 14px;
          font-weight: 400;
          color: #99a0b0;
          margin-top: 8px;
        }
        .num {
          //margin-bottom: 4px;
          font-size: 20px;
          font-weight: 400;
          color: #24365c;
        }
      }
    }
    .title {
      font-size: 16px;
      font-weight: 600;
      color: #1b2d54;
      line-height: 22px;
      .desc {
        margin-left: 10px;
        font-size: 12px;
        font-weight: 400;
        color: #848890;
        line-height: 17px;
      }
      .el-icon-question {
        font-size: 14px;
        color: #c0c5cf;
        margin-left: 5px;
      }
    }
    .content-view {
      display: flex;
      padding: 20px 0;
      .data-li {
        flex: 4;
        text-align: center;
        .label {
          font-size: 14px;
          font-weight: 400;
          color: #99a0b0;
          line-height: 20px;
        }
        .money {
          margin-bottom: 4px;
          font-size: 20px;
          font-weight: 500;
          color: #24365c;
          line-height: 26px;
        }
      }
    }
  }
</style>
