<route lang="yaml">
  name: securityMenu //标签管理
  </route>

<script lang="ts" setup name="securityMenu">
import { onUploadFilePreview } from '@/api/modules/common';
import { getComplianceInfoPageList, updateComplianceInfo } from '@/api/modules/securityMenu';
import TableTools from '@/components/Tools/table_tools.vue';
import { TableColumnWidth } from '@/utils/enum';
import { ElMessage } from 'element-plus';
const { proxy } = getCurrentInstance() as any;
const dialogLabelFormRef = ref();


onBeforeMount(async () => {

});
// 右侧表格配置
const tableDataList = ref([]);

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 tableInfo = ref({
  id: "role-manage-table",
  // multiple: true,
  fixedSelection: true,
  fields: [
    { label: "序号", type: "index", width: 56, align: "center" },
    // { label: "数据产品编号", field: "label", width: 120, },
    {
      label: "数据产品名称", field: "damName", width: 140,
    },
    { label: "数据类型", field: "damTypeName", width: 90 },
    {
      label: '权利主体', field: 'rightMainName', width: 200,
    },
    {
      label: "是否公共数据", field: "isPublicData", width: 120, getName: (scope) => {
        return scope.isPublicData == "Y" ? '是' : '否';
      }
    },
    {
      label: "状态", field: "updateTime", width: TableColumnWidth.STATE, align: 'center', type: "tag", getName: (scope) => {
        //状态(1:待上传 2:部分上传 3:全部上传 )
        // return statusList.find((item) => item.value == scope.row.state)?.label || '待上传';
        const state = statusList.find((item) => item.value == scope.row.state)?.label || '待上传';
        switch (state) {
          case '待上传':
            return '待上传';
          case '部分上传':
            return '部分上传';
          case '全部上传':
            return '全部上传';
          default:
            return '待上传';
        }
      }, tagType: (scope) => {
        const state1 = scope.row.state;
        switch (state1) {
          case '1':
            return 'warning';
          case '2':
            return 'warning';
          case '3':
            return 'success';
          default:
            return 'info';
        }
      }
    },
    {
      label: "合规评估报告", field: "complianceEvaluateReport", width: 120, type: 'text_btn', value: 'complianceEvaluateReport', getName: (scope) => {
        const value = scope.row.complianceEvaluateReport;
        return value && value.length > 0 ? '预览' : '--';
      },
    },
    {
      label: "合规法律意见书", field: "complianceLegalOpinion", width: 130, type: 'text_btn', value: 'complianceLegalOpinion', getName: (scope) => {
        return scope.row.complianceLegalOpinion?.length > 0 ? '预览' : '--';
      }
    },
    {
      label: "入表合规方案", field: "entryComplianceProgram", width: 120, type: 'text_btn', value: 'entryComplianceProgram', getName: (scope) => {
        return scope.row.entryComplianceProgram?.length > 0 ? '预览' : '--';
      }
    },
    { label: "操作时间", field: "updateTime", width: TableColumnWidth.DATETIME },
  ],
  data: tableDataList.value,
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  loading: false,
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 80,
    fixed: 'right',
    btns: (scope) => {
      if (scope.row.state == 3) {
        return [
          {
            label: "详情", value: "detail", click: (scope) => {
              tableTempValue.value = scope.row;
              formItems.value.forEach((item) => {
                item.default = scope.row[item.field] || [];
              });
              dialogInfo.value.visible = true;
            },
          },
        ]
      } else {
        return [
          {
            label: "上传", value: "upload", click: (scope) => {
              tableTempValue.value = scope.row;
              formItems.value.forEach((item) => {
                item.default = scope.row[item.field] || [];
              });
              dialogInfo.value.visible = true;
            },
          },
        ]
      }
    },
  },
});

const tableBtnClick = (scope, btn) => {
  const type = btn.value;
  const row = scope.row;
  if ((type == 'complianceEvaluateReport' && row.complianceEvaluateReport.length > 0)) {
    onUploadFilePreview(row.complianceEvaluateReport[0]);
  }
  else if ((type == 'complianceLegalOpinion' && row.complianceLegalOpinion.length > 0)) {
    onUploadFilePreview(row.complianceLegalOpinion[0]);
  }
  else if ((type == 'entryComplianceProgram' && row.entryComplianceProgram.length > 0)) {
    onUploadFilePreview(row.entryComplianceProgram[0]);
  }
}



