<template>
  <div class="property-edit">
    <el-dialog :title="form.id ? '编辑SAP特性' : '新增SAP特性'" :visible.sync="visible" width="950px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="特性类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择特性类型" clearable>
                <el-option v-for="item in dict.type['sap_property_type']" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据类型" prop="dataType">
              <el-select v-model="form.dataType" placeholder="请选择数据类型">
                <el-option v-for="item in dict.type['sys_data_type']" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="特性名称" prop="name">
              <el-input v-model.trim="form.name" placeholder="请输入视图名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="特性属性" prop="field">
              <el-input v-model.trim="form.field" placeholder="请输入视图属性"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="sap属性" prop="sapField">
              <el-input v-model.trim="form.sapField" placeholder="请输入sap属性"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否必填" prop="required">
              <el-select v-model="form.required" placeholder="请选择是否必填">
                <el-option label="是" value="1"/>
                <el-option label="否" value="0"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="错误提示语" prop="errMsg">
              <el-input v-model.trim="form.errMsg" placeholder="请输入错误提示语"/>
            </el-form-item>
          </el-col>
          <template v-if="form.dataType == '1'">
            <el-col :span="12">
              <el-form-item label="最大长度" prop="length">
                <el-input v-model.trim="form.length" type="number" placeholder="请输入长度"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="正则" prop="regEx">
                <el-input v-model.trim="form.regEx" placeholder="请输入正则"/>
              </el-form-item>
            </el-col>
          </template>
          <template v-if="['2', '3'].includes(form.dataType)">
            <el-col :span="12">
              <el-form-item label="最小值" prop="min">
                <el-input v-model.trim="form.min" type="number" placeholder="请输入最小值"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最大值" prop="max">
                <el-input v-model.trim="form.max" type="number" placeholder="请输入最大值"/>
              </el-form-item>
            </el-col>
          </template>
          <template v-if="['7', '8'].includes(form.dataType)">
            <el-col :span="12">
              <el-form-item label="枚举" prop="dictId">
                <el-select v-model="form.dictId" placeholder="请选择枚举类型" filterable remote :remote-method="onSearchDict" clearable>
                  <el-option v-for="item in dictList" :key="item.id" :value="item.id" :label="item.name"/>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <template v-if="['9', '10'].includes(form.dataType)">
            <el-col :span="12">
              <el-form-item :label="form.dataType == '9' ? '对象属性' : '列表属性'" prop="ids">
                <el-select v-model="form.ids" :placeholder="form.dataType == '9' ? '请选择对象属性' : '请选择列表属性'"
                           multiple disabled clearable @click.native="onShowSelector">
                  <el-option v-for="item in form.subList" :key="item.id" :value="item.id" :label="item.name"/>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <property-selector ref="propertySelector" :id="form.id" @handleConfirm="onSelectProperty"/>
  </div>
</template>

<script>

import { listSapDict } from '@/api/mes/md/sapDict'
import { addView, getView, updateView } from '@/api/mes/md/sapField'
import PropertySelector from '@/views/mes/md/sapField/selector'
const formData = {
  type: null,
  name: null,
  field: null,
  sapField: null,
  dataType: null,
  required: null,
  errMsg: null,
  length: null,
  regEx: null,
  min: null,
  max: null,
  dictId: null,
  ids: [],
  subList: [],
}
export default {
  dicts: ['sap_property_type', 'sys_data_type'],
  components: {
    PropertySelector
  },
  data() {
    return {
      visible: false,
      loading: false,
      dictList: [],
      propertyViews: [],
      form: {},
      rules: {
        type: [{required: true, message: '请选择 特性类型', trigger: 'change'}],
        name: [{required: true, message: '请输入 特性名称', trigger: 'change'}],
        field: [{required: true, message: '请输入 特性属性', trigger: 'change'}],
        sapField: [{required: true, message: '请输入 SAP属性', trigger: 'change'}],
        dataType: [{required: true, message: '请选择 数据类型', trigger: 'change'}],
        required: [{required: true, message: '请选择 是否必填', trigger: 'change'}],
        errMsg: [{required: true, max: 20, message: '请输入 错误提示语，不能超过20字', trigger: 'change'}],
        length: [{required: true, pattern: /^[0-9]+$/, message: '请输入 长度', trigger: 'change'}],
        min: [{required: true, pattern: /^[0-9]+$/, message: '请输入 最小值', trigger: 'change'}],
        max: [{required: true, pattern: /^[0-9]+$/, message: '请输入 最大值', trigger: 'change'}],
        dictId: [{required: true, message: '请选择 字典', trigger: 'change'}],
        subList: [{required: true, type: 'array', message: '请选择 属性', trigger: 'change'}],
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.loading) return
          this.loading = true
          let editForm = this.form.id ? updateView : addView
          editForm(this.form).then(() => {
            this.$modal.msgSuccess('操作成功')
            this.$emit("handleSubmit")
            this.visible = false
          }).finally(() => this.loading = false)
        } else {
          this.loading = false
        }
      })
    },
    onSearchDict(key) {
      listSapDict({ name: key }).then(response => this.dictList = response.rows)
    },
    onSelectProperty(selectList) {
      this.form.subList = selectList
      this.form.ids = selectList.map(item => item.id)
    },
    onShowSelector() {
      this.$refs.propertySelector.init(this.form)
    },
    init(id) {
      this.visible = true
      this.$refs.form && this.$refs.form.resetFields()
      this.form = formData
      if (id) {
        getView({id}).then(resp => {
          this.form = resp.data
          this.form.ids = resp.data.subList.map(item => item.id)
        })
      }
    },
  },
  created() {

  }
}
</script>

<style scoped>

</style>
