<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <el-dialog
    v-model="visible"
    :title="$t('order.order.process')"
    :close-on-click-modal="false"
    width="38%"
    class="components-purchase-order-approve-payment"
  >
    <el-form
      ref="dataFormRef"
      :model="dataForm"
      label-width="68px"
      @submit.prevent
    >
      <el-form-item
        v-if="voucherFlag === 0"
        :label="$t('order.order.voucher')"
        prop="voucherImgUrls"
      >
        <div
          v-for="(item,index) in voucherImgUrls"
          :key="index"
          class="com-elImages"
        >
          <el-image
            fit="contain"
            style="width: 100%; height: 100%;"
            :src="addDomain(item)"
          >
            <template #error>
              <img
                class="img-slot"
                src="~@/assets/images/def.png"
                alt=""
              >
            </template>
          </el-image>
          <div
            class="preview-btn"
            @click="onShowPic(item)"
          >
            预览
          </div>
        </div>
      </el-form-item>
      <el-form-item
        :label="$t('order.order.process')"
        prop="voucherImgUrls"
      >
        <el-radio-group v-model="dataForm.status">
          <el-radio :label="1">
            {{ voucherFlag === 0 ? $t('order.order.adopt') : $t('order.order.offlineSettlement') }}
          </el-radio>
          <el-radio :label="0">
            {{ voucherFlag === 0 ? $t('order.order.noAdopt') : $t('order.order.notSettledOffline') }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button
          plain
          @click="visible = false"
        >
          {{ $t("table.cancel") }}
        </el-button>
        <el-button
          type="primary"
          @click="onSubmit"
        >
          {{ $t("table.confirm") }}
        </el-button>
      </div>
    </template>

    <el-dialog
      v-model="picVisible"
      title="图片"
      width="50%"
      append-to-body
    >
      <el-image
        fit="contain"
        style="width: 100%;"
        :src="addDomain(showPicUrl)"
      >
        <template #error>
          <img
            class="img-slot"
            src="~@/assets/images/def.png"
            alt=""
          >
        </template>
      </el-image>
    </el-dialog>
  </el-dialog>
</template>

<script setup>
import * as api from '@/api/order/purchase-order'
import { ElMessage } from 'element-plus'

const emit = defineEmits([
  'refreshDataList'
])

const dataForm = reactive({
  purchaseOrderId: 0,
  voucherImgUrls: '',
  status: 1
})
const voucherImgUrls = reactive([])

// 初始化
const visible = ref(false)
const voucherFlag = ref(0)
const init = (id) => {
  visible.value = true
  dataForm.purchaseOrderId = id || 0
  voucherFlag.value = 0
  voucherImgUrls.length = 0
  onGetDataList()
}

// 获取数据
const onGetDataList = () => {
  api.orderInfo(dataForm.purchaseOrderId).then((data) => {
    onHandleDataList(data)
    if (dataForm.voucherImgUrls === 1 || dataForm.voucherImgUrls === '1') {
      voucherFlag.value = 1
    } else {
      voucherImgUrls.length = 0
      const voucherImgUrlsArr = data.voucherImgUrls ? data.voucherImgUrls.split(',') : []
      voucherImgUrls.push(...voucherImgUrlsArr)
    }
    dataForm.status = 1
  })
}

// 数据赋值
const onHandleDataList = (data) => {
  dataForm.status = data.status
  dataForm.purchaseOrderId = data.purchaseOrderId
  dataForm.voucherImgUrls = data.voucherImgUrls
}

// 提交
const isSubmit = ref(false)
const onSubmit = () => {
  if (isSubmit.value) {
    return
  }
  isSubmit.value = true
  api.auditVoucher(dataForm).then(() => {
    ElMessage({
      message: $t('table.actionSuccess'),
      type: 'success',
      duration: 1500
    })
    visible.value = false
    emit('refreshDataList')
  }).finally(() => {
    isSubmit.value = false
  })
}

const picVisible = ref(false)
const showPicUrl = ref('')
const onShowPic = (val) => {
  showPicUrl.value = val
  picVisible.value = true
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.com-elImages {
  width: 98px;
  height: 98px;
  margin: 5px;
  border: 1px solid gainsboro;
  float: left;
  .preview-btn {
    width: 100%;
    height: 20px;
    line-height: 20px;
    text-align: center;
    position: relative;
    bottom: 30px;
    display: none;
  }
  &:hover {
    .preview-btn {
      width: 100%;
      display: block;
      background: rgba(61, 61, 61, 0.5);
      color: white;
      &:hover {
        cursor: pointer;
      }
    }
  }
}
</style>
