<template>
  <div class="auto select-overspread">
    <validator name='v'>
      <form class="form-horizontal" novalidate>
        <ul class="nav nav-tabs">
          <li class="active"><a href="#">优惠信息</a></li>
        </ul>
        <div class="row">
          <div :class="[$v.f_user_type.required ? 'has-error' : 'has-success']" class="col-sm-6">
            <input class="input_search" style="width:60%" type="text" v-model="model.f_user_type" v-show="false"
                   v-validate:f_user_type='{required: true }'>
            <label class="font_normal_body" for="f_user_type">客户类型</label>
            <v-select :disabled='isEdit'
                      :options='usertype'
                      @change="userTypeChange()"
                      :value-single="true"
                      :value.sync="model.f_user_type"
                      close-on-select
                      placeholder='请选择'
                      v-model="model.f_user_type">
            </v-select>
          </div>
          <div :class="[$v.f_gasproperties.required ? 'has-error' : 'has-success']" class="col-sm-6">
            <input class="input_search" style="width:60%" type="text" v-model="model.f_gasproperties" v-show="false"
                   v-validate:f_gasproperties='{required: true }'>
            <label class="font_normal_body" for="f_gasproperties">用气性质</label>
            <v-select :disabled='isEdit'
                      :options='gasproperties'
                      :value-single="true"
                      :value.sync="model.f_gasproperties"
                      close-on-select
                      placeholder='请选择'
                      v-model="model.f_gasproperties">
            </v-select>
          </div>
          <div :class="[$v.f_payment.required ? 'has-error' : 'has-success']" class="col-sm-6">
            <input class="input_search" style="width:60%" type="text" v-model="model.f_payment" v-show="false"
                   v-validate:f_payment='{required: true }'>
            <label class="font_normal_body" for="f_user_type" title="参数名称：付款方式">收款方式</label>
            <v-select :disabled='isEdit'
                      :options='payment'
                      :value-single="true"
                      :value.sync="model.f_payment"
                      close-on-select
                      placeholder='请选择'
                      v-model="model.f_payment">
            </v-select>
          </div>
          <div :class="[$v.f_privilege_name.required ? 'has-error' : 'has-success']" class="col-sm-6">
            <label class="font_normal_body" for="f_privilege_name">优惠名称</label>
            <input :disabled='isEdit' class="input_search" placeholder="优惠名称" style="width:60%"
                   type="text" v-model="model.f_privilege_name" v-validate:f_privilege_name='{required: true }'>
          </div>
          <div :class="[$v.f_privilege_type.required ? 'has-error' : 'has-success']" class="col-sm-6">
            <input class="input_search" style="width:60%" type="text" v-model="model.f_privilege_type" v-show="false"
                   v-validate:f_privilege_type='{required: true }'>
            <label class="font_normal_body" for="f_user_type">优惠类型</label>
            <v-select :disabled='isEdit'
                      :options='privilegetype'
                      :value-single="true"
                      :value.sync="model.f_privilege_type"
                      close-on-select
                      placeholder='请选择'
                      v-model="model.f_privilege_type">
            </v-select>
          </div>
          <div :class="[$v.f_privilege_bv.required ? 'has-error' : 'has-success']" v-if="model.f_privilege_type=='打折'" class="col-sm-6">
            <label class="font_normal_body" for="f_privilege_bv">打折比率</label>
            <input :disabled='isEdit' class="input_search" placeholder="打折比率" style="width:60%"
                   type="number" v-model="model.f_privilege_bv" v-validate:f_privilege_bv='{required: true }'>
          </div>

          <div class="col-sm-6" :class="[$v.f_perform_date.required ? 'has-error' : 'has-success']">
            <input class="input_search" style="width:60%" type="text" v-model="model.f_perform_date" v-show="false"
                   v-validate:f_perform_date='{required: true }'>
            <label class="font_normal_body" for="f_perform_date">执行日期</label>
            <datepicker :disabled='isEdit'
                        :format="'yyyy-MM-dd'"
                        :value.sync="model.f_perform_date"
                        id="f_perform_date"
                        placeholder="执行日期"
                        v-model="model.f_perform_date" style="width: 60%">
            </datepicker>
          </div>
          <div class="col-sm-6" :class="[$v.f_end_date.required ? 'has-error' : 'has-success']">
            <input class="input_search" style="width:60%" type="text" v-model="model.f_end_date" v-show="false"
                   v-validate:f_end_date='{required: true }'>
            <label class="font_normal_body" for="f_end_date">结束日期</label>
            <datepicker :disabled='isEdit'
                        :format="'yyyy-MM-dd'"
                        :value.sync="model.f_end_date"
                        id="f_end_date"
                        placeholder="结束日期"
                        v-model="model.f_end_date" style="width: 60%">
            </datepicker>
          </div>
          <div class="col-sm-6">
            <label class="font_normal_body">使用公司</label>
            <res-select :initresid='curorgid'
                        @res-select="getorg"
                        is-mul="false"
                        restype='organization'>
            </res-select>
          </div>

          <div class="col-sm-12" style="margin-top: 20px">
            <label class="font_normal_body " style="margin-top:-20px">备&emsp;&emsp;注</label>
            <textarea class="input_textarea" rows="3" style="width:80%;margin-top:5px"
                      v-model="model.f_comments"></textarea>
          </div>
        </div>
        <ul class="nav nav-tabs" v-if="model.f_privilege_type=='满减'">
          <li class="active"><a href="#">优惠信息详情</a></li>
        </ul>
        <div class="auto" v-if="model.f_privilege_type=='满减'">
          <table class="table table-condensed">
            <thead>
            <tr>
              <th style="text-align:center;border: 0">
                <nobr>优惠条件</nobr>
              </th>
              <th style="text-align:center;border: 0">
                <nobr>优惠计算</nobr>
              </th>
              <th style="text-align:center;border: 0">
                <nobr>操作</nobr>
              </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="row in model.privilege_details">
              <td style="text-align:center" :class="{'has-error': $v[`f_condition_${$index}`].required}">
                <input class="input_search" type="number" v-model="model.privilege_details[$index].f_condition"
                       placeholder="优惠条件" :field="`f_condition_${$index}`" v-validate='{required: true}'/>
              </td>
              <td style="text-align:center" :class="{'has-error': $v[`f_compute_${$index}`].required}">
                <input class="input_search" type="number" v-model="model.privilege_details[$index].f_compute"
                       placeholder="优惠计算" :field="`f_compute_${$index}`" v-validate='{required: true}'>
              </td>
              <td v-if="($index + 1 ) == model.privilege_details.length">
                <nobr>
                  <button class="glyphicon glyphicon-minus btn-danger" type="button" @click.stop="delGas($index, row)"></button>
                  <button class="glyphicon glyphicon-plus btn-success" type="button" @click.stop="addGas()"></button>
                </nobr>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </form>

      <div style="text-align:right;height:auto;margin-top: 10px;">
        <button :disabled='!$v.valid' @click="confirm()" class="button_search" v-if="!isEdit">确认</button>
        <button @click="close()" class="button_clear">取消</button>
      </div>
    </validator>
  </div>
