<!--
  @description: 采购计划-集采分配-分配人员弹框
  @author: lxl
  @date： 2020-10-30 09:52
-->
<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      title="分配人员"
      width="700px"
      custom-class="el-dialog__body-p0"
      top="calc((100vh - 336px) / 2)"
    >
      <section class="main mb10">
        <el-table
          :data="tableData"
        >
          <el-table-column type="index" align="center" label="序号" />
          <el-table-column prop="tenderNo" label="采购单编号" header-align="center" align="left" />
          <el-table-column prop="purchaseNames" label="物资信息" align="center" />
        </el-table>
        <el-form
          ref="form"
          label-width=""
          label-position="left"
          :rules="rules"
          :model="formData"
          style="width: 100%;"
          :inline-message="true"
        >
          <table class="from_table mt10">
            <tr>
              <td><el-form-item label="分配采购员" prop="purchaseUserId" /></td>
              <td>
                <el-select v-model="formData.purchaseUserId" placeholder="请选择" style="width: 100%;" @change="changePurchase">
                  <el-option v-for="item in buyers" :key="item.id" :label="item.realName" :value="item.id" />
                </el-select>
              </td>
            </tr>
          </table>
        </el-form>
      </section>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="btnLoading" @click="ensure('form')">
          确 定
        </el-button>
        <el-button @click="handleClose">
          取 消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/* api*/
import { purchasePlanDetailsAssignPage, purchasePlanDetailPackAssign } from '@/api/procurement/purchasplan'
import { selectUpDepartUserInfoListByDepartId } from '@/api/procurement/commonUser'// 获取供应信息
/* 公共方法 */
import { characters1_auto } from '@/assets/js/validate' // 校验输入内容
/* vuex */
import { mapGetters } from 'vuex'
export default {
  name: 'AllocationStaffDialog',
  props: {
    // 弹窗状态
    dialogVisible: {
      type: Boolean,
      default: false
    },
    // 采购单id
    tenderIds: {
      type: String,
      default: ''
    },
    // 00-分配人员;01-变更人员
    assignType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 采购单列表
      tableData: [],
      formData: {
        assignType: '', // 00-分配人员;01-变更人员
        purchaseUserId: '', // 采购员ID
        purchaseUserRealName: '', // 采购员姓名
        tenderIds: '' // 项目ID,多个用逗号分隔
      },
      btnLoading: false, // 按钮loading
      buyers: [],
      rules: {
        purchaseUserId: [{ required: true, validator: characters1_auto, trigger: 'change' }]
      }
    }
  },
  computed: {
    ...mapGetters(['info'])
  },
  watch: {
    // 弹窗状态
    dialogVisible(val) {
      // 打开
      if (val) {
        // 00-分配人员;01-变更人员
        this.formData.assignType = this.assignType
        // 项目ID,多个用逗号分隔
        this.formData.tenderIds = this.tenderIds
        // 获取采购项目
        this.loadData()
      }
    }
  },
  created() {
    // 获取采购员列表
    this.getBuyer()
  },
  methods: {
    // 改变采购员
    changePurchase(val) {
      // 获取选中采购员对象
      const buyerObj = this.buyers.find((item) => {
        return item.id === val
      })
      // 获取选中采购员名称
      this.formData.purchaseUserRealName = buyerObj.realName
    },
    // 获取采购员列表
    getBuyer() {
      const params = {
        departId: this.info.companyId, // 公司id
        roleCodeList: ['20'] // 采购员固定传20
      }
      // 获取采购员列表接口调用
      selectUpDepartUserInfoListByDepartId(params).then(response => {
        this.buyers = response.data
      }).catch(() => {
      })
    },
    loadData() {
      // 获取采购项目
      const params = {
        tenderIds: this.tenderIds // 项目ID,多个用逗号分隔
      }
      purchasePlanDetailsAssignPage(params).then(response => { // 获取采购项目列表
        this.tableData = response.data
      }).catch(() => {
      })
    },
    // 确定
    ensure(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.btnLoading = true
          purchasePlanDetailPackAssign(this.formData).then(response => {
            this.btnLoading = false
            // 成功提示语
            this.$message({
              message: `${this.formData.assignType === '00' ? '分配' : '变更'}成功`,
              type: 'success'
            })
            // 关闭弹窗
            this.handleClose(true)
          }).catch(() => {
            this.btnLoading = false
          })
        } else {
          this.$message({
            message: '操作失败',
            type: 'warning'
          })
          return false
        }
      })
    },
    // 关闭弹窗
    handleClose(val) {
      this.$emit('onClose', val)
    }
  }
}
</script>
<style scoped>
</style>
