<template>
  <div class="w-full h-full bg-white p-4">
    <p class="font-bold text-lg leading-10 border-b-2">变量转换</p>
    <el-form class="pt-4" :inline="true" :model="queryParams">
      <!-- <el-form-item label="文件名称">
          <el-input v-model="queryParams.excelOrderId" placeholder="" clearable />
        </el-form-item> -->
      <el-form-item label="订单状态">
        <el-select v-model="queryParams.status" placeholder="" clearable>
          <template v-for="item in statusOptions">
            <el-option :value="item.value" :label="item.label"></el-option>
          </template>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="default" @click="onReset">重置</el-button>
        <el-button type="primary" @click="onQuery">查询</el-button>
      </el-form-item>
    </el-form>

    <div class="">
      <vxe-table
        ref="xTable"
        size="small"
        min-height="460"
        show-overflow="tooltip"
        border
        :loading="loading"
        :data="tableData"
      >
        <vxe-column type="checkbox" width="50"></vxe-column>
        <vxe-column
          field="customerId_dictText"
          title="客户"
          width="300"
        ></vxe-column>
        <vxe-column
          field="productCode_dictText"
          title="产品"
          width="300"
        ></vxe-column>
        <vxe-column
          field="status_dictText"
          title="订单状态"
          width="120"
        ></vxe-column>
        <vxe-column field="createTime" title="创建时间"></vxe-column>
        <vxe-column field="action" title="操作" width="200">
          <template #default="{ row }">
            <el-link
              style="font-size: 12px"
              type="primary"
              @click="toDetail(row)"
              >查看</el-link
            >
            <el-link
              class="ml-1"
              style="font-size: 12px"
              type="primary"
              @click="confirmChange(row)"
              >转换</el-link
            >
            <el-link
              class="ml-1"
              style="font-size: 12px"
              type="primary"
              @click="showDetail(row,'old')"
              >转换前</el-link
            >
            <el-link
              class="ml-1"
              style="font-size: 12px"
              type="primary"
              @click="showDetail(row, 'new')"
              >转换后</el-link
            >
          </template>
        </vxe-column>
      </vxe-table>

      <vxe-pager
        size="small"
        background
        v-model:current-page="queryParams.currentPage"
        v-model:page-size="queryParams.pageSize"
        :total="queryParams.total"
        @page-change="onQuery"
        :layouts="[
          'PrevPage',
          'JumpNumber',
          'NextPage',
          'Sizes',
          'FullJump',
          'Total',
        ]"
      >
      </vxe-pager>
    </div>
  </div>

  <vxe-modal
    v-model="detailVisible"
    title="解析详情"
    width="80%"
    show-footer
    @hide="detailHide"
  >
    <vxe-table
      border
      size="mini"
      height="500"
      show-overflow="tooltip"
      show-header-overflow="tooltip"
      :data="detailTable"
    >
      <vxe-column title="行号" width="120" key="行号">
        <template #default="{ row }">{{ row.sortNum }}</template>
      </vxe-column>
      <vxe-column title="sheet页" width="120" key="sheet页">
        <template #default="{ row }">{{ row["sheet页"] }}</template>
      </vxe-column>
      <vxe-column title="数据区" width="120" key="数据区">
        <template #default="{ row }">{{ row["数据区"] }}</template>
      </vxe-column>

      <!-- 查看状态下直接显示 -->
      <!-- <template v-if="currentRow.status == 'un_confirm'">
        <vxe-column
          v-for="item in tableTitle"
          :key="item"
          :title="item"
          :field="item"
          width="200"
        />
      </template> -->

      <!-- 转换下使用 -->
      <template>
        <vxe-colgroup v-for="item in tableTitle" :key="item" :title="item">
          <vxe-column :title="item" :field="item" width="200" :key="item">
            <template #header>
              <div class="header-cell" @click="(e) => showPopover(e, item)">
                <template v-for="cf in getAllMapConfigs[item].filedConfs">
                  <span>{{ cf.orderFiled.fliedTitle }}</span>
                </template>
                <!-- <span>{{ allMapConfigs[item]?.orderFiled.fliedTitle || '' }}</span> -->
                <el-icon><Setting /></el-icon>
              </div>
            </template>
          </vxe-column>
        </vxe-colgroup>
      </template>
    </vxe-table>

    <el-popover
      ref="popoverRef"
      placement="bottom"
      :virtual-ref="buttonRef"
      trigger="click"
      :title="currentConfigTitle"
      :visible="popoverVisible"
      virtual-triggering
      width="400"
      transition=""
    >
      <ConfigForm
        :title="currentConfigTitle"
        :current-conf="currentColConf"
        :current-row="currentRow"
        @cancel="popoverVisible = false"
        @confirm="confirmConfig"
      />
    </el-popover>

    <template #footer>
      <!-- <el-button @click="confirmChange" v-if="currentRow.status == 'un_convert'">确认转换</el-button> -->
      <el-button @click="saveOrderField" type="primary">保存</el-button>
    </template>
  </vxe-modal>
  <TemplateVariable v-model:visible="tempVisible" v-bind="details" />
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref, watch, nextTick } from "vue";
import { Setting, MoreFilled } from "@element-plus/icons-vue";
import { cloneDeep } from "lodash-es";
import {
  apiVarTemplatePage,
  apiVarTemplateGetVars,
  apiVarTemplateGetNewVars,
  apiVarTemplateGetConf,
  apiVarTemplateConvert,
  apiVarTemplateSaveConf,
} from "@/api/var";
import {
  ElMessage,
  ElMessageBox,
} from "element-plus";
import type { VxeTableInstance } from "vxe-table";
import type { Recordable } from "@/types/global";
import { filterRunData2 } from "@/utils/excel";
import { apiDictList } from "@/api/common";
import ConfigForm from "./components/ConfigForm1.vue";
import { useVariableExcelChangeStore } from "@/stores/excel";
import { storeToRefs } from "pinia";
import TemplateVariable from './components/TemplateVariable.vue'

