<template>
  <el-container>
    <el-main>
        <el-form
            :model="addForm"
            :rules="rules"
            ref="addForm"
            label-width="100px"
            label-position="left"
            > 
            <el-form-item label="档案名称">
                <xtSelect
                  :apiObj="apiObjM2"
                  :multiple = "true"
                  v-model:obj = "addForm.borrow_file_"
                  v-model = "addForm.borrow_file"
                  style="width: 300px;"
                  placeholder="选择档案名称"
                >
                <el-table-column label="档案编号" prop="number"></el-table-column>
                <el-table-column label="档案名称" prop="name"></el-table-column>
            </xtSelect>
                
            </el-form-item>
            <el-form-item label="申请人电话" prop="contacts">
                <el-input v-model="addForm.contacts" clearable style="width: 300px;" :disabled="localMode ==='show'"></el-input>
            </el-form-item>
            <el-form-item label="借阅时间" prop="borrow_date">
                <el-date-picker
                v-model="addForm.borrow_date"
                type="date"
                placeholder="选择日期时间"
                align="right"
                value-format="YYYY-MM-DD"
                :disabled="localMode ==='show'"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="归还时间" prop="return_date" v-if="addForm.ticket_?.state_?.name=='档案管理员审批'">
                <el-date-picker
                v-model="addForm.return_date"
                type="date"
                placeholder="选择日期时间"
                align="right"
                value-format="YYYY-MM-DD"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="用途" prop="remark" :disabled="localMode ==='show'">
                <el-checkbox-group v-model="addForm.remark">
                <el-checkbox label="借阅"></el-checkbox>
                <el-checkbox label="复印"></el-checkbox>
                <el-checkbox label="查阅"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>

        </el-form>
        <el-footer>
          <ticketd_b
            :workflow_key="'borrowrecord'"
            :title="ticketTitle"
            :t_id="addForm.id"
            :ticket_="addForm.ticket_"
            :ticket_data="ticket_data"
            :submit_b_func="submit_b_func"
            ref="ticketd_b"
            @success="$emit('success')"
          />
    </el-footer>
    </el-main>
        <el-aside v-if="addForm.ticket_">
            <ticketd
            :ticket_="addForm.ticket_"
            :ticket_data="ticket_data"
            @success="$emit('success')"
            style="margin-top: 20px;"
            />
        </el-aside>
  </el-container>

</template>
<script>

import ticketd_b from "@/views/wf/ticketd_b.vue";
import ticketd from "@/views/wf/ticketd.vue";

export default {
  props: {
      mode: {
          type: String, default: "show" 
      },
      t_id: {
            type: String,
            default: null
        },
    },
    
  components: {
      ticketd, ticketd_b
  },
  data() {
    return {
      ticketTitle: "档案借阅",
      addForm: {},
      localMode : this.mode,
      query: {},
      apiObjM2: this.$API.ofm.filerecord.list,
      fileList: [],
      ticket_data: {},
      rules: {
        file_name: [
          { required: true, message: "请选择档案", trigger: "blur" },
        ],
      },
    };
  },
  mounted(){
    let that = this;
    if (that.t_id){
        this.getTid();
      };
  },
  watch: {
    addForm: {
      handler(val){
        Object.assign(this.ticket_data,{
          return_date: val.return_date,
        })
      },
      deep: true,
    }
  },
  methods: {
    async submit_b_func() {
      let that = this;
    if (that.localMode === "add") {
        let res = await that.$API.ofm.borrow.create.req(that.addForm);
        that.addForm.id = res.id;
    } else if (that.localMode === "edit") {
        await that.$API.ofm.borrow.update.req(that.addForm.id, that.addForm);
    }
        },
     getFileList() {
      return this.$API.ofm.filerecord.list.req(this.query).then((res) => {
        this.fileList = res.results;
      });
    },
    getTid (){
			var that = this;
		    if (that.t_id) {
				that.$API.ofm.borrow.item.req(that.t_id).then(res=>{
          that.addForm = res;
					if(res.ticket_.state_.type == 1 && res.create_by == that.$TOOL.data.get("USER_INFO").id ) {
						that.localMode = "edit";
					}else{
						that.localMode = "show";
					}
        })
			}
		},
  },

};
</script>
