<template>
  <div>
    <div>
      <el-drawer
        title="我是标题"
        :visible.sync="drawer"
        :with-header="false"
        :append-to-body="true"
        :modal-append-to-body="true"
      >
        <base-form
          ref="customForm"
          :formRow="topFormRow"
          style="padding: 10px 0"
          justifyContent="flex-end"
          :rules="rules"
          @elDialogClick="elDialogClick"
          @onSubmit="onSubmit"
        >
        </base-form>
      </el-drawer>
    </div>
    <base-quantity-person ref="baseQuantityPerson" @personConfirmClick="personConfirmClick"></base-quantity-person>
  </div>
</template>

<script>
import baseForm from "@/components/base/baseNewForm/index.vue";
import baseQuantityPerson from '@/components/base/baseQuantityPerson'
import { SaveData } from "@/api/apis/myJob";
import configData from "./configData";

export default {
  data() {
    return {
      drawer: false,
      form: {
        date: "",
        personnel: "",
        radio: 0,
        time: "",
        content: "",
      },
      topFormRow: configData.topFormRow,
      rules: configData.distribute,
    };
  },

  props: {
    ids: { 
      type: Object,
      default: () => {
				return {}
			}
    }
  },

  components: {
    baseForm,
    baseQuantityPerson
  },

  computed: {},

  mounted() {},

  methods: {
    elDialogClick(row, index, indexRow) { 
      if (row.label == "处理人员") {
        this.$refs.baseQuantityPerson.openDialog()
      }
    },
    personConfirmClick(arr) {
        let arrListId = [];
        let arrListName = [];
        arr.forEach(el => {
            let arr = {
                label: el.p_PersonName,
                value: el.p_PersonID,
            };
            arrListName.push(arr.label);
            arrListId.push(arr.value)
        })
        this.$refs.customForm.getField("personName", arrListName.join(","))
        this.$refs.customForm.getField("personID", arrListId.join(","))
    },
    async onSubmit() {
      const res = await SaveData({
        dataMain: {
          ...this.$refs.customForm.ruleForm,
          billid: this.ids.billid,
          projectID: this.ids.projectID
        }
      })
      if (res.code == 1) {
        this.$message({
          message: "保存成功",
          type: "success",
        });
        this.$refs.customForm.resetForm()
        this.drawer = false
      }
    }
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-drawer__body {
  padding: 50px 20px;
  background-color: #f2f3f4;
}
</style>
