<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>
              <div class="clearfix screen-btns">
                <div class="fl">
                  <vxe-button status="primary" class="button-sty" icon="el-icon-plus" @click="addMenu(0)">
                    {{ $t1('新增一级菜单') }}
                  </vxe-button>
                </div>
                <div class="fr">
                  <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>
                </div>
              </div>
              <vxe-form ref="form" class="screen-box" title-width="92px" title-align="right" :data="formData"
                        @submit="searchEvent">
                <vxe-form-item :title="$t1('菜单名称')+':'" field="menuName">
                  <template v-slot>
                    <el-input v-model="formData.menuName" size="small" clearable/>
                  </template>
                </vxe-form-item>
                <vxe-form-item :title="$t1('菜单编码')+':'" field="menuCode">
                  <template v-slot>
                    <el-input v-model="formData.menuCode" size="small" clearable/>
                  </template>
                </vxe-form-item>
                <vxe-form-item :title="$t1('是否启用')+':'" field="enabled">
                  <template v-slot>
                    <el-select v-model="formData.enabled" clearable>
                      <el-option value="true" :label="$t1('启用')"></el-option>
                      <el-option value="false" :label="$t1('禁用')"></el-option>
                    </el-select>
                  </template>
                </vxe-form-item>
              </vxe-form>
            </template>
            <template #menuImgEdit="{row,rowIndex}">
              <el-popover
                placement="bottom"
                width="486"
                trigger="click"
                :ref="'menuImg'+rowIndex"
              >
                <div class="icons-box">
                  <div class="item iconfont" v-for="(item,index) in iconList" :key="index"
                       :class="[item,row.menuImg == item ? 'on':'']" @click="checkMenuImg(row,item,rowIndex)"></div>
                </div>
                <label class="icons-box_select" :class="{noNone:(!!row.menuImg)}" slot="reference">
                  <i :class="row.menuImg" class="iconfont"></i>
                  <i class="el-icon-arrow-down"></i>
                  <i class="el-icon-circle-close icon-box_del" @click.stop="clearMenuImg(row)"></i>
                </label>
              </el-popover>

            </template>
            <template #operate="obj">
              <div class="cell-operate">
                <template v-if="$refs['table-m1'].isActiveByRow(obj.row)">
                  <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 v-else>
                  <a class="a-link" @click="addMenu(0, obj)" v-if="obj.row && obj.row.type != 2">
                    <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 && !obj.row.is_top">
                    <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>
              </div>
            </template>
          </vxe-grid>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {tableTreeMixins} from '@base/mixins/tableTree/index.js';

export default {
  name: 'mobile_menu:list',
  components: {},
  mixins: [tableTreeMixins],
  mounted() {
    this.initTableList();
  },
  data() {
    let that = this;
    return {
      activeName: 'second',
      dataId: '',
      formData: {},
      vxeOption: {},
      menuType: 0
    };
  },
  methods: {
    searchEvent() {
      this.$refs['table-m1'].commitProxy('reload');
    },
    resetEvent() {
      this.formData = {};
      this.$refs['table-m1'].commitProxy('reload');
    },
    initTableList() {
      let that = this;
      let tableOption = {
        vue: this,
        tableRef: 'table-m1',
        tableName: 'user_mobile_menu_list-m1',
        path: USER_PREFIX + '/mobile_menu/list',
        treeNodeUrl: USER_PREFIX + '/mobile_menu/listChildren',
        editSaveUrl: USER_PREFIX + '/mobile_menu/save',
        editDefaultRow: (obj) => {
          let parentCode = obj?.row?.id ? obj.row.menuCode : null
          return {enabled: true, type: this.menuType, parentCode: parentCode};
        },
        param: () => {
          return this.formData;
        },
        treeNodeParam: row => {
          return {
            parent: row.id,
            enabled: this.formData.enabled
          };
        },
        config: {
          treeConfig: {
            parentField: 'parent'
          }
        },
        columns: [
          {type: 'checkbox', width: 30, resizable: false, fixed: 'left'},
          {
            title: this.$t1('菜单名称'),
            field: 'menuName',
            width: 250,
            fixed: 'left',
            treeNode: true,
            editRender: {name: 'input'},
            slots: {
              default: ({row}) => {
                return [
                  <a
                    class="levitate-tips"
                    onclick={event => {
                      event.stopPropagation();
                      this.$refs['table-m1'].toggleTreeExpand(row);
                    }}
                  >
                    {row.menuName}
                  </a>
                ];
              }
            }
          },
          {
            field: 'menuCode',
            title: this.$t1('菜单编码'),
            width: 250,
            editRender: {},
            slots: {
              edit: ({row}) => {
                if (false && row.type != 2 && row.type != 3 && this.hasSaveRow(row)) {
                  return row.menuCode;
                } else {
                  return [<el-input v-model={row.menuCode} clearable/>];
                }
              }
            }
          },
          {
            field: 'url',
            title: this.$t1('菜单地址'),
            width: 200,
            editRender: {},
            slots: {
              edit: ({row}) => {
                if (row.type == 2) {
                  return row.url;
                } else {
                  return [<el-input v-model={row.url} clearable/>];
                }
              }
            }
          },
          {
            field: 'enabled',
            title: this.$t1('是否启用'),
            width: 150,
            editRender: {
              name: '$select',
              events: {
                change: () => {
                  this.$forceUpdate();
                }
              },
              options: [
                {
                  label: this.$t1('启用'),
                  value: true
                },
                {
                  label: this.$t1('禁用'),
                  value: false
                }
              ]
            },
            slots: {
              default: ({row}) => {
                if (row.enabled) {
                  return [<div class="txt-status">{this.$t1('启用')}</div>];
                } else {
                  return [<div class="txt-status s-3">{this.$t1('禁用')}</div>];
                }
              }
            }
          },
          {field: 'orders', title: this.$t1('序号'), width: 100, editRender: {name: 'input'}},
          {
            field: 'menuImg',
            title: this.$t1('图标'),
            width: 150,
            editRender: {},
            slots: {
              edit: ({row}) => {
                return [<el-input v-model={row.menuImg}/>];
              }
            }
          },
          {title: this.$t1('创建时间'), field: 'createDate', width: 200},
          {
            width: 100,
            title: '',
            fixed: 'right',
            sortable: false,
            slots: {default: 'operate'}
          }
        ]
      };
      this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
        this.vxeOption = opts;
      });
    },
    addMenu(type, parentParam) {
      this.menuType = type;
      if (type == 2) {
        this.insertTopRow(this.$refs['table-m1']);
      } else {
        if (parentParam) {
          this.insertChildEvent(parentParam);
        } else {
          this.insertTopRow(this.$refs['table-m1']);
        }
      }
    }
  }
};
</script>
