<template>
  <Modal
    :closable="false"
    :mask-closable="false"
    :title="'确认排单'"
    @on-visible-change="visibleChange"
    v-model="my_show"
  >
    <div class="page-edit-wrap uinn-lr20">
      <ui-loading :show="loading"></ui-loading>

      <ul>
        <li class="ui-list" v-if="data !== null">
          <div class="ui-list-title">订单编号:</div>
          <div class="ui-list-content">
            <span class="lh-32">{{data.sn}}</span>
          </div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title"></div>
          <div class="ui-list-content">
            <RadioGroup v-model="type">
              <Radio :label="1">导入方式</Radio>
              <Radio :label="2">号段方式</Radio>
            </RadioGroup>
          </div>
        </li>

        <div v-if="type === 1">
          <li class="ui-list">
            <div class="ui-list-title">文件导入</div>
            <div class="ui-list-content">
              <Upload
                :before-upload="selectFile"
                action="/"
                :format="['xls','xlsx','csv']"
                class="f-l"
              >
                <Button icon="ios-cloud-upload-outline">选择文件</Button>
              </Upload>
              <a
                :href="CONFIG.url + 'storage/templates/ship-cards.xls'"
                download="排单模板.xls"
                class="fz-12 lh-32 umar-l10"
              >下载导入模板</a>
            </div>
          </li>

          <li class="ui-list" v-if="file !== null">
            <div class="ui-list-title">已选文件</div>
            <div class="ui-list-content">
              <span class="lh-32">{{file.name}}</span>
            </div>
          </li>
        </div>
        <div v-if="type === 2">
          <li class="ui-list">
            <div class="ui-list-title">号段范围</div>
            <div class="ui-list-content">
              <Form ref="formSegments">
                <FormItem v-for="(item, index) in segments" :key="index">
                  <Row>
                    <Col span="9">
                      <Input type="text" v-model="item.start_no" placeholder="起始号码"></Input>
                    </Col>
                    <Col span="2" class="ta-c">-</Col>
                    <Col span="9">
                      <Input type="text" v-model="item.end_no" placeholder="结束号码"></Input>
                    </Col>
                    <Col span="1" offset="1" v-if="segments.length > 1">
                      <Button
                        size="small"
                        type="primary"
                        shape="circle"
                        icon="md-remove"
                        @click="handleRemove(index)"
                      ></Button>
                    </Col>
                    <Col span="1" offset="1">
                      <Button
                        size="small"
                        type="primary"
                        shape="circle"
                        icon="md-add"
                        @click="handleAdd"
                      ></Button>
                    </Col>
                  </Row>
                </FormItem>
              </Form>
            </div>
          </li>
        </div>
      </ul>
    </div>
    <footer class="ta-c" slot="footer">
      <Button @click="clear" class="w-80 umar-r5" ghost type="primary">取消</Button>
      <Button :loading="loading" @click="ok" class="w-80" type="primary">确定</Button>
    </footer>
  </Modal>
</template>

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