<template>
  <div style="padding: 10px">
    <div partial class="auto app-text panel" style="margin-bottom: 20px">
      <div class="panel-body panel-self">
        <div class="col-xs-6">
          <p class="col-xs-6 text-left font"><b>工程编号：</b></p>
          <p class="col-xs-6 text-left input-font">{{ selectdata.f_apply_num }}</p>
        </div>
        <div class="col-xs-12">
          <p class="col-xs-3 text-left font"><b>用户名称：</b></p>
          <p class="col-xs-9 text-left input-font">{{ selectdata.f_user_name }}</p>
        </div>
        <div class="col-xs-6">
          <p class="col-xs-6 text-left font"><b>报建类型：</b></p>
          <p class="col-xs-6 text-left input-font">{{ selectdata.f_apply_type }}</p>
        </div>
        <div class="col-xs-6">
          <p class="col-xs-6 text-left font"><b>小&emsp;&emsp;区：</b></p>
          <p class="col-xs-6 text-left input-font">{{ selectdata.f_residential_area }}</p>
        </div>
        <div class="col-xs-6">
          <p class="col-xs-6 text-left font"><b>联系人：</b></p>
          <p class="col-xs-6 text-left input-font">{{ selectdata.f_contact }}</p>
        </div>
        <div class="col-xs-6">
          <p class="col-xs-6 text-left font"><b>联系电话：</b></p>
          <p class="col-xs-6 text-left input-font">{{ selectdata.f_phone }}</p>
        </div>
        <div class="col-xs-6">
          <p class="col-xs-6 text-left font"><b>办理环节：</b></p>
          <p class="col-xs-6 text-left input-font">{{ selectdata.defname }}</p>
        </div>
        <div class="col-xs-12">
          <p class="col-xs-3 text-left font"><b>项目地址：</b></p>
          <p class="col-xs-9 text-left input-font">{{ selectdata.f_address }}</p>
        </div>
      </div>
    </div>
    <div class="row" v-for="(i,row) in defnames">
        <div :class="row.id === selectdata.actid ? 'item selectIndex' : 'item'">
          {{row.defname}}
          <br>
          {{ row.finishtime ? row.finishtime : row.sendtime }}
        </div>
        <div class="arrow glyphicon glyphicon-menu-down" v-if="i != defnames.length-1" aria-hidden="true"></div>
      </div>
  </div>
<!--  <div class="col-sm-12 col-xs-12">-->
<!--    <accordion one-at-a-time="true">-->
<!--      <panel header='附件' :is-open="false" type="primary">-->
<!--        <app-upload :blodid="selectdata.f_process_id"-->
<!--                    :isupload="true"-->
<!--                    :isdelete="true"-->
<!--                    :isusetype="true"-->
<!--                    :isremark="true"-->
<!--                    :takeimg="true"-->
<!--                    :issearch="true"-->
<!--                    :defname="selectdata.defname">-->
<!--        </app-upload>-->
<!--      </panel>-->
<!--    </accordion>-->
<!--  </div>-->
</template>

<script>
import {HttpResetClass} from 'vue-client'
export default {
  title: '流程节点',
  props: ['selectdata'],
  data () {
    return {
      defnames: []
    }
  },
  ready () {
    this.initial()
  },
  methods: {
    async initial() {
      // 获取流程节点信息
      let http = new HttpResetClass()
      let data = {
        processid: this.selectdata.f_process_id
      }
      let res = await http.load(
        'POST',`${this.$androidUtil.getProxyUrl()}/rs/sql/getAllNode`,
        {data: data},
        {
          resolveMsg:null,
          rejectMsg:null
        })
      this.defnames = res.data
    },
  },
  watch: {
  }
}
</script>

<style scoped>
.app-text {
  font-size: 12px;
}
.panel-self{
  border-radius: 10px;
  border:1px solid #499EDF;
  background-color: #F8F8F8;
}
.row{
  padding: 0 40px;
  text-align: center;
  height: auto;
}
.item{
  border-radius: 2em;
  border: 1px solid silver;
  line-height: 25px;
}
.arrow{
  width: 100%;
  color: #5ac0d9;
  font-weight: bold;
}
.selectIndex{
  background-color: #5ac0d9;
  color: #ffffff;
}
</style>
