<!--
 * @Author: zhp
 * @Date: 2023-04-18 09:19:02
 * @LastEditTime: 2023-07-18 09:52:45
 * @LastEditors: zhp
 * @Description: 
-->
<template>
  <div>
    <el-popover placement="right" width="400" trigger="click">
      <SearchBar :formConfigs="formConfig" ref="ruleForm" @headBtnClick="buttonClick">
        <!-- <el-badge :value="5" class="item">
            <el-button type="primary" size="small" @click="conditionSearch">条件搜索</el-button>
          </el-badge> -->
      </SearchBar>
      <base-table id="palletTable" :table-props="tableProps" ref="palletTable1" :table-data="tableData">
        <method-btn v-if="tableBtn.length" slot="handleBtn" :width="100" label="操作" :method-list="tableBtn"
          @clickBtn="handleClick" />
      </base-table>
      <i slot="reference" class="el-icon-plus" @click="showInnerTable(injectData.id)" />
    </el-popover>
    <baseConfigFile-add ref="baseConfigFileAddList" v-if="baseConfigFileAddShow" @refreshDataList="getDataList">
    </baseConfigFile-add>
  </div>
</template>
<script>
import i18n from "@/i18n"
import { timeFormatter } from '@/filters'
import baseConfigFileAdd from "./baseConfigFile-add"
const tableBtn = [
  {
    type: "edit",
    btnName: i18n.t('edit'),
  },
  {
    type: "delete",
    btnName: i18n.t('delete'),
  },
  {
    type: "configuration",
    btnName: i18n.t('configuration'),
  }
];
const tableProps = [
  {
    prop: "title",
    label: i18n.t('customerquality.title'),
  },
  {
    prop: "accessPath",
    label: i18n.t('customerquality.accessPath'),
  }
];
export default {
  name: 'InnerTable',
  props: {
    injectData: {
      type: Object,
      default: () => ({})
    },
    itemProp: {
      type: String
    }
  },
  data() {
    return {
      tableProps,
      list: this.injectData,
      urlOptions: {
        getDataListURL: '/customerquality/knowledgeBaseRequirementListData/page',
        deleteURL: '/customerquality/knowledgeBaseRequirementListData/page'
      },
      tableBtn,
      baseConfigFileAddShow:false,
      tableData: [],
      listQuery: {
        limit: 10,
        page:1,
      },
      formConfig: [
        {
          type: "button",
          btnName: i18n.t('search'),
          name: "search",
          color: "primary",
          // plain: true,
        },
        {
          type: "button",
          btnName: i18n.t('add'),
          name: "add",
          color: "success",
          plain: true
        },
      ],
    }
  },
  components: {
    baseConfigFileAdd,
  },
  methods: {
    buttonClick(val) {
      console.log(val)
      switch (val.btnName) {
        case "search":
          this.listQuery.page = 1;
          this.getDataList()
          break;
        // case "export":
        //   // this.listQuery.paramCode = val.paramCode;
        //   this.exportHandle()
        //   break;
        case "add":
          // this.addOrEditTitle = '新增'
          // this.addOrUpdateVisible = true;
          this.baseConfigFileAddShow = true
          this.$nextTick(() => {
            const obj = {
              knowledgeBaseRequirementListId :this.injectData.id
          }
            this.$refs.baseConfigFileAddList.init(obj)
          })
          // this.addOrUpdateHandle()
          break;
        default:
      }
    },
    handleClick(val) {
      if (val.type === "delete") {
        this.$confirm(`确定对[标题为${val.data.title}]进行删除操作?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$http.delete(this.urlOptions.deleteURL, { data: [val.data.id] }).then(({ data }) => {
              if (data && data.code === 0) {
                this.$message({
                  message: "操作成功",
                  type: "success",
                  duration: 1500,
                  onClose: () => {
                    this.getDataList();
                  },
                });
              } else {
                this.$message.error(data.msg);
              }
            });
          })
          .catch(() => { });
      } else if (val.type === 'edit') {
        this.baseConfigFileAddShow = true
        this.$nextTick(() => {
          const obj = {
            knowledgeBaseRequirementListId: this.injectData.id,
            id:val.data.id
          }
          this.$refs.baseConfigFileAddList.init(obj)
        })
      }
    },
    showInnerTable() {
      this.listQuery.knowledgeBaseRequirementListId = this.injectData.id
      this.getDataList()
    },
    getDataList() {
      this.dataListLoading = true;
      this.$http
        .get(this.urlOptions.getDataListURL, {
          params: this.listQuery,
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.tableData = [];
            this.listQuery.total = 0;
            return this.$message.error(res.msg);
          }
          this.tableData = res.data.list;
          this.listQuery.total = res.data.total;
        })
        .catch(() => {
          this.dataListLoading = false;
        })
    },
  }
}
</script>
