<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 style="font-size: 16px" href="#">{{title}}</a></li>
        </ul>
        <div class="outbox">
          <!--图片信息-->
          <div class="auto" v-if="imgInfo.length">
            <div class="form-group" v-for="row in imgInfo">
              <label class="col-sm-3 control-label">
                {{row.key}}
                <a class="active" v-if="row.key.indexOf('不动产权证') !== -1" target="_blank" :href="searchUri">查询</a>
              </label>
              <div class="col-sm-9">
                <img :src="row.value" v-if="row.value"  width="70%"/>
              </div>
            </div>
          </div>
          <!--展示信息-->
          <div class="auto" v-if="userInfo.length">
            <div class="form-group" v-for="row in userInfo">
              <ul class="nav nav-tabs">
                <li class="active a-tabs"><a href="#">{{row.key}}</a></li>
              </ul>
              <div>
                <div class="row">
                  <div class="col-sm-6 form-group">
                    <label for="f_userinfo_code" class="font_normal_body">用户编号</label>
                    <input class="input_search" style="width:60%" type="text"
                           v-model="row.value.f_userinfo_code" readonly
                           placeholder="用户编号">
                  </div>
                  <div class="col-sm-6 form-group" >
                    <label for="f_user_name" class="font_normal_body">旧用户名</label>
                    <input class="input_search" style="width:60%" type="text"
                           v-model="row.value.f_user_name" readonly
                           placeholder="旧用户名">
                  </div>
                  <div class="col-sm-5 form-group">
                    <label for="f_user_phone" class=" font_normal_body">旧联系方式</label>
                    <input class="input_search" style="width:60%" type="text"
                           v-model="row.value.f_user_phone" readonly
                           placeholder="旧联系方式">
                  </div>
                  <div class="col-sm-7 form-group">
                    <label for="f_idnumber" class=" font_normal_body">旧身份账号</label>
                    <input class="input_search" style="width:60%" type="text"
                           v-model="row.value.f_idnumber" readonly
                           placeholder="旧身份账号">
                  </div>
                  <div class="col-sm-6 form-group">
                    <label for="f_newuser_name" class="font_normal_body">新用户名</label>
                    <input class="input_search" style="width:60%" type="text"
                           v-model="row.value.f_newuser_name" readonly
                           placeholder="新用户名">
                  </div>
                  <div class="col-sm-5 form-group">
                  <label for="f_newuser_phone" class="font_normal_body">新联系方式</label>
                  <input class="input_search" style="width:60%" type="text"
                         v-model="row.value.f_newuser_phone" readonly
                         placeholder="新联系方式">
                  </div>
                  <div class="col-sm-5 form-group">
                    <label for="f_newrent_phone" class="font_normal_body">新备用联系方式</label>
                    <input class="input_search" style="width:60%" type="text"
                           v-model="row.value.f_newrent_phone" readonly
                           placeholder="新备用联系方式">
                  </div>
                  <div class="col-sm-7 form-group">
                    <label for="f_newidnumber" class=" font_normal_body">新身份证号</label>
                    <input class="input_search" style="width:60%" type="text"
                           v-model="row.value.f_newidnumber" readonly
                           placeholder="新身份证号">
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-12 form-group">
                    <label for="f_describe" class="font_normal_body">描&emsp;述</label>
                    <input class="input_search" type="text" style="width:87%" v-model="row.value.f_describe"
                           readonly
                           placeholder="描述">
                  </div>
                  <div class="col-sm-12 form-group">
                    <label for="f_comments" class=" font_normal_body">备&emsp;注</label>
                    <input class="input_search" type="text" style="width:87%" v-model="row.value.f_comments"
                           readonly
                           placeholder="备注">
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="text-align:right;height:auto;margin-top:10px;margin-right:30px;">
          <span style="color: red" v-if="row.f_order_state !== '待处理'&&row.f_order_state!==''&&row.f_order_state!==null">该条预约已处理</span>
          <br>
          <button type="button" :disabled="row.f_order_state!=='待处理'&&row.f_order_state!==''&&row.f_order_state!==null" class="btn btn-warning" @click="confirm(row)" style="width:80px;margin-left:20px;">预约失败</button>
          <button type="button" :disabled="row.f_order_state!=='待处理'&&row.f_order_state!==''&&row.f_order_state!==null" class="btn btn-primary" @click="confirm1(row)" style="width:80px;margin-left:20px;">预约成功</button>
        </div>
      </form>
    </validator>

  </div>
</template>
<script>
  export default {
    data () {
      return {
        show: false,
        f_operator: this.$login.f.name,
        placeholder: '',
        searchUri:'http://60.173.140.115:8191/#/'
      }
    },
    props: {
      row: {
        type: Object
      },
      title: {
        type: String
      },
      userInfo: {
        type: Array
      },
      imgInfo: {
        type: Array
      }
    },
    methods: {
      close () {
        this.show = false
      },
      async confirm(row) {
        // 预约失败处理
        let orderParam = {
          f_order_state: '预约失败',
          f_dispose_operator: this.f_operator,
          f_operate_date: this.$login.toStandardTimeString(),
          id: row.id
        }
        let transferParam = row
        let data = {
          orderParam: orderParam,
          transferParam: transferParam
        }
        await this.$resetpost('rs/logic/transferOrderHandle', data, {
          resolveMsg: '审核成功',
          rejectMsg: '审核失败!!'
        }).then((res) => {
          if (res.data.code === 200) {
            this.$showAlert('预约失败审核成功！！', 'success', 2000)
          } else {
            this.$showAlert('预约失败审核失败！！', 'danger', 2000)
          }
        })
        this.$dispatch('refresh')
      },
      async confirm1(row) {
        // 预约成功处理
        let orderParam = {
          f_order_state: '预约成功',
          f_dispose_operator: this.f_operator,
          f_operate_date: this.$login.toStandardTimeString(),
          id: row.id
        }
        let transferParam = row

        let data = {
          orderParam: orderParam,
          transferParam: transferParam
        }
        await this.$resetpost('rs/logic/transferOrderHandle', data, {
          resolveMsg: '审核成功',
          rejectMsg: '审核失败!!'
        }).then((res) => {
          if (res.data.code === 200) {
            this.$showAlert('预约成功审核成功！！', 'success', 2000)
          } else {
            this.$showAlert('预约成功审核失败！！', 'danger', 2000)
          }
        })
        this.$dispatch('refresh')

      }
    }
  }
</script>
<style lang="less">
  #orderApplyDispose{
    .modal-header {
      border: none;
      .close {
        position: absolute;
        top: 7px;
        right: 10px;
      }
    }
    .modal-body {
      padding-bottom: 0px;
    }
    .modal-footer {
      padding: 10px 15px;
      border: none;
    }
    .outbox {
      height: 500px;
      overflow-y: auto;
    }
  }
</style>
