<route lang="yaml">
  name: priceConfig
  </route>

<script lang="ts" setup name="priceConfig">
import { ref } from 'vue';
import TableTools from '@/components/Tools/table_tools.vue';
import { TableColumnWidth, commonPageConfig } from '@/utils/enum';
import { ElMessage, ElMessageBox } from "element-plus";
import { CirclePlus } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import useUserStore from "@/store/modules/user";
import useDataAssetStore from "@/store/modules/dataAsset";
import { getAllFlowData } from '@/api/modules/queryService';
import {
  getConfigureList,
  deleteConfigure,
} from '@/api/modules/dataPricing';

const router = useRouter();
const userStore = useUserStore()
const assetStore = useDataAssetStore();
const userData = JSON.parse(userStore.userData)
const { proxy } = getCurrentInstance() as any;

const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "modelName",
    default: "",
    placeholder: "定价模型名称",
    clearable: true,
  },
  {
    type: "select",
    label: "",
    field: "institutionType",
    placeholder: "机构类型",
    default: "",
    options: [],
    clearable: true,
  }
]);

const typeMap = ref({});
const tableData: any = ref([]);
const selectRowData: any = ref([])
const currTableData: any = ref({});
const page: any = ref({
  ...commonPageConfig,
  modelName: '',
  institutionType: ''
});
const tableInfo = ref({
  id: 'api-data-table',
  rowKey: 'guid',
  loading: false,
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "定价模型名称", field: "modelName", width: 200 },
    {
      label: "机构类型", field: "institutionType", width: 120, getName: (scope) => {
        return filterVal(scope.row.institutionType, 'institutionType')
      }
    },
    {
      label: "启用状态", field: "bizState", type: 'tag', width: 120, align: 'center', getName: (scope) => {
        return scope.row.bizState == 'Y' ? '启用' : '停用';
      }, tagType: (scope) => {
        return scope.row.bizState == 'Y' ? 'success' : 'info';
      }
    },
    { label: "创建人", field: "createUserName", width: 120 },
    { label: "创建时间", field: "createTime", width: TableColumnWidth.DATETIME },
  ],
  data: tableData.value,
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    isMore: false,
    width: 160,
    btns: [
      { label: "编辑", value: "edit" },
      { label: "复制", value: "copy" },
      { label: "删除", value: "del" }
    ]
  }
});

// 过滤
const filterVal = (val, name) => {
  if(typeMap.value[name]){
    const data = typeMap.value[name].find(item => item.value == val);
    return data?.label || '--';
  }
};

// 获取需求类型
const getDataType = (dictType, fieldName) => {
  getAllFlowData({ dictType }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      const data = res.data || [];
      typeMap.value[fieldName] = JSON.parse(JSON.stringify(data));
      let item = searchItemList.value.find(item => item.field == fieldName);
      item && (item.options = data);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

const toSearch = (val: any, clear: boolean = false) => {
  page.value.curr = 1;
  if (clear) {
    searchItemList.value.map((item) => (item.default = ""));
    page.value.modelName = '';
    page.value.institutionType = '';
  } else {
    page.value.modelName = val.modelName || '';
    page.value.institutionType = val.institutionType || '';
  }
  getTableData();
};

const getTableData = () => {
  tableInfo.value.loading = true;
  getConfigureList({
    pageSize: page.value.limit,
    pageIndex: page.value.curr,
    modelName: page.value.modelName,
    institutionType: page.value.institutionType,
  }).then((res: any) => {
    tableInfo.value.loading = false;
    if (res.code == proxy.$passCode) {
      const data = res.data || {};
      tableInfo.value.data = data.records || []
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
}

const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  tableInfo.value.page.limit = page.value.limit;
  tableInfo.value.page.curr = page.value.curr;
  getTableData();
};

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currTableData.value = row;
  if (type === 'edit') { // 编辑
    router.push(
      {
        name: 'priceModel',
        query: {
          guid: row.guid,
          name: row.modelName,
          type
        }
      }
    );
  } else if(type == 'copy'){ //复制
    router.push(
      {
        name: 'priceModel',
        query: {
          guid: row.guid,
          name: `${row.modelName}_副本`,
          type
        }
      }
    );
  } else if (type === 'del') { // 删除
    open('确定要删除该条数据吗？', 'warning');
  }
};

const open = (msg, type, isBatch = false) => {
  ElMessageBox.confirm(msg, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: type,
  }).then(() => {
    let guids = [currTableData.value.guid]
    if (isBatch) {
      guids = selectRowData.value
    }
    deleteConfigure(guids).then((res: any) => {
      if (res.code == proxy.$passCode) {
        getTableData();
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    });
  });
};

const addDisease = () => {
  router.push(
    {
      name: 'priceModel',
      query: {
        type: 'create'
      }
    }
  );
}

onBeforeMount(() => {
  getDataType('机构类型', 'institutionType')
});

onActivated(() => {
  if (assetStore.isRefresh) {//如果是首次加载，则不需要调用
    toSearch(null, true);
    assetStore.set(false);
  }
})

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'data-source-search'" @search="toSearch" />
      <div class="tools_btns">
        <el-button type="primary" @click="addDisease" v-preReClick>新增</el-button>
      </div>
    </div>
    <div class="table_panel_wrap">
      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange" @tableBtnClick="tableBtnClick" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table_tool_wrap {
  width: 100%;
  height: 84px !important;
  padding: 0 8px;

  .tools_btns {
    padding: 0px 0 0;
  }
}

.table_panel_wrap {
  width: 100%;
  height: calc(100% - 84px);
  padding: 0px 8px 0;
}
</style>