<template>
  <el-dialog
    :title="item.id?'编辑词汇':'新增词汇'"
    :visible.sync="show"
    width="40%"
    :before-close="handleClose"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="item" :rules="rules" label-width="150px">
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级词汇" prop="parent">
            <el-cascader
              v-model="item.parent"
              :props="{value:'id',label:'name',emitPath:false,checkStrictly:true}"
              :options="treeData"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="词汇名称" prop="name">
            <el-input v-model="item.name" placeholder="请输入词汇名称" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="词汇值" prop="value" :rules="item.parent!=null?[]: [{ required: true, message: '词汇值不能为空', trigger: 'blur' }]">
            <el-input v-model="item.value" placeholder="请输入词汇值" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="外部标识" prop="externalCode">
            <el-input v-model="item.externalCode" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item v-if="item.parent==null" label="词汇编码" prop="code">
            <el-input v-model="item.code" placeholder="请输入词汇编码" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="上传icon" prop="icon">
            <upload-file v-model="item.icon" :title="item.iconName" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="是否启用" prop="isEnable">
            <el-switch v-model="item.isEnable" :active-value="true" :inactive-value="false" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="序号" prop="sort">
        <el-input-number v-model="item.sort" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">确认</el-button>
        <el-button @click="handleClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import UploadFile from '../Upload/UploadFile'
import { getListPage, saveOrUpdate } from '../../api/system/vocabulary'

export default {
  name: 'Edit',
  components: { UploadFile },
  props: {
    show: {
      type: Boolean,
      required: true,
      default() {
        return false
      }
    },
    item: {
      type: Object,
      default() {
        return {
          imageList: [],
          parent: null
        }
      }
    }
  },

  data() {
    return {
      condition: {
        name: null,
        code: null
      },
      treeData: [],
      rules: {
        name: [{ required: true, message: '词汇名称不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '词汇编码不能为空', trigger: 'blur' }]
        // value: [{ required: true, message: '词汇值不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    show(show) {
      if (show) {
        this.getTree()
      }
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    treeDataClick(data) {
      this.item.parent = data.id
      this.item.code = data.code
    },
    handleClose() {
      this.item.id = null
      this.item = null
      this.$emit('close')
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return false
        }
        saveOrUpdate(this.item).then(() => {
          this.handleClose()
          this.$message.success('操作成功')
        })
      })
    },
    getTree() {
      getListPage(this.condition).then(res => {
        this.treeData = res.data
      })
    }
  }

}
</script>

<style scoped>

</style>
