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

<script lang="ts" setup name="strategyManagement">
import { ref } from 'vue';
import TableTools from "@/components/Tools/table_tools.vue";
import {
  getPageList,
  updateTemplateState,
  savePolicyTemplate,
  updatePolicyTemplate,
  deletePolicyTemplate
} from "@/api/modules/dataSmartContract";
import {
  getParamsList
} from "@/api/modules/queryService";
import { useValidator } from '@/hooks/useValidator';

const { required, regexpValidate } = useValidator();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance() as any;

const policyTypeList: any = ref([]);

/** 约束运算符字典下拉 */
const operatorOptionList: any = ref([]);

const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "policyName",
    default: "",
    placeholder: "策略名称",
    maxlength: 50,
    clearable: true,
  },
  {
    type: 'tree-select',
    label: '',
    field: 'policyTypeCode',
    default: '',
    placeholder: '维度类型',
    options: policyTypeList.value,
    filterable: true,
    clearable: true,
    checkStrictly: true,//只能选择叶子节点。
    lazy: false,
    multiple: false,
    collapseTagsTooltip: true,
    collapseTags: true,
    props: {
      label: "label",
      value: "value",
      children: 'childDictList'
    },
    showCheckbox: false
  }
]);

const tableFields = ref([
  { label: "序号", type: "index", width: 56, align: "center" },
  { label: "策略id", field: "policyId", width: 205, },
  { label: "策略名称", field: "policyName", width: 130 },
  { label: "策略英文名", field: "policyEnName", width: 140 },
  { label: "维度类型", field: "policyTypeCodeName", width: 100 },
  { label: '启用状态', width: 96, field: 'bizStatus', type: 'switch', activeText: '启用', inactiveText: '停用', activeValue: 'Y', inactiveValue: 'N', align: 'center' },
  { label: "描述", field: "description", width: 200 },
  { label: "修改人", field: "updateUserName", width: 130 },
  { label: "修改时间", field: "updateTime", width: 170 },
]);

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 },
  ],
  policyName: '',
  policyTypeCode: ''
});
const currTableData: any = ref({});
const tableInfo = ref({
  id: 'value-asset-table',
  rowKey: 'guid',
  loading: false,
  fields: tableFields.value,
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 100,
    btns: (scope) => {
      let row = scope.row;
      if (row.bizStatus == 'Y') {
        return [{
          label: "查看", value: "view", click: (scope) => {
            drawerInfo.value.visible = true;
            drawerInfo.value.type = 'view';
            drawerInfo.value.header.title = '查看策略';
            drawerInfo.value.footer.visible = false;
            classEditFormItems.value.forEach(item => {
              item.default = scope.row[item.field] || '';
              item.disabled = true;
            });
            let val = scope.row.policyTypeCode;
            let selectItem = val && policyTypeList.value.find(p => p.childDictList?.some(c => c.value == val));
            classEditFormItems.value.at(-2).visible = selectItem?.value == 'YS';
          }
        }]
      } else {
        return [{
          label: "编辑", value: "edit", click: (scope) => {
            currTableData.value = scope.row;
            drawerInfo.value.visible = true;
            drawerInfo.value.type = 'edit';
            drawerInfo.value.header.title = '编辑策略';
            drawerInfo.value.footer.visible = true;
            classEditFormItems.value.forEach(item => {
              item.default = scope.row[item.field] || '';
              item.disabled = false;
            });
            let val = scope.row.policyTypeCode;
            let selectItem = val && policyTypeList.value.find(p => p.childDictList?.some(c => c.value == val));
            classEditFormItems.value.at(-2).visible = selectItem?.value == 'YS';
          }
        }, {
          label: "删除", value: "delete", click: (scope) => {
            proxy.$openMessageBox("此操作将永久删除, 是否继续?", () => {
              deletePolicyTemplate([scope.row.guid]).then((res: any) => {
                if (res?.code == proxy.$passCode) {
                  page.value.curr = 1;
                  getTableData();
                  proxy.$ElMessage.success('删除成功');
                } else {
                  res?.msg && proxy.$ElMessage.error(res?.msg);
                }
              });
            }, () => {
              proxy.$ElMessage.info("已取消");
            })
          }
        }]
      }
    }
  }
});