const formItems = ref([
  {
    label: '合规评估报告',
    tip: '支持格式：pdf,单个文件不能超过10MB ',
    type: 'upload-file',
    accept: '.pdf',
    field: 'complianceEvaluateReport',
    templateUrl: '',
    required: false,
    block: true,
    visible: true,
    default: [],
    limit: 1,
  },
  {
    label: '合规法律意见书',
    tip: '支持格式：pdf,单个文件不能超过10MB ',
    type: 'upload-file',
    accept: '.pdf',
    field: 'complianceLegalOpinion',
    templateUrl: '',
    required: false,
    block: true,
    visible: true,
    default: [],
    limit: 1,
  },
  {
    label: '入表合规方案',
    tip: '支持格式：pdf,单个文件不能超过10MB ',
    type: 'upload-file',
    accept: '.pdf',
    field: 'entryComplianceProgram',
    templateUrl: '',
    required: false,
    block: true,
    visible: true,
    default: [],
    limit: 1,
  },
]);

const formRules = ref({

});

const dialogInfo = ref({
  visible: false,
  size: 510,
  direction: "column",
  header: {
    title: "合规信息",
  },
  type: '',//标识是否是重新提交
  contents: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'quality-coss-level',
        items: formItems.value,
        rules: formRules.value
      }
    }
  ],
  footer: {
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", value: "submit" },
    ],
  },
});

const tableTempValue = ref<any>('');
const dialogBtnClick = (btn, info) => {
  console.log('currTableData', info);
  if (btn.value == 'submit') {
    tableInfo.value.loading = true;
    let params: any = {
      damGuid: tableTempValue.value.guid,
      complianceEvaluateReport: info.complianceEvaluateReport?.map(file => {
        return {
          name: file.name,
          url: file.url
        }
      }) || [],
      complianceLegalOpinion: info.complianceLegalOpinion?.map(file => {
        return {
          name: file.name,
          url: file.url
        }
      }) || [],
      entryComplianceProgram: info.entryComplianceProgram?.map(file => {
        return {
          name: file.name,
          url: file.url
        }
      }) || [],
    }
    updateComplianceInfo(params).then((res: any) => {
      tableInfo.value.loading = false;
      if (res?.code == proxy.$passCode) {
        if (res.data) {
          ElMessage.success('上传成功');
          dialogInfo.value.visible = false;
          getTableData();
        } else {
          ElMessage.error('上传失败');
        }
      } else {
        ElMessage.error(res.msg);
      }
    }).catch(() => {
      tableInfo.value.loading = false;
    });
  }
  else if (btn.value == 'cancel') {
    dialogInfo.value.visible = false;
  }
};


//状态(1:待上传 2:部分上传 3:全部上传 )

const statusList = [
  { label: '待上传', value: 1 },
  { label: '部分上传', value: 2 },
  { label: '全部上传', value: 3 },
];

const classSearchItemList = ref<any>([
  {
    type: 'input',
    multiple: true,
    label: '',
    field: 'damName',
    default: '',
    placeholder: '请输入产品名称',
    clearable: true,
    visible: true
  },
  // 状态，可以编辑。

  {
    type: 'select',
    multiple: true,
    label: '',
    field: 'state',
    default: [],
    options: statusList,
    multiply: true,
    placeholder: '请选择状态',
    clearable: true,
    filterable: true,
    visible: true
  }

]);
const searchItemValue: any = ref({});
/** 搜索查询分类标准 */
const toSearch = (val: any, clear: boolean = false) => {
  if (clear) {
    classSearchItemList.value.map((item) => (item.default = ""));
    searchItemValue.value = {};
  } else {
    searchItemValue.value = Object.keys(val).length ? { ...val } : {};
    !searchItemValue.value.state && (searchItemValue.value.state = null);
  }
  page.value.curr = 1;
  tableInfo.value.page.curr = 1;
  getTableData();
};

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

const getTableData = () => {
  tableInfo.value.loading = true;
  getComplianceInfoPageList(
    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;
    });
};


</script>


<template>
  <div class="data-label">
    <div class="container_wrap">
      <div class="main_wrap">
        <div class="main_wrap-top-area">
          <TableTools :searchItems="classSearchItemList" :searchId="'template-manage-search'" @search="toSearch" />
        </div>
        <div class="table_panel_wrap">
          <Table :tableInfo="tableInfo" @tableBtnClick="tableBtnClick" @tablePageChange="tablePageChange" />
        </div>
      </div>
    </div>
    <Dialog :dialogInfo="dialogInfo" @btnClick="dialogBtnClick" />
  </div>
</template>

<style lang="scss" scoped>
.data-label {
  width: 100%;
  height: 100%;

  .container_wrap {
    height: 100%;

    .main_wrap {
      height: 100%;
      padding: 11px 8px 0 8px;

      .main_wrap-top-area {
        display: flex;
        margin-bottom: 10px;
        align-items: center;

        .v-serach {
          margin-left: 10px;
        }
      }

      :deep(.tools_search) {
        .el-form-item .el-select {
          width: 230px;
        }
      }

      .table_panel_wrap {
        margin-top: 12px;
        width: 100%;
        height: calc(100% - 65px);
        min-height: 210px;
        overflow: visible;

      }
    }
  }
}
</style>