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

      <ul>
        <li class="ui-list">
          <div class="ui-list-title">套餐编号:</div>
          <div class="ui-list-content">
            <Input :disabled="data ? true : false" v-model.trim="params.sn"></Input>
            <ul class="common-tips-wraper umar-t5">
              <li class="t-title">提示</li>
              <li class="t-content">如未输入将根据规则自动生成</li>
            </ul>
          </div>
        </li>
        <li class="ui-list">
          <div class="ui-list-title">
            <span class="title-require">*</span>套餐名称:
          </div>
          <div class="ui-list-content">
            <Input v-model.trim="params.name"></Input>
            <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">
              <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">
            <InputNumber
              :disabled="data ? true : false"
              :max="100000"
              :min="1"
              :precision="0"
              :step="1"
              v-model="params.reset_months"
            ></InputNumber>&nbsp;月
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">
            <span class="title-require">*</span>套餐周期
          </div>
          <div class="ui-list-content">
            <InputNumber
              :disabled="data ? true : false"
              :max="100000"
              :min="1"
              :precision="0"
              :step="1"
              v-model="params.service_months"
            ></InputNumber>&nbsp;月
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">
            <span class="title-require">*</span>套餐流量
          </div>
          <div class="ui-list-content">
            <InputNumber
              :disabled="data ? true : false"
              :max="999999"
              :min="1"
              :precision="0"
              :step="1"
              v-model="params.flows"
            ></InputNumber>&nbsp;(M)
          </div>
        </li>

        <li class="ui-list" v-if="[0, 2].indexOf(type) !== -1">
          <div class="ui-list-title">后向套餐</div>
          <div class="ui-list-content">
            <Switch :false-value="0" :true-value="1" v-model="params.flowed"/>
          </div>
        </li>

        <li class="ui-list" v-if="type">
          <div class="ui-list-title">立即生效</div>
          <div class="ui-list-content">
            <Switch :false-value="1" :true-value="0" v-model="params.effect_months"/>
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">LBS服务</div>
          <div class="ui-list-content">
            <Switch :false-value="0" :true-value="1" v-model="params.has_lbs"/>
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">短信服务</div>
          <div class="ui-list-content">
            <Switch :false-value="0" :true-value="1" v-model="params.has_messages"/>
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">套餐语音</div>
          <div class="ui-list-content">
            <InputNumber :max="999999" :min="0" :precision="0" :step="1" v-model="params.voices"></InputNumber>&nbsp;分钟
          </div>
        </li>

        <li class="ui-list" v-if="params.has_messages">
          <div class="ui-list-title">套餐短信</div>
          <div class="ui-list-content">
            <InputNumber :max="999999" :min="0" :precision="0" :step="1" v-model="params.messages"></InputNumber>&nbsp;条
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">成本价:</div>
          <div class="ui-list-content">
            <InputNumber
              :active-change="false"
              :max="100000"
              :min="0"
              :precision="2"
              :step="0.01"
              v-model="params.cost_price"
            ></InputNumber>&nbsp;元
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">指导价:</div>
          <div class="ui-list-content">
            <InputNumber
              :active-change="false"
              :max="100000"
              :min="0"
              :precision="2"
              :step="0.01"
              v-model="params.guide_price"
            ></InputNumber>&nbsp;元
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">说明:</div>
          <div class="ui-list-content">
            <Input :maxlength="255" v-model.trim="params.description"></Input>
          </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>
