<template>
  <div class="home-page">
    <div class="total-data">
      <p class="p-title">今日数据</p>
      <ul>
        <li>
          <p>{{ voucherData.remainNumber || 0 }}</p>
          <p>代金卷历史总额</p>
        </li>
        <li>
          <p>{{ voucherData.number || 0 }}</p>
          <p>代金卷余额</p>
        </li>
        <li>
          <p>代金卷转赠</p>
          <p>
            <el-tooltip class="item" effect="dark" content="可前往客户管理列表查看" placement="bottom-start">
              <input v-model="clientId" class="userId" type="text" placeholder="请输入接收者ID">
            </el-tooltip><el-button size="small" type="primary" @click="voucherShow = true">点击转增</el-button>
            <el-dialog
              title="请输入需要转增的代金卷数额"
              :visible.sync="voucherShow"
              width="30%"
              :close-on-click-modal="false"
              :close-on-press-escape="false"
            >
              <el-input v-model="giftNumber" autocomplete="off"></el-input>
              <span slot="footer" class="dialog-footer">
                <el-button @click="voucherShow = false">取 消</el-button>
                <el-button type="primary" @click="giftVoucher">确 定</el-button>
              </span>
            </el-dialog>
          </p>
        </li>
        <li>
          <p>更多展示模块</p>
          <p>敬请期待....</p>
        </li>
      </ul>
    </div>
    <div class="sketch_map">
      <div class="tab_list">
        <ul>
          <li v-for="(item, index) in tabList" :key="index" :class="[ { 'active': item.type === showTab } ]" @click="changeTab(item)">
            {{
              item.name
            }}
          </li>
        </ul>
      </div>
    </div>
    <div class="modelBox">
      <ToUpView v-if="showTab === 0"></ToUpView>
      <VoucherTable v-if="showTab === 1"></VoucherTable>
      <VoucherOrder v-if="showTab === 2"></VoucherOrder>
    </div>
  </div>
</template>

<script>
import { getVocherNumber, voucherShopHold } from '@/api/volumeManagement'
import ToUpView from './components/toUp.vue'
import VoucherTable from './components/voucherTable.vue'
import VoucherOrder from './components/VoucherOrder.vue'
export default {
  // eslint-disable-next-line vue/match-component-file-name
  name: 'Cnm',
  components: {
    ToUpView,
    VoucherTable,
    VoucherOrder
  },
  data() {
    return {
      voucherShow: false,
      showTab: 0,
      voucherReturn: {
        voucherReturn: '', // 返回比例(百分比%传百分比的值)
        isVoucher: 1 // 支持代金券：1-支持 2-不支持
      },
      clientId: '',
      giftNumber: '',
      voucherData: null,
      tabList: [
        { name: '代金卷流水记录', type: 2 },
        { name: '代金卷充值记录', type: 1 },
        { name: '代金卷充值', type: 0 }
      ]
    }
  },
  created() {
    getVocherNumber({}).then((res) => {
      this.voucherData = res.data
    })
    // getAllVoucher({
    //   page: '1',
    //   pageSize: '1',
    //   type: 4
    // }).then((res) => {
    //   console.log(res)
    // })
    // getAllVoucherOrder({ // 正常
    //   page: '1',
    //   pageSize: '1'
    // }).then((res) => {
    //   console.log(res)
    // })
  },
  methods: {
    changeTab(item) {
      this.showTab = item.type
    },
    giftVoucher() {
      if (this.clientId.length <= 0 || this.giftNumber <= 0) {
        this.$message({
          showClose: true,
          message: '警告, 受增人ID和赠送金额不能为空',
          type: 'warning'
        })
      } else {
        voucherShopHold({
          buyerUserId: this.clientId,
          voucherNum: this.giftNumber
        }).then((res) => {
          console.log(res)
          this.voucherShow = false
          this.giftNumber = 0
        })
          .catch((err) => {
            console.log(err)
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
ul {
   list-style: none;
}
.userId {
  width: 130px;
  height: 40px;
  font-size: 18px;
  margin-right: 20px;
}
.home-page {
	height: 100%;

	.total-data {
		.p-title {
			padding-left: 20px;
			font-size: 24px;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			line-height: 50px;
			height: 50px;
			margin: 0;
		}

		ul {
      list-style: none;
			overflow: hidden;
			display: flex;
			padding: 0;

			li {
				padding: 0;
				box-sizing: border-box;
				flex: 4;
				width: 400px;
				height: 140px;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(224, 229, 235, 1);
				border-radius: 4px;
				margin: 20px;

				p {
					margin: 0;
					height: 70px;
					line-height: 70px;
					text-align: center;

					&:nth-child(1) {
						font-size: 48px;
						font-weight: 600;
					}

					&:nth-child(2) {
						font-size: 18px;
					}
				}

				&:nth-child(1) {
					p:nth-child(1) {
						color: #1acda1;
					}
				}

				&:nth-child(2) {
					p:nth-child(1) {
						color: #ffae11;
					}
				}

				&:nth-child(3) {
					p:nth-child(1) {
						color: #ff7911;
					}
				}

				&:nth-child(4) {
					p:nth-child(1) {
						color: #3a68f2;
					}
				}
			}
		}
	}
  .sketch_map {
		height: calc(100% - 260px);
		box-sizing: border-box;
		background: #fff;
		padding: 0 20px;

		.tab_list {
			border-bottom: 1px solid #e0e5eb;
			overflow: hidden;
			margin-bottom: 20px;

			ul {
				overflow: hidden;
				float: right;
				width: 60%;
				padding: 0;
				margin: 0;

				li {
					padding: 0 20px;
					margin: 0;
					float: right;
					height: 60px;
					line-height: 60px;
					color: #999999;
					font-size: 18px;

					&:hover {
						cursor: pointer;
					}

					&:nth-child(1) {
						padding-right: 0;
					}
				}

				.active {
					color: #3a68f2;
					border-bottom: 3px solid #3a68f2;
				}
			}
		}

		.echart_list {
			height: calc(100% - 100px);

			.echart_item {
				position: relative;
				padding-left: 20px;
				box-sizing: border-box;
				height: calc(100% - 30px);
				width: calc((100% - 40px) / 3);
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(224, 229, 235, 1);
				box-shadow: 0px 5px 10px 0px rgba(51, 51, 51, 0.15);
				border-radius: 4px;
				float: left;

				.echart {
					height: calc(100% - 100px);
				}

				&:nth-child(-n + 2) {
					margin-right: 20px;
				}

				.title {
					margin: 0;
					height: 50px;
					line-height: 50px;
					font-size: 18px;
					color: #333333;

					&:nth-child(2) {
						text-align: center;
						color: #3a68f2;
						font-size: 14px;
					}
				}

				ul {
					height: calc(100% - 50px);
					margin: 0;
					padding: 0;

					li {
						height: 10%;
						display: flex;
						margin-bottom: 20px;

						p {
							float: left;
							// text-align: center;
							text-indent: 2em;
							padding: 0;
							margin: 0;
							color: #333333;
							font-size: 14px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

							&:nth-child(1) {
								flex: 2;
							}

							&:nth-child(2) {
								flex: 6;
							}

							&:nth-child(3) {
								flex: 4;
							}
						}
					}
				}

				.exportBtn {
					position: absolute;
					right: 10px;
					top: 10px;
				}
			}
		}
	}
  .modelBox {
    width: 100%;
    height: 61.77777777vh;
    /* min-height: 580px; */
    background-color: white;
  }
}

</style>
