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

<script lang="ts" setup name="damObjectionHandle">
import { ref } from 'vue';
import TableTools from "@/components/Tools/table_tools.vue";
import {
  getDissentList,
  updateDissentState
} from "@/api/modules/dataAsset";
import { TableColumnWidth, commonPageConfig } from '@/utils/enum';
import { useValidator } from '@/hooks/useValidator';

const router = useRouter();
const { proxy } = getCurrentInstance() as any;
const { required } = useValidator();

const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "damName",
    default: "",
    maxlength: 50,
    placeholder: "资产名称",
    clearable: true,
  },
  {
    type: "input",
    label: "",
    field: "applyCompany",
    default: "",
    maxlength: 50,
    placeholder: "申请单位",
    clearable: true,
  },
]);

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

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

const page = ref({
  ...commonPageConfig,
  damName: '',
  applyCompany: ''
});

const tableInfo = ref({
  id: 'dissent-data-table',
  rowKey: 'guid',
  loading: false,
  fields: [{ label: "序号", type: "index", width: 56, align: "center" },
  { label: "数据资产名称", field: "damName", width: 160, align: "left" },
  { label: "公司名称", field: "companyName", width: 240 },
  { label: "申请时间", field: "applyTime", width: TableColumnWidth.DATETIME, align: "left" },
  { label: "申请单位", field: "applyCompany", width: 240 },
  { label: "申请人", field: "applicant", width: TableColumnWidth.USERNAME },
  { label: "联系方式", field: "contactTel", width: 120 },
  { label: "申请事由", field: "applyRemark", width: TableColumnWidth.DESCRIPTION },
  { label: "状态", field: "state", type: "tag", width: 96, align: 'center' },
  { label: "操作人", field: "lastApprover", width: TableColumnWidth.USERNAME, align: "left" },
  { label: "操作时间", field: "lastApprovalTime", width: TableColumnWidth.DATETIME, align: "left" },
  ],
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 100,
    btns: (scope) => {
      let row = scope.row;
      return getTableBtns(row);
    }
  }
});

const getTableBtns = (row) => {
  let btnsArr: any[] = [];
  if (row.state != 'Y' && row.state != 'R') {//审批中
    btnsArr.push({
      label: "通过", value: "pass", click: (scope) => {
        currTableData.value = scope.row;
        passDialogInfo.value.visible = true;
        passFormItems.value[0].readonly = false;
        passDialogInfo.value.contents[0].formInfo.items = passFormItems.value;
        passDialogInfo.value.contents[0].formInfo.items[0].default = ''
        passDialogInfo.value.footer.visible = true;
      }
    });
    btnsArr.push({
      label: "驳回", value: "backup", click: (scope) => {
        currTableData.value = scope.row;
        rejectDialogInfo.value.visible = true;
        rejectDialogInfo.value.contents[0].formInfo.items[0].readonly = false;
        rejectDialogInfo.value.contents[0].formInfo.items[0].default = '';
        rejectDialogInfo.value.footer.visible = true;
      }
    });
  } else {
    btnsArr.push({
      label: "查看", value: "detail", click: (scope) => {
        if (row.state == 'Y') {
          passDialogInfo.value.visible = true;
          passFormItems.value[0].readonly = true;
          passDialogInfo.value.contents[0].formInfo.items = passFormItems.value;
          passDialogInfo.value.contents[0].formInfo.items[0].default = row.description;
          passDialogInfo.value.footer.visible = false;
        } else {
          rejectDialogInfo.value.visible = true;
          rejectDialogInfo.value.contents[0].formInfo.items[0].readonly = true;
          rejectDialogInfo.value.contents[0].formInfo.items[0].default = row.description;
          rejectDialogInfo.value.footer.visible = false;
        }
      }
    });
  }
  return btnsArr;
}

const currTableData: any = ref({});

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

const passFormItems = ref([
  {
    label: '',
    type: "textarea",
    placeholder: "请填写通过描述，至少五个字符",
    field: "description",
    clearable: true,
    block: true,
    readonly: false,
    rows: 5,
    maxlength: 500,
    default: '',
    col: 'margin_b_0',
  }
]);

