<template>
  <el-dialog v-dialogDrag ref="diaFrom" :title="'电子借阅 -- '+btnRow.maintitle" :close-on-click-modal="false"
    :visible.sync="eleStatus" width="40%" top="10px" :before-close="cancel">
    <el-form :model="form" ref="dynamicValidateForm" label-width="100px" :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-date-picker size="mini" disabled v-model="form.applyTime" type="datetime" placeholder="选择日期时间">
        </el-date-picker>
      </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="view"></el-option>
          <el-option label="打印" value="print"></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: {
    eleStatus: {
      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", "提交审批成功", 2500);
              this.diaVisible = false;
              this.cancel();
            })
            .finally((res) => {
              this.btnLoading = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });

      // this.$alert("是否确认要申请电子借阅？", "提示", {
      //   confirmButtonText: "确定",
      //   type: "warning",
      //   callback: async (action) => {
      //     if (action === "cancel") {
      //       return false;
      //     }

      //   },
      // });
    },
    getQuanzongList() {
      console.log("初始化");
      this.$nextTick(() => {
        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.$nextTick(() => {
          this.value.push(item.fondsname);
        });
      });
      console.log(this.options, this.value);
    },
  },
  mounted() {
    this.getQuanzongList();
  },
};
</script>
