<!--
  @description: 汇总下单-待下单-退回
  @Modifier: haofengxian
  @routerPath:
  @date: 2021-12-04 12:26
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    append-to-body
    title="订单退回"
    width="900px"
    custom-class="el-dialog__body-p8 el-dialog_table"
  >
    <div class="mb10">
      <el-table
        ref="multipleTable"
        :data="selectOrderReturn"
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
          header-align="center"
        />
        <el-table-column
          label="申购部门"
          header-align="center"
          min-width="200"
        >
          <template slot-scope="scope">
            <div style="white-space:normal;">
              {{ scope.row.createUserDepartName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="createUserName"
          label="申购人"
          header-align="center"
          min-width="100"
        />
        <el-table-column
          prop="parentOrderNo"
          label="订单编号"
          header-align="center"
          min-width="180"
        />
        <el-table-column
          prop="goodsName"
          label="商品名称"
          header-align="center"
          min-width="300"
        />
        <el-table-column
          prop="number"
          label="商品数量"
          align="right"
          header-align="center"
          width="70"
        />
        <el-table-column
          prop="unitPrice"
          label="商品单价（元）"
          align="right"
          header-align="center"
          width="110"
        />
        <el-table-column
          prop="totalPrice"
          label="商品总额（元）"
          align="right"
          width="130"
          header-align="center"
        />
        <el-table-column
          prop="productClassification"
          label="商品分类"
          align="center"
          width="100"
          header-align="center"
        />
        <el-table-column
          prop="goodsDepartName"
          label="供应商"
          align="center"
          width="100"
          header-align="center"
        />
        <el-table-column
          prop="createTime"
          label="申购时间"
          align="center"
          header-align="center"
          min-width="160"
        />
        <el-table-column
          prop="collectionNumberTime"
          label="打印并提交时间"
          align="center"
          header-align="center"
          min-width="160"
        />
        <el-table-column
          prop="collectionNumber"
          label="申购汇总编号"
          align="center"
          header-align="center"
          width="200"
        />
      </el-table>
    </div>
    <el-form
      ref="formData"
      :rules="rules"
      :model="formData"
      :inline-message="true"
    >
      <table class="from_table" style="marginBottom:10px">
        <tr>
          <td>
            <el-form-item
              ref="auditReason"
              label="退回原因"
              prop="auditReason"
            />
          </td>
          <td>
            <gx-input
              v-model.trim="formData.auditReason"
              gx-maxlength="varchar200"
              show-word-limit
              :autosize="{ minRows: 3, maxRows: 3 }"
              type="textarea"
            />
          </td>
        </tr>
      </table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" :loading="confirmLoading" @click="ensure('formData')">
        确 定
      </el-button>
      <el-button @click="cancel">
        取 消
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { characters1_auto } from '@/assets/js/validate' // 公用验证
export default {
  name: 'SummaryOrderReturnDialog',
  data() {
    return {
      confirmLoading: false, // 控制按钮重复点击Loding
      dialogVisible: false, // 弹框是否打开
      selectOrderReturn: [],
      formData: {
        auditReason: '' // 退回原因
      },
      rules: {
        auditReason: [{ required: true, validator: characters1_auto, trigger: 'blur' }]
      }
    }
  },
  watch: {
    // 关闭弹框 重置
    'dialogVisible'(val) {
      if (!val) {
        this.formData.auditReason = ''
      }
    }
  },
  methods: {
    // 打开弹框
    openDialogHandleOrderReturn(selectOrder) {
      this.dialogVisible = true
      this.selectOrderReturn = selectOrder
    },
    // 确定
    ensure(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          this.$emit('handleOrderCollection', '0', this.formData.auditReason)
        }
      })
    },
    // 取消
    cancel() {
      this.confirmLoading = false
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>

</style>
