<template>
  <el-dialog v-dialogDrag ref="diaFrom" title="实体借阅" :close-on-click-modal="false" :visible.sync="entityStatus"
    width="45%" top="10px" :before-close="cancel">
    <el-form :model="form" label-width="110px" ref="dynamicValidateForm" :rules="rules">
      <el-form-item label="申请人">
        <el-input clearable size="mini" disabled v-model="form.applyUserName"></el-input>
      </el-form-item>
      <el-form-item label="全宗名称" prop="applyTime">
        <el-select style="width:100%" v-model="value" disabled multiple placeholder="请选择">
          <el-option v-for="item in options" :key="item.id" :label="item.fondsname" :value="item.fondscode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请日期">
        <el-input clearable size="mini" disabled v-model="form.applyTime"></el-input>
      </el-form-item>
      <el-form-item label="申请档案数量">
        <el-input clearable disabled size="mini" placeholder="请输入内容" v-model="form.rec_nums"></el-input>
      </el-form-item>
      <el-form-item label="归还日期" prop="returnDate">
        <el-date-picker style="width:100%" :picker-options="pickerOptions" size="mini" v-model="form.returnDate"
          type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="利用形式" prop="useStyle">
        <el-select style="width:100%" clearable v-model="form.useStyle" size="mini">
          <el-option label="查看" value="查看"></el-option>
          <!-- <el-option label="打印" value="打印"></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="申请理由" prop="applyReason">
        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.applyReason">
        </el-input>
      </el-form-item>
      <el-form-item label=" ">
        <el-button v-loading="btnLoading" @click="submit('dynamicValidateForm')" type="primary" size="mini">确定
        </el-button>
        <el-button @click="cancel" type="info" size="mini">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>
import { submitApply } from "@/api/archives-management/fileManagement/notStoredArchives.js";
import { message } from "@/utils/common";
import { mapState } from "vuex";
export default {
  props: {
    entityStatus: {
      type: Boolean,
      default: () => false,
    },
    // btnRow: {
    //   type: Object,
    //   default: () => {},
    // },
  },
  data() {
    return {
      btnLoading: false,
      rules: {
        returnDate: [
          {
            required: true,
            message: "请选择归还",
            trigger: "change",
          },
        ],
        useStyle: [
          {
            required: true,
            message: "请选择利用方式",
            trigger: "change",
          },
        ],
        applyReason: [
          {
            required: true,
            message: "请输入借阅理由",
            trigger: "blur",
          },
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now();
        },
      },
      form: {},
      options: [],
      value: [],
    };
  },
  computed: {
    ...mapState({
      EchoList: (state) => state.userRole.EchoList,
    }),
  },
  methods: {
    cancel() {
      this.$emit("cancel");
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          submitApply(this.form)
            .then((res) => {
              message("success", "提交审批成功", 2000);
              this.cancel();
            })
            .finally((res) => {
              this.btnLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getQuanzongList() {
      console.log("初始化");
      this.options = this.EchoList.map((item, index) => {
        return {
          fondsname: item.fondsname,
          fondscode: item.fondscode,
          id: item.fondscode,
        };
      });
      this.value = [];
      this.EchoList.forEach((item, index) => {
        this.value.push(item.fondsname);
      });
    },
  },
  mounted() {
    this.getQuanzongList();
  },
};
</script>
