<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">重置周期</div>
          <div class="ui-list-content">
            <InputNumber :formatter="value => Number(value).toFixed(0)" :max="100000" :min="0" :step="1" v-model="params.reset_months"></InputNumber>&nbsp;月
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">套餐周期</div>
          <div class="ui-list-content">
            <InputNumber :disabled="data ? true : false" :formatter="value => Number(value).toFixed(0)" :max="100000" :min="0" :step="1" v-model="params.service_months"></InputNumber>&nbsp;月
          </div>
        </li>

        <li class="ui-list" v-if="type">
          <div class="ui-list-title">生效延迟</div>
          <div class="ui-list-content">
            <InputNumber :formatter="value => Number(value).toFixed(0)" :max="100000" :min="0" :step="1" v-model="params.effect_months"></InputNumber>&nbsp;月
          </div>
        </li>

        <li class="ui-list" v-if="type">
          <div class="ui-list-title">服务延长</div>
          <div class="ui-list-content">
            <InputNumber :formatter="value => Number(value).toFixed(0)" :max="100000" :min="0" :step="1" v-model="params.delay_months"></InputNumber>&nbsp;月
          </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">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">
            <InputNumber :disabled="data ? true : false" :formatter="value => Number(value).toFixed(0)" :max="999999" :min="0" :step="1" v-model="params.flows"></InputNumber>&nbsp;(M)
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">套餐语音</div>
          <div class="ui-list-content">
            <InputNumber :formatter="value => Number(value).toFixed(0)" :max="999999" :min="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 :formatter="value => Number(value).toFixed(0)" :max="999999" :min="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 :formatter="value => Number(value).toFixed(2)" :max="100000" :min="0" :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 :formatter="value => Number(value).toFixed(2)" :max="100000" :min="0" :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">
            <InputNumber :formatter="value => Number(value).toFixed(2)" :max="100000" :min="0" :step="0.01" v-model="params.renewal_cost_price"></InputNumber>&nbsp;元
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">续费指导价:</div>
          <div class="ui-list-content">
            <InputNumber :formatter="value => Number(value).toFixed(2)" :max="100000" :min="0" :step="0.01" v-model="params.renewal_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>
      </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>
