<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>
                  <vxe-button status="primary" class="button-sty" icon="el-icon-plus" @click="addMenu(2)">
                    {{ $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 #typeEdit="obj">
              <template v-if="obj.row.type == 2">
                {{ typeMap[2] }}
              </template>
              <el-select v-else v-model="obj.row.type">
                <el-option :value="0" :label="typeMap[0]"/>
                <el-option :value="1" :label="typeMap[1]"/>
                <el-option :value="3" :label="typeMap[3]"/>
                <el-option :value="4" :label="typeMap[4]"/>
                <el-option :value="5" :label="typeMap[5]"/>
              </el-select>
            </template>
            <template #menuImgEdit="{row,rowIndex}">
              <el-popover
                placement="bottom"
                width="680"
                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: 'menu:in_list',
  components: {},
  mixins: [tableTreeMixins],
  mounted() {
    this.initTableList();
  },
  data() {
    let that = this;
    return {
      activeName: 'second',
      dataId: '',
      formData: {},
      vxeOption: {},
      menuType: 0,
      iconList: [
        "icon-shangji-shangjiguanli",
        "icon-daifahuodingdan",
        "icon-jichuziliao",
        "icon-zuzhi",
        "icon-shujujianmo",
        "icon-wenjianguanli",
        "icon-guanli1",
        "icon-dianshang",
        "icon-ziyuan",
        "icon-feiyongguanli",
        "icon-yunpingtai",
        "icon-yingxiao",
        "icon-biaodanguanli",
        "icon-baobiao",
        "icon-yusuanguanli",
        "icon-baoxiao",
        "icon-yanfa",
        "icon-hetong",
        "icon-danjuliuchengshezhi",
        "icon-shenqingguanli",
        "icon-xitongshezhi",
        "icon-icon-servicenetwork",
        "icon-a-zu96",
        "icon-chanpin2",
        "icon-shangpin2",
        "icon-tuihuanhuo1",
        "icon-wenquantiaocha",
        "icon-cangchu",
        "icon-caigou",
        "icon-churuku",
        "icon-fl-gouwuche",
        "icon-shangpinfenlei",
        "icon-shangpinshangxiajia",
        "icon-taocanxinxi_changgui",
        "icon-kehuchaxun",
        "icon-shangpin-canshumoban",
        "icon-shangpinguanli-shangpinweihu",
        "icon-kehubiangeng",
        "icon-shanghuguanxiweihu",
        "icon-kehuxinzeng",
        "icon-dunpaibaowei",
        "icon-a-061_bijiben",
        "icon-a-061_gengduo",
        "icon-a-061_gouwu-12",
        "icon-a-061_jianzhu-17",
        "icon-a-061_shuben",
        "icon-a-061_jinbi",
        "icon-a-061_guangbo",
        "icon-a-061_shuqian",
        "icon-a-061_shangpin",
        "icon-a-061_kuaidi",
        "icon-a-061_wenjian",
        "icon-a-061_xiaoxi",
        "icon-a-rongqi262",
        "icon-a-rongqi256",
        "icon-a-rongqi265",
        "icon-a-rongqi285",
        "icon-huomiao-mianxing",
        "icon-dingwei-mianxing",
        "icon-xiuxian-mianxing",
        "icon-shuju-wenjianliebiao",
        "icon-chexing-pinpailiebiao",
        "icon-yonghu-gongzuodanwei",
        "icon-shujujieguo",
        "icon-gongyingshangguanli",
        "icon-xitong-quanxianguanli",
        "icon-shujuguanli",
        "icon-yonghushenhe",
        "icon-gongyingshangliebiao",
        "icon-xiaoliangliebiao",
        "icon-chexing-ruanjianbanben",
        "icon-xitong-meijuguanli",
        "icon-huiyuan-qiyeguanli",
        "icon-chexing-ruanjianbanben1",
        "icon-shuju-ceshiguihua",
        "icon-yonghuliebiao",
        "icon-yonghuguanli",
        "icon-xitong-jiaoseguanli",
        "icon-chexingliebiao",
        "icon-chexingguanli",
        "icon-shujujiegou",
        "icon-huiyuanyonghu",
        "icon-huiyuan-quanxianguanli",
        "icon-shexiangtouqiehuan",
        "icon-luyin",
        "icon-yingpianjiesuo",
        "icon-yingpianjiasuo",
        "icon-qianlu",
        "icon-luxiangjiasuo",
        "icon-a-yonghuliebiao3x",
        "icon-a-yijianfankui3x",
        "icon-a-chanpinshangjiaguanli3x",
        "icon-a-kefufankui3x",
        "icon-a-zhanghaoguanli3x",
        "icon-a-kefu3x",
        "icon-a-kesu3x",
        "icon-a-ribaobiaoshuju3x",
        "icon-a-tuikuan3x",
        "icon-gudingmianzhi",
        "icon-manjianquan",
        "icon-xiangouhuodong",
        "icon-youhuiquan",
        "icon-Xyuanhuodong",
        "icon-shangpindongcha",
        "icon-zhijianghuodong",
        "icon-shizhongshezhi",
        "icon-kasuceshi",
        "icon-SDkarongliang",
        "icon-sudubuchang",
        "icon-sududanwei",
        "icon-GPSxinxi",
        "icon-GPSxianshi",
        "icon-GPSshuiyin",
        "icon-a-shouhui3x",
        "icon-a-yunyingpeizhi3x",
        "icon-biaotitubiao",
        "icon-tubiao1",
        "icon-tubiao18",
        "icon-tubiao28",
        "icon-tiyugonggongsheshi",
        "icon-tubiaoliebiao",
        "icon-VRtubiao",
        "icon-tubiaoAzitubiao",
        "icon-tubiao2",
        "icon-tubiao-",
        "icon-tubiao-1",
        "icon-tubiao-2",
        "icon-tubiao-3",
        "icon-tubiao3",
        "icon-a-tubiao-daqijiayou",
        "icon-charge-fill",
        "icon-book-fill",
        "icon-device-set-fill",
        "icon-dynamic-password-fill",
        "icon-map-fill",
        "icon-security-fill",
        "icon-tool-fill",
        "icon-readcard-fill",
        "icon-chaye",
        "icon-baoxian",
        "icon-dadou",
        "icon-nongye",
        "icon-nongyeqixiang",
        "icon-pingguo",
        "icon-nongyebaoxian",
        "icon-yaogan",
        "icon-zhiwu",
        "icon-weixing",
        "icon-qixiang",
        "icon-zuowu",
        "icon-qiyeguanli-2",
        "icon-qiyeshenhe-2",
        "icon-xiaoxi",
        "icon-xunhuan",
        "icon-zoushi",
        "icon-bushu",
        "icon-duanlian",
        "icon-gaojing",
        "icon-renyuan",
        "icon-tubiao4",
        "icon-wangguan",
        "icon-wangluo",
        "icon-fenzhi",
        "icon-gongchang",
        "icon-zhihuizhongxin",
        "icon-mti-an-gongmaoqiye",
        "icon-mti-an-zhongdaweixianyuan",
        "icon-mti-cheng-huanjing",
        "icon-mti-cheng-lvhua",
        "icon-mti-di-dimianchenjiang",
        "icon-mti-cheng-fengli",
        "icon-mti-di-qiangzhentai",
        "icon-mti-dong-yinhuan",
        "icon-mti-dong-jiaotongshigu",
        "icon-mti-dong-jianzhugongdi",
        "icon-mti-fang-jiangyuliang",
        "icon-mti-dong-weihuapin",
        "icon-mti-gu-shengtaihuanjing",
        "icon-mti-ying-daochang",
        "icon-mti-sen-shumuziyuanfenbu",
        "icon-mti-gongdi",
        "icon-mti-ying-moshiqiehuan",
        "icon-mti-ying-tongxunbaozhang",
        "icon-mti-ying-qidongyuan",
        "icon-mti-ying-jishuidian",
        "icon-mti-ying-zaihoufupan",
        "icon-wodeshequ2",
        "icon-service-line-1",
        "icon-notice-manage-fill",
        "icon-announcement-fill",
        "icon-box-noise-fill",
      ],
      typeMap: {
        0: this.$t1('菜单'),
        1: this.$t1('按钮'),
        2: this.$t1('首页'),
        3: this.$t1('外部菜单'),
        4: this.$t1('第三方地址'),
        5: this.$t1('动态表单'),
      }
    };
  },
  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_menu_list-m1',
        path: USER_PREFIX + '/menu/list',
        treeNodeUrl: USER_PREFIX + '/menu/listChildren',
        editSaveUrl: USER_PREFIX + '/menu/save',
        editDefaultRow: () => {
          return {enabled: true, type: this.menuType,checkPermission: 0};
        },
        param: () => {
          return this.formData;
        },
        treeNodeParam: row => {
          return {
            parent: row.id,
            enabled: this.formData.enabled
          };
        },
        config: {
          treeConfig: {
            parentField: 'parent'
          },
          scrollX:{
            enabled: false
          }
        },
        columns: [
          {type: 'checkbox', width: 48, 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}/>];
                }
              }
            }
          },
          {
            field: 'url',
            title: this.$t1('菜单地址'),
            width: 200,
            editRender: {},
            slots: {
              edit: ({row}) => {
                return [<el-input v-model={row.url}/>];
              }
            }
          },
          {
            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: 'checkPermission',
            title: this.$t1('查询数据权限'),
            width: 150,
            editRender: {},
            slots: {
              default: ({row}) => {
                if (row.checkPermission) {
                  return [<div class="txt-status">{this.$t1('启用')}</div>];
                } else {
                  return [<div class="txt-status s-3">{this.$t1('禁用')}</div>];
                }
              },
              edit: ({row}) => {
                return [
                  <el-select v-model={row.checkPermission}>
                      <el-option value={1} label={this.$t1('启用')}></el-option>
                      <el-option value={0} label={this.$t1('禁用')}></el-option>
                  </el-select>
                ]
              }
            }
          },
          // { field: 'treePathName', title: '上级菜单', width: 200 },
          {field: 'orders', title: this.$t1('序号'), width: 100, editRender: {name: 'input'}},
          {
            field: 'type',
            title: this.$t1('类型'),
            width: 100,
            editRender: {},
            slots: {
              default: ({row}) => {
                return this.typeMap[row.type] || '';
              },
              edit: 'typeEdit'
            }
          },
          {
            field: 'menuImg',
            title: this.$t1('图标'),
            width: 150,
            editRender: {},
            slots: {
              default: ({row}) => {
                return [
                  <i class={"iconfont " + row.menuImg}></i>
                ];
              },
              edit: "menuImgEdit"
            }
          },
          {
            field: 'menuEnName',
            title: this.$t1('英文菜单名称'),
            width: 250,
            editRender: {name: 'input'}
          },
          {
            field: 'route',
            title: this.$t1('路由'),
            width: 100,
            editRender: {name: 'input'}
          },
          {title: this.$t1('创建时间'), field: 'createDate', width: 150},
          // { title: this.$t1('更新人'), field: 'modifyBy', width: 100 },
          {title: this.$t1('更新时间'), field: 'modifyDate', width: 150},
          {
            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']);
        }
      }
    },
    checkMenuImg(row, menuImg, rowIndex) {
      row.menuImg = menuImg;
      this.$refs['menuImg' + rowIndex].showPopper = false;
    },
    clearMenuImg(row) {
      row.menuImg = null;
    }
  }
};
</script>
<style scoped lang="scss">
.el-select-dropdown__item .iconfont {
  vertical-align: middle;
  margin-right: 3px;
}

.icons-box_select {
  .el-icon-circle-close {
    display: none;
  }
}

.icons-box_select.noNone:hover {
  .el-icon-arrow-down {
    display: none;
  }

  .el-icon-circle-close {
    display: inline-block;
  }
}
</style>
