<template>
  <el-dialog
    v-loading="loading"
    :title="title"
    :center="true"
    align="left"
    top="10vh"
    width="1040px"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    @close="closeModel"
  >
    <el-card style="margin-top: -15px; height: 685px">
      <stepBar
        :id="modelId"
        :payNo="payNo"
        @refresh="searchList"
        :dstatus="dstatus"
      ></stepBar>
      <el-collapse v-model="activeNames" accordion>
        <el-collapse-item title="对账详情" name="1">
          <add-view
            :id="id"
            :isDetail="isDetail"
            :newTime="newTime"
            :companyNo="companyNo"
            :payNo="payNo"
            @refreshAll="refreshAll"
          ></add-view>
        </el-collapse-item>
        <el-collapse-item title="付款回执" name="3">
          <receipt
            :id="id"
            :newTime="newTime"
            :dstatus="dstatus"
            :payNo="payNo"
            @refreshAll="refreshAll"
          ></receipt>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </el-dialog>
</template>
<script>
import addView from "@/views/purchase/orderRecord/components/addView";
import stepBar from "@/views/purchase/orderRecord/components/payStepBar";
import receipt from "@/views/purchase/orderRecord/components/receipt";

export default {
  name: "orderRecord",
  props: ["showModel", "id", "isDetail", "dstatus", "payNo", "companyNo"],
  components: {
    addView,
    stepBar,
    receipt,
  },
  data() {
    return {
      activeNames: "3",
      newTime: 0,
      activeName: "-1",
      showView: true,

      loading: false,
      title: "付款回执",
      showModelThis: this.showModel,
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  methods: {
    closeModel() {
      console.log("closeModel!!");
    },
    refreshAll() {
      this.showModelThis = false;
      this.$emit("refresh");
    },
    async initForm() {
      console.log(this.id);
      // this.active = this.dstatusOptions.findIndex((v) => v.id === this.dstatus);
      this.changea();
    },
    changea() {
      this.newTime = new Date().valueOf();
    },
  },
};
</script>

   <style lang="scss" scoped>
.orderRecord {
  .setWidth {
    width: 100% !important;
    // display: flex;
    // display: block !important;
    // .el-input__inner {
    //   display: flex;
    //   width: 1000px !important;
    //   display: block !important;
    // }
  }
}
</style>
