<template>
  <!--<div class="app-botton" @click="back()">-->
  <!--返回<span class="glyphicon glyphicon-menu-right"></span>-->
  <!--</div>-->
  <div class="no-close row android-repair-order" style="background-color: #f9f9f9">
    <div class="col-sm-12 col-xs-12">
      <ul class="nav nav-tabs" style="background:#ffffff;overflow-y: hidden">
        <li v-for="row in tabs" @click="tabSelect(row,$index)" :class="{active1: row.complete === componentName}"
            v-if="$index < number+1 && $index < faultshow.number">
          <a href="#" style="background-color: #ffffff;color: #666666;font-size: 16px;font-family:SimSun"
             :class="row.class">
            <span class="spanboder">{{ row.header }}</span>
            <img class="butt2" :src="imgback(row.complete === componentName,row.header === header)"></a>
          <p></p>
        </li>
        <div class="col-sm-12 col-xs-12 repair-bg" v-show="routeShow">
          <route name='repair' :reuse="false"></route>
        </div>
        <li v-for="row in tabs" @click="tabSelect(row,$index)" :class="{active1: row.complete === componentName}"
            v-if="$index > number && $index < faultshow.number ">
          <a href="#" style="background-color: #ffffff;color: #666666;font-size: 16px;font-family:SimSun"
             :class="row.class">
            <span class="spanboder">{{ row.header }}</span>
            <img class="butt2" :src="imgback(row.complete === componentName,row.header === header)"></a>
          <p></p>
        </li>
        <div class="col-sm-12 col-xs-12 repair-bg">
          <div class="auto select-overspread form-horizontal repair-bg " style="padding-bottom:5px;">
            <div class="bq-parent">
              <blockquote class="blockquote">
                <p>设备操作</p>
              </blockquote>
            </div>
            <div class="panel panel-default auto repair-info-content">
              <div class="panel-body ">
                <div class="row auto">
                  <div id="savebut" class="col-xs-12 col-sm-12 col-md-12 flex-between" style="margin-top: 20px;">
                    <div class="col-xs-5 col-sm-5 col-md-5" style="text-align: center">
                      <button type="button" name="button" class="col-sm-3 btn btn-primary" @click="addEquipment()">
                        添加设备
                      </button>
                    </div>
                    <div class="col-xs-5 col-sm-5 col-md-5" style="text-align: center">
                      <button type="button" name="button" class="col-sm-3 btn btn-primary" @click="upEquipment()">
                        上传
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </ul>
    </div>
    <modal :show.sync="modelshow" v-ref:modal large backdrop="false">
      <header slot="modal-header" class="modal-header">
        <!--        <button type="button" class="close" @click="cancel1"><span style="color: black">&times;</span></button>-->
      </header>
      <article slot="modal-body" class="modal-body">
        <div class="auto select-overspread" style="overflow-y: hidden">
          <validator name='v'>
            <ul class="nav nav-tabs">
              <p class="bg-info text-center" style="padding: 8px;">添加设备</p>
            </ul>
            <div class="form-horizontal" style="margin-top:20px;flex: 1;">
              <div class="row">
                <div class="col-sm-6">
                  <label class="font_normal_body">设备品牌</label>
                  <input type="text"
                         v-model="model.name1" style="width:60%"
                         class="input_search full-with" placeholder="设备品牌">
                </div>
                <div class="col-sm-6">
                  <label class="font_normal_body">设备型号</label>
                  <input type="text"
                         v-model="model.name2" style="width:60%"
                         class="input_search full-with" placeholder="设备型号">
                </div>
              </div>


              <button @click="confirm1()" class="btn button_search col-sm-1 col-sm-offset-5" style="width: 70px"
                      :disabled="!$v.valid">
                <span style="color: black" class="glyphicon glyphicon-floppy-disk"></span>保存
              </button>
              <button @click='cancel1()' class="btn button_clear col-sm-1 col-sm-offset-1" style="width: 70px">
                <span style="color: black" class=" glyphicon glyphicon-log-out"></span>返回
              </button>
            </div>
          </validator>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
      </footer>
    </modal>
  </div>
</template>

<script>
// 户内维修
import Vue from 'vue'
import * as Util from '../Util'
import {HttpResetClass} from 'vue-client'


