<template>
  <div>
    <el-table v-loading="loading" :data="list" style="width: 100%" border highlight-current-row >
              <el-table-column label="序号" type="index" width="60"></el-table-column>
              <el-table-column label="采购单号" prop="billNo" width="160"></el-table-column>
              <el-table-column label="采购部门" prop="deptName" width="120"></el-table-column>
              <el-table-column label="采购仓库" prop="invName" width="120"></el-table-column>
              <el-table-column label="申购仓库" prop="applyInvName" width="120"></el-table-column>
              <el-table-column label="申购人" prop="applyCreateBy" width="120"></el-table-column>
              <el-table-column label="供应商" prop="supName" width="180"></el-table-column>
              <el-table-column label="紧急程度" prop="emergency" width="120">
                <template slot-scope="scope" >
                  <el-select v-model="scope.row.emergency" :disabled="true" placeholder="请选择紧急程度" style="width: 90%" clearable>
                    <el-option label="正常" :value=1></el-option>
                    <el-option label="较急" :value=2></el-option>
                    <el-option label="特急" :value=3></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="到货截止" prop="arrivalTime" width="160"></el-table-column>
              <el-table-column label="单据状态" prop="status"  width="120">
                  <template slot-scope="scope" >
                    <el-tag :type="(scope.row.status == 0? 1:scope.row.status ) | statusFilterType" v-if="scope.row.approvalFlowId == null" >
                      {{ statusMap[(scope.row.status == 0? 1:scope.row.status ) ] }}
                    </el-tag>
                    <el-tag :type="(scope.row.flowStatus == 0? 1:scope.row.flowStatus ) | statusFilterType" v-if="scope.row.approvalFlowId != null">
                      {{ statusMap[(scope.row.flowStatus == 0? 1:scope.row.flowStatus ) ] }}
                    </el-tag>
                  </template>
              </el-table-column>
              <el-table-column label="创建时间" prop="createTime" width="160"></el-table-column>
              <el-table-column label="操作" width="120" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click.native.stop="showDialog(scope.row)">详情</el-button>
                </template>
              </el-table-column>
    </el-table>


  <el-dialog
    title="采购订单详情"
    :visible.sync="newSpDistributionVisible"
    width="80%"
    v-if="newSpDistributionVisible"
    @close='closeDialog'
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <purOrderDetailDialog
      :closeDialog="closeDialog"
      :idQuery="this.row"
    ></purOrderDetailDialog>
  </el-dialog>
  </div>
</template>

<script>
import purOrderDetailDialog from "@/views/purchase/purOrder/purOrderDetailDialog.vue";
import {orderByBillNo} from "@/api/purchase/purOrder.js"

export default {

  name: 'invDevicePurOrderDialog',
  props: {
    idQuery: {
      type: Object,
      required: true
    },
    rowData: {
      type: Object,
      required: true
    }

  },
  watch: {
    rowData: function(newVal, oldVal) {

      this.searchData(newVal)
    }
  }
  ,
  data() {
    return {
      formData:{},
      row:{},
      statusMap: {
        1: "草稿",
        2: "审核中",
        3: "通过",
        4: "拒绝"
      },
      loading: false,
      newSpDistributionVisible: false,
      codeArray: [],
      list: [],
      total: 0,
      filterQuery: {
        limit: 1,
        page: 10,
      }
    }
  }
  ,
  methods: {
    closeDialog(){
      this.newSpDistributionVisible = false
    },
    showDialog(row){
      //请求传输
      this.row = row
      this.row.formData = row
      this.newSpDistributionVisible = true
    },
  }
  ,
  filters: {
    statusFilterType(status) {
      const statusMap = {
        1: "info",
        2: "warning",
        3: "success",
        4: "danger"
      };
      return statusMap[status];
    }
    ,
  },
  created() {
    /**
     * 如果采购订单号外键 不为 空 触发 获取 订单 和 明细
     */
    if (this.rowData.purOrderBillNo != null && this.rowData.purOrderBillNo != ''){
      // this.filterQuery.billNo = this.rowData.purOrderBillNo
      orderByBillNo(this.rowData.purOrderBillNo)
        .then((response) => {
          if (response.code == 20000) {
            this.list = response.data.list ;
          } else {
            this.$message.error(response.message);
          }
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    }
  },
  components: {purOrderDetailDialog}
}

</script>
<style scoped>
.itemTag {
  float: left;
  text-align: left;
  margin-top: 10px;
  width: 120px;
}

.text {
  width: 100%;
  font-size: 13px;
  font-family: "Microsoft YaHei";
}

.el-card {
  margin-right: 20px;
  margin-top: 15px;
  /*transition: all .5s;*/
}

.el-row {
  display: flex;
  flex-wrap: wrap;
}

.el-col {
  border-radius: 4px;
  flex-wrap: wrap;
}
</style>
