<template lang="pug">
  el-dialog( :close-on-click-modal='false', :visible.sync='visible' append-to-body @close="closeForm('dataForm')")
    .title-bold(slot='title') {{id ? '编辑应急物资' :'新增应急物资'}}
    el-card.mycard(shadow="never" style='border:0;')
      el-form(:model='dataForm', :rules='dataRule', ref='dataForm',  label-width='130px')
        el-row(:gutter='20')
          el-col(:span='12')
            el-form-item(label="应急物资名称:" prop="name")
              el-input.mywidth(v-model='dataForm.name' placeholder="请输入应急物资名称"  clearable )
          el-col(:span='12')
            el-form-item(label="规格型号:" prop="specifications")
              el-input.mywidth(v-model='dataForm.specifications' placeholder="请输入规格型号"  clearable )
        el-row(:gutter='20')
          el-col(:span='12')
            el-form-item(label="类型:" prop="type")
              el-select.mywidth(style='width:100%;' v-model='dataForm.type' placeholder="请选择类型" @blur="checkType('type')" clearable)
                el-option(v-for="(item,index) in typeList" :key="index" :label="item.name" :value="item.id")
          el-col(:span='12')
            el-form-item(label="品牌:" prop="brand")
              el-input.mywidth(v-model='dataForm.brand' placeholder="请输入品牌"  clearable )
        el-row(:gutter='20')
          el-col(:span='12')
            el-form-item(label="单位:" prop="unit")
              el-input.mywidth(v-model='dataForm.unit' placeholder="请输入单位"  clearable )
          el-col(:span='12')
            el-form-item(label="可使用数量:" prop="count")
              el-input.mywidth(v-model.number='dataForm.count' placeholder="请输入可使用数量" clearable oninput="if(value.length>15)value=value.slice(0,15)")
        el-row(:gutter='20')
          //- el-form-item(label="是否使用:" prop="status" )
            el-radio-group(v-model='dataForm.status'  @change="changeHandler")
              el-radio(:label='1') 是
              el-radio(:label='2') 否
          el-col(:span='12')
            el-form-item(label="存放位置:" prop="placeFor")
              el-input.mywidth(v-model='dataForm.placeFor' placeholder="请填写存放位置"  clearable )
          el-col(:span='12')
            el-form-item(label="排序值:" prop="sortValue" )
              el-input.mywidth(v-model.number='dataForm.sortValue' placeholder="排序值越大越靠前"  clearable oninput="if(value.length>9)value=value.slice(0,9)")
        el-row(:gutter='20')
          el-col(:span='24')
            el-form-item(label="物资说明:" prop="remark")
              el-input.mywidth(v-model="dataForm.remark"  type="textarea" :rows="5" resize="none" placeholder="请输入物资说明" clearable)
    span.dialog-footer(slot='footer')
      el-button(type='primary' size='medium' @click="cancel" ) 取消
      el-button(type='primary' size='medium' @click='dataFormSubmit()' v-prevent-re-click) 保存
