<!-- 采购申请单 -->
<template>
  <Modal
    v-model="modal"
    :footer-hide="true"
    width="50vw"
    :transfer="false"
    @on-cancel="cancel"
    class-name="vertical-center-modal"
  >
    <div class="content" ref="print">
      <!-- 决策辅助 -->
      <side-bar>
        <div class="content">
          <div class="title">决策辅助</div>
          <div class="info">
            <div
              class="card"
              v-for="(item, index) in data.purDetails"
              :key="index"
            >
              <div class="row">
                <div class="col">
                  <div class="label">物料编码：</div>
                  <div class="value">{{ item.materialCode }}</div>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <div class="label">物料名称：</div>
                  <div class="value">{{ item.materialName }}</div>
                </div>
              </div>
              <div class="row">
                <div class="line"></div>
              </div>
              <div class="row">
                <div class="col">
                  <div class="label">现有库存：</div>
                  <div class="value">{{ item.stockQty }}</div>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <div class="label">滞留周期：</div>
                  <div class="value">{{ item.delayPeriod }}</div>
                </div>
                <div class="col">
                  <div class="label">滞留数量：</div>
                  <div class="value">{{ item.delayQuantity }}</div>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <div class="label">采购在途：</div>
                  <div class="value">{{ item.onWayQuantity }}</div>
                </div>
              </div>
              <div class="row">
                <div class="line"></div>
              </div>
              <div class="row">
                <div class="col">
                  <div class="label">安全库存：</div>
                  <div class="value">{{ item.safetyQty }}</div>
                </div>
              </div>
              <div class="row">
                <div class="col">
                  <div class="label" style="width: 90px;">近30天消耗量：</div>
                  <div class="value">{{ item.overUseQty }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </side-bar>
      <!-- 标题 -->
      <div class="title">采购申请单</div>
      <!-- 头部信息 -->
      <div class="info">
        <div class="row">
          <div class="col">
            <div class="label">申购单号：</div>
            <div class="value">{{ data.applyBillNo }}</div>
          </div>
          <div class="col">
            <div class="label">采购部门：</div>
            <div class="value">采购部</div>
          </div>
          <div class="col">
            <div class="label">申购日期：</div>
            <div class="value">{{ data.applyTime }}</div>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div class="label">申购部门：</div>
            <div class="value">{{ data.departName }}</div>
          </div>
          <div class="col">
            <div class="label">申购人：</div>
            <div class="value">{{ data.userName }}</div>
          </div>
          <div class="col">
            <div class="label">申购类型：</div>
            <div class="value">
              {{ data.applyPurType }}
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col" style="align-items: flex-start">
            <div class="label">申购说明</div>
            <div class="value">
              <Input
                v-if="data.applyPurType === '物料'"
                v-model="data.applyAccount"
                type="textarea"
                :rows="4"
                disabled
              />
              <Input
                v-else
                v-model="data.purchaseContent"
                type="textarea"
                :rows="4"
                disabled
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 副标题 -->
      <div class="sub">
        <span class="sub-title">申购明细</span>
      </div>
      <!-- 申购明细表格 -->
      <div class="table">
        <table>
          <tr>
            <th>物料编码</th>
            <th>物料名称</th>
            <th>物料规格</th>
            <th>单位</th>
            <th>请购数量</th>
            <th>用途</th>
          </tr>
          <tr v-for="(item, index) in formData.purDetails" :key="index">
            <td>{{ item.materialCode }}</td>
            <td>{{ item.materialName }}</td>
            <td>{{ item.spec }}</td>
            <td>米</td>
            <td>{{ item.purchaseQty }}</td>
            <td>{{ item.purpose }}</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="content sub-content">
      <div class="info">
        <div class="title">审批流程</div>
        <div class="row">
          <div class="col">
            <Input
              v-model="remark"
              type="textarea"
              placeholder="请输入审批意见"
            />
          </div>
        </div>
        <div class="row">
          <div class="col">
            <Button
              type="primary"
              :disabled="data.approveType !== 0"
              style="margin-right: 10px"
              @click="cfm(0)"
              >同意</Button
            >
            <Button
              type="error"
              :disabled="data.approveType !== 0"
              style="margin-right: 10px"
              @click="cfm(1)"
              >驳回</Button
            >
            <Button type="error" v-if="data.approveType === 1" @click="cfm(2)"
              >撤回</Button
            >
          </div>
        </div>
        <div class="table">
          <table>
            <tr>
              <th>序号</th>
              <th>审批节点</th>
              <th>审批人</th>
              <th>审批意见</th>
              <th>审批结果</th>
              <th>审批日期</th>
            </tr>
            <tr v-for="(item, index) in flowsList" :key="index">
              <td>{{ item.rowNo }}</td>
              <td>{{ item.nodeName }}</td>
              <td>{{ item.userName }}</td>
              <td>{{ item.suggestions }}</td>
              <td>{{ item.checkResult }}</td>
              <td>{{ item.checkTime }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import { GetApprovalFlows } from '@/api/stock'
import { ApprovalBillFlow } from '@/api/applyPurchase'
import SideBar from '_c/my-modal-pay/my-modal-sidebar'
export default {
  name: 'purchase-form',
  data () {
    return {
      modal: false,
      formData: {},
      remark: '',
      flowsList: []
    }
  },
  components: {
    SideBar
  },
  props: {
    data: {
      type: Object,
      default () {
        return {}
      }
    },
    value: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  watch: {
    value: {
      handler (n) {
        this.modal = n
        this.$set(this.formData, 'applyPurType', 0)
      },
      immediate: true
    },
    modal (n) {
      this.$emit('input', n)
      if (n) {
        GetApprovalFlows({
          linkId: this.data.id
        }).then(res => {
          if (res.code === 0) {
            this.flowsList = res.result
          }
        })
      }
    }
  },
  methods: {
    cancel () {
      this.remark = ''
      this.modal = false
    },
    cfm (type) {
      ApprovalBillFlow({
        linkCheckId: [this.data.flowChekId],
        updateAction: type,
        suggestions: this.remark
      }).then(res => {
        if (res.code === 0) {
          this.cancel()
          this.$Message.info(res.msg || '操作成功！')
          this.$emit('getlist')
        }
      })
    }
  },
  beforeUpdate () {
    if (this.modal) {
      this.formData = { ...this.data }
    }
  }
}
</script>

<style lang="less" scoped>
::-webkit-scrollbar {
  width: 0; /*对垂直流动条有效*/
}
.content {
  padding: 0 20px;
  width: 100%;
  border-radius: 5px;
  background-color: #ffffff;
  &.sub-content {
    background-color: #f2f2f2;
    margin-top: 3px;
    .title {
      padding-top: 0;
    }
  }
  .title {
    padding: 10px 0;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
  }
  .info {
    padding: 10px 0;
    .row {
      margin-bottom: 10px;
      &:last-child {
        margin-bottom: 0;
      }
      display: flex;
      justify-content: space-between;
      .col {
        flex: 1;
        display: flex;
        align-items: flex-start;
        .label {
          width: 70px;
        }
        .value {
          flex: 1;
        }
      }
    }
  }
  .sub {
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .sub-title {
      margin-top: 10px;
      font-size: 18px;
      font-weight: bold;
    }
  }
  .table {
    padding-bottom: 20px;
    table {
      border-collapse: collapse;
      border: none;
      width: 100%;
      tr {
        td,
        th {
          padding: 5px;
          text-align: center;
          border: solid #dcdee2 1px;
          position: relative;
          font-size: 12px;
        }
        th {
          background-color: #eeeeee;
        }
      }
    }
  }
  .footer {
    padding: 1.5vw 0;
    width: 100%;
    display: flex;
    justify-content: center;
    .btn {
      border: none;
      width: 9vw;
      min-width: 100px;
      height: 2vw;
      min-height: 32px;
      font-size: 0.8vw;
      &:first-child {
        margin-right: 30px;
      }
    }
  }
  .card {
    padding: 10px;
    margin-bottom: 5px;
    background-color: #ffffff;
    border: 1px solid rgba(215, 215, 215, 1);
    border-radius: 5px;
    .row {
      margin-bottom: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .col {
        flex: 1;
      }
    }
    .border {
      border-bottom: 1px solid #5d6c7b;
    }
    .line {
      width: 100%;
      border-bottom: 1px solid #5d6c7b;
      transform: scaleY(0.2);
    }
  }
}

/deep/ .ivu-modal-body {
  padding: 0;
  max-height: 80vh;
  overflow: auto;
}
/deep/ .ivu-modal-content {
  background-color: transparent;
}
</style>
