<script name="expertOtherInfo" setup>
import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import store from '@/store'
const { tagList } = storeToRefs(store.dictStore),
  formData = ref({
  }),
  formRef = ref(),
  rules = {},
  // 校验
  validForm = (callback) => {
    formRef.value.validate(valid => {
      callback(valid)
    })
  },
  // 回显
  setFormData = (data) => {
    formData.value = {
      ...data,
      other: data.other && data.other.map(i => `${i.tagName}##${i.tagCode}`)
    }
  }
defineExpose({ validForm, formData, setFormData })
onMounted(async () => {
})
</script>
<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="rules"
    label-position="right"
    label-width="120px"
    label-suffix=":"
    scroll-to-error
    class="expertOtherInfo"
  >
    <el-row :gutter="8">
      <el-col :span="24">
        <el-form-item label="其他标签">
          <el-tree-select
            v-model="formData.other"
            placeholder="请选择其他标签"
            :data="
              tagList &&
                tagList.length &&
                tagList.find(i => i.tagCode === 'other').children||[]
            "
            :props="{
              label: 'tagName',
              value: 'unionCode'
            }"
            node-key="unionCode"
            collapse-tags
            multiple
            show-checkbox
            check-on-click-node
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item
          label="备注"
        >
          <el-input
            v-model="formData.remark"
            maxlength="200"
            show-word-limit
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<style lang="less">
.expertOtherInfo{
}
</style>
