<template>
  <div id="containt">
    <el-tabs v-model="activeName" class="tab-box">
      <el-tab-pane :label="$t1('列表')" name="second">
        <div class="grid-height">
          <vxe-grid
            ref="table-m1"
            v-bind="vxeOption"
            @resizable-change="$vxeTableUtil.onColumnWitchChange"
            @custom="$vxeTableUtil.customHandle"
          >
            <template #form>
              <tableForm
                :formData.sync="formData"
                @searchEvent="searchEvent"
                @resetEvent="resetEvent"
              >
                <template #buttonLeft>
                  <vxe-button
                    status="success"
                    class="button-sty"
                    icon="el-icon-download"
                    @click="jsonImport"
                  >
                    {{ $t1("导入发布") }}
                  </vxe-button>
                  <vxe-button
                    status="success"
                    class="button-sty"
                    icon="el-icon-upload2"
                    @click="jsonExport"
                    v-if="isBdFlag"
                    >{{ $t1("导出发布") }}
                  </vxe-button>
                </template>
                <template #buttonRight>
                  <vxe-button
                    icon="el-icon-brush"
                    class="button-sty"
                    @click="resetEvent"
                    type="text"
                    status="primary"
                    plain
                    >{{ $t1("重置") }}
                  </vxe-button>
                  <vxe-button
                    status="warning"
                    icon="el-icon-search"
                    class="button-sty"
                    @click="searchEvent"
                  >
                    {{ $t1("搜索") }}
                  </vxe-button>
                </template>
              </tableForm>
            </template>
            <template #editOrders="{ row }">
              <base-input-number v-model="row.orders"></base-input-number>
            </template>
            <template #taPrefix="{ row }">
              <el-input v-model="row.taPrefix" clearable v-if="row.parent"></el-input>
              <span v-else>{{ row.taPrefix }}</span>
            </template>
            <template #operate="obj">
              <div class="cell-operate">
                <template v-if="$refs['table-m1'].isActiveByRow(obj.row)">
                  <template v-if="isBdFlag">
                    <a @click="saveRowEvent(obj)" class="a-link">
                      <el-tooltip
                        :enterable="false"
                        effect="dark"
                        :content="$t1('保存')"
                        placement="top"
                        popper-class="tooltip-skin"
                        ><i class="el-icon-circle-check"></i
                      ></el-tooltip>
                    </a>
                    <a
                      @click="cancleRowEvent(obj)"
                      class="a-link"
                      v-if="hasSaveRow(obj.row)"
                    >
                      <el-tooltip
                        :enterable="false"
                        effect="dark"
                        :content="$t1('取消行编辑')"
                        placement="top"
                        popper-class="tooltip-skin"
                        ><i class="el-icon-circle-close"></i
                      ></el-tooltip>
                    </a>
                    <a
                      @click="removeRowEvent(obj)"
                      class="a-link"
                      v-if="!hasSaveRow(obj.row)"
                    >
                      <el-tooltip
                        :enterable="false"
                        effect="dark"
                        :content="$t1('删除')"
                        placement="top"
                        popper-class="tooltip-skin"
                        ><i class="el-icon-delete"></i
                      ></el-tooltip>
                    </a>
                  </template>
                </template>
                <template v-else>
                  <template v-if="isBdFlag">
                    <a
                      class="a-link"
                      @click="insertChildEvent(obj)"
                      v-if="obj.row.editAuth"
                    >
                      <el-tooltip
                        :enterable="false"
                        effect="dark"
                        :content="$t1('新增')"
                        placement="top"
                        popper-class="tooltip-skin"
                        ><i class="el-icon-circle-plus-outline"></i
                      ></el-tooltip>
                    </a>
                    <a
                      @click="editRowEvent(obj)"
                      class="a-link"
                      v-if="!obj.row.createDate || obj.row.editAuth"
                    >
                      <el-tooltip
                        :enterable="false"
                        effect="dark"
                        :content="$t1('行编辑')"
                        placement="top"
                        popper-class="tooltip-skin"
                        ><i class="el-icon-edit-outline"></i
                      ></el-tooltip>
                    </a>
                  </template>
                  <a @click="openAuthDialog(obj)" class="a-link" v-if="obj.row.authAuth">
                    <el-tooltip
                      :enterable="false"
                      effect="dark"
                      :content="$t1('权限')"
                      placement="top"
                      popper-class="tooltip-skin"
                      ><i class="el-icon-setting"></i
                    ></el-tooltip>
                  </a>
                </template>
              </div>
            </template>
          </vxe-grid>
        </div>
      </el-tab-pane>
    </el-tabs>
    <authDialog
      v-if="showAuthDialog"
      :visiable.sync="showAuthDialog"
      :currentMenuKind="currentMenuKind"
      @confirm="confirmAuthDialog"
      multi="false"
    />
  </div>
</template>
<script>
import mixin from "./mixins/list";

export default {
  name: "menu_kind:list",
  mixins: [mixin],
};
</script>
