<template>
  <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" append-to-body :visible.sync="dialogVisible" :title="dialogForm.type ==='image'?'共享图片':'共享文件夹'"
  >
    <el-form
      ref="dialogForm"
      label-position="top"
      :model="dialogForm"
      status-icon
      class="demo-form-inline"
      label-width="180"
      :rules="rules"
    >
      <el-form-item label="共享对象" prop="userType">
        <el-select
          v-model="dialogForm.userType"
          placeholder="请选择共享对象"
          style="width: 100%;"
          @change="userTypeChange"
        >
          <el-option label="用户" value="user" />
          <el-option label="部门" value="dept" />
        </el-select>
      </el-form-item>
      <el-form-item label="共享到" prop="userIds">
        <NomalSelect v-if="dialogForm.userType === 'user'"
          v-model="dialogForm.userIds"
          placeholder="请选择用户"
          clearable
          filterable
          :multiple="true" :apiMethod="listUser" labelKey="userName"
          valueKey="userId"
          style="width: 100%;"
          ></NomalSelect>
        <treeselect v-else v-model="dialogForm.userIds" :options="depts" multiple :show-count="true" placeholder="请选择共享部门" />
      </el-form-item>
      <el-form-item label="生效开始时间" prop="beginDate">
        <el-date-picker
          v-model="dialogForm.beginDate"
          value-format="yyyy-MM-dd"
          type="date"
          style="width: 100%;"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="生效结束时间" prop="endDate">
        <el-date-picker
          v-model="dialogForm.endDate"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
          clearable
          style="width: 100%;"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeVisible">取消</el-button>
      <el-button type="primary" v-loading="saving" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import TableEditMixin from "@/mixins/table-edit-mixin";
import { addShare } from "../../../api/gallery/cata/share";
import { listUser, deptTreeSelect } from "../../../api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { formatDateStr } from "../../../utils";

export default {
  name: 'ShareDialog',
  mixins: [TableEditMixin],
  pageInfo: {
    defaultForm: {
      userType: null,
      userIds: null,
      cataIds: null,
      type: 'image',
      beginDate: null,
      endDate: null,
    },
    title: "共享",
    // updateApi: updateInfo,
    addApi: addShare,
  },
  components: {
    Treeselect
  },
  data() {
    return {
      listUser,
      depts: [],
      users: [],
      rules: {
        userType: [
          { required: true, message: "请选择共享对象", trigger: "change" }
        ],
        userIds: [
          { required: true, message: "请选择共享到", trigger: "change" }
        ],
        beginDate: [
          { required: true, message: "请选择生效开始时间", trigger: "change" }
        ],
      }
    };
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.dialogForm.beginDate = formatDateStr();
        deptTreeSelect().then(res => {
          this.depts = res.data;
        });
      }
    }
  },
  methods: {
    userTypeChange() {
      this.dialogForm.userIds = null;
    },
    mixin_commonMsg() {
      return '共享成功';
    }
  }
}
</script>

<style>

</style>