<template>
  <SysDialog
    class="feenotice-show"
    :visible="dialog.visible"
    v-bind="getBindValue"
    @onClose="onclose"
    @onConfirm="onconfirm"
  >
    <template #content>
      <div class="version">
        结算价版本:
        <el-select
          v-model="feeNoticeShowState.versionValue"
          @change="changeFeeNotice"
          :filterable="true"
          class="select-feenotice"
        >
          <el-option
            v-for="item in feeNoticeShowState.versionList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="feenotice-info">
        <el-descriptions :column="5" border>
          <el-descriptions-item
            v-for="item in feeNoticeShowState.infoDto"
            :key="item.field"
            :label="item.title"
            :min-width="100"
          >
            {{ fristCustomerFeeSetCompare[item.field] || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- <div class="feenotice-info flex">
        <span
          class="span-info"
          v-for="item in feeNoticeShowState.infoDto"
          :key="item.field"
        >
          {{ item.title }}：{{ fristCustomerFeeSetCompare[item.field] }}
        </span>
      </div> -->
      <!-- 终止信息列表 -->
      <VxeBasicTable v-bind="abnormalGridOptions" />
      <!-- 异常信息列表 -->
      <div class="pd-one">
        <VxeBasicTable v-bind="customerFeeGridOptionsOne" />
      </div>
      <!-- 异常信息列表 -->
      <div v-show="isFeeSetCompareList">
        <VxeBasicTable
          v-bind="customerFeeGridOptionsTwo"
          ref="xCustomerFeeGridTableRef"
        >
          <!-- 动态分区表头显示 -->
          <template
            v-for="(item, index) in columnsDynamicMeterHead"
            :key="`customerfee-table-${index}`"
            #[item.prop]="{ row }"
          >
            <div v-if="row[item.prop]">
              价格差异：({{ row[item.prop].priceVariance || "-" }}) <br />
              结算价：({{ row[item.prop].organizationOfferPrice || "-" }})
              <br />
              折扣标准：({{ row[item.prop].discount || "-" }}) <br />
              客户价：({{ row[item.prop].offerPrice || "-" }}) <br />
              提示信息：
              <div class="single-line message">
                {{ row[item.prop].message || "-" }}
              </div>
            </div>
          </template>
        </VxeBasicTable>
      </div>
    </template>
    <template #defineFooter>
      <div class="customer-feeSet-footer">
        <el-button
          :type="isAbnormal && isEdit ? 'danger' : ''"
          @click="onclose"
        >
          {{ isAbnormal && isEdit ? "取消" : "关闭" }}
        </el-button>
        <template v-if="isEdit">
          <el-button
            v-show="isApprovalAndAbnormal"
            color="#0170D8"
            :loading="dialog.confirmLoading"
            @click="onapply"
          >
            申请审批
          </el-button>
          <el-button
            v-show="isAbnormal"
            type="primary"
            @click="onconfirm"
            :loading="dialog.confirmLoading"
          >
            激活
          </el-button>
        </template>
      </div>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import type { PartialCustomerFeeSetCompareDto } from "@/api/customerfee/CustomerFeeSetModel";
import SysDialog from "@/components/SysDialog.vue";
import { useFeeNoticeShow } from "@/composables/business/useFeeNoticeShow";
import useDialog from "@/hooks/useDialog";
import { VxeBasicTable } from "@/components/VxeTable/index";
import { reactive } from "vue";

interface Props {
  /**
   * 费用提示信息列表
   */
  customerFeeSetCompareList: PartialCustomerFeeSetCompareDto[];
  /**
   * 是否为编辑状态
   */
  isEdit?: boolean;
}

// withDefaults ==> 用于辅助defineProps设置默认值
const props = withDefaults(defineProps<Props>(), {
  isEdit: true,
});
const emit = defineEmits(["onConfirm", "onApply"]);
//弹框属性
const { dialog, onClose, onShow, setLoading } = useDialog();
// 弹框一些配置
const getBindValue = reactive({
  title: "客户费用异常提示",
  top: "0vh",
  width: 1420,
  height: 0,
  overflowHidden: true,
  isFooter: true,
  fullscreen: true
});

const {
  show,
  onclose,
  onconfirm,
  onapply,
  feeNoticeShowState,
  fristCustomerFeeSetCompare,
  xCustomerFeeGridTableRef,
  abnormalGridOptions,
  customerFeeGridOptionsOne,
  customerFeeGridOptionsTwo,
  columnsDynamicMeterHead,
  isFeeSetCompareList,
  isAbnormal,
  isApprovalAndAbnormal,
  changeFeeNotice
} = useFeeNoticeShow(onClose, onShow, setLoading, props, emit);

//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>
<style lang="scss">
.feenotice-show {
  position: relative;
  height: 100vh;
  margin-bottom: 0 !important;
  overflow-y: auto;
  .select-feenotice {
    width: 520px;
  }
  .version {
    padding-bottom: 10px;
  }
  .feenotice-info {
    line-height: 38px;
    padding-bottom: 25px;
    > .span-info {
      padding-right: 22px;
      &:last-child {
        padding-right: 0;
      }
    }
  }

  .pd-one {
    padding: 25px 0;
  }

  .message {
    width: 100px;
  }
  .el-dialog__footer {
    position: sticky;
    bottom: 0;
    background-color: #fff;
    z-index: 99;
  }
}
</style>
