<template>
  <div>
    <div class="main">
      <div class="step">
        <img class="step_icon" src="@/assets/common/step_icon.png" alt="" />
        <div class="dashline"></div>
        <img
          v-if="step > 1"
          class="step_icon"
          src="@/assets/common/step_icon.png"
          alt=""
        />
        <div v-else class="point"></div>
        <div class="dashline"></div>
        <img
          v-if="step > 2"
          class="step_icon"
          src="@/assets/common/step_icon.png"
          alt=""
        />
        <div v-else class="point"></div>
      </div>
      <div class="operation">
        <div class="op_item act" @click="jump">
          <div class="title">
            <p>填写家庭基本信息</p>
            <van-icon name="arrow" />
          </div>
          <p class="subTitle">共有{{ family }}名家庭成员，{{ support }}名赡养抚养人</p>
        </div>
        <div :class="['op_item', code ? 'act' : '']" @click="jumpVerify">
          <div class="title">
            <p>授权核查</p>
            <van-icon name="arrow" />
          </div>
          <p class="subTitle">
            共{{ empower }}人已授权核查，还剩 {{ notEmpower }} 人未授权
          </p>
        </div>
        <div class="op_item">
          <div class="title">
            <p>民政核查结果</p>
          </div>
          <p class="subTitle">发起</p>
        </div>
      </div>
    </div>
    <van-button
      :disabled="step < 3 || identifier !== 2"
      class="button"
      block
      round
      color="#EB4E3F"
      >提交到民政局</van-button
    >
    <div class="tips">
      <div class="tips_title">
        <img src="@/assets/common/tips_icon.png" alt="" />
        <p>声明：</p>
      </div>
      <p class="tip_content">
        在申请相关救助后，您的家庭情况信息将被推送给民政部门进行核查。
      </p>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Icon, Button } from "vant";
import { getStatistics } from "@/api/guarantee";

Vue.use(Icon).use(Button);

export default {
  computed: {
    code() {
      return this.$store.state.guarantee.code;
    },
  },
  data() {
    return {
      step: 1,
      identifier: "",
      family: 0,
      support: 0,
      empower: 0,
      notEmpower: 0,
    };
  },
  methods: {
    init() {
      getStatistics({ code: this.code }).then((res) => {
        this.family = res.family;
        this.support = res.support;
        this.empower = res.empower;
        this.notEmpower = res.notEmpower;
        this.step = res.notEmpower !== 0 ? 2 : 3;
      });
    },
    jump() {
      this.$router.push({
        name: "GuaranteeFamily",
        query: {
          identifier: this.identifier,
        },
      });
    },
    jumpVerify() {
      if (!this.code) {
        this.$toast("请先完善家庭信息");
        return;
      }
      this.$router.push({
        name: "GuaranteeVerify",
        query: {
          identifier: this.identifier,
        },
      });
    },
  },
  created() {
    this.identifier = parseInt(this.$route.query.identifier);
    if (this.code) {
      this.init();
    }
  },
};
</script>

<style lang="stylus" scoped>
.main {
  margin 20px;
  padding 0 30px 50px;
  display flex;
  background #ffffff

  .step {
    margin-top 50px;
    display flex;
    flex-direction column;
    align-items center
    .step_icon {
      width 32px;
      height 32px;
    }
    .dashline {
      height 168px;
      border-left 1px dashed #eeeeee
      // border-left 1px dashed red
    }
    .point {
      width: 16px;
      height: 16px;
      border-radius 50%
      background: #BBBBBB;
    }
  }
  .operation {
    width 100%
    margin-left 30px;

    .op_item {
      padding 50px 0
      color: #666666;
      border-bottom 1px solid #DDDDDD

      .title {
        display flex;
        align-items center;
        justify-content space-between;
        font-size: 32px;
        font-weight: 600;
      }

      .subTitle {
        margin-top 30px;
        font-size: 28px;
      }
    }
    .act {
      color #EB4E3F
    }
  }
}

.button {
  width 600px
  margin 50px 75px
}
.tips {
  margin 0 50px;

  .tips_title {
    display flex;
    align-items center;
    img {
      width 30px;
      height 30px;
      margin-right: 10px;
    }
    p {
      font-size: 28px;
      font-weight: 500;
      color: #394F79;
    }
  }
  .tip_content {
    margin-top  10px;
    line-height: 33px;
    font-size: 24px;
    font-weight: 400;
    color: #394F79;
  }
}
</style>