export default {
  title: '设备管理',
  props: ['item'],
  data() {
    return {
      devices: [],
      model: {},
      data: {},
      showBack: true,
      routeShow: true,
      number: 0,
      config: {},
      shupingshow: false,
      componentName: '',
      indexcount: 0,
      header: '客户信息',
      modelshow: false,
      tabs: [],
      faultshow: {
        number: 50
      }     // 控制 故障汇总 在 菜单里显示与否,
    }
  },
  computed: {
    actionEnabled: {
      get() {
        return this.role == 'inspect'
      }
    }
  },
  methods: {
    imgback(val, isheader) {
      if (val && this.routeShow && isheader) {
        return require('../../assets/xiangxia1.png')
      } else {
        return require('../../assets/xiangyou1.png')
      }
    },
    confirm1() {
      if (!this.model.name1) {
        this.$showMessage('设备品牌必须填写')
        return
      }
      if (!this.model.name2) {
        this.$showMessage('设备类型必须填写')
        return
      }
      for (let i = 0; i < this.tabs.length; i++) {
        if (this.tabs[i].name == this.model.name1) {
          this.$showMessage('设备品牌' + this.model.name1 + '重复,添加失败')
          return;
        }
      }
      this.tabs.push({
        header: this.model.name1 + "/" + (this.model.name2 ? this.model.name2 : ''),
        name: this.model.name1,
        complete: 'shebei-devices',
        class: 'repair-info-class',
        props: null,
        number: this.indexcount
      })
      this.devices.push({
        "device": this.model.name1 + "/" + (this.model.name2 ? this.model.name2 : ''),
        "n": this.indexcount
      })
      this.config[this.model.name1 + "/" + (this.model.name2 ? this.model.name2 : '')] = {

        "index": this.indexcount + 1,
        "items": {
          "设备品牌": {
            "index": 1,
            "type": "string"
          },
          "设备类型": {
            "index": 2,
            "type": "string"
          },
          "设备型号": {
            "index": 3,
            "type": "string"
          },
          "设备编号": {
            "index": 4,
            "type": "string"
          },
          "设备数量": {
            "index": 5,
            "type": "number"
          },
          "吨位/灶眼数": {
            "index": 6,
            "type": "number"
          },
          "设备年限": {
            "index": 7,
            "type": "number"
          },
          "备注": {
            "index": 8,
            "type": "string"
          },
          "设备状态": {
            "index": 9,
            "type": "string"
          }
        }

      }
      this.data['device' + this.indexcount] = [{
        f_device_type: this.model.name1 + "/" + (this.model.name2 ? this.model.name2 : ''),
        f_items: [{
          f_item_name: "设备品牌",
          f_item_value: this.model.name1,
          readonly: true,
          type: "string"
        }, {
          f_item_name: "设备类型",
          f_item_value: (this.model.name2 ? this.model.name2 : ''),
          readonly: true,
          type: "string"
        }, {
          f_item_name: "设备型号",
          readonly: false,
          type: "string"
        }, {
          f_item_name: "设备编号",
          readonly: false,
          type: "string"
        }, {
          f_item_name: "设备数量",
          readonly: false,
          type: "number"
        }, {
          f_item_name: "吨位/灶眼数",
          readonly: false,
          type: "number"
        }, {
          f_item_name: "设备年限",
          readonly: false,
          type: "number"
        }, {
          f_item_name: "备注",
          readonly: false,
          type: "string"
        }, {
          f_item_name: "设备状态",
          options: [{label: '正常', value: '正常'}, {label: '报废', value: '报废'}, {label: '拆除', value: '拆除'}, {
            label: '删除',
            value: '删除'
          }],
          readonly: false,
          type: "selector"
        }]
      }]
      this.indexcount = this.indexcount + 1
      this.model = {}
      this.modelshow = false
    },
    cancel1() {
      this.model = {}
      this.modelshow = false
    },
    // 选择tab
    tabSelect(item, number) {
      this.header = item.header
      //tag
      //tag
      //tag
      //tag
      // 处理关闭/显示 内容
      if (this.number == number && !this.routeShow) {
        this.routeShow = true
      } else if (this.number == number && this.routeShow) {
        this.routeShow = false
      } else if (this.number != item.complete) {
        this.routeShow = true
      }
      this.number = number
      this.componentName = item.complete
      //tag

      //tag
      if (item.header != '燃气表' && this.data['device' + item.number].length == 0) {
        this.data['device' + item.number].push({})
      }
      //tag
      //tag)
      let idx = this.data['device' + item.number].length - 1
      let itemprops = {
        config: this.config,
        device: this.devices[item.number],
        idx: idx,
        role: 'inspect'
      }
      //tag
      //tag)
      //tag)
      //tag
      if (this.routeShow) {
        this.$goto(item.complete, itemprops, 'repair')
        //tag
      }
      this.shupingshow = true
    },
    // 给组件添加参数
    getImgPath() {
      for (var i = 0; i < this.model.serviceacitivity[0].imgs.length; i++) {
        this.ids += this.model.serviceacitivity[0].imgs[i].imgid + ','
      }
      this.ids = this.ids.substring(0, this.ids.length - 1)
      if (this.ids) {
        this.getImgGen();
      }
    },
    addEquipment() {
      //tag
      this.modelshow = true
    },
    upEquipment() {

      //tag
      let codata = this.upinit()
      //tag
      //tag)
      this.$showMessage('请确认是否保存设备信息', ['cancel', 'confirm']).then(res => {
        if (res == 'confirm') {
          //tag
          new HttpResetClass().load('post', `${this.$androidUtil.getProxyUrl()}/rs/logic/sendShebei`, {shebei: codata}).then(res => {
            if (res.data.code == '200') {
              this.$showMessage("提交成功")
              //tag
              this.$dispatch('confirm')
            } else {
              this.$showMessage("提交失败," + res.data.msg)
            }

          })
          // let res={
          //   code:"500",
          //   msg:"设备重复+++++"
          // }

        }
      })
    },
    upinit() {
      let saveall = []
      for (let i = 0; i < this.indexcount; i++) {
        //tag
        //tag)
        let items = this.data['device' + i][0].f_items

        let state = items[8].f_item_value ? (items[8].f_item_value[0] ? items[8].f_item_value[0] : '') : ''
        if (state != '删除') {
          //tag
          //tag)
              if (this.devices[i].id){
                saveall.push({
                  id:this.devices[i].id,
                  f_user_id: this.item.f_user_id,
                  f_userinfo_id:this.item.f_userinfo_id,
                  f_brand: items[0].f_item_value ? (items[0].f_item_value ? items[0].f_item_value : '') : '',
                  f_devices_type: items[1].f_item_value ? (items[1].f_item_value ? items[1].f_item_value : '') : '',
                  f_devices_model: items[2].f_item_value ? (items[2].f_item_value ? items[2].f_item_value : '') : '',
                  f_devices_no: items[3].f_item_value ? (items[3].f_item_value ? items[3].f_item_value : '') : '',
                  f_devices_num: items[4].f_item_value ? (items[4].f_item_value ? items[4].f_item_value : '') : '',
                  f_input_person: items[5].f_item_value ? (items[5].f_item_value ? items[5].f_item_value : '') : '',
                  f_service_life: items[6].f_item_value ? (items[6].f_item_value ? items[6].f_item_value : '') : '',
                  f_comments: items[7].f_item_value ? (items[7].f_item_value ? items[7].f_item_value : '') : '',
                  f_userinfodevices_state: items[8].f_item_value ? (items[8].f_item_value[0] ? items[8].f_item_value[0] : '') : '',
                  f_state:'有效',
                  f_operator: Vue.user.name,
                  f_operate_date: Util.toStandardTimeString(),
                  f_operatorid: Vue.user.id,
                })
              }else{
                saveall.push({
                  f_user_id: this.item.f_user_id,
                  f_userinfo_id:this.item.f_userinfo_id,
                  f_brand: items[0].f_item_value ? (items[0].f_item_value ? items[0].f_item_value : '') : '',
                  f_devices_type: items[1].f_item_value ? (items[1].f_item_value ? items[1].f_item_value : '') : '',
                  f_devices_model: items[2].f_item_value ? (items[2].f_item_value ? items[2].f_item_value : '') : '',
                  f_devices_no: items[3].f_item_value ? (items[3].f_item_value ? items[3].f_item_value : '') : '',
                  f_devices_num: items[4].f_item_value ? (items[4].f_item_value ? items[4].f_item_value : '') : '',
                  f_input_person: items[5].f_item_value ? (items[5].f_item_value ? items[5].f_item_value : '') : '',
                  f_service_life: items[6].f_item_value ? (items[6].f_item_value ? items[6].f_item_value : '') : '',
                  f_comments: items[7].f_item_value ? (items[7].f_item_value ? items[7].f_item_value : '') : '',
                  f_userinfodevices_state: items[8].f_item_value ? (items[8].f_item_value[0] ? items[8].f_item_value[0] : '') : '',
                  f_state:'有效',
                  f_operator: Vue.user.name,
                  f_operate_date: Util.toStandardTimeString(),
                  f_operatorid: Vue.user.id,
                })
              }
        }
      }
      return saveall
    },
    getImgGen() {
      let http = new HttpResetClass()
      http.load('POST', 'rs/sql/tel_singleTable_OrderBy', {
        data: {
          items: '*',
          tablename: 't_files',
          condition: `id in (${this.ids})`,
          orderitem: 'id'
        }
      }, {resolveMsg: null, rejectMsg: null}).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          for (let j = 0; j < this.model.serviceacitivity[0].imgs.length; j++) {
            //tag)
            //tag
            if (res.data[i].id.toString() === this.model.serviceacitivity[0].imgs[j].imgid) {
              this.model.serviceacitivity[0].imgs[j] = Object.assign({}, res.data[i], this.model.serviceacitivity[0].imgs[j])
            }
          }

        }
      })
    },
    extend(initalObj, finalObj) {
      var obj = finalObj || {};
      for (var i in initalObj) {
        var prop = initalObj[i];

        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
        if (prop === obj) {
          continue;
        }

        if (typeof prop === 'object') {
          if (obj[i]) {
            this.extend(obj[i], prop)
          } else {
            obj[i] = prop;
          }
        }
      }
      return obj;
    },

  },
  created() {

  },


  ready() {
    //tag
    //tag)

    for (let i = 0; i < this.item.shebei.length; i++) {
      this.tabs.push({
        header: this.item.shebei[i].f_brand + "/" + (this.item.shebei[i].f_devices_type ? this.item.shebei[i].f_devices_type : ''),
        name: this.item.shebei[i].f_brand,
        complete: 'shebei-devices',
        class: 'repair-info-class',
        props: null,
        number: i
      })
      this.devices.push({
        "device": this.item.shebei[i].f_brand + "/" + (this.item.shebei[i].f_devices_type ? this.item.shebei[i].f_devices_type : ''),
        "id":this.item.shebei[i].id,
        "n": i
      })
      this.config[this.item.shebei[i].f_brand + "/" + (this.item.shebei[i].f_devices_type ? this.item.shebei[i].f_devices_type : '')] = {

        "index": i + 1,
        "items": {
          "设备品牌": {
            "index": 1,
            "type": "string"
          },
          "设备类型": {
            "index": 2,
            "type": "string"
          },
          "设备型号": {
            "index": 3,
            "type": "string"
          },
          "设备编号": {
            "index": 4,
            "type": "string"
          },
          "设备数量": {
            "index": 5,
            "type": "number"
          },
          "吨位/灶眼数": {
            "index": 6,
            "type": "number"
          },
          "设备年限": {
            "index": 7,
            "type": "number"
          },
          "备注": {
            "index": 8,
            "type": "string"
          },
          "设备状态": {
            "index": 9,
            "type": "string"
          }
        }

      }
      this.data['device' + i] = [{
        f_device_type: this.item.shebei[i].f_brand + "/" + (this.item.shebei[i].f_devices_type ? this.item.shebei[i].f_devices_type : ''),
        f_items: [{
          f_item_name: "设备品牌",
          f_item_value: this.item.shebei[i].f_brand,
          readonly: true,
          type: "string"
        }, {
          f_item_name: "设备类型",
          f_item_value: (this.item.shebei[i].f_devices_type ? this.item.shebei[i].f_devices_type : ''),
          readonly: true,
          type: "string"
        }, {
          f_item_name: "设备型号",
          f_item_value: this.item.shebei[i].f_devices_model,
          readonly: false,
          type: "string"
        }, {
          f_item_name: "设备编号",
          f_item_value: this.item.shebei[i].f_devices_no,
          readonly: false,
          type: "string"
        }, {
          f_item_name: "设备数量",
          f_item_value: this.item.shebei[i].f_devices_num,
          readonly: false,
          type: "number"
        }, {
          f_item_name: "吨位/灶眼数",
          f_item_value: this.item.shebei[i].f_input_person,
          readonly: false,
          type: "number"
        }, {
          f_item_name: "设备年限",
          f_item_value: this.item.shebei[i].f_service_life,
          readonly: false,
          type: "number"
        }, {
          f_item_name: "备注",
          f_item_value: this.item.shebei[i].f_comments,
          readonly: false,
          type: "string"
        }, {
          f_item_name: "设备状态",
          options: [{label: '正常', value: '正常'}, {label: '报废', value: '报废'}, {label: '拆除', value: '拆除'}],
          f_item_value: [this.item.shebei[i].f_userinfodevices_state],
          selected: [this.item.shebei[i].f_userinfodevices_state],
          readonly: false,
          type: "selector"
        }]
      }]

    }
    if (this.item.shebei.length > 0) {
      this.indexcount = this.item.shebei.length
      this.tabSelect(this.tabs[0], 0)
    }

  },
}
</script>
<style lang="less">
@import "../../../src/bootstrap/less/variables.less";

