<template>
  <Modal
    :closable="false"
    :mask-closable="false"
    :title="'注销卡同步'"
    @on-visible-change="visibleChange"
    v-model="my_show"
    :width="1200"
  >
    <div class="page-edit-wrap uinn-lr20">
      <ui-loading :show="page_loading.show"></ui-loading>

      <Steps :current="current" :status="status">
        <Step
          :title="item.title"
          :content="item.content"
          v-for="(item, index) in steps"
          :key="index"
        ></Step>
      </Steps>

      <Row type="flex" justify="center" class="umar-t15" v-if="steps[current] && steps[current]['datePicker']">
        <DatePicker
          placeholder="请选择时间"
          placement="bottom-start"
          type="month"
          v-model.trim="month"
        ></DatePicker>
      </Row>

      <Row type="flex" justify="center" class="umar-t15">
        <Circle :size="250" :percent="circle.percent" stroke-linecap="square">
          <div class="circle-text">
            <h1>{{circle.percent}}%</h1>
            <br>
            <p>{{circle.content}}</p>
          </div>
        </Circle>
      </Row>
    </div>

    <footer class="ta-c" slot="footer">
      <Button @click="clear" class="w-80" ghost type="primary" :disabled="disabled">取消</Button>
      <Button
        :loading="loading"
        @click="call"
        class="w-80"
        type="primary"
        v-if="this.status === 'wait'"
        :disabled="disabled"
      >{{ current ? '下一步' : '开始同步'}}</Button>
      <Button
        :loading="loading"
        @click="clear"
        class="w-80"
        type="primary"
        v-if="this.status === 'finish'"
      >完成</Button>
    </footer>
  </Modal>
</template>

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