<template>
  <Modal
    :closable="false"
    :mask-closable="false"
    :title="'选择流量卡'"
    @on-visible-change="visibleChange"
    v-model="my_show"
    width="1440"
    :z-index="source === 0 ? 1000 : 500"
  >
    <div class="page-handle-wrap">
      <div class="search-wrap">
        <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">
            <Select clearable placeholder="使用状态" v-model="params.used">
              <Option :value="0">未使用</Option>
              <Option :value="1">部分使用</Option>
              <Option :value="2">全部使用</Option>
            </Select>
          </li>

          <li class="handle-item w-250">
            <DatePicker
              :editable="false"
              placeholder="请选择时间"
              placement="bottom-start"
              type="daterange"
              v-model.trim="params.time"
            ></DatePicker>
          </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>

        <ul class="handle-wraper">
          <li class="handle-item w-250">
            <Select
              icon="ios-search"
              placeholder="企业名称"
              v-model.trim="params.company_name"
              clearable
              filterable
            >
              <Option
                :key="index"
                :value="item ? item : ''"
                v-for="(item, index) in real_companies"
              >{{ item }}</Option>
            </Select>
          </li>

          <li class="handle-item w-250">
            <Select
              icon="ios-search"
              placeholder="套餐名称"
              v-model.trim="params.package_name"
              clearable
              filterable
            >
              <Option
                :key="index"
                :value="item ? item : ''"
                v-for="(item, index) in real_packages"
              >{{ item }}</Option>
            </Select>
          </li>

          <li class="handle-item w-250">
            <Input placeholder="SIM" type="textarea" v-model="params.sim"/>
          </li>
        </ul>
      </div>
    </div>

    <div class="page-list-wrap umar-b10">
      <li class="f-l">
        <Checkbox
          v-model="sortChecked"
          v-if="relationObj && relationObj.virtual_company_id"
          @on-change="changeSortChecked"
        >
          <Tooltip content="将更根据最新生成的企业套餐关联关系进行排序">
            <span class="fz-12">智能排序</span>
          </Tooltip>
        </Checkbox>
      </li>

      <li class="f-r">
        <div class="text-exp">
          <Row v-if="counts">
            <a @click="sort" class="umar-r10">
              <b>已选 {{counts}} / {{filterTotal}} 张</b>
            </a>
            <a @click="clearSelect">
              <b>清空</b>
            </a>
          </Row>
          <Row v-else>
            <b class="umar-r10">共 {{filterTotal}} / {{total}} 张</b>
            <a @click="selectAll">
              <b>全选</b>
            </a>
          </Row>
        </div>
      </li>
    </div>

    <div class="page-list-wrap">
      <Row :gutter="8">
        <Col span="18">
          <Table
            ref="orderSelection"
            size="small"
            :loading="orderLoading"
            :columns="orderColumns"
            :data="showOrders"
            @on-row-dblclick="handleOrderRowDblclick"
            stripe
            border
            :height="449"
          ></Table>
          <ul class="common-tips-wraper umar-t5">
            <li class="t-title">提示</li>
            <li class="t-content">双击可以查看订单卡详情数据并标亮</li>
          </ul>

          <div class="page-turn-wrap" v-if="orders">
            <Page
              :current="Number(page.page)"
              :page-size="Number(page.limit)"
              :page-size-opts="[10, 20, 50, 100]"
              :total="Number(page.total)"
              @on-change="changePage"
              @on-page-size-change="changeLimit"
              show-elevator
              show-total
              show-sizer
            ></Page>
          </div>
        </Col>
        <Col span="6">
          <BTable
            ref="cardSelection"
            size="small"
            :loading="cardLoading"
            :columns="cardColumns"
            :data="showCards ? showCards : []"
            disabled-hover
            stripe
            border
            :height="449"
          ></BTable>
        </Col>
      </Row>
    </div>

    <footer class="ta-c" slot="footer">
      <Button @click="cannel" class="w-80 umar-r5" ghost type="primary">取消</Button>
      <Button v-if="source === 0" :loading="loading" @click="close" class="w-80" type="primary">确定</Button>
      <Button v-if="source === 1" :loading="loading" @click="order" class="w-80" type="primary">创建订单</Button>
      <Button v-if="source === 2" :loading="loading" @click="store" class="w-80" type="primary">提交</Button>
    </footer>
  </Modal>
</template>

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

<style scoped>
>>> .ivu-modal {
  top: 50px;
}

>>> .ivu-table {
  font-size: 12px;
}

>>> .ivu-table .bg-yellow td {
  background-color: #ffffdd !important;
}

>>> .ivu-table .bg-yellow-2n td {
  background-color: #ffff88 !important;
}
</style>
