<template>
  <view>
    <u-form-item
        :label="label"
        :prop="prop"
        :required="required"
        @click="()=>{
          !disabled ? (visible = true) : null
        }"
    >
      <view class="select_content">
        <u-input
            :value="name || '请选择'"
            border="none"
            input-align="right"
            readonly
        />
        <u-icon name="arrow-right"></u-icon>
      </view>
    </u-form-item>
    <u-line/>
    <department
        :visible.sync="visible"
        :value="id"
        :is-show-clear="isShowClear"
        @confirm="fnConfirm"
    />
  </view>
</template>

<script>
import Department from "./department.vue";

export default {
  components: {
    Department,
  },
  props: {
    name: {
      type: String,
      required: true,
      default: "",
    },
    id: {
      type: String,
      required: true,
      default: "",
    },
    form: {
      type: Object,
      default: () => ({}),
    },
    label: {
      type: String,
      default: "部门",
    },
    prop: {
      type: String,
      default: "",
    },
    required: {
      type: Boolean,
      default: true,
    },
    clearKey: {
      type: String,
      default: "",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    isShowClear: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false
    }
  },
  methods: {
    fnConfirm(event) {
      if (event.length > 0) {
        this.$emit('update:name', event[0].name)
        this.$emit('update:id', event[0].id)
      } else {
        this.$emit('update:name', '')
        this.$emit('update:id', '')
      }
      if (JSON.stringify(this.form) !== "{}" && this.clearKey) {
        const clearKey = this.clearKey.split(",");
        const form = uni.$u.deepClone(this.form)
        for (let i = 0; i < clearKey.length; i++) {
          form[clearKey[i]] = "";
        }
        this.$emit("update:form", form);
      }
    }
  },
}
</script>

<style scoped lang="scss"></style>
