<template>
  <div>
    <el-form label-position="right" label-width="110px" v-loading="loading" :disabled="true">
      <el-form-item label="公司名称：">
        <el-select v-model="itemInfo.company_id" placeholder="请选择" clearable filterable style="width: 320px;">
          <el-option v-for="it in companyList" :key="it.id" :label="it.name" :value="it.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="选品：">
        <el-select v-model="itemInfo.manager_id" placeholder="请选择" clearable filterable style="width: 320px;">
          <el-option v-for="it in managerList" :key="it.id" :label="it.username" :value="it.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="供应商名称：">
        <el-select v-model="itemInfo.purchase_supplier_id" placeholder="请选择" clearable filterable style="width: 320px;">
          <el-option v-for="it in supplierList" :key="it.id" :label="it.supplier_name" :value="it.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品信息：">
        <el-table :data="goodsList" style="width: 100%;margin-top: 15px;" border>
          <el-table-column prop="goods.title" label="商品名称" />
          <el-table-column label="规格名称">
            <template #default="scope">
              <span>{{ scope.row.sku && scope.row.sku.title || scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="预计产品单价（含税）" align="center" prop="expect_unit_price" />
          <el-table-column label="实际产品单价（含税）" align="center" prop="real_unit_price" />
          <el-table-column label="单位" align="center" prop="unit" />
          <el-table-column label="预计采购数量" align="center" prop="expect_quantity" />
          <el-table-column label="实际采购数量" prop="real_quantity" align="center" />
          <el-table-column label="预付款比例(%)" align="center">
            <template #default="scope">
              <span>{{ scope.row.prepayment_ratio }}%</span>
            </template>
          </el-table-column>
          <el-table-column label="交货时间" width="160" align="center" prop="delivery_date" />
          <el-table-column label="预计订单金额(元)" align="center" prop="estimated_order_amount" />
          <el-table-column label="实际订单金额" prop="real_amount" align="center" />
          <el-table-column label="预付款(元)" align="center" prop="advance_payment" />
          <el-table-column label="尾款(元)" align="center" prop="balance_payment" />
        </el-table>
      </el-form-item>

      <el-form-item label="其他费用：">
        <el-table :data="feesList" style="width: 100%;margin-top: 15px;" border>
          <el-table-column label="费用名称" >
            <template #default="scope">
              <span class="iconfont icon-bohui" v-if="scope.row.has_paid_amount * 1 == 0"></span>
              <span>{{ scope.row.fee_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单金额" prop="amount" />
          <el-table-column label="打款信息">
            <template #default="scope">
              <el-select v-model="scope.row.other_expense_account_id" placeholder="请选择" clearable filterable>
                <el-option v-for="it in accountList" :key="it.id" :label="it.name" :value="it.id" />
              </el-select>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="备注：">
        <span>{{ itemInfo.remark }}</span>
      </el-form-item>
      <el-form-item label="逾期交货说明：">
        <span>{{ itemInfo.late_delivery_explanation }}</span>
      </el-form-item>
      <el-form-item label="总计：">
        <div class="sumbox">
          总预计订单金额（元）：<span>{{ sumData.total_amount || '0.00' }}</span>，
          总预付款（元）：<span>{{ sumData.pre_pay_amount || '0.00' }}</span>，
          总尾款（元）：<span>{{ sumData.balance_amount || '0.00' }}</span>
        </div>
      </el-form-item>
      <div class="h5Tit">其余信息</div>
      <el-form-item label="开团时间：">
        <span>{{ itemInfo.sold_start_time }}</span>
      </el-form-item>
      <el-form-item label="预计到仓时间：">
        <span>{{ itemInfo.arrived_time }}</span>
      </el-form-item>
      <el-form-item label="仓库：">
        <span>{{ itemInfo.warehouse_name }}</span>
      </el-form-item>
    </el-form>
    <div v-if="itemInfo.approval_instances && itemInfo.approval_instances.length">
      <div v-for="it in itemInfo.approval_instances" :key="it.id">
        <div v-if="(it.payment_voucher && it.payment_voucher.length) || (it.related_images && it.related_images.length)">
          <h4>{{it.type == 1 ? '采购订单' : it.type == 2 ? '预付款打款' : '尾款打款'}}</h4>
          <el-form label-position="right" label-width="110px">
            <div v-if="it.amount * 1 > 0" style="padding-bottom: 10px;">申请打款金额：{{it.amount}}元</div>
            <el-form-item label="支付凭证：" v-if="it.payment_voucher && it.payment_voucher.length">
              <div class="imgBox">
                <el-image :z-index="9999" v-for="(itm, j) in it.payment_voucher" :key="j" :src="itm" :hide-on-click-modal="true" :preview-src-list="[itm]" fit="cover" :preview-teleported="true" />
              </div>
            </el-form-item>
            <el-form-item label="合同照片：" v-if="it.related_images && it.related_images.length">
              <div class="imgBox">
                <el-image :z-index="9999" v-for="(itm, j) in it.related_images" :key="j" :src="itm" :hide-on-click-modal="true" :preview-src-list="[itm]" fit="cover" :preview-teleported="true" />
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="space"></div>
  </div>
</template>

<script>
import { Plus, Search } from "@element-plus/icons"
import { reactive, toRefs, watch } from 'vue'
import { get } from '@/api/request'

export default {
  components: { Plus, Search },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: 0,
    }
  },
  setup(props, context) {
    const data = reactive({
      launchId: 0,
      companyList: [],
      managerList: [],
      supplierList: [],
      accountList: [],
      loading: false,
      goodsList: [],
      itemInfo: {},
      feesList: [],
      sumData: {}
    })

    function getDetail() {
      data.loading = true
      get(`/api/purchaseOrder/${props.id}`).then((res) => {
        data.itemInfo = res.data
        data.feesList = res.data.other_expenses
        let num1 = 0, num2 = 0
        res.data.products.forEach((item) => {
          if(item.expect_unit_price && item.expect_quantity) {
            item.estimated_order_amount = (item.expect_unit_price * item.expect_quantity).toFixed(2)
            if(item.prepayment_ratio) {
              item.advance_payment = ((item.estimated_order_amount * item.prepayment_ratio) / 100).toFixed(2)
              item.balance_payment = (((item.estimated_order_amount * 100) - (item.advance_payment * 100)) / 100).toFixed(2)
            }
            num1 += item.expect_unit_price * item.expect_quantity
            if(item.prepayment_ratio) {
              num2 += num1 * item.prepayment_ratio
            }
          }
        })
        data.sumData.total_amount = num1.toFixed(2)
        data.sumData.pre_pay_amount = (num2 / 100).toFixed(2)
        data.sumData.balance_amount = (((data.sumData.total_amount * 100) - (data.sumData.pre_pay_amount * 100)) / 100).toFixed(2)
        data.goodsList = res.data.products
        data.loading = false
      }).catch(() => {
        data.loading = false
      })
    }

    function getCompany() {
      get(`/api/company/all`, {page: 1, pageSize: 1000}).then((res) => {
        data.companyList = res.data
      })
    }

    function getManagerList() {
      get('/api/staff', {role_id: 1}).then((res) => {
        data.managerList = res.data
      })
    }

    function getSupplier() {
      get(`/api/purchaseSupplier`, {page: 1, pageSize: 1000}).then((res) => {
        data.supplierList = res.data
      })
    }

    function getAccount() {
      get(`/api/otherExpenseAccount`, {page: 1, pageSize: 1000}).then((res) => {
        data.accountList = res.data
      })
    }

    watch(() => props, (newProps) => {
      if (newProps.show) {
        getDetail()
        getCompany()
        getManagerList()
        getSupplier()
        getAccount()
      }
    }, { deep: true, immediate: true })

    return {
      ...toRefs(data),
      getCompany,
      getManagerList,
      getSupplier,
      getDetail,
      getAccount
    }
  }
}
</script>

<style scoped lang="scss">
  .space{
    background: repeating-linear-gradient(-45deg, #F56C6C 0, #F56C6C 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
    height: 2px;
    background-size: 80px;
    margin-bottom: 20px;
  }
  .icon-bohui{
    color: #f00;
    margin-right: 5px;
    font-size: 20px;
    vertical-align: bottom;
  }
  .imgBox{
    display: flex;
    flex-wrap: wrap;
    .el-image{
      width: 60px;
      height: 60px;
      border-radius: 4px;
      margin-right: 10px;
    }
  }
</style>