<template>
  <div class="auto">
    <modal :show.sync="show_userinfodevices" width="80%"  title="用户设备信息" v-ref:modal large backdrop="false">
      <article slot="modal-body" class="modal-body" style="height: auto">
        <div class="flex-row flex-deviceinfo">
          <div class="flex-row flex-two-info panel panel-default" v-for="row in userinfodevices">
            <!--<avatar-upload :img-src.sync="row.img.content" :filename.sync="row.img.filename"></avatar-upload>-->
            <form class="form-horizontal select-overspread " style="flex: 1;">
              <div class="row auto"  style="margin-top: 10px;margin-left: 10px;">
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body" title="用户设备类型">设备类型</label>
                  <v-select :value.sync="row.f_userinfodevices_type" v-model="row.f_userinfodevices_type"
                            :options='userdevices' placeholder='设备类型' :value-single="true"
                            close-on-select></v-select>
                </div>
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class=" font_normal_body">设备别名</label>
                  <input type="text" class="input_search" style="width:60%" v-model="row.f_userinfodevices_name" placeholder='设备编号' >
                </div>
              </div>
              <div class="row auto"  style="margin-left: 10px;">
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body" title="累计维管费合计">维管总费</label>
                  <input type="text" class="input_search" style="width:60%" v-model="row.f_mtc_fee" placeholder='累计维管费合计'>
                </div>
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">安装人员</label>
                  <input type="text" class="input_search" style="width:60%" v-model="row.f_input_person" placeholder='安装人员' >
                </div>
              </div>

              <div class="row auto"  style="margin-left: 10px;">
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">到期日期</label>
                  <datepicker  placeholder="到期日期" style="width: 60%"
                               v-model="row.f_expire_date"
                               :value.sync="row.f_expire_date"
                               :format="'yyyy-MM-dd HH:mm:ss'">
                  </datepicker>
                </div>
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">生产日期</label>
                  <datepicker  placeholder="生产日期" style="width: 60%"
                               v-model="row.f_make_date"
                               :value.sync="row.f_make_date"
                               :format="'yyyy-MM-dd HH:mm:ss'">
                  </datepicker>
                </div>
              </div>
              <div class="row auto"  style="margin-left: 10px;">
                <div class="col-sm-6 form-group" style="padding-right: 5px;">
                  <label class="font_normal_body">安装日期</label>
                  <datepicker  placeholder="安装日期" style="width: 60%"
                               v-model="row.f_pipeinstall_date"
                               :value.sync="row.f_pipeinstall_date"
                               :format="'yyyy-MM-dd HH:mm:ss'">
                  </datepicker>
                </div>
              </div>
            </form>
            <img :src="imgdelete" alt="图片加载失败" class="img-rounded" style="width: 60px;padding: 20px;margin-left: -15px;cursor: pointer;"
                 @click="deleteUserinfoDevice($index, row)" v-if="row.f_state !== '有效'">
          </div>
          <div class="panel panel-default flex-two-info text-center" style="line-height: 164px;">
            <img :src="imgadd" alt="图片加载失败1" class="img-rounded" style="width: 60px;padding: 10px;cursor: pointer;" @click="addUserinfoDevice()" >
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>
  </div>

</template>

<script>
  export default {
    title: '设备信息',
    data () {
      return {
        imgdelete: '/images/mainicon/deletedevice.png',
        imgadd: '/images/mainicon/adddevice.png',
        userdevices: this.$appdata.getParam('用户设备类型')
      }
    },
    props: {
      userinfodevices: {
        type: Array
      },
      show_userinfodevices: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      deleteUserinfoDevice (index, row) {
        this.userinfodevices.splice(index, 1)
      },
      addUserinfoDevice () {
        this.userinfodevices.push({f_userinfodevices_type: '默认设备',
          f_input_date: this.$login.toStandardTimeString()})
      }
    }
  }
</script>
<style lang="less">
  .flex-deviceinfo {
    padding: 0px 20px;
    justify-content: space-between;
    height: auto;
    flex-wrap: wrap;
  }
  .flex-two-info {
    margin-bottom: 10px;
    align-items: center;
    width: 48%;
  }
</style>
