<template>
  <div class="property-edit">
    <el-dialog :title="form.id ? $t('编辑SAP特性') : $t('新增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="$t('特性类型')" prop="type">
              <el-select v-model="form.type" 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="$t('数据类型')" prop="dataType">
              <el-select v-model="form.dataType">
                <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="$t('特性名称')" prop="name">
              <el-input v-model.trim="form.name"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('特性属性')" prop="field">
              <el-input v-model.trim="form.field"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('sap属性')" prop="sapField">
              <el-input v-model.trim="form.sapField"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('是否必填')" prop="required">
              <el-select v-model="form.required">
                <el-option :label="$t('是')" value="1"/>
                <el-option :label="$t('否')" value="0"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('错误提示语')" prop="errMsg">
              <el-input v-model.trim="form.errMsg"/>
            </el-form-item>
          </el-col>
          <template v-if="form.dataType == '1'">
            <el-col :span="12">
              <el-form-item :label="$t('最大长度')" prop="length">
                <el-input v-model.trim="form.length" type="number"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('正则')" prop="regEx">
                <el-input v-model.trim="form.regEx"/>
              </el-form-item>
            </el-col>
          </template>
          <template v-if="['2', '3'].includes(form.dataType)">
            <el-col :span="12">
              <el-form-item :label="$t('最小值')" prop="min">
                <el-input v-model.trim="form.min" type="number"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('最大值')" prop="max">
                <el-input v-model.trim="form.max" type="number"/>
              </el-form-item>
            </el-col>
          </template>
          <template v-if="['7', '8'].includes(form.dataType)">
            <el-col :span="12">
              <el-form-item :label="$t('枚举')" prop="dictId">
                <el-select v-model="form.dictId" 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' ? $t('对象属性') : $t('列表属性')" prop="ids">
                <el-select v-model="form.ids" :placeholder="form.dataType == '9' ? $t('请选择对象属性') : $t('请选择列表属性')"
                           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">{{ $t('common.cancel') }}</el-button>
        <el-button type="primary" :loading="loading" @click="onSubmit">{{ $t('common.confirm') }}</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: this.$t('请选择 特性类型'), trigger: 'change'}],
        name: [{required: true, message: this.$t('请输入 特性名称'), trigger: 'change'}],
        field: [{required: true, message: this.$t('请输入 特性属性'), trigger: 'change'}],
        sapField: [{required: true, message: this.$t('请输入 SAP属性'), trigger: 'change'}],
        dataType: [{required: true, message: this.$t('请选择 数据类型'), trigger: 'change'}],
        required: [{required: true, message: this.$t('请选择 是否必填'), trigger: 'change'}],
        errMsg: [{required: true, max: 20, message: this.$t('请输入 错误提示语，不能超过20字'), trigger: 'change'}],
        length: [{required: true, pattern: /^[0-9]+$/, message: this.$t('请输入 长度'), trigger: 'change'}],
        min: [{required: true, pattern: /^[0-9]+$/, message: this.$t('请输入 最小值'), trigger: 'change'}],
        max: [{required: true, pattern: /^[0-9]+$/, message: this.$t('请输入 最大值'), trigger: 'change'}],
        dictId: [{required: true, message: this.$t('请选择 字典'), trigger: 'change'}],
        subList: [{required: true, type: 'array', message: this.$t('请选择 属性'), 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.$t('操作成功'))
            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>
