<template>
  <div class="panel panel-default auto repair-info-content">
    <work-busy :is-busy="loading"></work-busy>
    <div style="height: 100%">
      <div class="panel auto" v-for="(index,insure) in valueinfo">
        <div class="panel-heading" @click="selectVal(insure.value_type)" style="background-color: #ffffff">
        <span class="spanboder">
          {{insure.value_type}}
          <img class="butt3" :src="imgback(insure.value_type)">
        </span>
        </div>
        <div class="panel-body " id="upuserinfo_sel" v-show="headername==insure.value_type">
          <div class="row auto" style="margin: 5px 0">
            <label class="righttxt">是否购买:</label>
            <v-select class="rightipt" :value.sync="insure.isuse"
                      v-model="insure.isuse"
                      placeholder='请选择'
                      :options="isuses"
                      close-on-select
                      value-single></v-select>
          </div>
          <div class="row auto" style="margin: 5px 0">
            <label class="righttxt">购买时间:</label>
            <datepicker
              class="rightipt"
              :value.sync="insure.startDate"
              placeholder='购买时间'
              :disabled-days-of-week="[]"
              :format="'yyyy-MM-dd'"
              :show-rest-button="reset"
              v-model="insure.startDate">
            </datepicker>
          </div>
          <div class="row auto" style="margin: 5px 0" v-show="insure.value_type== '燃气灶'">
            <label class="righttxt">产品类型:</label>
            <v-select class="rightipt" :value.sync="insure.f_product_type"
                      v-model="insure.f_product_type"
                      placeholder='请选择'
                      :options="product_types"
                      close-on-select
                      value-single></v-select>
          </div>
          <div class="row auto" style="margin: 5px 0" v-show="insure.value_type== '燃气灶'">
            <label class="righttxt">产品品牌:</label>
            <v-select class="rightipt" :value.sync="insure.f_value_brand"
                      v-model="insure.f_value_brand"
                      placeholder='请选择'
                      :options="value_brands"
                      close-on-select
                      value-single></v-select>
          </div>
          <div class="row auto" style="margin: 5px 0" v-show="insure.value_type== '壁挂炉'">
            <label class="righttxt">产品品牌:</label>
            <v-select class="rightipt" :value.sync="insure.f_value_brand"
                      v-model="insure.f_value_brand"
                      placeholder='请选择'
                      :options="value_brands1"
                      close-on-select
                      value-single></v-select>
          </div>
          <div class="row auto" style="margin: 5px 0" v-show="insure.value_type== '热水器'">
            <label class="righttxt">产品品牌:</label>
            <v-select class="rightipt" :value.sync="insure.f_value_brand"
                      v-model="insure.f_value_brand"
                      placeholder='请选择'
                      :options="value_brands2"
                      close-on-select
                      value-single></v-select>
          </div>
        </div>
      </div>
      <div class="panel auto">
        <div class="panel-body">
          <div style="display: flex;justify-content: center;">
            <button class="col-sm-3 btn btn-primary" @click="commit()">提交</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

