<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-width="60px"
    class="demo-ruleForm transferInversion"
  >
    <el-form-item label="节点" prop="node_id">
      <el-select
        v-model="ruleForm.node_id"
        placeholder="选择节点"
        size="small"
        style="width: 100%"
      >
        <el-option
          v-for="(item, index) in nodeList"
          :key="index"
          :label="item.label"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="用户" prop="user_id">
      <el-select
        v-model="ruleForm.user_id"
        placeholder="选择用户"
        filterable
        size="small"
        style="width: 100%"
      >
        <el-option
          v-for="(item, index) in users"
          :key="index"
          :label="item.nickName"
          :value="item.userId"
        >
          <span style="float: left">{{ item.nickName }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{
            item.phone
          }}</span>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="备注">
      <el-input v-model="ruleForm.remarks" type="textarea" size="small" />
    </el-form-item>
    <el-form-item>
      <Upload :fileUrl="fileUrl" />
    </el-form-item>
    <el-form-item style="text-align: right">
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="$listeners.close()">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { inversionWorkOrder } from "@/api/process/work-order";
import store from "@/store";
import load from "@/utils/loading";
import Upload from "./upload";
export default {
  name: "transferInversion",
  props: {
    selectItem: {
      type: Object,
      default: {}
    }
  },
  components: { Upload },
  data() {
    return {
      users: [],
      nodeList: [],
      dialogVisible: false,
      ruleForm: {
        work_order_id: "",
        node_id: "",
        user_id: "",
        remarks: ""
      },
      fileUrl: [],
      rules: {
        node_id: [{ required: true, message: "请选择节点", trigger: "change" }],
        user_id: [{ required: true, message: "请选择用户", trigger: "change" }]
      }
    };
  },
  mounted() {
    const { node_id, work_order_id, nodeList, users } = this.selectItem;
    this.ruleForm.work_order_id = work_order_id;
    this.ruleForm.node_id = node_id;
    this.nodeList = nodeList;
    this.users = users;
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          load.startLoading();
          inversionWorkOrder({
            ...this.ruleForm,
            fileUrl: JSON.stringify(this.fileUrl || [])
          }).then(response => {
            load.endLoading();
            if (response.code === 200) {
              this.$message.success("转交成功");
              this.$listeners.close();
              this.$listeners.getList();
              this.dialogVisible = false;
              // 初始化显示数据
              store.dispatch("user/getInitData");
            }
          });
        }
      });
    }
  }
};
</script>
