<template>
  <!-- 选择领导代审批,发起人弹窗 -->
  <el-dialog
    :title="dialogTitle"
    :visible.sync="leaderDialogVisible"
    :before-close="handleLeaderDialogClose"
    :close-on-click-modal="false"
    append-to-body
    width="30%"
    custom-class="leader-dialog"
  >
    <el-form data-vv-scope="leaderForm">
      <ht-form-item>
        <el-select
          v-model="selectLeaderId"
          validate="required"
          placeholder="请选择"
        >
          <el-option
            v-for="item in leaderList"
            v-show="!(!hasStartRight && item.id == '0' && item.type == 'user')"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </ht-form-item>
      <ht-form-item class="dialog-footer__btns">
        <el-button @click="handleLeaderDialogClose">取消</el-button>
        <el-button type="primary" @click="submitLeader">确定</el-button>
      </ht-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
  import { mapState } from 'vuex'
  import flow from '@/api/flow.js'
 
  export default {
    name: 'LeaderDialog',
    props: {
      dialogTitle: {
        type: String,
        default: '选择代审批领导',
      },
    },
    data() {
      return {
        leaderDialogVisible: false,
        selectLeaderId: '',
        leaderList: [],
        id: '', //当前点击流程id
        isNewProcess: '',
        isFromBatch: false,
        isFromLeaderTodo: false,
        hasStartRight: false,
        defId: '',
      }
    },
    computed: {
      ...mapState('user', ['currentUserDetail']),
      ...mapState('login',['currentUser']),
      userId() {
        return this.currentUserDetail&&this.currentUserDetail.user&&this.currentUserDetail.user.userId
      },
      token(){
        return this.currentUser&&this.currentUser.token
      }
    },
    watch: {
      id: {
        handler(val) {
          if (val) {
            this.initData()
          } else {
            this.hasStartRight = false
          }
        },
        immediate: true,
      },
    },
    methods: {
      //选择领导后跳转
      submitLeader() {
        if (!this.selectLeaderId)
          return this.$message.warning('请选择代为审批的领导')
        if (this.isNewProcess) {
          // 获取流程的主版本发起。
          flow.getMainByDefIdOrKey(this.id).then((resp) => {
            let defId = this.id
            if (resp && resp.id) {
              defId = resp.id
            }
            window.open(`${window.context.front}/matter/startProcess?defId=${defId}&leaderId=${this.selectLeaderId}&token=${this.token}`,'_blank')
          })
        } else {
          const url = `${window.context.front}/matter/approvalForm?taskId=${this.id}&leaderId=${this.selectLeaderId}&token=${this.token}`
           this.openNewPage(url)
        }
        this.leaderDialogVisible = false
      },
      openLeaderDialog() {
        this.leaderDialogVisible = true
      },
      
      //处理新建流程可选择发起人时跳转
      async handleNewProcessJumps(data) {
        this.id = data.id
        let response = await flow.checkStartRight(this.userId, data.id, '')
        if (response.state) {
          this.hasStartRight = response.value
        }
        this.isNewProcess = true
        if (data.leaders && data.leaders.length > 0) {
          this.leaderList = data.leaders
          this.leaderDialogVisible = true
        } else {
          let resp = await flow.getMainByDefIdOrKey(this.id)
          let defId = data.id
          // 获取流程的主版本发起。
          if (resp && resp.id) {
            defId = resp.id
          }
          const url = `${window.context.front}/matter/startProcess?defId=${defId}&name=${data.name}&token=${this.token}`
          this.openNewPage(url)
        }
      },
      initData() {
        if (this.defId) {
          // 判断发起权限
          flow.checkStartRight(this.userId, this.defId, '').then((response) => {
            if (response.state) {
              this.hasStartRight = response.value
            }
          })
        }
      },
      openNewPage(url) {
        window.open(url, '_blank')
      },
      //关闭选择领导弹窗
      handleLeaderDialogClose() {
        this.leaderDialogVisible = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .leader-dialog {
    .dialog-footer__btns {
      ::v-deep .el-form-item__content {
        text-align: right;
      }
    }
  }
</style>