<template>
  <Drawer
    :mask-closable="false"
    @on-visible-change="visibleChange"
    title="流量池详情"
    v-model="my_show"
    width="900"
  >
    <ui-loading :show="page_loading.show"></ui-loading>

    <div class="page-detail-wrap" v-if="flowPool">
      <Row>
        <Divider>基础信息</Divider>
        <Col span="12">
          <ul>
            <li class="ui-list">
              <div class="ui-list-title">统计年月:</div>
              <div class="ui-list-content">{{month}}</div>
            </li>

            <li class="ui-list">
              <div class="ui-list-title">流量池名:</div>
              <div class="ui-list-content">{{flowPool.name}}</div>
            </li>

            <li class="ui-list">
              <div class="ui-list-title">运营商:</div>
              <div class="ui-list-content">{{flowPool.carrier_operator_name}}</div>
            </li>
          </ul>
        </Col>
        <Col span="12">
          <ul>
            <li class="ui-list">
              <div class="ui-list-title">套餐包含:</div>
              <div class="ui-list-content">
                <Tag
                  color="blue"
                  v-for="(item,index) in packages"
                  :key="index"
                >{{item.package_name}}</Tag>
              </div>
            </li>

            <li class="ui-list">
              <div class="ui-list-title">续费包包含:</div>
              <div class="ui-list-content">
                <Tag
                  color="blue"
                  v-for="(item,index) in renewPackages"
                  :key="index"
                >{{item.package_name}}</Tag>
              </div>
            </li>

            <li class="ui-list">
              <div class="ui-list-title">状态:</div>
              <div class="ui-list-content">
                <Tag
                  :color="flowPool.status ? 'error' : 'success'"
                >{{flowPool.status ? '已禁用' : '启用中'}}</Tag>
              </div>
            </li>

            <li class="ui-list">
              <div class="ui-list-title">备注:</div>
              <div class="ui-list-content">{{flowPool.remark}}</div>
            </li>
          </ul>
        </Col>
      </Row>
    </div>

    <Row>
      <ul>
        <li class="f-r">
          <div class="handle-item">
            <Button @click="exportExcel" icon="md-download">导出</Button>
          </div>
        </li>
      </ul>
    </Row>

    <div class="page-list-wrap">
      <Table :columns="cardsColumns" :data="cards ? cards.data : []"></Table>
    </div>

    <div class="page-turn-wrap" v-if="cards">
      <Page
        :current="Number(cards.current_page)"
        :page-size="Number(cards.per_page)"
        :total="Number(cards.total)"
        @on-change="index"
        :page-size-opts="[5, 10, 50, 100]"
        @on-page-size-change="changeLimit"
        show-elevator
        show-total
        show-sizer
      ></Page>
    </div>
  </Drawer>
</template>

<script src="./js/detail.js"></script>