const passFormRules = ref({
  description: [required('请填写通过描述'), {
    validator: (rule: any, value: any, callback: any) => {
      if (value?.length < 5) {
        callback(new Error('请填写至少五个字符的通过描述'))
      } else {
        callback();
      }
    },
    trigger: 'blur'
  }]
});

const passDialogInfo = ref({
  visible: false,
  size: 460,
  direction: "column",
  header: {
    title: "通过描述",
  },
  type: '',
  contents: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'dissent-pass-dialog',
        items: passFormItems.value,
        rules: passFormRules.value
      }
    }
  ],
  footer: {
    visible: true,
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", loading: false, value: "submit" },
    ],
  },
});

const passDialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    passDialogInfo.value.footer.btns[1].loading = true;
    updateDissentState({
      guid: currTableData.value.guid,
      damName: currTableData.value.damName,
      description: info.description,
      contactTel: currTableData.value.contactTel,
      damGuid: currTableData.value.damGuid,
      tenantGuid: currTableData.value.tenantGuid,
      state: 'Y'
    }).then((res: any) => {
      passDialogInfo.value.footer.btns[1].loading = false;
      if (res?.code == proxy.$passCode) {
        if (res.data) {
          proxy.$ElMessage.success('该资产异议受理通过成功');
          passDialogInfo.value.visible = false;
          getTableData();
        } else {
          proxy.$ElMessage.error('该资产异议受理通过失败');
        }
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    })
  } else if (btn.value == 'cancel') {
    passDialogInfo.value.visible = false;
  }
};

const rejectDialogInfo = ref({
  visible: false,
  size: 460,
  direction: "column",
  header: {
    title: "驳回描述",
  },
  type: '',
  contents: [
    {
      type: 'form',
      title: '',
      formInfo: {
        id: 'batch-reject-form',
        items: [
          {
            label: '',
            type: "textarea",
            placeholder: "请填写驳回描述，至少五个字符",
            field: "description",
            clearable: true,
            block: true,
            rows: 5,
            maxlength: 500,
            default: '',
            readonly: false,
            col: 'margin_b_0',
          }
        ],
        rules: {
          description: [required('请填写驳回描述'), {
            validator: (rule: any, value: any, callback: any) => {
              if (value?.length < 5) {
                callback(new Error('请填写至少五个字符的驳回描述'))
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }]
        }
      }
    }
  ],
  footer: {
    visible: true,
    btns: [
      { type: "default", label: "取消", value: "cancel" },
      { type: "primary", label: "确定", loading: false, value: "submit" },
    ],
  },
});

const rejectDialogBtnClick = (btn, info) => {
  if (btn.value == 'submit') {
    rejectDialogInfo.value.footer.btns[1].loading = true;
    updateDissentState({
      guid: currTableData.value.guid,
      damName: currTableData.value.damName,
      description: info.description,
      contactTel: currTableData.value.contactTel,
      damGuid: currTableData.value.damGuid,
      tenantGuid: currTableData.value.tenantGuid,
      state: 'R'
    }).then((res: any) => {
      rejectDialogInfo.value.footer.btns[1].loading = false;
      if (res?.code == proxy.$passCode) {
        if (res.data) {
          proxy.$ElMessage.success('该资产异议受理驳回成功');
          getTableData();
          rejectDialogInfo.value.visible = false;
        } else {
          proxy.$ElMessage.error('该资产异议受理驳回失败');
        }
      } else {
        proxy.$ElMessage.error(res.msg);
      }
    });
  } else if (btn.value == 'cancel') {
    rejectDialogInfo.value.visible = false;
  }
};

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'register-data-search'" @search="toSearch" :init="true" />
    </div>
    <div class="table_panel_wrap">
      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange" />
    </div>
    <Dialog :dialogInfo="passDialogInfo" @btnClick="passDialogBtnClick" />
    <Dialog :dialogInfo="rejectDialogInfo" @btnClick="rejectDialogBtnClick" />
  </div>
</template>

<style scoped lang="scss">
.container_wrap {
  padding: 0 16px;
}

.table_panel_wrap {
  height: calc(100% - 48px);
}

:deep(.el-dialog) {
  .dialog_panel {
    padding: 14px 24px;
  }
}
</style>