//

<template>
  <div>
    <van-popup
      v-model="show"
      round
      safe-area-inset-bottom
      position="bottom"
      duration="0"
      v-if="show"
      style="max-height: 80%"
    >
      <van-nav-bar
        :title="title"
        left-text="取消"
        right-text="确定"
        @click-left="show = false"
        @click-right="onClickRight"
        class="popup_header_fixed"
      />
      <van-form ref="formVan" v-form class="popup_header_margin">
        <van-field
          :label="title + '人员'"
          name="users"
          required
          input-align="right"
          :rules="[
            {
              required: form.users ? false : true,
              message: `请选择${title}人员`,
              trigger: 'onChange',
            },
          ]"
          class="contentButton"
        >
          <template #input>
            <ht-user-selector-input
              v-model="form.users"
              :single="userSelectorIsSingle"
              quick-search-props="fullname,account"
              :append-to-body="true"
              :config="{ id: 'form.userId' }"
            ></ht-user-selector-input>
          </template>
        </van-field>
        <van-field
          v-model="form.opinion"
          name="opinion"
          rows="5"
          autosize
          type="textarea"
          maxlength="100"
          placeholder="请输入审批意见"
          show-word-limit
        />
      </van-form>
      <van-divider style="margin: 0.22667rem 0 0" />
      <bottOrder @selectOften="selectOften" @fileList="fileList"></bottOrder>
    </van-popup>
  </div>
</template>

<script>
  import matterButton from '@/mixins/matterButton.js'
  import bottOrder from './bottOrder.vue'
  export default {
    name: 'allSimilarDialog',
    mixins: [matterButton],
    components: { bottOrder },
    props: {
      title: {
        type: String,
        default: '',
      },
      userSelectorIsSingle: {
        type: Boolean,
        default: false,
      },
      taskId: {
        type: String,
        default: '',
      },
      instId: {
        type: String,
        default: '',
      },
      nodeId: {
        type: String,
        default: '',
      },
      noticeId: {
        type: String,
        default: '',
      },
    },
    watch: {
      'form.users': {
        handler(val) {},
      },
    },
    data() {
      return {
        showRejectMethod: false,
        showOften: false,
        form: {
          people: '',
          opinion: '',
          users: '',
          userId: '',
          files: '',
        },
      }
    },

    methods: {
      showDialog() {
        this.show = true
        this.form = {
          people: '',
          opinion: '',
          users: '',
          userId: '',
          files: '',
        }
      },

      onClickRight() {
        this.$refs.formVan
          .validate()
          .then(() => {
            this.$emit('onClickRight', this.form, () => {
              this.show = false
            })
          })
          .catch((e) => {})
      },
      fileList(val) {
        this.form.files = JSON.stringify(val)
      },
      selectOften(val) {
        this.form.opinion = `${this.form.opinion ? this.form.opinion : ''}${
          val.name
        }`
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import '@/styles/matterButton.scss';
  ::v-deep {
    .van-popup {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .van-field__label {
      display: flex;
      align-items: center;
    }
  }
</style>
