<template>
  <h-modal
    id="EditExpData"
    :visible="compile"
    closable
    centered
    @cancel="cancel"
    :title="t('ImpExp.common.inquire')"
    style="min-width: 886px"
    :destroyOnClose="true"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
  >
    <h-form
      :model="formState"
      ref="formRef"
      :layout="hFormGlobalConfig.layout"
      :labelCol="hFormGlobalConfig.labelCol"
    >
      <h-row :gutter="30">
        <h-col :span="12">
          <h-form-item
            :label="t('ImpExp.common.Coding')"
            name="coding"
            :rules="[
              { required: true, message: t('ImpExp.common.CodingEmpty'), trigger: 'change' },
            ]"
          >
            <h-input v-model:value="formState.coding" disabled></h-input>
          </h-form-item>
        </h-col>
        <h-col :span="12">
          <h-form-item
            name="designation"
            :label="t('ImpExp.common.Designtion')"
            :rules="[
              { required: true, message: t('ImpExp.common.DesigntionEmpty'), trigger: 'change' },
            ]"
          >
            <h-input
              disabled
              allowClear
              v-model:value="formState.designation"
              :placeholder="t('ImpExp.common.Input')"
            ></h-input>
          </h-form-item>
        </h-col>
        <h-col :span="12">
          <h-form-item
            name="format"
            :label="t('ImpExp.common.Format2')"
            :rules="[
              { required: true, message: t('ImpExp.common.FormatEmpty2'), trigger: 'change' },
            ]"
          >
            <h-select
              :placeholder="t('ImpExp.common.Choice')"
              v-model:value="formState.format"
              @change="handleChange"
              allowClear
              disabled
            >
              <h-select-option value="EXCEL" label="EXCEL">EXCEL</h-select-option>
              <h-select-option value="PDF" label="PDF">PDF</h-select-option>
              <h-select-option value="CUSTOM" :label="t('ImpExp.common.Custom')">
                {{ t('ImpExp.common.Custom') }}
              </h-select-option>
            </h-select>
          </h-form-item>
        </h-col>
        <h-col :span="12">
          <h-form-item
            name="way"
            :label="t('ImpExp.common.way')"
            :rules="[{ required: true, message: t('ImpExp.common.wayEmpty'), trigger: 'change' }]"
          >
            <h-select allowClear @change="handleChange" v-model:value="formState.way" disabled>
              <h-select-option :label="t('ImpExp.common.current')" value="CURRENT_PAGE">
                {{ t('ImpExp.common.current') }}
              </h-select-option>
              <h-select-option :label="t('ImpExp.common.currentSelect')" value="CURRENT_SELECT">
                {{ t('ImpExp.common.currentSelect') }}
              </h-select-option>
              <h-select-option :label="t('ImpExp.common.wholeData')" value="ALL_QUERY">
                {{ t('ImpExp.common.wholeData') }}
              </h-select-option>
            </h-select>
          </h-form-item>
        </h-col>
        <h-col :span="12">
          <h-form-item
            name="maxLine"
            :label="t('ImpExp.common.MaxLine2')"
            :rules="[
              { required: true, message: t('ImpExp.common.MaxLineEmpty2'), trigger: 'change' },
            ]"
          >
            <h-input
              allowClear
              v-model:value="formState.maxLine"
              :placeholder="t('ImpExp.common.Input')"
              type="number"
              disabled
            ></h-input>
          </h-form-item>
        </h-col>
        <h-col :span="12">
          <h-form-item name="state" label="是否启用">
            <h-radio-group
              style="display: flex; margin-top: 5px"
              v-model:value="formState.state"
              disabled
            >
              <h-radio :style="radioStyle" :value="'0'">
                {{ t('ImpExp.common.Deactivate') }}
              </h-radio>
              <h-radio :style="radioStyle" :value="'1'">{{ t('ImpExp.common.Enable') }}</h-radio>
            </h-radio-group>
          </h-form-item>
        </h-col>
        <h-col :span="12">
          <h-form-item
            name="identifying"
            :label="t('ImpExp.common.identifying2')"
            :rules="[
              { required: true, message: t('ImpExp.common.identifyingEmpty2'), trigger: 'change' },
            ]"
            style="margin-bottom: 0"
          >
            <h-upload-dragger
              v-model:fileList="fileList"
              name="file"
              :multiple="false"
              @drop="handleDrop"
              :progress="progress"
              :maxCount="1"
              disabled
            >
              <img src="../Picture/tubiao.svg" alt="" style="margin-bottom: 5px" />
              <p class="ant-upload-text">{{ t('ImpExp.common.DropFile') }}</p>
              <p class="ant-upload-hint">{{ t('ImpExp.common.SupportExtend') }}</p>
            </h-upload-dragger>
            <div class="fileName" v-if="showName">
              <div class="linkName">
                <img src="../Picture/linkIcon.svg" alt="" class="link" />
                {{ diteFileName }}
              </div>
              <img src="../Picture/deleteIcon.svg" alt="" class="del" @click="showName = false" />
            </div>
          </h-form-item>
        </h-col>
        <h-col :span="12">
          <h-form-item
            name="fileRule"
            :label="t('ImpExp.common.EditRule2')"
            class="col"
            :rules="[
              { required: true, message: t('ImpExp.common.EditRuleEmpty2'), trigger: 'change' },
            ]"
          >
            <h-button @click="skip" style="margin-top: 5px" disabled>
              {{ t('ImpExp.common.EditTemplate') }}
            </h-button>
            <x-m-l :compile="compile2" @closeModel="compile2 = false" @textVal="gettextVal"></x-m-l>
          </h-form-item>
        </h-col>
      </h-row>
      <!-- <h-row>
        <h-col :span="24" style="margin: 10px 0 -15px">
          <h-button @click="cancel" style="float: right">关闭</h-button>
        </h-col>
      </h-row> -->
    </h-form>
    <template #footer>
      <h-button type="primary" @click="cancel">关闭</h-button>
    </template>
  </h-modal>
