<template>
  <el-col :span="16" :offset="6">
    <el-form label-width="100px" ref="formRef" :model="form">
      <el-form-item label="采购员" prop="technicianId" style="margin-bottom: 20px" :rules="{
        required: true,
        message: '请选择',
        trigger: 'change'
      }">
        <el-select v-model="form.technicianId" clearable style="width: 100%" :filterable="true">
          <el-option v-for="item in userOptions" @click.native="form.userName = item.name" :key="item.id"
            :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="审批建议" prop="reason" style="margin-bottom: 20px" :rules="{
        required: true,
        message: '请选择',
        trigger: 'change'
      }">
        <el-input type="textarea" v-model="form.reason" placeholder="请输入审批建议" />
      </el-form-item>
    </el-form>
    <div style="margin-left: 10%; margin-bottom: 20px; font-size: 14px">
      <el-button icon="el-icon-edit-outline" type="success" size="mini" @click="handleAudit(1)">通过
      </el-button>

      <el-button icon="el-icon-circle-close" type="danger" size="mini" @click="handleAudit(0)">驳回
      </el-button>

      <el-dropdown @command="(command) => handleCommand(command)" style="margin-left: 30px;">
        <span class="el-dropdown-link">更多<i class="el-icon-arrow-down el-icon--right"></i></span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="cancel">作废</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>


    </div>

  </el-col>
</template>

<script>

import { apspurchaseplan, cancel } from '@/api/bpm/components/apsMeterialPlan';
import { approveTaskWithVariables } from '@/api/bpm/task';
import { listAllUserBind } from '@/api/system/organization';

// 流程实例的详情页，可用于审批
export default {
  name: '',
  components: {

  },
  props: {
    businessId: {
      default: ''
    },
    taskId: {
      default: ''
    },
    id: {
      default: ''
    },

    taskDefinitionKey: {
      default: ''
    }
  },
  data() {
    return {
      form: {
        technicianId: '',
        reason: ''
      },
      userOptions: []
    };
  },
  created() {
    this.userOptions = [];
    listAllUserBind().then((data) => {
      this.userOptions.push(...data);
    });
  },
  methods: {


    async handleAudit(status, type) {
      //生产主管审批选择技术员

      if (!this.form.technicianId && status == 1) {
        this.$message.warning(`请选择采购员！`);
        return;
      }


      this._approveTaskWithVariables(status);
    },
    async _approveTaskWithVariables(status) {


      if (status == 1) {

        apspurchaseplan({
          businessId: this.businessId,
          id: this.taskId,
          userId: this.form.technicianId,
          userName: this.form.userName,
          reason: this.form.reason,
          pass: true

        }).then((res) => {
          if (res.data.code != '-1') {
            this.$emit('handleAudit', {
              status,
              title: ''
            });
          }
        });
      } else if (status == 0) {
        approveTaskWithVariables({
          id: this.taskId,
          reason: this.form.reason,
          pass: false
        }).then((res) => {
          if (res.data.code != '-1') {
            this.$emit('handleAudit', {
              status,
              title: '驳回'
            });
          }
        });
      }

    },

    getTableValue() {
      return new Promise((resolve, reject) => {
        this.$emit('getTableValue', async (data) => {
          resolve(await data);
        });
      });
    },

    //更多
    handleCommand(command) {
      if (command === 'cancel') {
        this.$confirm("是否确认作废？", {
          type: 'warning',
          cancelButtonText: '取消',
          confirmButtonText: '确定'
        }).then(() => {
          cancel({
            id: this.taskId,
            reason: this.form.reason,
            businessId: this.businessId,
          }).then(() => {
            this.$emit('handleClose');
          }).catch(() => {
            this.$message.error("流程作废失败");
          });
        }).catch(() => {});
      }
    },

  }
};
</script>

<style lang="scss"></style>
