<!-- 
  账单录入
 -->
<template>
  <SysDialog
    class="financial-bill-set"
    :visible="dialog.visible"
    v-bind="getBindValue"
    :title="dialog.title"
    @onClose="onclose"
    @onConfirm="confirm"
  >
    <template #content>
      <el-divider content-position="left">
        <span class="title"> 账单录入: </span>
      </el-divider>
      <el-form
        ref="financialBillSetFormRef"
        :model="financialBillSetForm"
        :rules="financialBillSetState.rulesFinancialBillSet"
        label-width="90px"
        inline
      >
        <el-row>
          <el-col :span="12">
            <el-form-item
              prop="stakeholder"
              label="所属主体:"
              :style="setFormItemWidth"
            >
              <BaseSelect
                v-model:modelValue="financialBillSetForm.stakeholder"
                :filterable="false"
                clearable
                class="w-100"
                :options="companyEntityTypeList"
                placeholder="所属主体"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="billCode"
              label="账单编号:"
              :style="setFormItemWidth"
            >
              <el-input
                v-model="financialBillSetForm.billCode"
                clearable
                placeholder="账单编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="billName"
              label="账单名称:"
              :style="setFormItemWidth"
            >
              <el-input
                v-model="financialBillSetForm.billName"
                clearable
                placeholder="账单名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="providerId"
              label="渠道商:"
              :style="setFormItemWidth"
            >
              <BaseSelectV2
                v-model:modelValue="financialBillSetForm.providerId"
                clearable
                :options="allProvidersList"
                popper-class="salesmanId-w"
                class="w-100"
                :height="272"
                placeholder="渠道商"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item
              prop="feeItemCategoryId"
              label="费项类型:"
              :style="setFormItemWidth"
            >
              <BaseSelect
                v-model:modelValue="financialBillSetForm.feeItemCategoryId"
                :filterable="false"
                clearable
                :options="feeItemCategoryList"
                class="w-100"
                placeholder="费项类型"
              />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item
              prop="billTime"
              label="账单时间:"
              :style="setFormItemWidth"
            >
              <el-date-picker
                v-model="financialBillSetForm.billTime"
                type="date"
                placeholder="账单时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              prop="belongTime"
              label="归账时间:"
              :style="setFormItemWidth"
            >
              <el-date-picker
                v-model="financialBillSetForm.belongTime"
                type="date"
                placeholder="归账时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" v-permission="['sys:financialBillSummary:uploadFile']">
            <el-form-item
              prop="originalFile"
              label="原始文件:"
              :style="setFormItemWidth"
            >
              <el-upload
                ref="originalFileRef"
                class="w-100 upload"
                :show-file-list="false"
                :multiple="false"
                :limit="1"
                :auto-upload="false"
                :on-change="hanleOriginalFile"
              >
                <template #trigger>
                  <el-button
                    type="primary"
                    :icon="Upload"
                    plain
                    class="w-100 upload-btn"
                    :title="getOriginalFile"
                    >
                    {{ getOriginalFile }}
                    <el-icon 
                      class="close" 
                      v-show="financialBillSetForm.originalFile"
                      @click.stop="closeUpload"
                    >
                      <CircleClose />
                    </el-icon>
                  </el-button>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-permission="['sys:financialBillSummary:uploadFile']">
            <el-form-item
              prop="uploadFile"
              label="文件上传:"
              :style="setFormItemWidth"
            >
              <el-upload
                ref="uploadFileRef"
                class="w-100 upload"
                :show-file-list="false"
                :multiple="false"
                :limit="1"
                :auto-upload="false"
                :on-change="hanleUploadFile"
                accept=".xlsx"
              >
                <template #trigger>
                  <el-button
                    type="primary"
                    :icon="Upload"
                    plain
                    class="w-100"
                    :title="getUploadFile"
                    >{{ getUploadFile }}</el-button
                  >
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </template>
    <template #defineFooter>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="templateDownload"
          :loading="templateLoading"
          link
          >模板下载</el-button
        >
        <el-button type="success" @click="confirm">保存</el-button>
        <el-button type="danger" @click="onclose">取消</el-button>
      </span>
    </template>
  </SysDialog>
</template>
<script lang="ts" setup>
import SysDialog from "@/components/SysDialog.vue";
import useDialog from "@/hooks/useDialog";
import BaseSelect from "@/components/QuerySelect/BaseSelect.vue";
import BaseSelectV2 from "@/components/QuerySelect/BaseSelectV2.vue";
import { Upload, CircleClose } from "@element-plus/icons-vue";
import { reactive } from "vue";
import { useFinancialBillSet } from "@/composables/financial/financialBillList/useFinancialBillSet";
import { PartialFinancialBillSummaryDto } from "@/api/financial/financialBillList/financialBillListModel";

const emit = defineEmits<{
  (e: "saveConfirm", params: PartialFinancialBillSummaryDto, onclose: Fn): void;
}>();
// 弹框一些配置
const getBindValue = reactive({
  title: "新增账单录入",
  width: 680,
  height: 0,
  isFooter: true,
  closeOnClickModal: false,
});
//弹框属性
const { dialog, onClose, onShow } = useDialog();
const {
  financialBillSetForm,
  financialBillSetState,
  financialBillSetFormRef,
  uploadFileRef,
  originalFileRef,
  setFormItemWidth,
  show,
  onclose,
  confirm,
  closeUpload,
  templateDownload,
  templateLoading,
  hanleUploadFile,
  hanleOriginalFile,
  getUploadFile,
  getOriginalFile,
  companyEntityTypeList,
  allProvidersList,
} = useFinancialBillSet(dialog, onClose, onShow, emit);
//父组件调用子组件显示弹框
//暴露出去给外部使用
defineExpose({
  show,
});
</script>
<style lang="scss" scoped>
.financial-bill-set {
  .title {
    font-weight: bold;
  }
  .w-100 {
    width: 100%;
    &.upload {
      :deep(span) {
        display: block;
        width: 80%;
        /* 禁止换行 */
        white-space: nowrap;
        /* 超出部分隐藏 */
        overflow: hidden;
        /* 显示省略号 */
        text-overflow: ellipsis;
      }
    }

    :deep(.el-upload) {
      width: 100%;
    }

    &.upload-btn {
      position: relative;
      .close {
        position: absolute;
        display: none;
        top: 25%;
        right: 9px;
        font-weight: bold;
        color: #C0C4CC;
        z-index: 99;
      }

      &:hover {
        .close {
          display: block;
        }
      }
    }
  }
}
</style>