.noclickbut {
  pointer-events: none;
}

.tab-befor-img (@url) {
  content: '';
  background-image: url("@{url}");
  background-size: 20px;
  display: inline-block;
  margin-right: 8px;
  margin-top: 0.3em;
  height: 1.3em;
  width: 1.3em;
  vertical-align: -35%;
}

@media screen and (min-width: 768px) {
  .android-repair-order > div > ul a {
    font-size: @font-size-h2;
    margin: 0.3em 0;
  }
}

.repair-details-class {
  &::before {
    .tab-befor-img("../../assets/huneiweixiu1.png");
  }
}

.repair-info-class {
  &::before {
    .tab-befor-img("../../assets/baoxiuxinxi1.png");
  }
}

.repair-user-info-class {
  &::before {
    .tab-befor-img("../../assets/jibenxinxi1.png")
  }
}

.door-service-class {
  &::before {
    .tab-befor-img("../../assets/huneiweixiu1.png")
  }
}

.pipeline-class {
  &::before {
    .tab-befor-img("../../assets/guandao1.png")
  }
}

.device-service-class {
  &::before {
    .tab-befor-img("../../assets/shebeiweixiu1.png")
  }
}

.trouble-removal-class {
  &::before {
    .tab-befor-img("../../assets/shiguchuli.png")
  }
}