export default {
  title: '查询用户',
  data () {
    return {
      oldvalueinfo: {},
      valueinfo: {},
      loading: false,
      headername: '',
      isuses: [{label: '是', value: '是'}, {label: '否', value: '否'}],
      product_types: [{label: '单灶', value: '单灶'}, {label: '双灶', value: '双灶'}],
      value_brands: [
        {label: '其他', value: '其他'},
        {label: '方太', value: '方太'},
        {label: '老板', value: '老板'},
        {label: '华帝', value: '华帝'},
        {label: '美的', value: '美的'},
        {label: '海尔', value: '海尔'},
        {label: '林内', value: '林内'},
        {label: '西门子', value: '西门子'},
        {label: '苏泊尔', value: '苏泊尔'},
        {label: '万家乐', value: '万家乐'},
        {label: '万和', value: '万和'}
      ],
      value_brands1: [
        {label: '其他', value: '其他'},
        {label: '史密斯', value: '史密斯'},
        {label: '林内', value: '林内'},
        {label: '能率', value: '能率'},
        {label: '海尔', value: '海尔'},
        {label: '美的', value: '美的'},
        {label: '万和', value: '万和'},
        {label: '万家乐', value: '万家乐'},
        {label: '华帝', value: '华帝'},
        {label: '博世', value: '博世'}
      ],
      value_brands2: [
        {label: '其他', value: '其他'},
        {label: '方太', value: '方太'},
        {label: '老板', value: '老板'},
        {label: '华帝', value: '华帝'},
        {label: '美的', value: '美的'},
        {label: '海尔', value: '海尔'},
        {label: '林内', value: '林内'},
        {label: '西门子', value: '西门子'},
        {label: '苏泊尔', value: '苏泊尔'},
        {label: '万家乐', value: '万家乐'},
        {label: '万和', value: '万和'}
      ],
    }
  },
  props: {
    userinfo: {},
    source: ''
  },
  methods: {
    imgback (header) {
      if (this.headername === header) {
        return require('../../assets/xiangxia1.png')
      } else {
        return require('../../assets/xiangyou1.png')
      }
    },
    selectVal (header) {
      if (this.headername === header) {
        this.headername = ''
      } else {
        this.headername = header
      }
    },
    getModel() {
      new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/api/af-revenue/logic/valueaddinfo`, {
        data: {
          f_userinfo_id: `${this.userinfo.f_userinfoid}`,
          f_userfiles_id: `${this.userinfo.f_userfiles_id}`,
        }
      }).then((res) => {
        this.oldvalueinfo = JSON.parse(JSON.stringify(res.data.valaddinfo))
        this.valueinfo = JSON.parse(JSON.stringify(res.data.valaddinfo))
        this.headername = this.valueinfo[0].value_type
      }).catch(error => {
        this.$showMessage("网络异常，获取信息失败！！")
      })
    },
    commit() {
      this.loading = true
      let commit_data = [];
      commit_data = this.valueinfo.filter(obj1 => {
        return this.oldvalueinfo.findIndex(obj2 => JSON.stringify(obj1) === JSON.stringify(obj2)) === -1;
      });
      commit_data.forEach(item=>{
        item.f_operator_date = Util.toStandardTimeString()
        item.startdate = item.startDate
      })
      if (commit_data.length === 0 ){
        this.$showMessage("未进行数据维护，如无需维护请直接返回！")
        this.loading = false
        return
      }
      new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/api/af-revenue/logic/chargevaluesave`, {
        data: {
          oldvalueinfo: this.oldvalueinfo,
          valueinfo: commit_data,
          f_resource: this.source ? this.source : '安检',
          userinfo: {
            f_userinfo_id: `${this.userinfo.f_userinfoid}`,
            f_user_name: `${this.userinfo.f_user_name}`
          },
          f_operator: Vue.user.name,
          f_operatorid: Vue.user.id,
          f_orgid: Vue.user.orgid,
          f_orgname: Vue.user.orgs,
          f_depid: Vue.user.depids,
          f_depname: Vue.user.deps,
          f_zoneid: Vue.user.zoneid,
          f_zones: Vue.user.zones
        }
      }).then((res) => {
        this.getModel()
        this.$showMessage("修改成功！！")
        this.loading = false
      }).catch(error => {
        this.$showMessage("网络异常，修改失败！！")
        this.loading = false
      })
    },
    back() {

    }
  },
  watch: {},
  ready() {
    this.getModel()
  }
}
</script>
<style>
.butt3 {
  float: right;
  width: 12px;
  margin: 1% 2% 0 0;
}
.rightipt {
  width: 60%;
  float: left;
  margin-left: 5%;
}
.righttxt {
  border: none;
  margin-left: 5px;
  /*border-left: 5px solid #A2C2EB;*/
  float: left;
  width: 25%;
  margin-bottom: 3px;
  text-align: left;
  word-wrap: break-word;
  white-space: normal;
}
.app-botton {
  position: fixed;
  background: #87b2dd;
  color: #FFF;
  padding: 8px;
  text-align: center;
  font-size: 1.2em;
  z-index: 10;
  opacity: 0.5;
  bottom: 50px;
  margin-top: -10px;
  height: 40px;
}
</style>
