<template>
  <MDrawer
    :closable="false"
    :mask-closable="false"
    :title="data ? '编辑订单' : '创建订单'"
    @on-visible-change="visibleChange"
    v-model="my_show"
    width="500"
    :mask-style="{ 'z-index': source === 1 ? 1000 : 500}"
  >
    <div v-if="Object.keys(order_group).length" class="order-group-wrap">
      <ul>
        <li
          v-for="(item, index) in order_group"
          :key="index"
          class="order-group-list"
          :class="groupIndex === index ? 'order-group-list-selected' : ''"
          @click="selectGroup(item, index)"
        >
          <p>
            <span class="order-group-list-title">企业:</span>
            <span class="order-group-list-content">{{item[0].company_name}}</span>
          </p>
          <p>
            <span class="order-group-list-title">套餐:</span>
            <span class="order-group-list-content">{{item[0].package_name}}</span>
          </p>
          <p>
            <span class="order-group-list-title">卡量:</span>
            <span
              class="order-group-list-content"
            >{{item.reduce((acc, cur) => {return acc + cur.counts;}, 0)}}</span>
          </p>
        </li>
      </ul>
    </div>

    <div class="page-edit-wrap uinn-lr20">
      <ui-loading :show="loading"></ui-loading>

      <ul>
        <li class="ui-list">
          <div class="ui-list-title">
            <span class="title-require">*</span>企业名称:
          </div>
          <div class="ui-list-content">
            <Select
              filterable
              placeholder="企业名称"
              v-model.trim="params.company_id"
              :disabled="data && type !== 0 ? true : false"
            >
              <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">运营商:</div>
          <div class="ui-list-content">
            <Select v-model="params.carrier_operator" @on-change="handleChangeCarrierOperator">
              <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 filterable v-model.trim="params.package_id" @on-change="handleChangePackage">
              <Option
                :key="item.id"
                :value="item.id"
                v-for="item in completePackagesFilter"
              >{{ 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">
            <Select placeholder="收款状态" v-model="params.pay_channel">
              <Option :value="'bank'">银行转账</Option>
              <Option :value="'wx'">微信支付</Option>
              <Option :value="'alipay'">支付宝</Option>
              <!-- <Option :value="'account'">余额支付</Option> -->
              <!-- <Option :value="'tmall'">天猫续费</Option> -->
            </Select>
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">支付流水号:</div>
          <div class="ui-list-content">
            <AutoComplete v-model="params.transaction_no" :data="transaction_nos"></AutoComplete>
            <!-- <Input :maxlength="32" v-model.trim="params.transaction_no"></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">套餐定价</div>
          <div class="ui-list-content">
            <InputNumber :max="100000" :min="0" v-model="params.unit_price"></InputNumber>
          </div>
        </li>

        <Row :gutter="16">
          <Col span="12">
            <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"
                  v-if="!counts"
                  :max="100000"
                  :min="1"
                  :precision="0"
                  v-model.trim="params.counts"
                ></InputNumber>
                <span v-else class="lh-32">{{params.counts}}</span>
              </div>
            </li>
          </Col>
          <Col span="12">
            <li class="ui-list">
              <div class="ui-list-title">订单金额</div>
              <div
                class="ui-list-content lh-32"
              >{{Number(params.unit_price * params.counts).toFixed(2)}} 元</div>
            </li>
          </Col>
        </Row>

        <li class="ui-list">
          <div class="ui-list-title">
            <span class="title-require">*</span>订单时间
          </div>
          <div class="ui-list-content">
            <DatePicker type="datetime" placeholder="请选择时间" v-model.trim="params.order_at"></DatePicker>
          </div>
        </li>
        <div v-if="type === 0">
          <li class="ui-list">
            <div class="ui-list-title">收货人</div>
            <div class="ui-list-content">
              <Input :maxlength="32" v-model.trim="params.contacts"></Input>
            </div>
          </li>

          <li class="ui-list">
            <div class="ui-list-title">联系电话</div>
            <div class="ui-list-content">
              <Input :maxlength="11" v-model.trim="params.mobile"></Input>
            </div>
          </li>

          <li class="ui-list">
            <div class="ui-list-title">收货区域</div>
            <div class="ui-list-content">
              <al-selector :data-type="'name'" :level="2" v-model="params.area" v-if="alShow"/>
            </div>
          </li>

          <li class="ui-list">
            <div class="ui-list-title">收货地址</div>
            <div class="ui-list-content">
              <Input :maxlength="255" v-model.trim="params.address"></Input>
            </div>
          </li>

          <li class="ui-list">
            <div class="ui-list-title">订单备注</div>
            <div class="ui-list-content">
              <Input v-model.trim="params.remark" type="textarea" placeholder="..."/>
            </div>
          </li>
        </div>
      </ul>
    </div>

    <div class="ta-c">
      <!-- <Button v-if="source === 0" @click="cards" class="w-80 umar-r5" ghost type="success">选卡</Button> -->
      <Button @click="clear" class="w-80 umar-r5" ghost type="primary">取消</Button>
      <Button
        :loading="loading"
        @click="ok"
        class="w-80"
        type="warning"
        v-if="groupIndex === '0_0'"
      >转销售</Button>
      <Button :loading="loading" @click="ok" class="w-80" type="primary" v-else>提交</Button>
    </div>
  </MDrawer>
</template>

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

<style lang="less" scoped>
.order-group-wrap {
  position: fixed;
  top: 0;
  right: 500px;
  overflow: auto;
  height: calc(100%);
  .order-group-list {
    display: block;
    height: 120px;
    padding: 15px;
    font-size: 11px;
    background-color: #fff;
    border: 1px solid #ececec;
    white-space: nowrap;
    text-overflow: ellipsis;
    .order-group-list-title {
      line-height: 32px;
      font-weight: 700;
      text-align: right;
    }
    .order-group-list-content {
      line-height: 32px;
      text-align: left;
      margin-left: 10px;
    }
  }
  .order-group-list:hover {
    background-color: #fff;
    border-color: #57a3f3;
  }
  .order-group-list:active {
    background-color: #fff;
    border-color: #2b85e4;
  }
  .order-group-list-selected {
    color: #2b85e4;
    background-color: #fff;
    border-color: #2b85e4;
  }
}
</style>

