<template>
  <DialogSelf
    title="新增设备部件"
    :visible="value"
    @onConfirm="handleConfirm"
    @onCancel="handleClose"
    width="30%"
  >
    <el-form :model="form" :rules="rules" ref="partform" label-width="100px">
      <el-form-item style="width: 90%" :span="12" label="部件名称" prop="name">
        <el-input
          maxlength="30"
          class="custom-input"
          show-word-limit
          v-model="form.name"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        style="width: 90%"
        :span="12"
        label="部件键值"
        prop="keycode"
      >
        <el-input
          maxlength="30"
          class="custom-input"
          show-word-limit
          v-model="form.keycode"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item
        :span="12"
        label="部件状态"
        prop="operationIds"
        style="width: 90%"
      >
        <el-select
          @change="test"
          v-model="form.operationIds"
          multiple
          style="width: 100%"
          placeholder="请选择"
        >
          <el-option
            v-for="item in operationList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        style="width: 90%"
        :span="12"
        label="部件说明"
        prop="comment"
      >
        <el-input
          maxlength="200"
          class="custom-input"
          show-word-limit
          type="textarea"
          v-model="form.comment"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>
  </DialogSelf>
</template>

<script>
import DialogSelf from '@/components/layout/DialogLayout.vue'
import { getOperationApi } from '@/api/training/operation'
const checkAgeOperation = (rule, value, callback) => {
  console.log(value)
  if (!value || value.length <= 0) {
    callback(new Error('请选择部件状态'))
  }
  callback()
}

export default {
  props: {
    value: {
      type: Boolean,
      default: () => true
    },
    partList: {
      type: Array,
      default: () => []
    },
    currentPart: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    const CheckRepetition = (rule, value, callback) => {
      let isRepetition = false
      this.partList.forEach((item) => {
        console.log(item.isEditor)
        if (item.keycode === value && !item.isEditor) {
          isRepetition = true
        }
      })
      if (isRepetition) {
        callback(new Error('部件键值重复'))
      }
      callback()
    }
    return {
      form: {},
      CheckRepetition,
      operationList: [],
      isCreate: false,
      index: null,
      rules: {
        name: [{ required: true, message: '请输入部件名称', trigger: 'blur' }],
        keycode: [
          { required: true, message: '请输入部件键值', trigger: 'blur' },
          {
            validator: CheckRepetition,
            message: '部件键值重复',
            trigger: 'blur'
          }
        ],
        operationIds: [
          {
            validator: checkAgeOperation,
            message: '请选择部件状态',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  components: {
    DialogSelf
  },
  mounted () {
    this.initData()
  },
  methods: {
    test (e) {
      console.log(e)
    },
    handleClose () {
      this.$emit('input', false)
    },
    // 检查键值是否重复

    async initData () {
      this.form = JSON.parse(JSON.stringify(this.currentPart))
      // 判断当前是编辑还是新增
      if (this.form.keycode) {
        this.getIndex()
        this.partList[this.index].isEditor = true
        this.$set(
          this.form,
          'operationIds',
          this.form.operation?.map((item) => item.id)
        )
        // this.form.operationIds = this.form.operation?.map((item) => item.id)
      } else {
        this.isCreate = true
      }
      const { data } = await getOperationApi()
      this.operationList = data
    },
    handleConfirm () {
      this.$refs.partform.validate((isOk) => {
        if (isOk) {
          this.form.operation = this.operationList.filter((item) =>
            this.form.operationIds.includes(item.id)
          )
          this.currentPart.isEditor = undefined
          this.isCreate
            ? this.partList.push(this.form)
            : this.partList.splice(this.index, 1, this.form)
          this.handleClose()
        }
      })
    },
    getIndex () {
      const index = this.partList.findIndex((item) => {
        if (item.keycode === this.currentPart.keycode) {
          return true
        }
        return false
      })
      index !== -1 && (this.index = index)
    }
  }
}
</script>

<style lang="scss" scoped>
.operation-header {
  width: 100%;
  display: flex;
  justify-content: right;
  margin-bottom: 10px;
}
</style>
