<template>
  <el-dialog :title="title" :visible.sync="visible" v-dialogDrag width="60%" :close-on-click-modal="false"
    :before-close="cancel">
    <div class="dia-box">
      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px">
        <el-form-item label="申请人" prop="applyUserName">
          <el-input v-model="form.applyUserName" :title="form.applyUserName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="申请时间" prop="applyTime">
          <el-date-picker style="width:100%" v-model="form.applyTime" type="datetime" :disabled="true"
            placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </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="申请档案数量" prop="rec_nums" v-if="form.rec_nums !=0">
          <el-input v-model="form.rec_nums" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="原文数量">
          <el-input v-model="form.originalTextNums" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="密级" v-if="applyStatus === 1" prop="securityClass">
          <el-select v-model="form.securityClass" :disabled="!isApply">
            <el-option v-for="(item,key) in  applyList" :key="key" :value="item.label" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="期限" v-if="form.retentionName || applyStatus === 2" prop="retention">
          <el-select v-model="form.retention" :disabled="!isApply">
            <el-option v-for="(item,key) in  applyList" :key="key" :value="item.label" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开放" v-if="applyStatus === 3" prop="kzbs">
          <el-select v-model="form.kzbs" :disabled="!isApply">
            <el-option v-for="(item,key) in  applyList" :key="key" :value="item.label" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="控制标识" v-if="applyStatus === 4" prop="controlIdentifier">
          <el-select v-model="form.controlIdentifier" :disabled="!isApply">
            <el-option v-for="(item,key) in  applyList" :key="key" :value="item.label" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价值鉴定" v-if="applyStatus === 7" prop="archiveValue">
          <el-select v-model="form.archiveValue" :disabled="!isApply">
            <el-option v-for="(item,key) in  applyList" :key="key" :value="item.label" :label="item.label"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请理由" prop="applyReason">
          <el-input type="textarea" v-model="form.applyReason" :disabled="!isApply"></el-input>
        </el-form-item>
        <template v-if="!isApply && currentRow.expressName=='已入库修改'">
          <el-form-item label="修改内容">
            <ul class="edit-content">
              <li v-for="(item,index) in editContent" :key="index+''">{{item}}</li>
            </ul>
          </el-form-item>
        </template>
        
        <template v-if="!isApply">
          <el-form-item v-for="ele in form.nodeList" :key="ele.id" :label="ele.approveNodeName" prop="approveIdea">
            <el-input type="textarea" v-model="ele.approveIdea" disabled></el-input>
          </el-form-item>
          <el-form-item v-if="form.currentNodeName" :label="form.currentNodeName" prop="approveIdea">
            <el-input type="textarea" v-model="form.approveIdea"></el-input>
          </el-form-item>
        </template>
        <template v-if="!isView">
          <el-form-item v-if="isApply">
            <el-button :loading="btnloading.submit" type="primary" size="mini" @click="submitForm('ruleForm')">
              提交申请
            </el-button>
            <el-button size="mini" @click="cancel">关闭</el-button>
          </el-form-item>
          <el-form-item v-else>
            <el-button :loading="btnloading.pass" type="success" size="mini" @click="pass('ruleForm',1)">
              通过
            </el-button>
            <el-button :loading="btnloading.noPass" type="danger" size="mini" @click="pass('ruleForm',2)">
              不通过
            </el-button>
          </el-form-item>
        </template>

      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { dateFormat } from "@/utils/common";
import { mapState } from "vuex";
export default {
  name: "DiaApply",
  props: {
    visible: {
      type: Boolean,
      default: () => false,
    },
    applyStatus: {
      type: Number,
      default: () => 0,
    },
    applyList: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: () => "申请表单",
    },
    //表单类型: true:申请表单, false: 审批表单
    isApply: {
      type: Boolean,
      default: () => false,
    },
    // 查看页
    isView: {
      type: Boolean,
      default: () => false,
    },
    currentRow:{ // 入库申请项需要，其他按需
      type:Object,
      defalult:()=>{}
    }
  },
  watch:{
    currentRow:{
      handler(newVal,val){
        console.log(newVal,val)
        let str = newVal.department;
        if(str !==''){
          this.editContent = str.split(";");
        }
      },
      deep: true
    }
  },
  data() {
    return {
      editContent:[], // 修改内容
      btnloading: {
        submit: false,
        pass: false,
        noPass: false,
      },
      form: {
        applyUserName: "",
        applyTime: "",
        rec_nums: 0,
        originalTextNums: 0,
        applyReason: "",
        // 档案鉴定
        securityClass: "",
        retention: "",
        kzbs: "",
        controlIdentifier: "",
        archiveValue:"",
      },
      rules: {
        rec_nums: [
          {
            required: true,
            message: "请输入申请档案数量",
            trigger: "blur",
          },
        ],
        originalTextNums: [
          {
            required: true,
            message: "请输入原文数量",
            trigger: "blur",
          },
        ],
        applyReason: [
          {
            required: true,
            message: "请输入申请理由",
            trigger: "blur",
          },
        ],
        approveIdea: [
          {
            required: true,
            message: "请输入审批意见",
            trigger: "blur",
          },
        ],
        controlIdentifier: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        kzbs: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        retention: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        securityClass: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
        archiveValue: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
      },
      options: [],
      value: [],
    };
  },
  computed: {
    ...mapState({
      EchoList: (state) => state.userRole.EchoList,
    }),
  },
  methods: {
    cancel() {
      this.$refs.ruleForm.resetFields();
      this.$emit("cancel");
    },
    // 1通过，2不通过
    pass(formName, flag) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.btnloading[flag === 1 ? "pass" : "noPass"] = true;
          this.$emit("pass", this.form, flag);
        } else {
          return false;
        }
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.btnloading.submit = true;
          this.$emit("submit", this.form);
        } else {
          return false;
        }
      });
    },
    getQuanzongList() {
      this.$store.dispatch("userRole/fondByUser", {
        userId: sessionStorage.getItem("userid"),
      });
      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.$nextTick(()=>{
      this.getQuanzongList();
    })
    
  }
};
</script>

<style lang="scss" scoped>
.dia-box{
  .edit-content{
    margin: 0;
    padding: 0;
    padding-left: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
    height: 100px;
    overflow: auto;
    background-color: #f5f7fa;
    li{
      font-size: 12px;
      line-height: 25px;
      color: #333;
    }
  }
}
</style>
  