</template>
<script lang="ts">
import { ref, defineComponent, reactive, watch, computed } from 'vue';
import { editDataAPI } from '@/api/platform/ImpExp/Export';

import type { UploadProps } from 'ant-design-vue';
// 导入XML编辑器弹窗
import XML from './XML.vue';
/* import { getInfo, ICP_CONFIG } from '@/utils/commMethods'; */
import { getInfo, ICP_CONFIG } from '@remote/icpx-platform/utils';
import { useI18n } from '@crami/locale';
import { hFormGlobalConfig } from '@/settings/config';
interface FormState {
  coding: string; //配置编码
  designation: string; //配置名称
  format: string; //导出格式
  way: string; //导出方式
  maxLine: string; //最大导出行数
  state: string; //是否启用
  fileRule: string; //导出文件映射规则
  identifying: string; //导出模板文件标识
}

export default defineComponent({
  name: 'EditExpData',
  components: { XML },
  props: ['compile', 'title', 'valInquire'],
  setup(props, options) {
    const { t } = useI18n();
    const confirmLoading = ref<boolean>(false);
    const commonParams = computed(() => {
      return getInfo(ICP_CONFIG);
    });

    const fileList = ref([]);
    // 点击时显示XML编辑器页面
    const compile2 = ref<boolean>(false);
    const skip = () => {
      compile2.value = true;
    };
    // 文件上传完毕后展示进度条
    const progress: UploadProps['progress'] = {
      strokeColor: {
        '0%': '#36a5f5',
        '100%': '#1890ff',
      },
      strokeWidth: 3,
      format: percent => `${parseFloat(percent.toFixed(2))}%`,
      class: 'test',
    };

    const visible = ref<boolean>(false);
    const formRef = ref();

    const cancel = () => {
      // 使用options.emit将关闭方法传给父组件
      options.emit('closeModel', (visible.value = false));
      formState.coding = '';
      formState.designation = '';
      formState.format = 'EXCEL';
      formState.way = 'CURRENT_PAGE';
      formState.maxLine = '65535';
      formState.state = '1';
      formState.fileRule = '';
      formState.identifying = '';
      localStorage.setItem('textVal', '');
      fileList.value = [];
      showName.value = false;
    };
    // 按钮样式相关
    const radioStyle = reactive({
      display: 'flex',
      height: '30px',
      lineHeight: '30px',
    });

    const handleChange = (value: string) => {
      console.log(`selected ${value}`); //下拉框的值发生变化时触发
    };

    // 表单元素的值
    const formState = reactive<FormState>({
      coding: '',
      designation: '',
      format: 'EXCEL',
      way: 'CURRENT_PAGE',
      maxLine: '65535',
      state: '1',
      fileRule: '',
      identifying: '',
    });
    const gettextVal = data => {
      formState.fileRule = data;
    };

    const diteFileName = ref();
    const showName = ref<boolean>(false);
    watch(
      () => props.valInquire,
      () => {
        formState.coding = props.valInquire.ECODE;
        formState.designation = props.valInquire.ENAME;
        formState.format = props.valInquire.FILETYPE;
        formState.way = props.valInquire.EXPORTTYPE;
        formState.maxLine = props.valInquire.MAXCOUNT;
        formState.state = props.valInquire.STATE;
        formState.fileRule = props.valInquire.SETTING;
        formState.identifying = props.valInquire.TEMPLATE;
        localStorage.setItem('textVal', props.valInquire.SETTING);

        editDataAPI({
          companyId: commonParams.value.companyId,
          connect: commonParams.value.connect,
          lang: commonParams.value.lang,
          objectID: props.valInquire.TEMPLATE,
        }).then(res => {
          // console.log(res);
          if (res.code == 200) {
            showName.value = true;
            diteFileName.value = res.data.data.FILE_SHOW_NAME;
          }
        });
      },
      { deep: true },
    );

    return {
      t,
      confirmLoading,
      diteFileName,
      showName,
      props,
      fileList,
      headers: {
        authorization: 'authorization-text',
      },

      skip,
      compile2,
      gettextVal,
      progress,

      handleDrop: (e: DragEvent) => {
        console.log(e);
      },

      visible,
      cancel,

      formState,
      handleChange,

      radioStyle,
      formRef,
      hFormGlobalConfig,
    };
  },
});
</script>
<style lang="less" scoped>
.title_class {
  display: inline-flex;
  width: calc(100% - 100);
}
:deep(.ant-form-item-label) {
  display: block;
  width: 100%;
  text-align: left;
}
.fileName {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  .linkName {
    display: flex;
    align-items: center;
    .link {
      width: 25px;
      height: 12px;
    }
  }
  &:hover {
    .del {
      display: block;
    }
  }
}
.del {
  width: 12px;
  height: 12px;
  cursor: pointer;
  color: #ccc;
  display: none;
}
</style>
