<template>
  <a-card size="small" :bordered="false" class="bigScreenSet-wrap" :style="{height:windowHeight +'px'}">
    <a-spin :spinning="spinning" tip="Loading...">
      <!-- 设置条件 -->
      <div class="setTit">大屏参数设置</div>
      <div ref="setList" class="table-page-search-wrapper">
        <a-form-model
          layout="inline"
          :model="form"
          ref="ruleForm"
          :rules="rules"
          id="bigScreenSet-form"
          :label-col="labelCol"
          :wrapper-col="wrapperCol">
          <a-row>
            <a-col :md="13" :sm="24">
              <div class="flexBox">
                <a-form-model-item label="销售系数:" prop="saleNum">
                  <a-input
                    id="bigScreenSet-saleNum"
                    style="width:93%;margin-right: 10px;"
                    v-model.trim="form.saleNum"
                    allowClear
                    placeholder="请输入销售系数"
                    oninput="if(!/^[0-9]+$/.test(value)) value=value.replace(/\D/g,'');if(value>99900)value=99900;if(value<0)value=null"></a-input>
                  <span>%</span>
                </a-form-model-item>
              </div>
            </a-col>
            <a-col :md="13" :sm="24">
              <a-form-model-item label="销售额类型:" prop="saleType">
                <a-select id="bigScreenSet-saleType" v-model="form.saleType" placeholder="请选择销售额类型">
                  <a-select-option id="bigScreenSet-saleType-salePrice" value="sale_price">开单金额</a-select-option>
                  <a-select-option id="bigScreenSet-saleType-realPrice" value="real_price">实售金额</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <!-- 操作按钮 -->
      <div class="table-operator">
        <a-button id="bigScreenSet-save" type="primary" class="button-error" @click="handleAdd" :loading="iconLoading">确定</a-button>
      </div>
    </a-spin>
  </a-card>
</template>

<script>
import { commonMixin } from '@/utils/mixin'
// 组件
import { VSelect } from '@/components'
// 接口
import { queryList, batchUpdateByCode } from '@/api/sysParamsConfig'
export default {
  name: 'BigScreenSetIndex',
  mixins: [commonMixin],
  components: { VSelect },
  data () {
    return {
      spinning: false,
      //  查询条件
      form: {
        saleNum: undefined, // 销售系数
        saleType: undefined// 销售额类型
      },
      // form表单label布局
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      listData: [], // 列表数据
      saleNumPos: null, // 销售系数位置
      saleTypePos: null, // 销售额类型位置
      // form表单验证规则
      rules: {
        saleNum: [{ required: true, message: '销售系数不能为空', trigger: 'blur' }],
        saleType: [{ required: true, message: '销售额类型不能为空', trigger: 'change' }]
      },
      iconLoading: false, // 确定按钮加载状态
      windowHeight: 0// 页面高度
    }
  },
  methods: {
    // 获取销售额类型数据
    getData () {
      this.spinning = true
      queryList({ }).then(res => {
        if (res.status == 200) {
          this.listData = res.data
          if (res.data) {
            this.saleNumPos = res.data.findIndex(con => con.code === 'DATA_SCREEN_DATA_RATIO')
            this.saleTypePos = res.data.findIndex(con => con.code === 'DATA_SCREEN_AMOUNT_TYPE')
          }
          this.form.saleNum = res.data ? res.data[this.saleNumPos].value * 100 : ''
          this.form.saleType = res.data ? res.data[this.saleTypePos].value : ''
          this.spinning = false
        } else {
          this.detailsData = null
        }
      })
    },
    // 确定保存
    handleAdd () {
      this.iconLoading = true
      const saleNum = this.form.saleNum / 100
      const data = [{ code: this.listData[this.saleTypePos].code, value: this.form.saleType }, { code: this.listData[this.saleNumPos].code, value: saleNum }]
      batchUpdateByCode(data).then(res => {
        if (res.status == 200) {
          this.$message.success('设置成功！')
        }
        this.iconLoading = false
      })
    },
    // 计算页面高度
    setTableH () {
      this.windowHeight = window.innerHeight - 90
    }
  },
  created () {
    this.getData()
    // 计算页面显示高度
    this.setTableH()
  }
}
</script>
<style lang="less" scoped>
  .setTit{
    font-weight:bold;
    font-size:16px;
    padding:20px 0;
  }
  .flexBox{
    margin-bottom:30px;
  }
  .table-operator{
    margin-top:30px;
    margin-left: 100px;
  }
</style>
