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

<script lang="ts" setup name="anonTaskCreate">
import {
  dataSourceTypeList
} from '@/api/modules/dataAnonymization';
import useUserStore from "@/store/modules/user";

const { proxy } = getCurrentInstance() as any;
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const fullPath = route.fullPath;

const fullscreenLoading = ref(false);

const step = ref(0);
const stepsInfo = ref({
  step: step.value,
  list: [
    { title: '数据输入', value: 1 },
    { title: '配置匿名化方案', value: 2 },
    { title: '匿名结果分析', value: 3 },
    { title: '结果输出', value: 4 }
  ]
})

const dataSourceList = ref([]);

/** 数据共享类型字段列表 */
const dataSharingTypeList = ref([]);

/** 数据选择的表单配置信息 */
const dataSelectInfoItems = ref([{
  label: '任务名称',
  type: 'input',
  placeholder: '请输入',
  field: 'taskName',
  maxlength: 15,
  default: '',
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
}, {
  label: '数据共享类型',
  type: 'select',
  placeholder: '请选择',
  field: 'dataSharingTypeCode',
  default: '',
  options: dataSharingTypeList,
  props: {
    label: "label",
    value: "value",
  },
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
}, {
  label: '数据来源',
  type: 'select',
  placeholder: '请选择',
  field: 'dataSource',
  default: 1,
  options: dataSourceTypeList,
  props: {
    label: "label",
    value: "value",
  },
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
}, {
  label: '数据源',
  type: 'select',
  placeholder: '请选择',
  field: 'dataSourceGuid',
  default: '',
  options: dataSourceList.value,
  props: {
    label: 'databaseNameZh',
    value: 'guid'
  },
  filterable: true,
  visible: true,
  required: true
}, {
  label: '文件上传',
  tip: '支持扩展名：xlsx、xls、csv，文件大小不超过10MB',
  type: 'upload-file',
  accept: '.xlsx, .xls, .csv',
  limitSize: 10,
  isExcel: true,
  required: true,
  default: <any>[],
  block: true,
  visible: false,
  field: 'file',
}]);

const dataSelectInfoFormRules = ref({

});

const changeStep = (val) => {

}

const exportResult = () => {

}

const cancelTask = () => {
  proxy.$openMessageBox("当前页面尚未保存，确定放弃修改吗？", () => {
    userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
    router.push({
      name: 'resultProcess'
    });
  }, () => {
    proxy.$ElMessage.info("已取消");
  });
}

</script>

<template>
  <div class="container_wrap full" v-loading="fullscreenLoading">
    <div class="content_main">
      <div class="top_tool_wrap">
        <StepBar :steps-info="stepsInfo" />
      </div>
      <div class="operator_panel_wrap" v-show="step == 0">
        <ContentWrap id="id-baseInfo" title="数据选择" description="" style="margin-top: 8px;">
          <Form ref="formRef" :itemList="dataSelectInfoItems" :rules="dataSelectInfoFormRules" formId="model-select-edit" col="col3" />
        </ContentWrap>
      </div>
    </div>
    <div class="bottom_tool_wrap">
      <template v-if="step == 0">
        <el-button @click="cancelTask">取消</el-button>
        <el-button type="primary" @click="changeStep(2)">下一步</el-button>
      </template>
      <template v-else>
        <el-button @click="cancelTask">取消</el-button>
        <el-button type="primary" @click="changeStep(1)">上一步</el-button>
        <el-button type="primary" v-preReClick @click="exportResult">导出</el-button>
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.top_tool_wrap {
  width: 100%;
  height: 72px;
  margin: 8px 0 0px;
  display: flex;
  justify-content: center;
  align-items: center;

  :deep(.el-steps) {
    width: 60%;
  }
}

.bottom_tool_wrap {
  height: 40px;
  padding: 0 16px;
  border-top: 1px solid #d9d9d9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content_main {
  height: calc(100% - 40px);
  padding: 0 16px;
  overflow: hidden auto;
}
</style>