<template>
  <div class="auto" id="orderApplyDispose">
    <validator name='v'>
      <form novalidate class="form-horizontal select-overspread">
        <ul class="nav nav-tabs">
          <li class="active"><a href="#" style="font-size: large">报装信息</a></li>
        </ul>
        <div class="form-group" style="margin-top: 10px">
          <label class="col-sm-2 control-label">报装类型</label>
          <div class="col-sm-4">
            <input class="form-control" type="text" v-model="row.f_type" placeholder="报装类型" disabled>
          </div>
          <label class="col-sm-2 control-label">报装单位</label>
          <div class="col-sm-4">
            <input class="form-control" type="text" v-model="row.f_unit" placeholder="报装单位" disabled>
          </div>
        </div>
        <div class="form-group" style="margin-top: 10px">
          <label class="col-sm-2 control-label">联系电话</label>
          <div class="col-sm-4">
            <input class="form-control" type="text" v-model="row.f_phone" placeholder="联系电话" disabled>
          </div>
          <label class="col-sm-2 control-label">联系人员</label>
          <div class="col-sm-4">
            <input class="form-control" type="text" v-model="row.f_user_name" placeholder="联系人员" disabled>
          </div>
        </div>
        <div class="form-group" style="margin-top: 10px">
          <label class="col-sm-2 control-label">地址</label>
          <div class="col-sm-10">
               <textarea class="form-control" readonly v-el:useraddress
                         cols="2" disabled style="resize: none"
                         v-model="row.f_address">
            </textarea>
          </div>
        </div>
        <div class="form-group" style="margin-top: 10px">
          <label class="col-sm-2 control-label">情况说明</label>
          <div class="col-sm-10">
            <textarea class="form-control" readonly v-el:useraddress
                      cols="2" disabled style="resize: none"
                      v-model="row.f_orderremark">
            </textarea>
          </div>
        </div>
<!--        <div class="row" style="text-align: center">-->
<!--          <div class="col-sm-4 col-sm-offset-2">-->
<!--            <img-self style="margin: 0 auto" :src="row.f_imageurl"></img-self>-->
<!--            <span style="font-size: 14px;margin-top: 5px; display:inline-block;-->
<!--              width: 200px; word-break: normal; white-space: pre-wrap; word-wrap: break-word;">{{-->
<!--                row.f_imagename-->
<!--              }}</span>-->
<!--          </div>-->
<!--          <div class="col-sm-4">-->
<!--            <a style="margin: 0 auto;display: inherit" target="_blank" :href="row.f_fileurl">-->
<!--              <img src="./download.png" alt="图片加载失败" title="点击下载附件"/>-->
<!--            </a>-->
<!--            <span style="font-size: 14px;margin-top: 5px; display:inline-block;-->
<!--              width: 200px; word-break: normal; white-space: pre-wrap; word-wrap: break-word;">{{-->
<!--                row.f_filename-->
<!--              }}</span>-->
<!--          </div>-->
<!--        </div>-->
      </form>
    </validator>
    <step :active="index" :items="items"></step>
  </div>
</template>
<script>

import Step from './Step'

export default {
  data () {
    return {
      show: false,
      f_operator: this.$login.f.name,
      // 所有地址
      address: [],
      placeholder: '',
      items:
      [{f_apply_type: '踏勘现场', f_apply_state: '', f_apply_msg: '', id: ''},
          {f_apply_type: '方案设计', f_apply_state: '', f_apply_msg: '', id: ''},
          {f_apply_type: '合同签订', f_apply_state: '', f_apply_msg: '', id: ''},
          {f_apply_type: '财务到账', f_apply_state: '', f_apply_msg: '', id: ''},
          {f_apply_type: '组织施工', f_apply_state: '', f_apply_msg: '', id: ''},
          {f_apply_type: '验收通气', f_apply_state: '', f_apply_msg: '', id: ''}
      ],
      index: 0
    }
  },
  components: {Step},
  props: {
    row: {
      type: Object
    },
    title: {
      type: String
    }
  },
  async ready () {
  },
  methods: {
    // 根据id查询报装进度
    async init (val) {
      this.index = val.f_apply_type === '通气点火' ? -1 : 0
      console.log('==========', JSON.stringify(val))
      let data = await this.$SqlService.singleTable('t_apply_info', `f_order_id = ${val.id} order by f_apply_date`)
      this.items = this.items.map((h, i) => {
        h.f_order_id = val.id
        if (data.data[i]) {
          h.f_apply_state = data.data[i].f_apply_state
          h.f_apply_msg = data.data[i].f_apply_msg
          h.id = data.data[i].id
        } else {
          if (data.data[i - 1] && data.data[i - 1].f_apply_state === '通过') {
            this.index = i
          }
          h.f_apply_state = '未通过'
          h.f_apply_msg = ''
          h.id = ''
        }
        return h
      }
      )
      console.log(JSON.stringify(this.items))
    },
    // 获取所有地址
    async getAreas () {

    },
    showModal () {
      this.show = true
    },
    close () {
      this.show = false
    },
    async confirm () {

    }
  },
  watch: {
    'row' (val) {
      if (val) {
        this.init(val)
      }
    }
  },
  computed: {},
  events: {
    'nextindex' (index, row) {
      console.log(JSON.stringify(row), JSON.stringify(this.row))
      if (!row.id) {
        this.row.f_apply_type = row.f_apply_type
        this.row.f_apply_state = row.f_apply_state
        this.row.f_person = row.f_person
        this.row.f_apply_date = row.f_apply_date
        this.row.f_apply_msg = row.f_apply_msg
      }
      if (row.f_apply_type === this.row.f_apply_type) {
        this.row.f_apply_msg = row.f_apply_msg
        this.row.f_apply_date = row.f_apply_date
      }
      if (this.items[index + 1].f_apply_state === '未通过') {
        this.index = index + 1
        return true
      }
    }
  }
}
</script>
<style lang="less">
#orderApplyDispose {
  .modal-header {
    border: none;

    .close {
      position: absolute;
      top: 7px;
      right: 10px;
    }
  }
 overflow: scroll;
  .modal-body {
    padding-bottom: 0px;
  }

  .modal-footer {
    padding: 10px 15px;
    border: none;
  }
}
</style>
