<template>
  <Drawer :mask-closable="true" @on-visible-change="visibleChange" title="客户详情" v-model="my_show" width="500">
    <div class="page-detail-wrap" v-if="data">
      <Divider>基础资料</Divider>
      <ul>
        <li class="ui-list">
          <div class="ui-list-title">客户编号:</div>
          <div class="ui-list-content">{{data.id}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">SIM:</div>
          <div class="ui-list-content">{{data.sim}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">IMSI:</div>
          <div class="ui-list-content">{{data.imsi}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">ICCID:</div>
          <div class="ui-list-content">{{data.iccid}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">运营商:</div>
          <div class="ui-list-content">{{data.carrier_operator}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">所属企业:</div>
          <div class="ui-list-content">{{data.company_name}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">卡状态:</div>
          <div class="ui-list-content">{{data.status_name}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">创建时间:</div>
          <div class="ui-list-content">{{data.created_at}}</div>
        </li>

        <li class="ui-list">
          <div class="ui-list-title">更新时间:</div>
          <div class="ui-list-content">{{data.updated_at}}</div>
        </li>
      </ul>

      <Divider>服务时间段</Divider>
      <ul v-for="(item, index) in data.timelines" :key="index">
        <li class="ui-list">
          <Row>
            <Col span="8">{{item.name}}</Col>
            <Col span="8">{{item.type_name}}</Col>
            <Col span="8">{{item.service_start_at}} 至 {{item.service_end_at}}</Col>
          </Row>
        </li>
      </ul>
    </div>
  </Drawer>
</template>

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