<template>
  <a-card title="订单接收" :bordered="false">
    <a-collapse v-model:activeKey="activeKey" accordion>
      <a-collapse-panel v-for="(item, index) in dataList" :key="index.toString()">
        <template slot="header">
          <div style="font-size: 18px; font-weight: bold;">
            采购订单号:HL-{{ item.requirementNumber }} &nbsp;&nbsp;部门:{{ item.sysOrgCode }}
            &nbsp;&nbsp;采购方向:{{ item.procurementDirection }}
            <a-button style="float: right;" @click="receiveData(item)">接收</a-button>
          </div>
        </template>
        <div>
          <a-descriptions title="订单详情" bordered>
            <a-descriptions-item label="申请人">{{ item.createBy_dictText }}</a-descriptions-item>
            <a-descriptions-item label="申请时间">{{ item.createTime }}</a-descriptions-item>
            <a-descriptions-item label="申请部门">{{ item.sysOrgCode }}</a-descriptions-item>
            <a-descriptions-item label="采购类型">{{ item.procurementCategory_dictText }}</a-descriptions-item>
            <a-descriptions-item label="采购预算" :span="3">{{ item.procurementBudget }}</a-descriptions-item>
            <a-descriptions-item label="审批人" :span="3">{{ item.approvedBy_dictText }}</a-descriptions-item>
            <a-descriptions-item label="采购详情">
              <div v-for="(item2, index2) in item.procurementContent" :key="index2.toString()">
                <a-row>
                  <a-col :span="2">{{ item2.name }}</a-col>
                  <a-col :span="2">{{ item2.number }}{{ item2.unit }}</a-col>
                </a-row>
              </div>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </a-collapse-panel>
    </a-collapse>

    <a-modal title="填写接收备注" :visible="receive" @ok="receiveOk" @cancel="receiveCancel">
      <a-textarea v-model="auditResults" placeholder="请输入接收备注" />
    </a-modal>

  </a-card>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import { USER_INFO } from "@/store/mutation-types"
import Vue from 'vue'

export default {
  name: 'PurchaseOrderConfirmationList',
  data() {
    return {
      description: '采购订单确认管理页面',
      dataList: [],
      activeKey: [],
      url: {
        list: "/Try/purchaseRequest/waitForReceiveList",
        acceptReceiving: "Try/purchaseOrderConfirmation/acceptReceiving",
      },
      receive: false,
      tempNO: '',
      auditResults: '',
      username: Vue.ls.get(USER_INFO).username,
      sysOrgCode: Vue.ls.get(USER_INFO).orgCode,
    }
  },
  computed: {
    list: function () {
      return `${window._CONFIG['domianURL']}/${this.url.list}`;
    },
    acceptReceiving: function () {
      return `${window._CONFIG['domianURL']}/${this.url.acceptReceiving}`;
    }
  },
  created() {
    this.getdata();
  },
  methods: {
    receiveData(item) {
      this.tempNO = item.requirementNumber;
      this.receive = true;
    },
    receiveOk() {
      let data = {
        associationNumber: this.tempNO,
        receiver: this.username,
        notes: this.auditResults,
        receivingTime: new Date(),
      }
      postAction(this.acceptReceiving, data).then(res => {
        //如果为200，则获取数据
        if (res.code == 200) {
          this.$message.success('接收成功');
          this.getdata();
        } else {
          this.$message.error(res.message);
        }
      })
      this.receive = false;
    },
    receiveCancel() {
      this.receive = false;
    },
    getdata() {
      getAction(this.list, {}).then(res => {
        //如果为200，则获取数据
        if (res.code == 200) {
          this.dataList = res.result.records;
          this.activeKey = [0];
          //将其procurementContent转为json
          this.dataList.forEach(item => {
            item.procurementContent = JSON.parse(item.procurementContent);
          });
        } else {
          this.$message.error(res.message);
        }
      })

    }
  }
}
</script>