<template>
  <el-drawer
    title="设置"
    custom-class="es-sets-drawer"
    size="280px"
    :visible.sync="show"
    :append-to-body="true"
  >
    <div class="es-setting-item" v-if="showMoreTheme">
      <div class="es-setting-title">主题色</div>
      <el-radio-group
        v-if="themes"
        v-model="color"
        size="mini"
        class="es-setting-theme"
        @change="handleTheme"
      >
        <el-radio-button
          v-for="(item, index) in themes"
          :key="index"
          :label="index"
          :style="{ backgroundColor: item }"
        >
          <i class="el-icon-check"></i>
        </el-radio-button>
      </el-radio-group>
      <div class="es-color-picker" v-else>
        <el-color-picker
          v-model="color"
          :predefine="predefineColor"
          @change="handleTheme"
        ></el-color-picker>
        <div class="el-color-picker-tip">请不要选择偏白或者偏黑的颜色</div>
      </div>
    </div>
    <div class="es-setting-item">
      <div class="es-setting-title">菜单风格</div>
      <div class="es-setting-navs-box">
        <template v-if="showMoreTheme">
          <el-tooltip
            class="es-setting-navs-item"
            effect="dark"
            content="顶部菜单布局"
            placement="bottom"
          >
            <div
              class="es-setting-navs es-setting-top-nav"
              @click.stop="handleLayout('default', 'topnav')"
            >
              <es-icon
                class="icon-gou"
                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
                v-show="layoutType == 'default' && activeName == 'topnav'"
              ></es-icon>
            </div>
          </el-tooltip>

          <el-tooltip
            class="es-setting-navs-item"
            effect="dark"
            content="侧边双列菜单布局"
            placement="bottom"
          >
            <div
              class="es-setting-navs es-setting-side-nav"
              @click.stop="handleLayout('default', 'default')"
            >
              <div class="es-setting-side-sub-nav"></div>
              <es-icon
                class="icon-gou"
                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
                v-show="layoutType == 'default' && activeName == 'default'"
              ></es-icon>
            </div>
          </el-tooltip>
          <el-tooltip
            class="es-setting-navs-item"
            effect="dark"
            content="子系统+侧边菜单布局"
            placement="bottom"
          >
            <div
              class="es-setting-navs es-setting-subsystem-nav"
              @click.stop="handleLayout('default', 'subsystem')"
            >
              <es-icon
                class="icon-gou"
                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
                v-show="layoutType == 'default' && activeName == 'subsystem'"
              ></es-icon>
            </div>
          </el-tooltip>
          <el-tooltip
            class="es-setting-navs-item"
            effect="dark"
            content="顶部+侧边菜单布局"
            placement="bottom"
          >
            <div
              class="es-setting-navs es-setting-top-side-nav"
              @click.stop="handleLayout('default', 'topside')"
            >
              <es-icon
                class="icon-gou"
                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
                v-show="layoutType == 'default' && activeName == 'topside'"
              ></es-icon>
            </div>
          </el-tooltip>
          <el-tooltip
            class="es-setting-navs-item"
            effect="dark"
            content="侧边+按钮菜单布局"
            placement="bottom"
          >
            <div
              class="es-setting-navs es-setting-side-navs"
              @click.stop="handleLayout('default', 'side')"
            >
              <es-icon
                class="icon-gou"
                contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
                v-show="layoutType == 'default' && activeName == 'side'"
              ></es-icon>
            </div>
          </el-tooltip>
        </template>
        <el-tooltip
          class="es-setting-navs-item"
          effect="dark"
          content="(新)应用菜单布局"
          placement="bottom"
        >
          <div
            class="es-setting-navs es-setting-app-nav"
            @click.stop="handleLayout('simplicity', 'simplicity')"
          >
            <div class="es-setting-side-sub-nav"></div>
            <es-icon
              class="icon-gou"
              contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
              v-show="layoutType == 'simplicity' && activeName == 'simplicity'"
            ></es-icon>
          </div>
        </el-tooltip>
        <el-tooltip
          class="es-setting-navs-item"
          effect="dark"
          content="顶部菜单+侧边固定布局"
          placement="bottom"
        >
          <div
            class="es-setting-navs es-setting-top-nav-side"
            @click.stop="handleLayout('simplicityTop', 'simplicityTop')"
          >
            <div class="es-setting-side-sub-nav"></div>
            <es-icon
              class="icon-gou"
              contents="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAQCAYAAAAS7Y8mAAAAAXNSR0IArs4c6QAAAStJREFUOE+t070rxVEcx/HXLVkMGJVRUozkYVI2t0QZbFIikywWRu5iMYqBMpiEomwsRpuHxeAPUGSz6Vu/Xx0396l7v9N5+Jx35/s5n1PQ2urAGoqFFnHbsI0V9OC+FeAitjCOD1yg1Cx4J4NG49fYwFtMmgEfYDWzcg+bqa0puB1h/mcN3ztxi7FMF8AA/6kc3I1j9GERjxXgA3hN9uLGh/9pA9yLU0wmgkG8lB2YwVWyFg9WqtRdgJ8QoLTeI4sJfBlHieAc89Usy61Yx36Z8BJzWMBZshc2DdfKf/p4o9jFVHIo4hM/qT9bi07C559GwLn2BtPZ5Atd2fgbs7irBa2W4wdMlAHC0/C2rqr2QeJmeVJOsFQXMRPV+nk5fAjPrQSPZL5GZhuqX8ZgLa+dHzYmAAAAAElFTkSuQmCC"
              v-show="
                layoutType == 'simplicityTop' ||
                activeName == 'simplicityTop' ||
                layoutName == 'simplicityTop'
              "
            ></es-icon>
          </div>
        </el-tooltip>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import util from 'eoss-ui/src/utils/util';
