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

<script lang="ts" setup name="productDemandsPublish">
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import useUserStore from "@/store/modules/user";
import { ElMessage, ElMessageBox } from "element-plus";
import useDataAssetStore from "@/store/modules/dataAsset";
import { changeNum } from "@/utils/common";
import { getDemandList, demandDelete, demandUpdateStatus, filterVal, getParamsDataList } from "@/api/modules/dataProduct";
import { TableColumnWidth } from '@/utils/enum';

import TableTools from "@/components/Tools/table_tools.vue";
import Table from "@/components/Table/index.vue";

const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const assetStore = useDataAssetStore();
const interfaceTypes = ref([]);
const searchItemList: any = ref([
  {
    type: "input",
    label: "",
    field: "dataName",
    default: "",
    placeholder: "需求名称",
    clearable: true
  },
  {
    type: "select",
    label: "",
    field: "interfaceType",
    default: "",
    props: {
      value: 'paramValue',
      label: 'paramName'
    },
    placeholder: "界面类型",
    options: interfaceTypes.value,
    clearable: true,
  }
]);
const page = ref({
  limit: 50,
  curr: 1,
  sizes: [
    { label: "10", value: 10 },
    { label: "50", value: 50 },
    { label: "100", value: 100 },
    { label: "150", value: 150 },
    { label: "200", value: 200 },
  ],
});
const searchItemValue: any = ref({});
const currTableData: any = ref({});
const tableInfo = ref({
  id: "mapping-table",
  fields: [
    { label: "序号", type: "index", width: 56, align: "center", fixed: "left" },
    { label: "数据需求名称", field: "dataName", width: 200 },
    {
      label: "界面类型", field: "interfaceTypeName", width: 140
    },
    { label: "产品预算", field: "productPrice", width: 120, },
    {
      label: "审核状态", field: "approveState", width: TableColumnWidth.STATE, align: 'center', type: "tag", getName: (scope) => {
        return filterVal(scope.row.approveState, 'approveState');
      }
    },
    {
      label: '上架状态', field: 'listingStatus', type: 'switch', activeValue: 'Y', inactiveValue: 'N', switchWidth: 28, width: 96, align: 'center', isDisabled: (scope) => {
        return scope.row.approveState != 'Y';
      }
    },
    { label: "修改时间", field: "updateTime", width: TableColumnWidth.DATETIME },
  ],
  loading: false,
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 140,
    btns: (scope) => {
      let row = scope.row, btnArr: any = [];
      if(row.approveState == 'Y'){
        if(row.listingStatus == 'Y'){
          btnArr.splice(0, 0, { label: "详情", value: "detail" });
        } else {
          btnArr.splice(0, 0, { label: "编辑", value: "edit" }, { label: "详情", value: "detail" }, { label: "删除", value: "delete" });
        }
      } else {
        if(row.approveState == 'A'){
          btnArr.splice(0, 0, { label: "详情", value: "detail" });
        } else {
          btnArr.splice(0, 0, { label: "编辑", value: "edit" }, { label: "详情", value: "detail" }, { label: "删除", value: "delete" });
        }
      }
      return btnArr;
    },
  },
});

const getTableData = () => {
  tableInfo.value.loading = true;
  getDemandList(
    Object.assign({}, searchItemValue.value, {
      pageIndex: page.value.curr,
      pageSize: page.value.limit,
    })
  )
    .then((res: any) => {
      tableInfo.value.loading = false;
      tableInfo.value.data = res.data.records || [];
      tableInfo.value.page.curr = res.data.pageIndex;
      tableInfo.value.page.limit = res.data.pageSize;
      tableInfo.value.page.rows = res.data.totalRows;
    })
    .catch((res) => {
      tableInfo.value.loading = false;
    });
};

/** 搜索同步任务列表 */
const toSearch = (val: any, clear: boolean = false) => {
  if (clear) {
    searchItemList.value.map((item) => (item.default = ""));
    searchItemValue.value = {};
  } else {
    searchItemValue.value = Object.keys(val).length ? { ...val } : {};
  }
  page.value.curr = 1;
  tableInfo.value.page.curr = 1;
  getTableData();
};

const tableSwitchBeforeChange = (scope, field, callback) => {
  const msg = `确定${scope.row[field] == 'Y'?'下架':'上架'}该需求吗？`
  ElMessageBox.confirm(
    msg,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    const state = scope.row[field] == 'Y'?'N':'Y';
    const result = tableSwitchChange(state, scope, field)
    callback(result)
  }).catch(() => {
    callback(false)
  })
}

const tableSwitchChange = (val, scope, field) => {
  return new Promise((resolve, reject) => {
    let params = {
      guid: scope.row.guid,
      listingStatus: val
    }
    demandUpdateStatus(params).then((res: any) => {
      if (res.code == proxy.$passCode && res.data) {
        getFirstPageData();
        ElMessage({
          type: "success",
          message: `该产品${val == 'Y' ? '上架' : '下架'}成功`,
        });
        resolve(true)
      } else {
        ElMessage({
          type: "error",
          message: res.msg,
        });
        getTableData();
        reject(false)
      }
    }).catch(() => {
      getTableData();
      reject(false)
    })
  })
}

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  currTableData.value = row;
  if (type == "detail" || type === "edit") {
     router.push({
      name: "productDemandsDetail",
      query: {
        guid: currTableData.value.guid,
        name: currTableData.value.dataName,
        type
      },
    });
  } else if (type === "delete") {
    open("此操作将永久删除，是否继续？", "warning");
  }
};

const handleCreateCommand = (command) => {
  router.push({
      name: "productDemandsDetail",
      query: {
        type: 'add',
        interfaceType: command
      },
    });
}

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 open = (msg, type, isBatch = false) => {
  ElMessageBox.confirm(msg, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: type,
  }).then(() => {
    const guids = [currTableData.value.guid];
    demandDelete(guids).then((res: any) => {
      if (res.code == proxy.$passCode) {
        getFirstPageData();
        ElMessage({
          type: "success",
          message: "删除成功",
        });
      } else {
        ElMessage({
          type: "error",
          message: res.msg,
        });
      }
    }).catch((res) => {
      tableInfo.value.loading = false;
    });
  });
};

const getFirstPageData = () => {
  page.value.curr = 1
  tableInfo.value.page.curr = 1;
  getTableData();
}

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

onBeforeMount(() => {
  getParamsDataList({ paramCode: 'INTERFACE_TYPE' }).then((res: any) => {
    if (res.code == proxy.$passCode) {
      interfaceTypes.value = res.data || [];
      let item = searchItemList.value.find(item => item.field == 'interfaceType');
      item && (item.options = interfaceTypes.value);
    } else {
      proxy.$ElMessage.error(res.msg);
    }
  })
})

</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-dropdown popper-class="table-create-menu-noicon" @command="handleCreateCommand" placement="bottom-start"
            trigger="click">
            <span class="el-dropdown-link">
              <el-button type="primary" >新建</el-button>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="1">
                  <div class="item-content">
                    <span class="item-content-title">数据需求</span>
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
              <el-dropdown-menu>
                <el-dropdown-item command="2">
                  <div class="item-content">
                    <span class="item-content-title">算法竞赛</span>
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
              <el-dropdown-menu>
                <el-dropdown-item command="3">
                  <div class="item-content">
                    <span class="item-content-title">要素市场</span>
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
      </div>
    </div>
    <div class="table_panel_wrap">
      <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" @tableSwitchBeforeChange="tableSwitchBeforeChange" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.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>