<template>
  <span style="cursor: pointer" @click="openDictTable">
    <tooltip
      ref="tooltip"
      :api-code="apiCode"
      :primary-key="primaryKey"
      :disabled="disabled"
      :effect="effect"
      :content="content"
      :placement="placement"
      v-bind="$attrs"
    >
      <slot></slot>
    </tooltip>

    <dg-drawer
      v-if="drawerRendered"
      title="提示管理"
      :visible.sync="drawer"
      append-to-body
      :wrapper-closable="false"
      @confirm="submitData"
    >
      <dg-form
        v-if="drawer"
        ref="tooltipForm"
        :form-data.sync="formData"
        :rules="rules"
        :form-items="formItems"
        label-position="top"
      >
      </dg-form>
    </dg-drawer>
  </span>
</template>

<script>
import tooltip from './Tooltip.vue'
export default {
  name: 'DgTooltip',
  components: {
    tooltip,
  },
  props: {
    apiCode: {
      type: String,
      default: () => 'tooltipSysDict',
    },
    primaryKey: {
      type: String,
      default: () => '',
    },
    disabled: {
      type: Boolean,
      default: () => false,
    },
    effect: {
      type: String,
      default: () => 'dark',
    },
    content: {
      type: String,
      default: () => '',
    },
    placement: {
      type: String,
      default: () => 'top',
    },
  },
  data() {
    return {
      drawer: false,
      drawerRendered: false,
      formData: {},
      formItems: [
        { editer: 'input', label: '维度编码', value: 'DIMCODE', disabled: true },
        { editer: 'input', label: '维度名称', value: 'DIMNAME', disabled: true },
        { editer: 'input', label: '值编码', value: 'ROWCODE', disabled: true },
        { editer: 'input', label: '值名称', value: 'ROWNAME' },
        { editer: 'textarea', label: '提示内容', value: 'REMARK' },
        { editer: 'textarea', label: '配置', value: 'CONF' },
      ],
      rules: {
        DIMNAME: [{ required: true, message: '请输入维度名称', trigger: 'blur' }],
        DIMCODE: [
          { required: true, message: '请输入维度编码', trigger: 'blur' },
          { validator: this.validateDimcode, trigger: 'blur' },
        ],
        ROWNAME: [{ required: true, message: '请输入值名称', trigger: 'blur' }],
        ROWCODE: [{ required: true, message: '请输入值编码', trigger: 'blur' }],
        REMARK: [{ required: true, message: '请输入提示内容', trigger: 'blur' }],
      },
      saveType: '',
    }
  },
  methods: {
    // 打开字典表管理
    openDictTable() {
      // 判断只有超级管理员角色才能打开滑窗进行管理
      let roleTypes = this.$store?.state?.user?.info?.roleTypes || []
      if (!roleTypes.includes('SuperManager')) return

      // 使用默认从字典表中获取数据的方式才可进行管理
      if (this.apiCode === 'tooltipSysDict' && this.primaryKey) {
        this.getData()
        this.drawerRendered = true
        this.$nextTick(() => {
          this.drawer = true
        })
      }
    },
    // 获取提示数据
    async getData() {
      try {
        const res = await this.$api.DgJsonStore({
          apiCode: 'sysDictMember',
          params: {
            command: 'init',
            limit: 1,
            dimcode: 'tooltip',
            rowCode: this.primaryKey,
          },
        })
        if (res.root) {
          if (res.root.length) {
            this.saveType = 'update'
            this.formData = {
              ...(res.root[0] || {}),
            }
          } else {
            this.saveType = 'insert'
            this.formData = {
              DIMCODE: 'tooltip',
              DIMNAME: '提示',
              ROWCODE: this.primaryKey,
            }
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    // 校验提交数据
    submitData() {
      this.$refs['tooltipForm'].$refs['sonFormData'].validate((valid) => {
        if (valid) {
          this.saveData()
        } else {
          this.$message.warning('请完善信息')
        }
      })
    },
    // 保存数据
    async saveData() {
      const res = await this.$api.DgJsonStore({
        apiCode: 'sysDictMember',
        params: {
          command: this.saveType,
          records: JSON.stringify([this.formData]),
        },
      })
      if (res.success) {
        this.$refs['tooltip'].getContent()
        this.$message.success('保存数据成功')
        this.drawer = false
      } else {
        this.$message.error('保存数据失败')
      }
    },
  },
}
</script>