export default {
  name: 'message',
  props: {
    visible: Boolean,
    //主题颜色选择颜色集合
    themes: Array,
    //默认主题色
    theme: String,
    showSimplicityTop: Boolean,
    //颜色板预设颜色
    predefine: {
      type: Array,
      default() {
        return ['#a60006', '#409eff'];
      }
    },
    active: String,
    layoutType: String
  },
  computed: {
    show: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit('update:visible', val);
      }
    },
    //颜色板预设颜色
    predefineColor() {
      if (
        this.theme &&
        this.predefine.indexOf(this.theme.toLowerCase()) === -1
      ) {
        let arry = this.predefine;
        arry.push(this.theme);
        return arry;
      }
      return this.predefine;
    }
  },
  watch: {
    theme: {
      immediate: true,
      handler(val) {
        if (val) {
          this.color = val;
        }
      }
    }
  },
  data() {
    return {
      color: '',
      layoutName: this.layoutType,
      activeName: this.active,
      // 是否显示更多主题颜色选择面板 测试环境时需要显示 (打包后是什么环境?)  在simplicityTop/simplicity布局下 不显示
      showMoreTheme:
        process.env.NODE_ENV === 'development'
          ? true
          : this.showSimplicityTop
          ? false
          : true
    };
  },
  mounted() {},
  methods: {
    //选择主题颜色
    handleTheme(res) {
      res = res.toLowerCase();
      // const rgb = util.getRgb(res);
      // const luma = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
      util.updateTheme(res);
      this.color = res;
      this.$emit('change', { type: 'theme', value: res });
      //this.setTheme(res);
    },
    //选择菜单布局
    handleLayout(res, active) {
      let old = this.activeName;
      this.layoutName = res;
      this.activeName = active;
      this.$emit('layout', res, active, old);
    }
  }
};
</script>
<style scoped>
.es-setting-top-nav-side::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  width: 8px;
  top: 10px;
  bottom: 0;
  z-index: 2;
  background-color: rgb(0, 80, 179);
}
</style>
