<!--
  @description:采购计划-计划结果执行分配-确认执行分配弹框
  @Modifier: haofengxian
  @routerPath:
  @date: 2021-2-22-11:20
-->
<template>
  <el-dialog
    :visible.sync="dialogExecuteData.executeVisible"
    :before-close="handleClose"
    title="分配人员"
    width="700px"
  >
    <section>
      <el-table
        :data="tableData"
      >
        <el-table-column type="index" align="center" label="序号" />
        <el-table-column prop="purchaseNo" label="行项目编号" header-align="center" />
        <el-table-column prop="purchaseName" label="物资名称" />
      </el-table>
    </section>
    <section class="delCase">
      <el-form
        ref="form"
        label-position="left"
        :rules="rules"
        :model="formData"
        inline
      >
        <table class="tableData">
          <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" @click="ensure('form')">
        确 定
      </el-button>
      <el-button @click="handleClose">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
/* api*/
import { purchasePlanDetailResultAssign } from '@/api/procurement/purchasplan'
import { selectUpDepartUserInfoListByDepartId } from '@/api/procurement/commonUser'// 获取供应信息
/* 公用组件*/
import { ListMixin } from '@/mixins/ListMixin' // 分页
import { paging } from '@/assets/js/utils/index.js' // 前端分页
import pagination from '@comp/common/pagination/pagination' // 分页组件
import { characters1_auto } from '@/assets/js/validate' // 校验输入内容
import { mapGetters } from 'vuex'
export default {
  name: 'ProcurementPlanExecuteDialog',
  components: {
    pagination
  },
  mixins: [ListMixin],
  props: {
    dialogExecuteData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      tableData: [], // 行项目列表
      formData: {
        planDetailIds: '', // 计划详情Id 用逗号分隔
        purchaseUserId: '', // 采购员ID
        purchaseUserRealName: '' // 采购员姓名
      },
      buyers: [], // 采购员信息列表
      rules: {
        purchaseUserId: [{ required: true, validator: characters1_auto, trigger: 'change' }]
      }
    }
  },
  computed: {
    ...mapGetters(['info'])
  },
  watch: {
    'dialogExecuteData.executeVisible'(val) {
      if (val) {
        this.tableData = paging({}, this.dialogExecuteData.executeTableData, this.paginationData)
        // 获取采购员列表
        this.getBuyer()
      }
    }
  },
  methods: {
    // 改变采购员
    changePurchase(val) {
      // 获取选中采购员对象
      const buyerObj = this.buyers.find((item) => {
        return item.id === val
      })
      // 获取选中采购员名称
      this.formData.purchaseUserRealName = buyerObj.realName
      this.formData.purchaseUserId = buyerObj.id
    },
    // 获取采购员列表
    getBuyer() {
      const params = {
        departId: this.info.companyId, // 公司id
        roleCodeList: ['20'] // 采购员固定传20
      }
      // 获取采购员列表接口调用
      selectUpDepartUserInfoListByDepartId(params).then(response => {
        this.buyers = response.data
      }).catch(() => {
      })
    },
    // 确定
    ensure(formName) {
      this.formData.planDetailIds = this.dialogExecuteData.planDetailId
      this.$refs[formName].validate((valid) => {
        if (valid) {
          purchasePlanDetailResultAssign(this.formData).then(response => {
            if (response.header.ret === '0') {
              this.$message.success(response.header.msg)
            } else {
              this.$message.warning(response.header.msg)
            }
            this.handleClose()
          }).catch(() => {})
        }
      })
    },
    // 弹框关闭
    handleClose() {
      this.$emit('close')
      this.dialogExecuteData.executeVisible = false
    }
  }
}
</script>
<style scoped>
</style>