const tableSwitchBeforeChange = (scope, field, callback) => {
  const msg = `确定${scope.row[field] == 'Y' ? '停用' : '启用'}【${scope.row.policyName}】策略?`
  proxy.$openMessageBox(msg, () => {
    const state = scope.row[field] == 'Y' ? 'N' : 'Y'
    const result = tableSwitchChange(state, scope, field)
    callback(result)
  }, () => {
    callback(false)
  });
}

const tableSwitchChange = (val, scope, field) => {
  return new Promise((resolve, reject) => {
    let params = {
      guid: scope.row.guid,
      bizStatus: val
    }
    updateTemplateState(params).then((res: any) => {
      if (res?.code == proxy.$passCode && res?.data) {
        getTableData();
        proxy.$ElMessage({
          type: "success",
          message: `【${scope.row.policyName}】策略${val == 'Y' ? '启用' : '停用'}成功`,
        });
        resolve(true)
      } else {
        proxy.$ElMessage({
          type: "error",
          message: res.msg,
        });
        reject(false)
      }
    }).catch(() => {
      reject(false)
    })
  })
}

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

const getTableData = () => {
  tableInfo.value.loading = true
  getPageList({
    pageIndex: page.value.curr,
    pageSize: page.value.limit,
    policyName: page.value.policyName,
    policyTypeCode: page.value.policyTypeCode
  }).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({
        type: 'error',
        message: res.msg,
      })
    }
  }).catch(() => {
    tableInfo.value.loading = false
  })
};

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

const defaultValueInfo = ref({ bizStatus: 'Y' });

const newCreate = () => {
  drawerInfo.value.visible = true;
  drawerInfo.value.type = 'add';
  drawerInfo.value.header.title = '新增策略';
  drawerInfo.value.footer.visible = true;
  classEditFormItems.value.forEach(item => {
    item.default = defaultValueInfo.value[item.field] || '';
    item.disabled = false;
  });
  classEditFormItems.value.at(-2).visible = false;
}

onActivated(() => {
})

onBeforeMount(() => {
  toSearch({});
  getParamsList({ dictType: '维度类型' }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      const data = res.data || [];
      policyTypeList.value = data;
      searchItemList.value[1].options = policyTypeList.value;
      classEditFormItems.value[0].options = policyTypeList.value;
    } else {
      res?.msg && proxy.$ElMessage.error(res?.msg);
    }
  })
  getParamsList({ dictType: '约束运算符' }).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      const data = res.data || [];
      operatorOptionList.value = data;
      if (classEditFormItems.value.at(-2)) {
        classEditFormItems.value.at(-2).options = operatorOptionList.value;
      }
    } else {
      res?.msg && proxy.$ElMessage.error(res?.msg);
    }
  })
})

const classEditFormItems: any = ref([{
  label: '维度类型',
  type: 'tree-select',
  placeholder: '请选择',
  field: 'policyTypeCode',
  default: '',
  options: policyTypeList.value,
  filterable: true,
  clearable: true,
  required: true,
  showAllLevels: false,
  checkStrictly: false,//只能选择叶子节点。
  lazy: false,
  props: {
    value: 'value',
    label: 'label',
    children: 'childDictList'
  },
  disabled: false,
}, {
  label: '策略名称',
  type: 'input',
  field: 'policyName',
  default: '',
  maxlength: 50,
  placeholder: '请输入',
  required: true,
  clearable: true,
}, {
  label: '策略英文名',
  type: 'input',
  field: 'policyEnName',
  default: '',
  maxlength: 50,
  regexp: /[^A-Za-z0-9_]/g,
  placeholder: '请输入',
  required: true,
  clearable: true,
}, {
  label: '启用状态',
  type: 'switch',
  field: 'bizStatus',
  default: 'Y',
  placeholder: '请选择',
  activeValue: 'Y',
  inactiveValue: 'N',
  switchWidth: 32,
}, {
  label: '运算符',
  type: 'select',
  multiple: true,
  collapse: true,
  tagsTooltip: true,
  placeholder: '默认全部',
  field: 'constraintOperatorCodes',
  default: '',
  options: operatorOptionList.value,
  filterable: true,
  clearable: true,
  required: false,
  visible: false,
  disabled: false,
}, {
  label: '策略描述',
  type: 'textarea',
  placeholder: '请输入',
  field: 'description',
  default: '',
  block: true,
  maxlength: 500,
  clearable: true,
  required: true,
}]);

