<template>
  <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="visible" :append-to-body="true" width="600px">
    <el-form ref="form" :model="taskForm" :rules="rules" label-width="80px">
      <el-form-item label="原支部" prop="oldDeptId">
        <treeselect v-model="taskForm.oldDeptId" :options="deptOptions" :disabled="true"/>
      </el-form-item>
      <el-form-item label="转入支部" prop="newDeptId">
        <treeselect v-model="taskForm.newDeptId" :options="deptOptions" :disabled="newDeptIdDisabled" placeholder="请选择转入支部"/>
      </el-form-item>
      <el-form-item label="审批意见" prop="comment">
        <el-input v-model="taskForm.comment" placeholder="请输入审批意见" />
      </el-form-item>
    </el-form>

    <el-table :data="historyList" border v-loading="historyLoading" style="width: 100%;">
      <el-table-column width="100" prop="taskName" header-align="center" align="center" label="流程进度"></el-table-column>
      <el-table-column width="80" prop="userName" header-align="center" align="center" label="处理人"></el-table-column>
      <el-table-column prop="comment" header-align="center" align="center" label="备注 / 审批意见"></el-table-column>
      <el-table-column width="100" prop="taskCreateTime" header-align="center" align="center" label="开始时间"></el-table-column>
      <el-table-column width="100" prop="taskEndTime" header-align="center" align="center" label="结束时间"></el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button type="success" @click="dataFormSubmit(1)">{{ taskForm.taskName == "党总支审核" ? "通 过" : "提 交" }}</el-button>
      <el-button type="info" @click="dataFormSubmit(0)">{{ taskForm.taskName == "党总支审核" ? "驳 回" : "撤 销" }}</el-button>
      <el-button @click="visible = false">返回</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getToken } from "@/utils/auth";
  import { getMember, handle } from "@/api/branch/member";
  import { treeselect, listDept } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {getHistorylist} from "@/api/branch/approvedanger";

export default {
  name: "common-detail",
  components: { Treeselect },
  data() {
    return {
      rules: {
        oldDeptId: [
          { required: true, message: "原支部不能为空", trigger: "blur" }
        ],
        newDeptId: [
          { required: true, message: "转入支部不能为空", trigger: "blur" }
        ],
        comment: [
          { required: true, message: "审批评论不能为空", trigger: "blur" }
        ],
      },
      taskForm: {},
      newDeptIdDisabled: false,
      title: null,
      visible: false,
      deptOptions: [],
      //图片集合   打开关闭按钮 等等
      // imgs:[],
      // jpgList:[],
      // ppt:false,
      // pptView:false,
      // loadingFlash:false,
      //流转列表
      historyList: [],
      // rejectList: [],
      historyLoading: true,

    }
  },
  methods: {
    init(id, taskId, processId, taskName) {
      getHistorylist({ "processId": processId }).then(response => {
        this.historyList = response.rows;
        this.historyLoading = false
      });
      this.reset();
      this.visible = true;
      if (taskName == "支部申请") {
        this.newDeptIdDisabled = false;
      } else {
        this.newDeptIdDisabled = true;
      }
      this.title =  taskName + "处理";
      this.taskForm.objId = id;
      this.taskForm.taskId = taskId;
      this.taskForm.taskName = taskName;
      getMember(id).then(response => {
        this.taskForm.obj = response.data;
        this.taskForm.oldDeptId = Number(response.data.oldDeptId);
        this.taskForm.newDeptId = Number(response.data.newDeptId);
      });
      this.getTreeselect();
    },

    reset() {
      this.taskForm =  {
        oldDeptId: null,
        newDeptId: null,
        comment: '',
      };
    },

    dataFormSubmit(condition) {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.taskForm.taskName == "支部申请") {
            this.taskForm.obj.oldDeptId = this.taskForm.oldDeptId;
            this.taskForm.obj.newDeptId = this.taskForm.newDeptId;
            this.$forceUpdate();
          }
          this.taskForm.condition = condition;
          handle(this.taskForm).then(response => {
            this.visible = false;
            this.$modal.msgSuccess("提交成功");
            // refreshDataList事件：调用父组件getList方法刷新页面
            this.$emit('refreshDataList');
          });
        }
      });
    },

    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
  }
}
</script>