.cooking-utensils-class {
  &::before {
    .tab-befor-img("../../assets/zaoju1.png")
  }
}

.outlay-class {
  &::before {
    .tab-befor-img("../../assets/feiyong1.png")
  }
}

.fault-all-class {
  &::before {
    .tab-befor-img("../../assets/guzhanghuizong1.png")
  }
}

.photo-write-class {
  &::before {
    .tab-befor-img("../../assets/zaoju.png")
  }
}

.delay-apply-class {
  &::before {
    .tab-befor-img("../../assets/yonghubaoxiu.png")
  }
}

.repair-back-class {
  &::before {
    .tab-befor-img("../../assets/fanhui.png")
  }
}

.butt2 {
  display: inline;
  float: right;
  width: 10px;
  text-align: center;
  align-items: center;
  position: absolute;
  top: 50%;

  left: 90%;
  transform: translate(-50%, -50%);
}

.linesty {
  display: inline-block;
  height: 1px;
  width: 100%;
  background: #d0d0d0;
  overflow: hidden;
  vertical-align: middle;
}

.spanboder {
  border-bottom: 2px solid #499edf;
  padding-bottom: 8px
}

.app-botton {
  position: fixed;
  background: #87b2dd;
  right: 8px;
  color: #FFF;
  padding: 8px;
  text-align: center;
  font-size: 1.2em;
  z-index: 10;
  opacity: 0.5;
  bottom: 50px;
  margin-top: -10px;
  height: 40px;
}

.android-repair-order > div > ul a {
  font-size: 12px;
  color: #333333;
  padding: 13px 16px;
}
</style>
