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

<script lang="ts" setup name="securityMenu">
import TableTools from '@/components/Tools/table_tools.vue';
const { proxy } = getCurrentInstance() as any;
const dialogLabelFormRef = ref();


onBeforeMount(async () => {

});
// 右侧表格配置
const tableDataList = ref([]);
// 删除标签guids
const deleteLabelGuids = ref<any>([]);

// 保存编辑的guid
const editLabelRow = ref<any>('');
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", type: 'text_btn', class: 'drawer-detail-cell', width: 160, value: 'detail', columClass: 'text_btn' },
    {
      label: "数据产品名称", field: "classifyNames", width: 200,
    },
    { label: "数据类型", field: "gradeDetailName", width: 100 },
    {
      label: '权力主体', field: 'bizState', type: 'switch', activeText: '启用', inactiveText: '停用', activeValue: 'Y', inactiveValue: 'N', switchWidth: 56, width: 100, align: 'center'
    },
    { label: "是否公共数据", field: "updateUserName", width: 120 },
    { label: "状态", field: "updateTime", width: 160 },
  ],
  data: tableDataList.value,
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 120,
    fixed: 'right',
    btns: [
      {
        label: "编辑", value: "edit", click: async (scope) => {
          console.log('编辑', scope);
        }
      },
      {
        label: "删除 ", value: "delete", click: (scope) => {
          console.log('删除', scope);

        }
      },
    ]
  },
  loading: false
});



/**弹窗配置 */
const newCreateGradeFormItems = ref<any>([{
  label: '标签名',
  type: 'input',
  placeholder: '请选择',
  field: 'label',
  default: '',
  required: true,
  filterable: true,
  clearable: true,
  visible: true,
  block: true,
},
{
  label: '分类',
  type: 'tree-select',
  placeholder: '请选择',
  field: 'classifyDetailGuid',
  default: '',
  options: [],
  props: {
    label: "classifyName",
    value: "guid",
  },
  required: true,
  checkStricty: true,
  lazy: false,
  filterable: true,
  clearable: true,
  visible: true,
  block: true,
},
{
  label: '分级',
  type: 'select',
  maxlength: 19,
  placeholder: '请输入',
  field: 'gradeDetailGuid',
  default: '',
  options: [],
  props: {
    label: 'name',
    value: 'guid',
  },
  clearable: true,
  required: true,
  block: true,
},
  // {
  //   label: ' ',
  //   type: 'label',
  //   default: '规则配置',
  //   block: true,
  //   col: 'title-label'
  // },
  // {
  //   label: '精确匹配',
  //   type: 'textarea',
  //   maxlength: 200,
  //   placeholder: '请输入字段中文，中间用英文“,”分号隔开',
  //   field: 'matchChValue',
  //   default: '',
  //   clearable: true,
  //   required: false,

  // },
  // {
  //   label: '',
  //   type: 'textarea',
  //   maxlength: 200,
  //   placeholder: '请输入字段中文，中间用英文“,”分号隔开',
  //   field: 'matchEnValue',
  //   default: '',
  //   clearable: true,
  //   required: false,
  // }
]);

const newCreateGradeFormRules = ref({
  label: [
    { required: true, message: '请输入标签名', trigger: 'change' }
  ],
  detailGuid: [
    { required: true, message: '请选择分类', trigger: 'change' }
  ],
  gradeDetailGuid: [
    { required: true, message: '请选择分级', trigger: 'change' }
  ],
});

const newCreateGradeStandardDialogInfo = ref({
  visible: false,
  size: 600,
  title: "添加标签",
  type: "",
  formInfo: {
    id: "grade-form",
    items: newCreateGradeFormItems.value,
    rules: newCreateGradeFormRules.value,
  },
  submitBtnLoading: false,
  btns: {
    cancel: () => {
      newCreateGradeStandardDialogInfo.value.visible = false;
      newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
    },
    submit: async (btn, info) => {
    }
  }
})



const classSearchItemList = ref<any>([
  {
    type: 'select',
    multiple: true,
    label: '',
    field: 'labelName',
    default: [],
    options: [],
    placeholder: '请选择标签名称',
    clearable: true,
    filterable: true,
    visible: true
  },
  // 状态，可以编辑。

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

]);

const guids = ref<any>([])
const selectChange = async (val: any, row: any) => {
  console.log('selectChange', val, row);
  if (val) {
    guids.value = val;
  }
};

/** 搜索查询分类标准 */
const refCount = ref(0);
const searchClass = async (val: any, clear: boolean = false) => {
  console.log('searchClass', val, clear);
  if (clear) {
    classSearchItemList.value.map(item => item.default = '')
    guids.value = []

    return;
  }
  if (val?.labelName?.length !== 0 || refCount.value >= 1) {

  }

};

const addNewLabel = () => {
  newCreateGradeStandardDialogInfo.value.visible = true;
  newCreateGradeStandardDialogInfo.value.title = '新增标签';
  newCreateGradeFormItems.value.forEach(item => {
    item.default = '';
    item.disabled = false;
  });
  newCreateGradeStandardDialogInfo.value.submitBtnLoading = 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="searchClass"
            @select-change="selectChange" />
        </div>
        <div>
          <el-button type="primary" class="v-add" @click="addNewLabel">新增</el-button>
          <!-- <el-button class="v-import">导入</el-button>
          <el-button>导出</el-button> -->
        </div>
        <div class="table_panel_wrap">
          <Table :tableInfo="tableInfo" />
        </div>
      </div>
    </div>
    <Dialog_form ref="dialogLabelFormRef" :dialogConfigInfo="newCreateGradeStandardDialogInfo" class="v-dialog-form">
    </Dialog_form>
  </div>
</template>

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

  .container_wrap {
    height: 100%;

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

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

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

      .table_panel_wrap {
        margin-top: 12px;
        width: 100%;
        height: calc(100% - 105px);
        min-height: 210px;
        overflow: visible;
      }
    }
  }
}
</style>