const visible = ref(false);
const loading = ref(false);
const importVisible = ref(false);
const excelChangeStore = useVariableExcelChangeStore();
const { getAllMapConfigs } = storeToRefs(excelChangeStore);
/**查询参数 */
const queryParams = reactive({
  status: "",
  currentPage: 1,
  pageSize: 10,
  total: 0,
  column: "createTime",
  order: "desc",
});

const currentColConf = reactive({
  excelOrderFiledConfId: "",
  title: "",
  filedConfs: [],
  templateFileId: "",
});
const currentConfigTitle = ref("");

const xTable = ref<VxeTableInstance>();
const tableData = ref([]);
/**当前选择行 */
const currentRow = reactive<Recordable>({});
/**弹窗显示 */
const detailVisible = ref(false);
/**详情表格数据 */
const detailTable = ref<Recordable[]>([]);
/**表格title */
const tableTitle = ref<string[]>([]);

const statusOptions = ref([]);

const queryDict = async (code: string) => {
  const { data } = await apiDictList({
    dictCodes: code,
  });
  statusOptions.value = data.result[code];
};

const popoverRef = ref();
const buttonRef = ref();
const popoverVisible = ref(false);
const showPopover = (e: any, title: string) => {
  // if (currentRow.status != "un_convert") {
  //   return;
  // }
  buttonRef.value = e.target;
  // 设置标题
  currentConfigTitle.value = title;

  const hasConf = !!getAllMapConfigs.value[title].filedConfs.length;
  console.log(getAllMapConfigs.value[title], "------");
  const conf = hasConf
    ? getAllMapConfigs.value[title]
    : {
        excelOrderFiledConfId: "",
        title,
        filedConfs: [
          {
            mapField: "",
            orderFiled: null,
            scripts: [],
          },
        ],
        templateFileId: currentRow.templateFileId,
        
      };
  Object.assign(currentColConf, conf);
  // 打开popover
  popoverVisible.value = true;
};

