<!--
 * @Description: 详情弹框
 * @Author: Sugar.
 * @Date: 2023-11-24 13:55:00
 * @LastEditors: gcz
 * @LastEditTime: 2024-03-18 11:01:58
 * @FilePath: \great_webui\src\views\finance\InvoiceRecords\dialog\details.vue
 * @Copyright: Copyright (c) 2016~2023 by Sugar., All Rights Reserved.
-->
<template>
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="300"
      append-to-body
      :close-on-click-modal="false"
      @close="cancel"
    >
        <div class="dialog" style="padding: 0;display: flex;flex-direction: column;">
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
                <el-form-item label="订单号" label-width="70px">
                    <el-input
                        v-model="queryParams.orderId"
                        placeholder="请输入订单号"
                        clearable
                        style="width: 240px;"
                        @keyup.enter.native="queryOrderIdFunApi"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="queryOrderIdFunApi">搜索</el-button>
                </el-form-item>
            </el-form>
            <el-table ref="tables" v-loading="tabLoading" :data="dataList" border>
                <el-table-column width="50" align="center">
                    <template slot-scope="scope">
                        <el-radio v-model="orderId" :label="scope.row.id">{{''}}</el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="订单号" align="center" prop="id" />
            </el-table>
        </div>
      <span slot="footer" class="dialog-footer" >
        <el-button @click="cancel()"><span>关闭</span></el-button>
        <el-button
        type="primary"
        @click="submitForm"
        v-loading.fullscreen.lock="loading"
        element-loading-text="提交中..."
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        :disabled="!orderId"
      >
        <span v-if="loading">提交中...</span>
        <span v-else>保存</span>
      </el-button>
      </span>
  
    </el-dialog>
  </template>
  
  <script>
  import { queryOrderIdFun,bindOrderIdApi } from '@/api/financeMr/InvoiceRecords'
  export default {
    name: "detailsDia",
    dicts: ['Invoicing_type','lookup_type'],
    data() {
      return {
        title: "编辑",
        model: "EDIT",
        open: false,
        loading: false,
        performerVisible: false,
        performerList: [],
        refund: false,
        tabLoading: false,
        dataList: [],
        queryParams: {},
        total: 0,
        orderId: null,
        id: null,
      };
    },
    methods: {
      /**
       * 打开弹框
       * @date 2023-11-22
       * @param {any} obj
       * @returns {any}
       */
      openDialog(title, obj, type) {
        this.title = title
        this.open = true;
        this.id = obj.id
        this.orderId = null
        this.queryParams = {}
        this.queryOrderIdFunApi(obj);
      },
      /** 获取详情 */
      queryOrderIdFunApi(row) {
      this.orderId = null
      this.tabLoading = true
        queryOrderIdFun({...this.queryParams}).then(response => {
            if(response.code == 200) {
                let list = response.data
                let listCopy = []
                list.forEach(item => {
                    listCopy.push({
                        id: item
                    })
                });
                this.dataList = listCopy
            }
          this.tabLoading = false
        }).catch(()=>{
            this.tabLoading = false
        })
      },
      /**
       * 关闭弹框
       * @date 2023-11-22
       * @returns {any}
       */
      cancel() {
        this.open = false;
      },
      resetQuery() {
        this.queryParams.orderId = null
        this.queryOrderIdFunApi()
      },
      /**
     * 保存
     * @date 2023-11-22
     * @returns {any}
     */
    async submitForm() {
        try {
            this.loading = true;
            const { code } = await bindOrderIdApi({ 
                id: this.id,
                orderId: this.orderId 
            });
            if (code === 200) {
              this.$message.success("操作成功!");
              this.$emit("getList");
              this.cancel();
            }
          } catch (error) {
          } finally {
            this.loading = false;
          }
    },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  .dialog {
    width: 100%;
    padding: 0 30px;
    height: 60vh;
    overflow-y: auto;
  }
  .dialog {
    padding: 0 30px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    >div:first-child {
      width: 400px;
      padding-right: 20px;
      box-sizing: border-box;
    }
    >div:last-child {
      width: calc( 100% - 400px );
      iframe {
        width: 100%;
        height: 100%;
      }
    }
    .upload-btn {
      width: 100px;
      height: 100px;
      background-color: #fbfdff;
      border: dashed 1px #c0ccda;
      border-radius: 5px;
      i {
        font-size: 30px;
        margin-top: 20px;
      }
      &-text {
        margin-top: -10px;
      }
    }
    .avatar {
      cursor: pointer;
    }
    .title-class{
      font-size: 16px;
      font-weight: bold;
      color: black;
      margin-bottom: 20px;
      margin-top: 20px;
    }
    .item-class{
      margin-bottom: 20px;
    }
  }
  </style>
  