<template>
  <div v-if="visible">
    <el-dialog
      v-dialogDrag
      :visible.sync="visible"
      :close-on-click-modal="false"
      :title="$t('trials:logincCfg:form:terminology')"
      custom-class="base-dialog-wrapper"
      :before-close="handleColse"
      width="900px"
    >
      <!-- <div
        class="btnBox"
        style="width: 100%; display: flex; justify-content: flex-end"
      >
        <el-button type="primary" size="small" @click.stop="openEdit">
          {{ $t('common:button:add') }}
        </el-button>
      </div> -->
      <el-table :data="DATA" style="width: 100%">
        <el-table-column type="index" width="50" />
        <el-table-column
          prop="Name"
          :label="$t('trials:logincCfg:form:terminologyName')"
        >
        </el-table-column>
        <el-table-column
          prop="TrialName"
          :label="$t('trials:logincCfg:form:terminologyTrials')"
        >
        </el-table-column>
        <el-table-column :label="$t('common:action:action')" width="150px">
          <template slot-scope="scope">
            <el-button
              @click.stop="openEdit(scope.row, scope.$index)"
              icon="el-icon-edit-outline"
              circle
              :title="$t('common:button:edit')"
            />
            <el-button
              icon="el-icon-delete"
              @click.stop="handleDelete(scope.$index)"
              circle
              :title="$t('common:button:delete')"
              v-if="!scope.row.IsDefault"
            />
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleColse" size="small">
          {{ $t('common:button:confirm') }}
        </el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-if="editVisible"
      v-dialogDrag
      :visible.sync="editVisible"
      :close-on-click-modal="false"
      title=""
      custom-class="base-dialog-wrapper"
      width="400px"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="terminologyForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          :label="$t('trials:logincCfg:form:terminologyName')"
          prop="Name"
        >
          <el-select
            v-model="form.Name"
            placeholder=""
            style="width: 100%"
            v-if="!form.IsDefault"
          >
            <el-option
              v-for="item in $d.Terminology"
              :key="item.id"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
          <el-input
            v-model="form.Name"
            v-if="form.IsDefault"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="$t('trials:logincCfg:form:terminologyTrials')"
          prop="TrialName"
        >
          <el-input v-model="form.TrialName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save" size="small">
          {{ $t('common:button:confirm') }}
        </el-button>
        <el-button @click="editVisible = false" size="small">
          {{ $t('common:button:cancel') }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
const defaultForm = () => {
  return {
    Name: null,
    TrialName: null,
    IsDefault: false,
  }
}
export default {
  name: 'terminology',
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    DATA: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      status: 'add',
      editIndex: -1,
      editVisible: false,
      form: defaultForm(),
      rules: {
        Name: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
          {
            validator: (rule, value, callback) => {
              if (
                value &&
                this.DATA.find((item) => item.Name === value) &&
                this.status === 'add'
              ) {
                callback(
                  new Error(this.$t('trials:uploadDicomList:table:Existed'))
                )
              } else {
                callback()
              }
            },
            trigger: ['blur', 'change'],
          },
        ],
        TrialName: [
          {
            required: true,
            message: this.$t('common:ruleMessage:specify'),
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    handleColse() {
      this.$emit('update:visible', false)
    },
    openEdit(row, index) {
      this.status = 'add'
      this.form = defaultForm()
      if (row) {
        this.status = 'edit'
        this.editIndex = index
        Object.keys(this.form).forEach((key) => {
          this.form[key] = row[key]
        })
      }
      this.editVisible = true
    },
    async handleDelete(index) {
      try {
        let confirm = await this.$confirm(
          this.$t('trials:staffResearch:message:confirmDel')
        )
        if (!confirm) return false
        this.DATA.splice(index, 1)
      } catch (err) {
        console.log(err)
      }
    },
    async save() {
      try {
        let validate = await this.$refs.terminologyForm.validate()
        if (!validate) return false
        if (this.status === 'edit') {
          this.DATA.splice(this.editIndex, 1, this.form)
        } else {
          this.DATA.push(this.form)
        }

        this.editVisible = false
      } catch (err) {
        console.log(err)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
  padding: 30px 20px;
}
</style>