</template>
<script>
export default {
  data () {
    return {
      id: '',
      show: true,
      clickFlag: false,
      visible: false,
      roleList: [],
      typeList: [
        { id: '1', name: '通讯器材类' },
        { id: '2', name: '防疫类' },
        { id: '3', name: '消防器材' }
      ],
      dataForm: {
        id: 0,
        name: '',
        specifications: '',
        type: '',
        brand: '',
        unit: '',
        count: '',
        remark: '',
        status: 1,
        sortValue: '',
        placeFor: ''
      },
      dataRule: {
        name: [
          { required: true, message: '应急物资名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
        ],
        specifications: [
          { required: true, message: '规格型号不能为空', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '类型不能为空', trigger: 'change' }
        ],
        brand: [
          { required: true, message: '品牌不能为空', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
        ],
        unit: [
          { required: true, message: '单位不能为空', trigger: 'blur' },
          { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        count: [
          { required: true, message: '可使用数量不能为空' },
          { type: 'number', message: '只能输入数字' },
          // { pattern: /^[1-9]\d*$/, message: '只能输入正整数' }
          { validator: (rule, value, callback) => { if (value < 0) { callback(new Error('可使用数量必须大于等于0')) } else { callback() } }, triger: ['blur', 'change'] }
          // { pattern: /^\d+(\.{0,1}\d+){0,1}$/, message: '不能输入负数', trigger: 'blur' }
          //  { pattern: /^(0\.0*[1-9]+[0-9]*$|[1-9]+[0-9]*\.[0-9]*[0-9]$|[1-9]+[0-9]*$)/, message: '只能输入正数', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '是否使用不能为空', trigger: 'blur' }
        ],
        placeFor: [
          // { required: true, message: '存放位置不能为空', trigger: 'blur' },
          { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
        ],
        sortValue: [
          { required: true, message: '排序值不能为空', trigger: 'blur' },
          { type: 'number', message: '只能输入数字' },
          { pattern: /^[1-9]\d*|0$/, message: '只能输入正整数或0', triger: ['blur', 'change'] }
          // { validator: (rule, value, callback) => { if (value < 0) { callback(new Error('排序值必须大于等于0')) } else { callback() } } }
        ],
        remark: [ { min: 1, max: 500, message: '长度在 1 到 500 个字符', trigger: 'blur' } ]
      }
    }
  },
  mounted () {
    // this.getType()
  },
  methods: {
    init (id) {
      this.visible = true
      this.clickFlag = false
      this.id = id || ''
      if (id) {
        this.show = false
        this.$http({
          url: this.$http.adornUrl('/emMaterial/getId/' + id),
          method: 'get',
          params: this.$http.adornParams()
        }).then(data => {
          data.bean.count = Number(data.bean.count) || 0
          this.dataForm = data.bean
        })
      } else {
        this.show = true
        this.dataForm = { id: 0, name: '', specifications: '', type: '', brand: '', unit: '', count: '', remark: '', status: 1, placeFor: '' }
      }
    },
    checkType (value) {
      this.$refs.dataForm.validateField(value)
    },
    //获取物资类型
    getType () {
      this.$http({
        url: this.$http.adornUrl('/sysDictionary/getListByParent'),
        method: 'get',
        params: {
          parentId: 'bf8efa4ef7fc4d4b94c7b7eaab4c9bed',
          stationId: localStorage.getItem('stationId')
        }
      }).then(data => {
        if (data && data.code === 0) {
          this.typeList = data.list
        }
      })
    },
    change () {
      this.$forceUpdate()
    },
    changeHandler(val) {
      if (val === 1) {
         if (this.dataForm.placeFor.trim().length === 0) {
           this.dataForm.placeFor = ''
         }
         return
      }
      if (val === 2) {
        if (!this.dataForm.placeFor) {
          this.dataForm.placeFor = ' '
          return
        }
        if (this.dataForm.placeFor.length === 0) {
           this.dataForm.placeFor = ' '
        }
      }
    },
    // 表单提交
    dataFormSubmit () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.clickFlag = true
          this.$http({
            url: this.$http.adornUrl(
              `/emMaterial/${!this.dataForm.id ? 'save' : 'update'}`
            ),
            method: 'post',
            data: {
              id: this.id,
              name: this.dataForm.name,
              specifications: this.dataForm.specifications,
              type: this.dataForm.type,
              brand: this.dataForm.brand,
              unit: this.dataForm.unit,
              count: this.dataForm.count,
              remark: this.dataForm.remark,
              status: this.dataForm.status,
              placeFor: this.dataForm.placeFor,
              sortValue: this.dataForm.sortValue,
              stationId: localStorage.getItem('stationId')
            }
          }).then(data => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshdatalist')
                }
              })
            } else {
              this.clickFlag = false
              this.$message.error(data.msg)
            }
          })
        }
      })
    },
    closeForm (formRule) {
      this.$refs[formRule].resetFields()
      this.visible = false
    },
    //取消
    cancel() {
      this.$confirm('确认取消?', this.id ? '编辑应急物资' : '新增应急物资', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.closeForm('dataForm')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消退出'
          })
        })
    }
  }
}
</script>
<style>
.el-table__header {
  width: 100% !important;
}
.el-table__body {
  width: 100% !important;
}
</style>
