<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="userId">
        <el-select v-model="taskForm.userId" placeholder="请选择支部成员" :disabled="true">
          <el-option
            v-for="dict in userList"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="原支部" prop="oldDeptId" style="width: 300px;">
        <treeselect v-model="taskForm.oldDeptId" :options="deptOptions" :disabled="true"/>
      </el-form-item>
      <el-form-item label="转入支部" prop="newDeptId" style="width: 300px;">
        <treeselect v-model="taskForm.newDeptId" :options="deptOptions" :disabled="newDeptIdDisabled" placeholder="请选择转入支部"/>
      </el-form-item>
      <el-form-item label="审批意见" prop="comment" v-if="dialogType == 1">
        <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 v-if="dialogType == 1" type="success" @click="dataFormSubmit(1)">{{ taskForm.taskName == "支部申请" ? "提 交" : "通 过" }}</el-button>
      <el-button v-if="dialogType == 1" 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";
  import { listUserNoPage} from "@/api/system/user";

export default {
  name: "common-detail",
  components: { Treeselect },
  data() {
    return {
      // 用户列表
      userList: [],
      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,
      dialogType: 0,
    }
  },
  methods: {
    init(id, taskId, processId, taskName, dialogType) {
      // 流转列表
      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.dialogType = dialogType;
      if (dialogType == 1) {
        this.title =  taskName + "处理";
      } else {
        this.title = "查看详情";
      }
      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.taskForm.userId = Number(response.data.userId);
        console.log(typeof(this.taskForm.newDeptId))
        console.log(typeof(this.taskForm.userId))
      });
      this.getTreeselect();
      this.getUserList();
    },

    /** 查询用户列表 */
    getUserList() {
      listUserNoPage().then(response => {
        let rows = response.data;
        let userList = [];
        for(let i = 0; i < rows.length; i++) {
          if (rows[i].userName != "admin") {
            let user = { "dictValue" : rows[i].userId, "dictLabel" : rows[i].nickName};
            userList.push(user);
          }
        }
        this.userList = userList;
      });
    },

    // 用户列表字典翻译
    userListFormat(row, column) {
      return this.selectDictLabel(this.userList, row.userId);
    },

    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>

<style scoped lang="scss">
  ::v-deep .el-input.is-disabled .el-input__inner {
    color: #606266;
    background-color: transparent;
  }
</style>