</template>
<script>
  import {HttpResetClass} from 'vue-client'
  import Vue from 'vue'
  export default {
    data () {
      return {
        model: {
          f_operatorid: Vue.$login.f.id,
          f_operator: Vue.$login.f.name,
          f_orgid: Vue.$login.f.orgid,
          f_orgname: Vue.$login.f.orgs,
          f_depid: Vue.$login.f.depids,
          f_depname: Vue.$login.f.deps,
          f_state: '有效',
          // 所属公司
          f_filialeid: '',
          // 所属公司名称
          f_filialename: '',
          privilege_details: [{}]
        },
        // 编辑控制
        isEdit: false,
        // 公司树状图信息
        curorgid: [this.$login.f.orgid],
        // 下拉框数据
        usertype: this.$appdata.getParam('用户类型'),
        payment: this.$appdata.getParam('付款方式'),
        privilegetype: [{label: '满减', value: '满减'}, {label: '打折', value: '打折'}, {label: '自定义', value: '自定义'}, {label: '自定义气量', value: '自定义气量'}],
        gasproperties: []
      }
    },
    props: ['data'],
    async ready () {
      if (this.data) {
        // 合并选中数据
        this.model = Object.assign({}, this.model, this.data)
        // 查询选中优惠的详细信息
        let details = await this.$resetpost('rs/sql/saleSingleTable', {
          data: {
            tablename: 't_privilege_details',
            condition: `f_privilege_id = ${this.model.id}`
          }
        }, {resolveMsg: null, rejectMsg: '查询优惠详细信息失败'})
        this.model.privilege_details = details.data
      }
    },
    methods: {
      userTypeChange () {
        this.gasproperties = []
        if (this.model !== null) {
          console.log(this.model.f_user_type)
          this.gasproperties = this.$appdata.getParam(this.model.f_user_type)
          // this.gasproperties.push({label: '全部', value: ''})
        } else {
          this.gasproperties = [{label: '全部', value: ''}]
        }
      },
      async confirm () {
        // 验证公司组织是否已选择
        if (!this.model.f_filialeid) {
          this.$showAlert('请选择使用公司', 'warning', 2000)
          return
        }
        await this.$resetpost('rs/logic/savePrivilege', this.model, {resolveMsg: '保存成功', rejectMsg: '保存失败'})
        this.$dispatch('close')
      },
      getorg (id, name) {
        this.model.f_filialeid = id[0]
        this.model.f_filialename = name[0]
      },
      addGas () {
        this.model.privilege_details.push({})
      },
      async delGas (index, row) {
        if (this.model.privilege_details.length > 1) {
          let res = await this.$showMessage('确定删除吗?', ['confirm', 'cancel'])
          if (res != 'confirm') {
            return
          }
          if (row.id) {
            await this.$resetdelete('rs/entity/t_privilege_details', {id: row.id}, {warnMsg: null, resolveMsg: null, rejectMsg: '删除失败'})
          }
          this.model.privilege_details.splice(index, 1)
        }
      },
      close () {
        this.$dispatch('close')
      }
    }
  }
</script>
<style lang="less">
  #gas-price-form {
    .form-group {
      margin-left: 0px;
      margin-right: 0px;
    }
  }
</style>
