<!--
 * @Descripttion: 当前组件信息
 * @version: 1.0.0
 * @Author: 无尘
 * @Date: 2020-04-14 09:50:16
 * @LastEditors: 无尘
 * @LastEditTime: 2020-04-14 14:04:11
 -->
<!--
  <contact-sync-dialog :syncData="syncData"></contact-sync-dialog>
  import contactSyncDialog from '@/components/company/contact-sync-dialog.vue';
 -->
<template>
  <el-dialog class="hide-header-dialog" center title="" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
    <div class="m-b-20 text-center">
      <div class="el-progress-bar" style="width:350px;margin: 0 auto;">
        <div class="el-progress-bar__outer" style="height: 8px;">
          <div class="el-progress-bar__inner" style="width: 100px"></div>
        </div>
      </div>
      <div class="font-18 color-303133 m-t-25">{{ syncData.syncStatus == 1 ? '分组' : syncData.syncStatus == 2 || syncData.syncStatus == 3 ? '门店及成员' : '' }}同步中…</div>
      <div class="font-14 color-606266 m-t-10 line-h-20">通讯录同步中，通讯录数据操作已冻结</div>
      <!-- <div class="font-14 color-606266 line-h-20">同步期间，通讯录的增删功能暂时冻结，以防数据冲突。同步完成后立即恢复，请知悉。</div> -->
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    syncData: {
      type: Object,
      default() {
        return {
          syncStatus: '0'
        };
      }
    }
  },
  data() {
    return {
      dialogVisible: true
    };
  },
  methods: {
    handleClose(done) {
      const that = this;
      that.dialogVisible = true;
    }
  }
};
</script>
<style lang="scss" scoped>
.m-b-20 {
  margin-bottom: 20px;
}
.m-t-25 {
  margin-top: 25px;
}
.m-t-10 {
  margin-top: 10px;
}
.line-h-20 {
  line-height: 20px;
}
.font-18 {
  font-size: 18px;
}
.el-progress-bar__inner {
  /* 动画时长1s */
  animation-duration: 1s;
  /*当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）*/
  /* animation-fill-mode: forwards;  */
  /* 动画次数 无限次 */
  animation-iteration-count: infinite;
  /* 执行动画名称 */
  animation-name: animationa;
  /* 动画速度，线性匀速 */
  animation-timing-function: linear;
  /* 背景颜色 */
  /* background: linear-gradient(to right, #fff 0%, #fff 50%, transparent 50%, transparent 100%); */
  background: #2f5bff;
  /* 背景大小: 这里是容器大小 */
  height: 8px;
  border-radius: 8px;
  position: absolute;
  top: 0px;
}

@keyframes animationa {
  /* 修改用作背景的进度条容器定位 */
  0% {
    /* background-position: -410px 0; */
    left: -10px;
  }
  100% {
    /* background-position: 410px 0 */
    left: 250px;
  }
}
</style>
