<template>
  <div class="headers" :style="{ backgroundColor: color }">
    <el-row :gutter="20" style="height: 100%">
      <el-col :span="1" style="height: 100%">
        <div class="logo"></div>
      </el-col>
      <el-col :span="4" style="height: 100%">
        <span class="title">数智牧场管理系统</span>
      </el-col>
      <el-col :span="10" :offset="9" style="height: 100%">
        <div class="flex">
<!--          <div class="user" style="width: 180px;">-->
<!--            <div>-->
<!--              <el-select @change="onChange" size="mini" v-model="farmId">-->
<!--                <el-option-->
<!--                  v-for="item in getFarmList"-->
<!--                  :key="item.id"-->
<!--                  :label="item.farmName"-->
<!--                  :value="item.id"-->
<!--                ></el-option>-->
<!--              </el-select>-->
<!--            </div>-->
<!--          </div>-->
<!--          <el-divider direction="vertical"></el-divider>-->
          <div class="user" style="width: 250px;">
            <div>
              <el-switch
                style="display: block"
                v-model="$store.state.mode"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="多级导航"
                inactive-text="折叠导航"
                @change="changeMode"
              >
              </el-switch>
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="user" style="width: 100px;">
            <div>
              <i class="el-icon-user-solid" style="font-size: 28px"></i>
            </div>
            <div>
              <span>{{ userName }}</span>
<!--              <el-popover placement="bottom" width="400" trigger="hover">-->
<!--                <div style="padding: 10px">-->
<!--                  <div style="width: 100%;">-->
<!--                    <span style="color: #BBBBBB;">账户信息</span>-->
<!--                    <span class="user-right">账户设置</span>-->
<!--                  </div>-->
<!--                  <el-divider></el-divider>-->
<!--                  &lt;!&ndash;                    <ul>&ndash;&gt;-->
<!--                  &lt;!&ndash;                      <li>职位： <span class="user-color">厂长</span></li>&ndash;&gt;-->
<!--                  &lt;!&ndash;                      <li>本次登录： <span class="user-color">厂长</span></li>&ndash;&gt;-->
<!--                  &lt;!&ndash;                      <li>本次登录： <span class="user-color">厂长</span></li>&ndash;&gt;-->
<!--                  &lt;!&ndash;                      <li>上次登录： <span class="user-color">厂长</span></li>&ndash;&gt;-->
<!--                  &lt;!&ndash;                    </ul>&ndash;&gt;-->
<!--                </div>-->
<!--                <span slot="reference">{{ userName }}</span>-->
<!--              </el-popover>-->
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="user">
            <div style="width: 100%; text-align: center">
              <router-link to="/">
                <i class="home" title="首页"></i>
              </router-link>
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="user">
            <div style="width: 100%; text-align: center">
              <el-popover placement="bottom" width="270" trigger="hover">
                <div class="color_flex">
                  <chrome-picker :value="color" @input="cut"></chrome-picker>
                  <!--                  <div v-for="item in colorList" :style="{backgroundColor: item.color}" :key="item.id" class="box" @click="cut(item.color)">-->
                  <!--                    <span>点击换肤</span>-->
                  <!--                  </div>-->
                </div>
                <i slot="reference" class="colour"></i>
              </el-popover>
            </div>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="user">
            <div style="width: 100%; text-align: center">
              <i class="guanbi" @click="logout" title="退出登录"></i>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { findUpdate, getFarmId } from "../utils/api";
import { Chrome } from "vue-color";
import { Debounce } from "../utils";

export default {
  name: "HeaderElement",
  computed: {
    ...mapState(["color", "farmList", "farmId", "userName"]),
  },
  components: {
    // 'slider-picker': Slider,
    "chrome-picker": Chrome,
  },
  watch: {
    farmList: {
      handler(newVal) {
        if (newVal.length > 0) {
          this.getFarmList = [];
          newVal.forEach((item) => {
            // if (item.rowStatus) {
            this.getFarmList.push(item);
            // }
          });
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      getFarmList: [],
    };
  },
  methods: {
    ...mapActions([
      "setModeAsync",
      "setColorAsync",
      "GetFarm",
      "setFarmIdAsync",
    ]),
    cut: Debounce(function(data) {
      this.setColorAsync(data.hex);
      let params = {
        id: localStorage.getItem("gold_UserId"),
        color: data.hex,
      };
      findUpdate(params).then((res) => {
        console.log(res);
      });
    }),
    changeMode(val) {
      let params = {
        id: localStorage.getItem("gold_UserId"),
        mode: val,
      };
      findUpdate(params).then((res) => {
        console.log(res);
      });
      this.setModeAsync(val);
    },
    logout() {
      localStorage.removeItem("gold_UserName");
      localStorage.removeItem("gold_accessToken");
      localStorage.removeItem("gold_UserId");
      localStorage.removeItem("gold_lastFarmId");
      localStorage.removeItem('gold_UserItem');
      this.$router.replace("/login");
    },
    // 拿到farmid
    init() {
      getFarmId().then((res) => {
        if (res.code === 10000) {
          this.setFarmIdAsync(res.data);
          localStorage.setItem("gold_lastFarmId", res.data);
        }
      });
    },
    // 选择牧场
    onChange(val) {
      let params = {
        id: localStorage.getItem("gold_UserId"),
        lastFarmId: val,
      };
      localStorage.setItem("gold_lastFarmId", val);
      findUpdate(params).then((res) => {
        console.log(res);
      });
      this.setFarmIdAsync(val);
      setTimeout(() => {
        location.reload();
      }, 100);
    },
  },
  mounted() {
    this.init();
    this.GetFarm();
    console.log(this.farmId);
  },
};
</script>

<style scoped>
p {
  margin: 0;
  display: inline-block;
  position: relative;
}
/deep/.el-row {
  margin: 0 !important;
}
/deep/.el-divider--vertical {
  margin: 0 15px;
}
/deep/.el-switch__label {
  color: white;
}
.headers {
  width: 100%;
  height: 50px;
}
.logo {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  background-image: url("../assets/logo.png");
  background-size: 100% 100%;
}
.title {
  font-size: 18px;
  font-weight: 700;
  line-height: 50px;
  color: #fff;
}
.flex {
  width: 100%;
  height: 50px;
  color: #fff;
  display: flex;
  align-items: center;
}
.user {
  width: 80px;
  height: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.user-right {
  float: right;
  margin-right: 10px;
  cursor: pointer;
  color: #31c3a6;
}
li {
  margin-bottom: 10px;
  color: #bbbbbb;
}
.user-color {
  color: #000;
}
.colour {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url("../assets/images/colour.png");
  background-size: 100% 100%;
}
.color_flex {
  width: 100%;
  height: 260px;
  padding: 10px;
}
.box {
  cursor: pointer;
  text-align: center;
  color: #fff;
  line-height: 80px;
}
.box:hover {
  content: "点击换肤";
}
.guanbi {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url("../assets/images/guanbi.png");
  background-size: 100% 100%;
}
.home {
  display: inline-block;
  width: 28px;
  height: 28px;
  background-image: url("../assets/images/home.png");
  background-size: 100% 100%;
}
</style>