/**监听popover和modal显示状态。重置表单信息 */
watch([detailVisible, popoverVisible], (val) => {
  // 关闭弹窗或者关闭popover
  if (val.includes(false)) {
    // 解决关闭弹窗之后，popover未关闭情况
    popoverVisible.value = false;
  }
});

/** 确认字段映射及脚本的配置 */
const confirmConfig = (configList: any) => {
  // 便利一下是否有变量字段
  excelChangeStore.setSingleFieldMap({
    ...currentColConf,
    filedConfs: cloneDeep(
      configList
        .map((item) => {
          if (item.mapField) {
            item.orderFiled = {
              fliedTitle: item.mapField,
              filedName: item.mapField,
              variable: true,
            };
          }
          return item;
        })
        .filter((v) => !!v.mapField)
    ),
  });
  // 关闭popover
  popoverVisible.value = false;
};

const detailHide = () => {
  // detailVisible.value = false;
  detailTable.value = [];
  tableTitle.value = [];
};

/**保存订单字段 */
const saveOrderField = async () => {
  const params = {
    templateFileId: currentRow.templateFileId,
    confs: Object.values(getAllMapConfigs.value).filter(
      (v) => v.title !== "" && !!v.filedConfs.length
    ),
  };

  apiVarTemplateSaveConf(params).then(({ data }) => {
    if (data.code == 200) {
      ElMessage.success(data.message || "保存成功！");
    } else {
      ElMessage.error(data.message || "保存失败！");
    }
  });
};

/** 确认订单转换 */
const confirmChange = async (row) => {
  await ElMessageBox.confirm("是否确认变量转换？", "提示", {
    confirmButtonText: "转换",
    cancelButtonText: "取消",
    type: "warning",
  });
  const { data } = await apiVarTemplateConvert(row.varTemplateDetailId);
  if (data.code == 200) {
    ElMessage.success(data.message || "转换成功！");
    detailVisible.value = false;
    onQuery();
    return;
  }
  ElMessage.error(data.message || "转换失败！");
};

const toDetail = async (row: any) => {
  Object.assign(currentRow, row);

  const { data } = await apiVarTemplateGetVars(row.varTemplateDetailId);
  const { data: cdata } = await apiVarTemplateGetConf(row.varTemplateDetailId);

  const { res, titles, configs } = filterRunData2(data.result, true);

  cdata.result?.forEach((item) => {
    Reflect.set(configs[item.title], "filedConfs", item.filedConfs);
  });

  // 排除通过循环不显示的column
  const excludeTitles = ["sortNum", "数据区", "expendData", "sheet页"];
  detailTable.value = res;
  tableTitle.value = titles.filter((v) => !excludeTitles.includes(v));
  nextTick(() => {
    detailVisible.value = true;
  });

  excludeTitles.forEach((key) => {
    Reflect.deleteProperty(configs, key);
  });

  excelChangeStore.setAllMapConfigs(configs);
};


const tempVisible = ref(false)
const details = ref({
  title: '',
  data: [],
  titles: []
})
const showDetail = async (row: any, type = "old") => {
  const { data } =
    type == "old"
      ? await apiVarTemplateGetVars(row.varTemplateDetailId)
      : await apiVarTemplateGetNewVars(row.varTemplateDetailId);

  const { res, titles, configs } = filterRunData2(data.result, true);
  details.value.title = type == "old"? "转换前的变量" : "转换后变量";
  details.value.data = res
  details.value.titles = titles;

  tempVisible.value = true
};


const onReset = () => {
  queryParams.status = "";
};
const onQuery = async () => {
  loading.value = true;
  try {
    const { data } = await apiVarTemplatePage(queryParams);
    tableData.value = data.result.records;
    queryParams.total = +data.result.total;
  } catch {}
  loading.value = false;
};

onMounted(() => {
  onQuery();
  queryDict("excel_order_status");
});
</script>
<style lang="scss" scoped>
.header-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 178px;
}
.expandTableHeader {
  background: #e8eaec;
}
</style>
