<template>
  <div class="nav-menu">
    <div class="header-logo">
      <span>SAAS 管理平台</span>
    </div>
    <el-menu
      ref="menu"
      router
      mode="horizontal"
      :default-active="this.$route.path"
      text-color="#fff"
      style="flex: 1"
      background-color="#1565C0"
      @select="onClickMenus"
      active-text-color="#ffd04b">
      <template v-for="(nav, index) in menuList">
        <el-menu-item
          :key="index"
          v-if="nav.children.length === 0"
          :index="nav.index">
          <template slot="title">
            <i :class="nav.icon"></i>
            <span class="label">{{ nav.label }}</span>
          </template>
        </el-menu-item>
        <el-submenu :key="nav.index" v-else :index="nav.index">
          <template slot="title">
            <i :class="nav.icon"></i>
            <span class="label">{{ nav.label }}</span>
          </template>
          <el-menu-item
            :index="subs.index"
            v-for="(subs, index) in nav.children"
            :key="index">
            <template slot="title">
              <i :class="subs.icon"></i>
              <span class="label">{{ subs.label }}</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </template>
    </el-menu>
    <div class="user-area">
      <span class="user-avatar">
        <i class="el-icon-user"></i>
      </span>
      <el-dropdown>
        <div size="mini" style="color: #fff">
          {{ userInfo && userInfo.realName }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="updatePassword">
            修改密码
          </el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <!-- <el-button
        type="text"
        style="color: #fff"
        @click="logout"
        >退出登录</el-button
      > -->
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="修改密码"
      :visible.sync="dialogVisible"
      width="400px">
      <el-form :inline="true" label-width="100px" size="small">
        <el-form-item label="原密码">
          <el-input
            show-password
            v-model="oldPwd"
            placeholder="原密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码">
          <el-input
            show-password
            v-model="newPwd"
            placeholder="新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码">
          <el-input
            show-password
            v-model="confimPwd"
            placeholder="确认新密码"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="resetPasswordSumbit">
          确 定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="sql执行工具"
      fullscreen
      custom-class="sql-dialog"
      :visible.sync="omVisible"
      :close-on-click-modal="false"
      width="800px">
      <div class="execute-sql">
        <div class="sql-left">
          <el-form :model="editForm">
            <el-form-item required label="数据源">
              <el-select
                @change="selectChange"
                style="width: 92%"
                v-model="editForm.database"
                multiple
                clearable
                filterable>
                <el-option label="all" value="all"></el-option>
                <el-option
                  :disabled="editForm.database.includes('all')"
                  v-for="it in dataBase"
                  :key="it"
                  :label="`${it.databaseName}`"
                  :value="it.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item required>
              <el-input
                type="textarea"
                :rows="34"
                placeholder="请输入sql"
                v-model="editForm.content"></el-input>
            </el-form-item>
            <el-form-item required label="密码">
              <div style="display: flex">
                <el-input
                  show-password
                  type="password"
                  placeholder="请输入管理密码"
                  v-model="editForm.password"></el-input>
                <el-button
                  :loading="loading"
                  style="margin-left: 20px"
                  type="primary"
                  @click="submitOm">
                  执行
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <div class="sql-right">
          <ul v-if="msg_list.length > 0">
            <li v-for="(item, i) in msg_list" :key="i">
              <div class="flex">
                <span>执行结果：</span>
                <el-tag
                  size="mini"
                  v-if="item.status === 'SUCCESS'"
                  type="success">
                  执行成功
                </el-tag>
                <el-tag size="mini" v-else type="danger">执行失败</el-tag>
              </div>
              <div class="flex">
                <span>数据库：</span>
                <div class="sql">
                  {{ item.databaseName }}
                </div>
              </div>
              <div class="flex">
                <span>sql：</span>
                <div class="sql">
                  {{ item.sql }}
                </div>
              </div>
              <div class="flex" v-if="item.msg">
                <span>错误信息：</span>
                <div class="sql">
                  {{ item.msg }}
                </div>
              </div>
            </li>
          </ul>
          <p class="msg-content" v-else>
            {{ msg_content }}
          </p>
        </div>
      </div>

      <!--      <span slot="footer">-->
      <!--        <el-button @click="omVisible = false">取消</el-button>-->
      <!--        <el-button @click="submitOm" type="primary">确认</el-button>-->
      <!--      </span>-->
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { logout, resetPassword } from '@/common/api/login'
import { setToken, setUser } from '@/utils/auth'
import { post, get } from '@/common/api/axios'

export default {
  name: 'navMenu',
  data() {
    return {
      menuList: [
        {
          id: 1,
          path: '',
          label: 'ERP管理',
          icon: 'el-icon-menu',
          index: '/saas/manage',
          children: []
        },
        {
          id: 3,
          path: '',
          label: 'ERP菜单管理',
          icon: 'el-icon-menu',
          index: '/saas/menu',
          children: []
        },
        {
          id: 4,
          path: '',
          label: '工单管理',
          icon: 'el-icon-s-order',
          index: '/saas/taskManage',
          children: []
        },
        {
          id: 2,
          path: '',
          label: '系统管理',
          icon: 'el-icon-setting',
          index: '/system',
          children: [
            {
              id: 1,
              path: '',
              label: '用户管理',
              icon: 'el-icon-s-order',
              index: 'user',
              children: []
            },
            {
              id: 2,
              path: '',
              label: '角色管理',
              icon: 'el-icon-s-order',
              index: 'user',
              children: []
            },
            {
              id: 3,
              path: '',
              label: '定时任务',
              icon: 'el-icon-message-solid',
              index: '/saas/timed_task',
              children: []
            },
            {
              id: 4,
              path: '',
              label: '公告管理',
              icon: 'el-icon-s-promotion',
              index: '/saas/announceManage',
              children: []
            },
            {
              id: 5,
              path: '',
              label: '服务管理',
              icon: 'el-icon-s-order',
              index: '/saas/services',
              children: []
            },
            {
              id: 6,
              path: '',
              label: '操作费管理',
              icon: 'el-icon-s-order',
              index: '/saas/operationFee',
              children: []
            }
          ]
        },
        {
          id: 5,
          path: '',
          label: '功能管理',
          icon: 'el-icon-setting',
          index: '/setting',
          children: [
            {
              id: 1,
              path: '',
              label: '汇率币种',
              icon: 'el-icon-bank-card',
              index: '/saas/currency',
              children: []
            },
            {
              id: 4,
              path: '',
              label: '国家代码',
              icon: 'el-icon-s-flag',
              index: '/saas/countryCode',
              children: []
            },
            {
              id: 5,
              path: '',
              label: '州省简称',
              icon: 'el-icon-s-help',
              index: '/saas/abbreviation',
              children: []
            },

            {
              id: 7,
              path: '',
              label: '运输商列表',
              icon: 'el-icon-s-operation',
              index: '/saas/logistics/transporters',
              children: []
            },
            {
              id: 8,
              path: '',
              label: '类别风格',
              icon: 'el-icon-box',
              index: '/saas/category-style',
              children: []
            },
            {
              id: 9,
              path: '',
              label: '属性类管理',
              icon: 'el-icon-box',
              index: '/saas/sku-sort',
              children: []
            },
            {
              id: 10,
              path: '',
              label: '属性值管理',
              icon: 'el-icon-box',
              index: '/saas/sku-manage',
              children: []
            },
            {
              id: 11,
              path: '',
              label: '亚马逊导入模板',
              icon: 'el-icon-box',
              index: '/saas/import-template',
              children: []
            }
            // {
            //   id: 11,
            //   path: '',
            //   label: '应用中心',
            //   icon: 'el-icon-s-grid',
            //   index: '/saas/app',
            //   children: []
            // }
          ]
        },
        {
          id: 6,
          path: '',
          label: '运维',
          icon: 'el-icon-s-operation',
          index: '/operation',
          children: [
            {
              id: 6_1,
              path: '',
              label: '丢单管理',
              icon: 'el-icon-s-order',
              index: '/operation/lossOrder',
              children: []
            },
            {
              id: 6_2,
              path: '',
              label: '异常消息',
              icon: 'el-icon-bell',
              index: '/operation/exceptionMessage',
              children: []
            },
            {
              id: 9,
              path: '',
              label: 'sql执行工具',
              icon: 'el-icon-bank-card',
              index: '',
              children: []
            }
          ]
        },
        // {
        //   id: 7,
        //   path: '',
        //   label: '应用中心',
        //   icon: 'el-icon-menu',
        //   index: '/saas/app',
        //   children: []
        // },
        {
          id: 7,
          path: '',
          label: '客户管理',
          icon: 'el-icon-user',
          index: '/user',
          children: [
            {
              id: 1,
              path: '',
              label: '客户管理',
              icon: 'el-icon-s-custom',
              index: '/saas/user/management',
              children: []
            },
            {
              id: 2,
              path: '',
              label: '充值记录',
              icon: 'el-icon-user',
              index: '/saas/user/recharge-record',
              children: []
            },
            {
              id: 3,
              path: '',
              label: '操作费用明细',
              icon: 'el-icon-bank-card',
              index: '/saas/user/operatingDetails',
              children: []
            }
          ]
        },
        {
          id: 8,
          path: '',
          label: '应用版本管理',
          icon: 'el-icon-suitcase-1',
          index: '/saas/production/assistant/manage',
          children: []
        }
      ],
      msg_list: [],
      dataBase: [],
      dialogVisible: false,
      oldPwd: '',
      msg_content: ' ',
      newPwd: '',
      confimPwd: '',
      omVisible: false,
      loading: false,
      editForm: {
        content: '',
        database: ['all'],
        password: ''
      }
    }
  },
  computed: {
    ...mapGetters('tags', ['currentTag']),
    ...mapState(['userInfo'])
  },
  watch: {
    currentTag(v) {
      if (!v) return
      const parent = this.menuList.find((e) => {
        if (e.path === v.path) return true
        if (e.children) {
          return e.children.some((ee) => ee.path === v.path)
        }
        return false
      })
      if (parent) {
        this.$refs.menu.open(parent.path)
      }
    }
  },
  methods: {
    selectChange(v) {
      if (v.includes('all')) {
        this.editForm.database = ['all']
      } else if (
        this.dataBase.length > 0 &&
        this.dataBase.length === v.length
      ) {
        this.editForm.database = ['all']
      }
      console.log(v)
    },
    updatePassword() {
      this.dialogVisible = true
    },
    async resetPasswordSumbit() {
      if (!this.oldPwd) {
        this.$message.warning('请输入原密码')
        return
      }
      if (!this.newPwd) {
        this.$message.warning('请输入新密码')
        return
      }
      if (!this.confimPwd) {
        this.$message.warning('确认新密码')
        return
      }
      if (this.newPwd !== this.confimPwd) {
        return this.$message.warning('新密码两次输入不一致')
      }
      try {
        const res = await resetPassword({
          account: this.userInfo.account,
          oldPwd: this.oldPwd,
          newPwd: this.newPwd
        })
        if (res.code === 200) {
          this.dialogVisible = false
          this.$message.success('密码修改成功')
          this.logout()
        }
        console.log(res)
      } catch (e) {
        console.error(e)
      }
    },
    async logout() {
      try {
        await logout()
      } catch (e) {
        console.error(e)
      }

      setUser(null)
      setToken('')
      localStorage.setItem('tags', null)
      this.$store.commit('tags/removeAllTags')
      this.$router.push('/login')
    },
    onClickMenus(index) {
      if (!index) {
        this.omVisible = true
        this.editForm.content = ''
        this.editForm.password = ''
        this.editForm.database = ['all']
        get('platform/tools/datasource-list').then((res) => {
          if (res.code === 200) {
            this.dataBase = res.data
          }
        })
      }
    },

    async submitOm() {
      if (!this.editForm.content) {
        return this.$message.warning('请输入内容')
      }
      if (!this.editForm.password) {
        return this.$message.warning('请输入密码')
      }
      if (!this.editForm.database || this.editForm.database.length === 0) {
        return this.$message.warning('请选择数据源')
      }
      this.loading = true
      try {
        const res = await post('platform/tools/sql', {
          ...this.editForm,
          ...{
            database: this.editForm.database.join(',')
          }
        })
        if (res.code === 200) {
          this.msg_list = res.data || []
          this.$message.success(res.message)
        } else {
          this.msg_content = res.msg
        }
        this.loading = false
      } catch (e) {
        console.error(e)
        this.loading = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.nav-menu {
  display: flex;
  height: 60px;
  overflow: hidden;
  background-color: #1565c0;

  &::v-deep {
    .el-menu {
      border-bottom: none;
    }

    .el-submenu__title i {
      color: #fff;
    }
  }

  i {
    color: #fff;
  }
}

.header-logo {
  font-size: 22px;
  color: #fff;
  font-weight: bold;
  padding: 14px 20px;
  background-color: #1565c0;
}

.label {
  font-size: 16px;
}

.user-area {
  float: right;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: 16px;
  color: #fff;

  .user-name {
    margin-right: 10px;
  }
}

.user-avatar {
  width: 24px;
  height: 24px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  font-size: 18px;
}
</style>
<style lang="scss">
.sql-dialog {
  display: flex;
  flex-direction: column;

  .el-dialog__body {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
  }

  .execute-sql {
    width: 100%;
    height: 100%;
    display: flex;

    .sql-right {
      flex: 1;
      flex-shrink: 0;
      border: 1px solid #ececec;
      overflow: hidden;

      .msg-content {
        height: 100%;
        padding: 20px;
        box-sizing: border-box;
        overflow: auto;
      }

      ul {
        display: flex;
        height: 100%;
        overflow: auto;
        box-sizing: border-box;
        width: 100%;
        padding: 20px;
        flex-direction: column;

        li {
          width: 100%;
          margin-bottom: 15px;

          .flex {
            display: flex;
            align-items: flex-start;

            margin-bottom: 5px;

            span {
              white-space: nowrap;
            }
          }
        }
      }
    }

    .sql-left {
      width: 49%;
      padding-right: 10px;
      height: 100%;
    }
  }
}
</style>