const classEditFormRules = ref({
  policyTypeCode: [required('请选择维度类型')],
  policyName: [required('请填写策略名称')],
  policyEnName: [required('请填写策略英文名')],
  description: [required('请填写策略描述')]
});

/** 新增分类的form */
const classEditFormInfo = ref({
  type: "form",
  title: "",
  col: "span",
  formInfo: {
    id: "add-class-form",
    readonly: false,
    items: classEditFormItems.value,
    rules: classEditFormRules.value,
  },
});

/** 新增编辑分类。 */
const drawerInfo = ref({
  visible: false,
  direction: 'rtl',
  size: 600,
  header: {
    title: '新增策略',
  },
  type: '',
  container: {
    contents: [classEditFormInfo.value],
  },
  footer: {
    visible: true,
    btns: [
      { type: 'default', label: '取消', value: 'cancel' },
      { type: 'primary', label: '确定', value: 'save', loading: false },
    ]
  }
})

const handlerDrawerSelectChange = (val, row, info) => {
  if (row.field == 'policyTypeCode') {
    let selectItem = val && policyTypeList.value.find(p => p.childDictList?.some(c => c.value == val));
    classEditFormItems.value.at(-2).visible = selectItem?.value == 'YS';
    classEditFormItems.value.forEach(item => {
      item.default = info[item.field];
    });
  }
}

const drawerBtnClick = async (btn, info) => {
  if (btn.value == 'cancel') {
    drawerInfo.value.visible = false;
  } else {
    let constraintOperatorCodes = info.constraintOperatorCodes || [];
    if (constraintOperatorCodes?.length) {
      info.constraintOperatorCodes = constraintOperatorCodes.map(c => {
        return operatorOptionList.value.find(o => o.value == c)
      }).sort((a, b) => {
        return a.orderNum - b.orderNum;
      }).map(v => {
        return v.value;
      })
    }
    drawerInfo.value.footer.btns[1].loading = true;
    if (drawerInfo.value.type == 'edit') {
      info.guid = currTableData.value.guid;
      info.policyId = currTableData.value.policyId;
      updatePolicyTemplate(info).then((res: any) => {
        drawerInfo.value.footer.btns[1].loading = false;
        if (res?.code == proxy.$passCode) {
          drawerInfo.value.visible = false;
          getTableData();
          proxy.$ElMessage.success('编辑策略成功');
        } else {
          res?.msg && proxy.$ElMessage.error(res?.msg);
        }
      });
    } else {
      savePolicyTemplate(info).then((res: any) => {
        drawerInfo.value.footer.btns[1].loading = false;
        if (res?.code == proxy.$passCode) {
          drawerInfo.value.visible = false;
          page.value.curr = 1;
          getTableData();
          proxy.$ElMessage.success('新增策略成功');
        } else {
          res?.msg && proxy.$ElMessage.error(res?.msg);
        }
      });
    }
  }
}

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="searchItemList" :searchId="'settle-asset-search'" @search="toSearch" :init="false" />
      <div class="tools_btns">
        <el-button type="primary" @click="newCreate">新增</el-button>
      </div>
    </div>
    <div class="table_panel_wrap">
      <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange"
        @tableSwitchBeforeChange="tableSwitchBeforeChange" />
    </div>
    <Drawer :drawerInfo="drawerInfo" @drawerSelectChange="handlerDrawerSelectChange" @drawerBtnClick="drawerBtnClick"
      ref="drawerRef"></Drawer>
  </div>
</template>

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