<template>
  <Drawer
    :closable="false"
    :mask-closable="false"
    :title="'数据设置'"
    @on-visible-change="visibleChange"
    v-model="my_show"
    width="750"
  >
    <div class="page-edit-wrap uinn-lr5">
      <ui-loading :show="loading"></ui-loading>

      <ul>
        <li class="ui-list">
          <div class="ui-list-title">流量池名称：</div>
          <div class="ui-list-content lh-32">{{data.pool_name}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">
            <span class="title-require">*</span>设置年月：
          </div>
          <div class="ui-list-content">
            <DatePicker
              type="month"
              placeholder="请选择月份"
              v-model.trim="params.month"
              @on-change="index"
            ></DatePicker>
          </div>
        </li>

        <div v-if="flowPool.setting_status">
          <li class="ui-list">
            <div class="ui-list-title">月计费总卡数：</div>
            <div class="ui-list-content lh-32">{{data.total}}</div>
          </li>

          <li class="ui-list">
            <div class="ui-list-title">
              <span class="title-require">*</span>总使用流量：
            </div>
            <div class="ui-list-content">
              <InputNumber :max="99999999" :min="0" v-model="params.total_flows"></InputNumber>（M）
            </div>
          </li>

          <li class="ui-list">
            <div class="ui-list-title">
              <span class="title-require">*</span>流量分配规则：
            </div>
            <div class="ui-list-content">
              <Row>
                <Col span="4">套餐名称</Col>
                <Col span="4">月计费卡数</Col>
                <Col span="4">
                  <span class="error-color">*</span>卡数量
                </Col>
                <Col span="8">
                  <span class="error-color">*</span>月已用流量范围（M）
                </Col>
                <Col span="4"></Col>
              </Row>
              <Row v-for="(obj, objIndex) in params.settings" :key="objIndex">
                <Row v-for="(item, index) in obj.cards" :key="index" class="umar-tb5">
                  <Col span="4">{{!index ? obj.package_name : '&nbsp;'}}</Col>
                  <Col span="4">
                    {{!index ? obj.total : '&nbsp;'}}
                    <Tooltip v-if="!index" content="新增的卡（未设置流量）">
                      <Badge :count="obj.news"></Badge>
                    </Tooltip>
                  </Col>
                  <Col span="4">
                    <InputNumber :max="99999999" :min="0" v-model="item.counts"></InputNumber>
                  </Col>
                  <Col span="8">
                    <Row>
                      <Col span="11">
                        <InputNumber :max="99999999" :min="0" v-model="item.flow_range[0]"></InputNumber>
                      </Col>
                      <Col span="2">-</Col>
                      <Col span="1">
                        <InputNumber :max="99999999" :min="0" v-model="item.flow_range[1]"></InputNumber>
                      </Col>
                    </Row>
                  </Col>
                  <Col span="4">
                    <Button
                      type="success"
                      shape="circle"
                      icon="md-add"
                      size="small"
                      class="umar-r5"
                      @click="handleAdd(objIndex, index)"
                    ></Button>
                    <Button
                      type="error"
                      shape="circle"
                      icon="md-remove"
                      size="small"
                      @click="handleRemove(objIndex, index)"
                      v-if="obj.cards.length > 1"
                    ></Button>
                  </Col>
                </Row>
              </Row>
            </div>
          </li>
        </div>

        <div v-if="!flowPool.setting_status">
          <Alert type="error">计费规则未配置</Alert>
        </div>
      </ul>
    </div>
    <div class="ta-c">
      <Button @click="clear" class="w-80 umar-r5" ghost type="primary">取消</Button>
      <Button
        v-if="flowPool.setting_status"
        :loading="loading"
        @click="ok"
        class="w-80"
        type="primary"
      >提交</Button>
    </div>
  </Drawer>
</template>

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