<template>
  <div class="app-container">

    <el-row :gutter="15">
      <el-form ref="setForm" :model="formData"  size="medium" label-width="100px">
        <el-col :span="19">
          <el-form-item label-width="245px" :label="$t('每个客户占用货架超过盘点')" prop="shelvesNum">
            <el-input v-model="formData.shelvesNum" :style="{width: '30%'}" />&nbsp;&nbsp;个
          </el-form-item>
        </el-col>
        <el-col :span="19">
          <el-form-item label-width="245px" :label="$t('每个客户占用货架区域超过盘点')" prop="shelvesAreaNum">
            <el-input v-model="formData.shelvesAreaNum" :style="{width: '30%'}" />&nbsp;&nbsp;个
          </el-form-item>
        </el-col>
        <el-col :span="19">
          <el-form-item label-width="245px" :label="$t('入库超时预警')" prop="rkOverDay">
            {{$t('超过')}} <el-input v-model="formData.rkOverDay" :style="{width: '30%'}" />&nbsp;&nbsp;{{$t('天')}}，{{$t('自动预警')}}
          </el-form-item>
        </el-col>

       <el-col :span="19">
          <el-form-item label-width="245px" :label="$t('上架超时预警')" prop="sjOverDay">
            {{$t('超过')}} <el-input v-model="formData.sjOverDay" :style="{width: '30%'}" />&nbsp;&nbsp;{{$t('天')}}，{{$t('自动预警')}}
          </el-form-item>
        </el-col>

        <el-col :span="19">
          <el-form-item label-width="245px" :label="$t('在仓超时预警')" prop="zcOverDay">
            {{$t('超过')}}<el-input v-model="formData.zcOverDay" :style="{width: '30%'}" />&nbsp;&nbsp;{{$t('天')}}，{{$t('自动预警')}}
          </el-form-item>
        </el-col>

        <el-col :span="19">
          <el-form-item label-width="245px" :label="$t('打包超时预警')" prop="dbOverDay">
            {{$t('超过')}}<el-input v-model="formData.dbOverDay" :style="{width: '30%'}" />&nbsp;&nbsp;{{$t('天')}}，{{$t('自动预警')}}
          </el-form-item>
        </el-col>

        <el-col :span="19">
          <el-form-item label-width="245px" :label="$t('待出库超时预警')" prop="dckOverDay">
            {{$t('超过')}}<el-input v-model="formData.dckOverDay" :style="{width: '30%'}" />&nbsp;&nbsp;{{$t('天')}}，{{$t('自动预警')}}
          </el-form-item>
        </el-col>

        <el-col :span="19">
          <el-form-item label-width="245px" :label="$t('仓租费类型')" prop="chargeType">
            <el-radio-group v-model="formData.chargeType">
              <el-radio v-for="item in chargeDictDatas" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

         <el-col :span="19">
          <el-form-item label-width="245px" :label="$t('仓租费设置')" prop="fee">
            <el-input v-model="formData.fee" :style="{width: '30%'}" />&nbsp;&nbsp;$
          </el-form-item>
        </el-col>
        

        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">{{$t('提交')}}</el-button>
            <el-button @click="resetForm">{{$t('重置')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    
  </div>
</template>

<script>
import { createSetting, getSettingList } from "@/api/ecw/setting";
import { getDictDatas, DICT_TYPE } from '@/utils/dict'

export default {
  name: "Setting",
  components: {
  },
  data() {
    return {
      formData:{
          shelvesNum:null,
          shelvesAreaNum:null,
          rkOverDay:null,
          sjOverDay:null,
          zcOverDay:null,
          dbOverDay:null,
          dckOverDay:null,
          chargeType:null,
          fee:null
      },
      chargeDictDatas: getDictDatas(DICT_TYPE.ECW_CHARGE_TYPE),
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询列表 */
    getList() {
      getSettingList({type:'warehouse'}).then(response => {
          let list = response.data;
          for(let index in list) {
            let item = list[index];
            let keyName = item.keyName;
            this.formData[keyName]=item.keyValue;
          }
          // console.log(this.formData);
      })
    },
    
    /** 表单重置 */
    resetForm() {
      this.formData = {
         shelvesNum:null,
          shelvesAreaNum:null,
          rkOverDay:null,
          sjOverDay:null,
          zcOverDay:null,
          dbOverDay:null,
          dckOverDay:null,
          chargeType:null,
          fee:null
      };
    },
   
   
    /** 提交按钮 */
    submitForm() {
      let settingList = [];
      let shelvesNum = {keyName: 'shelvesNum', keyValue: this.formData.shelvesNum, keyType:'warehouse'};
      let shelvesAreaNum = {keyName: 'shelvesAreaNum', keyValue: this.formData.shelvesAreaNum, keyType:'warehouse'};
      let rkOverDay = {keyName: 'rkOverDay', keyValue: this.formData.rkOverDay, keyType:'warehouse'};
      let sjOverDay = {keyName: 'sjOverDay', keyValue: this.formData.sjOverDay, keyType:'warehouse'};
      let zcOverDay = {keyName: 'zcOverDay', keyValue: this.formData.zcOverDay, keyType:'warehouse'};
      let dbOverDay = {keyName: 'dbOverDay', keyValue: this.formData.dbOverDay, keyType:'warehouse'};
      let dckOverDay = {keyName: 'dckOverDay', keyValue: this.formData.dckOverDay, keyType:'warehouse'};
      let chargeType = {keyName: 'chargeType', keyValue: this.formData.chargeType, keyType:'warehouse'};
      let fee = {keyName: 'fee', keyValue: this.formData.fee, keyType:'warehouse'};
      settingList.push(shelvesNum);
      settingList.push(shelvesAreaNum);
      settingList.push(rkOverDay);
      settingList.push(sjOverDay);
      settingList.push(zcOverDay);
      settingList.push(dbOverDay);
      settingList.push(dckOverDay);
      settingList.push(chargeType);
      settingList.push(fee);
      createSetting({settingList:settingList}).then(response => {
         this.$modal.msgSuccess(this.$t("操作成功"));
      });
    }
  }
};
</script>