<template>
  <Drawer
    :closable="false"
    :mask-closable="false"
    :title="data ? '编辑流量池' : '添加流量池'"
    @on-visible-change="visibleChange"
    v-model="my_show"
    width="750"
  >
    <div class="page-edit-wrap uinn-lr5">
      <ui-loading :show="page_loading.show"></ui-loading>

      <ul>
        <li class="ui-list">
          <div class="ui-list-title">
            <span class="title-require">*</span>开始统计月份:
          </div>
          <div class="ui-list-content">
            <p>
              <DatePicker
                type="month"
                placeholder="请选择月份"
                :style="'width:' + listStyle.width"
                v-model.trim="params.start_at"
              ></DatePicker>
            </p>
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">
            <span class="title-require">*</span>流量池名称:
          </div>
          <div class="ui-list-content">
            <p>
              <Input
                :disabled="data?true:false"
                v-model.trim="params.name"
                :style="'width:' + listStyle.width"
              ></Input>
            </p>
            <ul class="common-tips-wraper umar-t5">
              <li class="t-title">提示</li>
              <li class="t-content">长度在2-32之间</li>
            </ul>
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">
            <span class="title-require">*</span>运营商:
          </div>
          <div class="ui-list-content">
            <Select
              :disabled="data ? true : false"
              v-model="params.carrier_operator"
              :style="'width:' + listStyle.width"
              @on-change="selectCO"
            >
              <Option :value="0">联通</Option>
              <Option :value="1">移动</Option>
              <Option :value="2">电信</Option>
            </Select>
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">
            <span class="title-require">*</span>企业名称:
          </div>
          <div class="ui-list-content">
            <Select
              :disabled="data ? true : false"
              filterable
              icon="ios-search"
              placeholder="企业名称"
              v-model.trim="params.company_id"
              :style="'width:' + listStyle.width"
              @on-change="filterPackages"
            >
              <Option :value="item.id" :key="item.id" v-for="item in companies">{{ item.name }}</Option>
            </Select>
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">
            <span class="title-require">*</span>套餐:
          </div>
          <div class="ui-list-content">
            <Transfer
              :titles="['备选套餐', '已选套餐']"
              :list-style="listStyle"
              :data="packageFilters"
              :target-keys="package_ids"
              @on-change="transferPackages"
            ></Transfer>
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">流量池编号:</div>
          <div class="ui-list-content">
            <Transfer
              :titles="['备选流量池编号', '已选流量池编号']"
              :list-style="listStyle"
              :data="realFilters"
              :target-keys="real_pool_ids"
              @on-change="transferRealFlowPools"
              filterable
            ></Transfer>
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">状态：</div>
          <div class="ui-list-content lh-32">
            <Switch size="large" :true-value="0" :false-value="1" v-model="params.status">
              <span slot="open">启用</span>
              <span slot="close">禁用</span>
            </Switch>
          </div>
        </li>
      </ul>
    </div>
    <div class="ta-c">
      <Button @click="clear" class="w-80 umar-r5" ghost type="primary">取消</Button>
      <Button :loading="loading" @click="ok" class="w-80" type="primary">提交</Button>
    </div>
  </Drawer>
</template>

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