<template>
  <div id="examine-1">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-steps :active="steps" align-center>
            <el-step v-for="(item, index) in stepsList" :key="index" :title="item.title" @click.native="changeS(index)"> </el-step>
          </el-steps>
        </el-col>
        <el-col :span="24" class="two">
          <el-timeline :reverse="true">
            <el-timeline-item v-for="(item, index) in list" :key="index" :timestamp="item.examine_date" placement="top" color="#00D1B2">
              <el-card>
                <h4>{{ item.examine_prsonal }}</h4>
                <p>审核意见：{{ item.resaon }}</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'examine-1',
  props: {
    exaList: { type: Array },
    info: { type: Object },
  },
  components: {},
  data: function () {
    return {
      steps: 1,
      stepsList: [
        { title: '注册' },
        { title: '申报待审(派出所)' },
        { title: '仅建档(派出所)' },
        { title: '通过(派出所)' },
        { title: '通过(分局)' },
        { title: '通过(市局)' },
      ],
      list: [],
    };
  },
  created() {},
  methods: {
    // 查询列表
    search() {
      // 赋值目前企业处于哪个步骤下
      this.$set(this, `steps`, Number(this.info.status) + 1);
      // 查询数据
      let arr = this.exaList.filter((i) => i.status == this.info.status);
      if (arr) this.$set(this, `list`, arr);
    },
    // 选择步骤
    changeS(value) {
      this.$set(this, `steps`, Number(value) + 1);
      // 查询数据
      let arr = this.exaList.filter((i) => i.status == String(value));
      if (arr) this.$set(this, `list`, arr);
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    exaList: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val) this.search();
      },
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  .one {
    margin: 0 0 20px 0;
    /deep/.el-step__title {
      font-size: 14px;
      line-height: 30px;
    }
    /deep/.el-step__title:hover {
      cursor: pointer;
    }
  }
}
</style>
