<template>
  <view v-if="isOpen" class="synchronous-dialog">
    <view class="synchronous-content">
      <view class="title">巡检指引</view>
      <view class="operating-instructions">
        <view
          v-for="(item, index) in startDialogData.text"
          :key="index"
          class="text"
          >{{ item }}</view
        >
      </view><view class="row-item bottom-row">
        <view v-if="!startDialogData.isList" class="button btn" @click="backList">返回巡检列表</view>
        <view v-if="!startDialogData.isLast" class="button" @click="confirmSignature">我已到达</view>
      </view>

      <!-- 关闭按钮 -->
      <div class="close-button" v-if="!startDialogData.isLast">
        <text class="iconfont icon-shibai1" @click="close"></text>
      </div>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    startDialogData: {
      type: Object,
      default: "",
    },
  },
  data() {
    return {
      isOpen: false,
    };
  },

  mounted() {},
  methods: {
    backList() {
      this.$emit("backList", "");
    },
    confirmSignature() {
      this.$emit("confirm", "");
    },
    open() {
      this.isOpen = true;
    },
    // 关闭弹窗
    close() {
      this.isOpen = false;
    },
  },
};
</script>
<style scoped lang="less">
.synchronous-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
	z-index: 99999;
  .synchronous-content {
    padding: 25.6px 19.2px;
    width: 420px;
    height: 214px;
    box-sizing: border-box;
    background-image: linear-gradient(
      -6deg,
      #f9ffe7 0%,
      #ffffff 12%,
      #fcfeff 73%,
      #ccf1ff 100%
    );
    border: 0.4px solid rgba(224, 224, 224, 1);
    border-radius: 12px;
    position: relative;
    .row-item {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .title {
      font-size: 18px;
      color: #000000;
      line-height: 26px;
      font-weight: 500;
      margin-bottom: 12px;
    }

    .operating-instructions {
      .text {
        font-size: 16px;
        color: #000000;
        text-align: center;
        line-height: 24px;
        font-weight: 400;
      }
      margin-bottom: 24px;
    }

    // 打包按钮
    .bottom-row {
      position: absolute;
      bottom: 25.6px;
      left: 50%;
      transform: translateX(-50%);

      .button {
        display: flex;
        align-items: center;
        justify-content: center;
        background-image: linear-gradient(180deg, #3773f6 0%, #2c57f6 99%);
        box-shadow: 0px 10px 24px 0px rgba(51, 104, 246, 0.24);
        border-radius: 27px;
        width: 160px;
        height: 32px;
        color: #fff;
        margin: 0 5px;
        &.btn {
          background: #ffffff;
          color: #000000;
        }
      }
    }

    // 关闭按钮
    .close-button {
      position: absolute;
      bottom: -40px;
      left: 50%;
      transform: translateX(-50%);
      .iconfont {
        color: #fff;
        font-size: 24px;
      }
    }
  }
}
</style>
