<template>
  <div>
    <a-modal
      class="modalBox"
      :title="titleText"
      v-model="isshow"
      :footer="null"
      @cancle="cancel"
      :width="800"
      :centered="true">
      <a-form-model
        ref="ruleForm"
        :model="formData"
        :rules="rules"
      >
        <!-- 箱体类型名称 -->
        <a-form-model-item label="箱体类型名称" ref="name" prop="name" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <a-input
            placeholder="请输入箱体类型名称(最多30个字符)"
            allowClear
            :maxLength="30"
            id="roleModal-name"
            v-model="formData.name"
          />
        </a-form-model-item>
        <!-- 内置箱体数量 -->
        <a-form-model-item label="内置箱体数量" ref="boxNum" prop="boxNum" :label-col="{ span: 5 }" :wrapper-col="{ span: 14 }">
          <v-select
            ref="orderStatus"
            id="addBoxModal-status"
            code="BOX_NUM"
            @change="handleNumChange"
            placeholder="请选择"
            allowClear
            v-model="formData.boxNum"
          >
          </v-select>
        </a-form-model-item>
        <!-- 箱体限投 -->
        <a-row type="flex" align="middle" v-for="(item, index) in formData.deviceTypeBoxList" :key="index">
          <a-col span="12">
            <!-- 投放开始时间 -->
            <a-form-model-item
              :label=" '内置'+(index+1)+'号箱限投(kg)'"
              :required="true"
              :label-col=" { span: 10 }"
              :wrapper-col=" { span: 14 }"
              :prop="'deviceTypeBoxList.' + index + '.maxWeight'"
              :rules="{
                required: true,
                message: '请输入限投数量',
                trigger: ['blur','change'],
              }"
            >
              <a-input-number
                :min="1"
                :max="1000"
                :precision="0"
                style="width: 200px;"
                placeholder="请输入数字(最大1000)"
                v-model="item.maxWeight"
              />
            </a-form-model-item>
          </a-col>
          <a-col span="1"></a-col>
          <a-col span="9">
            <!-- 请选择分类 -->
            <a-form-model-item
              :label="''"
              :required="false"
              :wrapper-col="{ span: 18 }"
              :prop="'deviceTypeBoxList.' + index + '.rubbishType'"
              :rules="{
                required: true,
                message: '请选择分类',
                trigger: ['blur','change'],
              }"
            >
              <v-select
                ref="orderStatus"
                id="addBoxModal-status"
                code="RUBBISH_TYPE"
                placeholder="请选择分类"
                allowClear
                v-model="item.rubbishType"
              >
              </v-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-form-model-item :wrapper-col="{ span: 24, offset: 10 }">
          <a-button type="primary" @click="handleSubmit()" id="roleModal-handleSubmit" :style="{ marginRight: '15px' }">
            保存
          </a-button>
          <a-button :style="{ marginLeft: '15px' }" @click="handleCancel()" id="roleModal-handleCancel">
            取消
          </a-button>
        </a-form-model-item>
      </a-form-model>

    </a-modal>
  </div>
</template>

<script>
import {
  STable,
  VSelect
} from '@/components'
import {
  saveBoxSetting,
  viewBoxSetting
} from '@/api/boxSetting.js'
export default {
  name: 'RoleModal',
  components: {
    STable,
    VSelect
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      titleText: '新增',
      isshow: this.visible,
      formData: {
        name: '',
        boxNum: '',
        deviceTypeBoxList: []
      },
      rules: {
        name: [{ required: true, message: '请输入箱体类型名称', trigger: 'blur' }],
        boxNum: [{ required: true, message: '请选择内置箱体数量', trigger: 'blur' }]
      }
    }
  },
  methods: {
    // 内置箱体选择修改
    handleNumChange (v) {
      console.log(v, 'vvvvvvvvvv')
      for (let i = 0; i < v; i++) {
        this.formData.deviceTypeBoxList.push({
          maxWeight: '',
          rubbishType: ''
        })
      }
    },
    // 查详情
    getDetailData (id) {
      viewBoxSetting({
        id: id
      }).then(res => {
        if (res.status == 200) {
          this.formData = Object.assign({}, this.formData, res.data)
        }
      })
    },
    // 保存提交
    handleSubmit () {
      const _this = this
      this.$refs.ruleForm.validate(valid => {
        console.log(valid, this.formData, ' formData.type222222222')
        if (valid) {
          const params = JSON.parse(JSON.stringify(this.formData))
          // 编辑
          if (this.id) {
            params.deviceTypeBoxList.map(item => {
              delete item.id
            })
          }
          console.log(params)
          saveBoxSetting(params).then(res => {
            console.log(res, 'res--save')
            if (res.status == '200') {
              this.$message.success(res.message)
              this.$emit('refresh')
              setTimeout(function () {
                _this.cancel()
              }, 300)
            } else {
              // this.$message.error(res.message)
            }
          })
        }
      })
    },
    // 取消
    handleCancel () {
      this.cancel()
    },
    cancel (e) {
      this.clear()
      this.$emit('close')
    },
    clear () {
      this.$refs.ruleForm.resetFields()
      this.formData.name = ''
      this.formData.boxNum = ''
      this.formData.deviceTypeBoxList = []
    }
  },
  watch: {
    visible (newValue, oldValue) {
      this.isshow = newValue
    },
    isshow (newValue, oldValue) {
      if (newValue) {
        if (this.id) { // 编辑
          this.titleText = '编辑'
          this.getDetailData(this.id)
        } else {
          this.titleText = '新增'
        }
      } else {
        this.cancel()
      }
    }
  }
}
</script>

<style scoped>
	.modalBox {}

	.ant-modal-footer {
		display: none;
	}

	.dynamic-delete-button {
		margin-right: 20px;
	}

	.linenums {
		padding: 0 20px;
	}
</style>
