<template>
  <div class="page-wrap">
    <ui-loading :show="page_loading.show"></ui-loading>
    <div class="product-content">
      <div class="nav">
        <div class="search umar-t5">
          <Input v-model="inputValue" placeholder="输入名称进行过滤"></Input>
        </div>
        <div class="box">
          <CellGroup @on-click="index" v-for="item in companies" :key="item.id">
            <Cell
              :name="item.id"
              :selected="item.id == params.company_id ? true : false"
              :title="item.name"
            />
          </CellGroup>
        </div>
      </div>
      <div class="info-wrap">
        <div class="page-handle-wrap">
          <ul class="handle-wraper bd-b">
            <li class="f-l">
              <div class="text-exp">
                <b>{{company.name}}</b>
              </div>
            </li>
            <li class="f-r" v-if="params.company_id">
              <div class="handle-item">
                <Button
                  @click="openEdit(true, null)"
                  icon="md-add"
                  type="primary"
                  v-has="'create'"
                >添加定价</Button>
              </div>

              <div class="handle-item">
                <Button @click="search.show=!search.show" ghost icon="ios-search" type="primary">搜索</Button>
              </div>

              <div class="handle-item">
                <Button @click="index()" icon="md-refresh">刷新</Button>
              </div>
            </li>
          </ul>

          <div class="search-wrap" v-show="search.show">
            <ul class="handle-wraper">
              <li class="handle-item w-250">
                <Select clearable placeholder="运营商" v-model="params.carrier_operator">
                  <Option :value="0">联通</Option>
                  <Option :value="1">移动</Option>
                  <Option :value="2">电信</Option>
                </Select>
              </li>

              <li class="handle-item w-250">
                <Input clearable placeholder="定价名称" v-model.trim="params.name"></Input>
              </li>

              <li class="handle-item w-250">
                <AutoComplete
                  @on-search="handleCompletePackages(type, $event)"
                  icon="ios-search"
                  placeholder="套餐名称"
                  v-model.trim="params.package_name"
                >
                  <Option
                    :key="item.id"
                    :value="item.name"
                    v-for="item in completeHandledPackages"
                  >{{ item.name }}</Option>
                </AutoComplete>
              </li>

              <li class="handle-item w-250">
                <Select clearable placeholder="状态" v-model="params.status">
                  <Option :value="0">已启用</Option>
                  <Option :value="1">已禁用</Option>
                  <!-- <Option :value="2">已删除</Option> -->
                </Select>
              </li>

              <li class="f-r">
                <div class="handle-item">
                  <Button @click="index()" ghost type="primary">立即搜索</Button>
                </div>
                <div class="handle-item">
                  <Button @click="resetSearch" ghost type="warning">重置搜索</Button>
                </div>
              </li>
            </ul>
          </div>
        </div>

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

    <ui-edit
      :type="type"
      :data="editObj.data"
      :isUpdate="editObj.isUpdate"
      :show.sync="editObj.show"
      @add-success="index"
      @update-success="index"
    ></ui-edit>

    <ui-history :data="historyObj.data" :show.sync="historyObj.show"></ui-history>
  </div>
</template>

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

<style lang="less" scoped>
.page-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 0;
  .product-content {
    display: flex;
    height: 100%;
    .nav {
      width: 20%;
      background: #fff;
      padding: 10px;
      .box {
        margin-top: 10px;
        overflow-x: hidden;
        overflow-y: auto;
        height: calc(100% - 5px);
      }
    }
    .info-wrap {
      width: 80%;
    }
  }
}
</style>
