<!--
  @description: 反馈管理---反馈人---选择采购单/订单弹框
  @Modifier: zcy
  @routerPath: complaintsSuggestions/complaintsSuggestions-dialog.vue
  @date: 2021-11-18 15:02
-->
<template>
  <!-- 选择弹框 -->
  <el-dialog
    :title="selectVal === '00'?'选择采购单':'选择订单'"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose"
  >
    <section class="mt10">
      <el-table
        ref="singleTable"
        :data="tableData"
        class="pointer"
        size="mini"
      >
        <el-table-column label="选择" width="65" align="center">
          <template slot-scope="scope">
            <el-radio v-model="templateSelection" :label="scope.$index" @change="lin(scope.row, scope.$index)">
&nbsp;
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="80"
        />
        <!-- selectVal 00表示采购单 -->
        <template v-if="selectVal === '00'">
          <el-table-column
            prop="tenderNo"
            label="采购单编号"
            width="160"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="tenderName"
            label="采购单名称"
            header-align="center"
            align="left"
          />
        </template>
        <!-- selectVal 01表示订单 -->
        <template v-if="selectVal === '01'">
          <el-table-column
            prop="orderCode"
            label="订单编号"
            width="160"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="orderName"
            label="订单名称"
            header-align="center"
            align="left"
          />
        </template>
      </el-table>
    </section>
    <pagination :pagination-data="paginationData" @change="loadData" />
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close()">确 定</el-button>
      <el-button @click="handleClose()">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/* 接口 */
import { querySupplierProcurementProject } from '@/api/procurement/procurementProject' // 采购单列表
/* 接口 */
import { getPageOrderInfoAllByRole } from '@/api/procurement/procurementContract' // 订单列表
/* 组件 */
import pagination from '@/components/common/pagination/pagination'
export default {
  components: {
    pagination
  },
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    selectVal: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      templateSelection: '', // 选中的数据下标
      loading: true, // 加载动画
      tableData: [], // 表格数据
      dialogVisible: this.dialog, // 弹框是否显示
      tenderNo: '', // 采购单编号
      tenderId: '',
      currentRow: null,
      paginationData: { // 分页数据
        total: 0,
        pageNo: 1,
        pageSize: 10
      }
    }
  },
  watch: {
    // 弹框打开状态
    'dialog'(val) {
      if (val) {
        this.dialogVisible = true
        this.loadData()
      }
    }
  },
  methods: {
    // 加载数据
    loadData() {
      this.templateSelection = ''
      // 判断是采购单还是订单加载不同的数据
      let apiUrl = ''
      const data = {
        pageNo: this.paginationData.pageNo,
        pageSize: this.paginationData.pageSize
      }
      // 判断类型 根据类型调用不同的接口 00表示采购单 01表示订单
      if (this.selectVal === '00') {
        apiUrl = querySupplierProcurementProject
      } else if (this.selectVal === '01') {
        apiUrl = getPageOrderInfoAllByRole
      }
      apiUrl(data).then(res => {
        this.loading = false
        this.tableData = res.data.records
        this.paginationData.total = res.data.total
      })
    },
    // 弹框右上角关闭
    handleClose(done) {
      this.$emit('closeDialog', false)
      this.dialogVisible = false
    },
    // 点击确认或取消 关闭对话框并将拿到的值返给父组件
    close() {
      // 单选选中数据
      if (this.templateSelection || this.templateSelection === 0) {
        const data = {
          dialog: false,
          tenderNo: this.tenderNo,
          tenderId: this.tenderId
        }
        this.$emit('closeDialog', data) // 传递数据给父组件
        this.dialogVisible = false // 关闭弹框
      } else {
        this.$message.warning(`请选择数据`)
      }
    },
    // 获取选中的采购单或订单数据
    lin(row, index) {
      this.templateSelection = index // 单选下标
      if (this.selectVal === '00') {
        this.tenderNo = row.tenderNo
        this.tenderId = row.id
      } else if (this.selectVal === '01') {
        this.tenderNo = row.orderCode
        this.tenderId = row.tenderId
      }
    }
  }
}
</script>

<style scoped lang="less">
  /deep/.el-radio__label {
    display: none;
  }
</style>
