<template>
  <a-modal
    :confirmLoading="confirmLoading"
    :visible="visible"
    width="800px"
    class="yo-modal-form"
    title="字典值管理"
  >
    <a-card :bordered="false">
      <Auth auth="sysDictType:page">
        <div class="yo-query-bar">
          <a-form-model :model="query" layout="inline">
            <a-form-model-item label="类型名称">
              <a-input placeholder="请输入类型名称" v-model="query.name" />
            </a-form-model-item>
            <a-form-model-item label="唯一编码">
              <a-input placeholder="请输入唯一编码" v-model="query.code" />
            </a-form-model-item>
            <a-form-model-item>
              <a-button-group>
                <a-button @click="onQuery" type="primary">查询</a-button>
                <a-button
                  @click="
                    () => {
                      (query = {}), onQuery();
                    }
                  "
                  >重置</a-button
                >
              </a-button-group>
            </a-form-model-item>
          </a-form-model>
        </div>
      </Auth>
      <yo-table :columns="columns" :load-data="loadData" ref="table">
        <div class="yo-action-bar" slot="title">
          <div class="yo-action-bar--actions">
            <a-button @click="onOpen('add-form')">新增类型</a-button>
          </div>
        </div>
         <span slot="status" slot-scope="text, record">
             {{statusFilter(text)}}
             </span>
        <span slot="action" slot-scope="text, record">
          <yo-table-actions>
              <a @click="onLoad('data-Index', record)">字典</a>
            <Auth auth="[sysDictType:edit],[sysDictType:delete]">
              <a-dropdown>
                <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
                <a-menu slot="overlay">
                  <Auth auth="sysDictType:edit">
                    <a-menu-item>
                      <a  @click="$refs.roleMenuForm.roleMenu(record)"
                        >编辑</a
                      >
                    </a-menu-item>
                  </Auth>
                  <Auth auth="sysDictType:delete">
                    </a-menu-item>
                    <a-menu-item>
                    <a-popconfirm
                      @confirm="onDelete(record)"
                      placement="topRight"
                      title="是否确认删除"
                    >
                      <a>删除</a>
                    </a-popconfirm>
                     </a-menu-item>
                  </Auth>
                </a-menu>
              </a-dropdown>
            </Auth>
          </yo-table-actions>
        </span>
      </yo-table>
    </a-card>
    <br />
     <!-- <data-Index ref="data-Index" @ok="onReloadData"/> -->
     <!-- <add-form @ok="onReloadData" ref="add-form" />
     <edit-form @ok="onReloadData" ref="edit-form" />
      <role-menu-form ref="roleMenuForm" @ok="onReloadData"/>
      <role-org-form ref="roleOrgForm" @ok="onReloadData"/> -->
  </container>
  </a-modal>
</template>
<script>
// import AddForm from './addForm';
// import editForm from "./editForm";
// import roleMenuForm from "./roleMenuForm";
// import dataIndex from "./dictdata/index";
export default {
     components: {
      //  dataIndex
  //     AddForm,
  //     editForm,
  //     roleMenuForm,
  //     roleOrgForm,
     },
  data() {
    return {
      query: {},
      columns: [
        {
          title: "类型名称",
          dataIndex: "name",
        },
        {
          title: "唯一编码",
          dataIndex: "code",
        },
        {
          title: "排序",
          dataIndex: "sort",
        },
        {
          title: "备注",
          dataIndex: "remark",
          width: 200,
        },
        {
          title: "状态",
          dataIndex: "status",
          scopedSlots: { customRender: "status" },
        },
        {
          title: "操作",
          width: "150px",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
        },
      ],
      visible:false,

      statusDict: [],
    };
  },
  created() {
    this.onLoadCodes();
  },
  methods: {
    statusFilter(status) {
      // eslint-disable-next-line eqeqeq
      const values = this.statusDict.filter((item) => item.code == status);
      if (values.length > 0) {
        return values[0].value;
      }
    },
    /**
     * 必要的方法
     * 传给yo-table以示意数据接口及其参数和返回的数据结构
     */
    loadData(params) {
      return this.$api
        .sysDictDataPage({
          ...params,
          ...this.query,
        })
        .then((res) => {
          this.visible = true;
          console.log(params)
          return res.data;
        });
    },

    /**
     * 有查询功能时的必要方法
     * 加载数据时初始化分页信息
     */
    onQuery() {
      this.$refs.table.onReloadData(true);
    },

    /**
     * 必要方法
     * 重新列表数据
     */
    onReloadData() {
      this.$refs.table.onReloadData();
    },

    /**
     * 加载字典数据时的必要方法
     */
    onLoadCodes() {
      this.$api
        .$queue([this.$api.sysDictTypeDropDownWait({ code: "common_status" })])
        .then((res) => {
          this.statusDict = res[0].data;
        });
    },

    bindCodeValue(code, name) {
      const c = this.codes
        .find((p) => p.code == name)
        .values.find((p) => p.code == code);
      if (c) {
        return c.value;
      }
      return null;
    },

    /**
     * 有编辑新增功能的必要方法
     * 从列表页调用窗口的打开方法
     */
    onOpen(formName, record) {
      this.$refs[formName].onOpen(record);
    },

    onLoad(formName,record){
      this.$refs[formName].loadData(record);
    },
    onResult(success, message, successMessage) {
      if (success) {
        this.$message.success(successMessage);
        this.onReloadData();
      } else {
        this.$refs.table.onLoaded();
        this.$message.error(message);
      }
    },

    onSetDefault(record) {
      this.$refs.table.onLoading();
      this.$api
        .sysAppSetAsDefault({ id: record.id })
        .then(({ success, message }) => {
          this.onResult(success, message, "设置成功");
        });
    },

    onDelete(record) {
      this.$refs.table.onLoading();
      this.$api.sysDictTypeDelete(record).then(({ success, message }) => {
        this.onResult(success, message, "删除成功");
      });
    },
  },
};
</script>