<template>
  <div class="app-container home">
    <Row :gutter="40">
      <Col :span="17" class="leftContainer">
      <Row>
        <Col all-span-use>
        <Row :gutter="20">
          <Col :span="2">
          <el-image :src="avatar" style="border-radius: 50px;width: 85%;height: 85%"></el-image>
          </Col>
          <Col :span="20">
          <Row style="height: 85%">
            <!-- <Col class="helloName"> {{ 'Hello,'   }}</Col> -->
            <Col class="helloName"> {{ $t('index.welcome') + ' , ' + $store.state.user.userInfo.nickName }}</Col>
          </Row>
          </Col>
        </Row>
        </Col>
        <Col style="height: 80%;margin-top: 1.8%;">
        <CustomCard label="index.navigation" class="indexGuideCard">
          <Row :gutter="35">
            <!--线索-->
            <Col :span="3" v-has-permi="['business:lead:list']" style="cursor: pointer" @click="handleComingClick(2)">
            <Row>
              <Col class="guideImage">
              <div class="guideInner" style="background-color:#FFF9E2;width: 66px;height: 66px">
                <el-image :src="require('../assets/images/index/xiansuoredian.svg')" />
              </div>
              </Col>
              <Col class="guideText">
              <span>{{ $t('index.guideTwo') }}</span>
              </Col>
            </Row>
            </Col>
            <!--客户-->
            <Col :span="3" v-has-permi="['business:account:list']" style="cursor: pointer"
              @click="handleComingClick(1)">
            <Row>
              <Col class="guideImage">
              <div class="guideInner" style="background-color:#E4FEE8;width: 66px;height: 66px">
                <el-image :src="require('../assets/images/index/customer.svg')" />
              </div>
              </Col>
              <Col class="guideText">
              <span>{{ $t('index.guideOne') }}</span>
              </Col>
            </Row>
            </Col>
            <!--项目-->
            <Col :span="3" v-has-permi="['business:project:list']" style="cursor: pointer"
              @click="handleComingClick(4)">
            <Row>
              <Col class="guideImage">
              <div class="guideInner" style="background-color:#FCEFF3;width: 66px;height: 66px">
                <el-image :src="require('../assets/images/index/a-1lixiangxiangmuxinxi.svg')" />
              </div>
              </Col>
              <Col class="guideText">
              <span>{{ $t('index.guideFour') }}</span>
              </Col>
            </Row>
            </Col>
            <!--跟进-->
            <Col :span="3" v-has-permi="['business:follow:list']" style="cursor: pointer" @click="handleComingClick(3)">
            <Row>
              <Col class="guideImage">
              <div class="guideInner" style="background-color:#E6F7FF;width: 66px;height: 66px">
                <el-image :src="require('../assets/images/index/zuji.svg')" />
              </div>
              </Col>
              <Col class="guideText">
              <span>{{ $t('index.guideThree') }}</span>
              </Col>
            </Row>
            </Col>

            <!--报价-->
            <Col :span="3" style="cursor: pointer" @click="handleComingClick(5)">
            <Row>
              <Col class="guideImage">
              <div class="guideInner" style="background-color:#F0F0FF;width: 66px;height: 66px">
                <el-image :src="require('../assets/images/index/i-money.svg')" />
              </div>
              </Col>
              <Col class="guideText">
              <span>{{ $t('index.guideFive') }}</span>
              </Col>
            </Row>
            </Col>
            <!--土建出图-->
            <Col :span="3" style="cursor: pointer" @click="handleComingClick(6)">
            <Row>
              <Col class="guideImage">
              <div class="guideInner" style="background-color:#F0F0FF;width: 66px;height: 66px">
                <el-image :src="require('../assets/images/index/a-hetong24.svg')" />
              </div>
              </Col>
              <Col class="guideText">
              <span>{{ $t('menu.civil') }}</span>
              </Col>
            </Row>
            </Col>
            <!--培训考核-->
            <Col :span="3" style="cursor: pointer" @click="handleComingClick(7)">
            <Row>
              <Col class="guideImage">
              <div class="guideInner" style="background-color:#F0F0FF;width: 66px;height: 66px">
                <el-image :src="require('../assets/images/index/导航7.png')" />
              </div>
              </Col>
              <Col class="guideText">
              <span>{{ $t('menu.train') }}</span>
              </Col>
            </Row>
            </Col>

          </Row>
        </CustomCard>
        </Col>
      </Row>

      <Row style="margin-top: 1.8%">
        <Col>
        <span class="dataBoard">{{ $t('index.dataBoard') }}</span>
        </Col>
        <Col style="margin-top: 1.2%">
        <IndexDashboard class="indexDashBoard" />
        </Col>
      </Row>
      </Col>
      <!-- 右侧部分 代办及未读     -->

      <Col :span="6" class="rightContainer">
      <Row style="margin: 20px 0 0;cursor: pointer;" @click.native="$tab.openPage(initMessageTitle, '/system/messageCenter')">
        <span class="todoItemsModule">{{ $t('index.unreadMessages') }}</span>
        <span><i class="el-icon-arrow-right" /></span>
      </Row>
      <Row style="padding-bottom:5px;max-height: 40vh;overflow: auto;">

        <Col v-for="item in unReadItems" class="todoItems" style="cursor: pointer;"
          @click="$tab.openPage(initMessageTitle, '/system/messageCenter')">
        <Row :gutter="20" style="height: 100%;width: 100%;">
          <Col :span="2" class="noReadImageContainer">
          <el-image class="noReadImageClass" :src="require('../assets/images/index/未读.png')" />
          </Col>
          <Col :span="18" style="height: 100%">
          <Row style="height: 100%">
            <!--<Col class="todoItemTitle"> {{ $t('index.quotationMessage') }}</Col>-->
            <Col class="todoItemTitle"> {{ dict.type.message_type.find((dict) => dict.value === item.messageType).label
            }}</Col>
            <Col class="toReadMessageDesc ellipsis-multiline"> {{ item.messageContent }}</Col>
            <Col class="toReadMessageItemDate"> {{ item.createTime }}</Col>
          </Row>
          </Col>
          <Col :span="2" style="height: 100%;">
          <span style="height: 100%;display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;cursor: pointer;min-height: 84px"><i class="el-icon-arrow-right" /></span>
          </Col>
        </Row>
        </Col>

        <Col v-if="unReadItems.length === 0" class="NoDataEmpty">
        <Row>
          <Col style="text-align: center">
          <el-image :src="require('@/assets/images/index/NoUnReadMsg.svg')" />
          </Col>
          <Col style="text-align: center">
          <span class="noDataEmptyText">{{ $t('common.noDataEmptyText') }}</span>
          </Col>
        </Row>
        </Col>
      </Row>
      <!--     代办事项暂时隐藏   -->
      <Row style="margin: 20px 0 0;cursor: pointer;" @click.native="$tab.openPage(initTodoTitle, '/system/todo')">
        <span class="todoItemsModule">{{ $t('index.todoItems') }}</span>
        <span><i class="el-icon-arrow-right" /></span>
      </Row>
      <Row style="padding-bottom:5px;max-height: 40vh;overflow: auto;">
        <Col v-for="item in todoItems" :key="item.id" class="todoItems"
          @click.native="todoPage({ auditFlow: item.auditFlow, businessNo: item.businessDesc })">
        <Row :gutter="20" style="height: 100%;width: 100%;">
          <Col :span="2" class="shortContainer" all-span-use>
          <span class="todoShort">todo</span>
          </Col>
          <Col :span="18" style="height: 100%">
          <Row style="height: 100%">
            <Col class="todoItemTitle"> {{ `您有一条${item.auditFlowName}数据待审批` }}</Col>
            <Col class="todoItemDesc"> {{ `业务编号：${item.businessDesc}` }}</Col>
            <Col class="todoItemDate"> {{ item.startTime }}</Col>
          </Row>
          </Col>
          <Col :span="2" style="height: 100%;">
          <span style="height: 100%;display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-content: center;min-height: 84px"><i class="el-icon-arrow-right" /></span>
          </Col>
        </Row>
        </Col>

        <Col v-if="!todoItems || todoItems.length === 0" class="NoDataEmpty">
        <Row>
          <Col style="text-align: center">
          <el-image :src="require('@/assets/images/index/NoUnReadMsg.svg')" />
          </Col>
          <Col style="text-align: center">
          <span class="noDataEmptyText">{{ $t('common.noDataEmptyText') }}</span>
          </Col>
        </Row>

        </Col>
      </Row>

      </Col>
    </Row>
  </div>
</template>

<script>
import Row from "../components/CustomElement/layout/Row.vue";
import Col from "../components/CustomElement/layout/Col.vue";
import { mapGetters } from "vuex";
import CustomCard from "../components/CustomElement/CustomCard.vue";
import * as echarts from "echarts";
import { selectMessageForIndex } from "../api/business/message/message";
import { getTodoList } from "@/api/audit/flow.js";
import Dashboard from "./board/dashboard.vue";
import IndexDashboard from "./board/indexDashboard.vue";

export default {
  name: "Index",
  components: { IndexDashboard, Dashboard, CustomCard, Col, Row },
  dicts: ['message_type'],
  data() {
    return {
      todoItems: [],
      unReadItems: [],
      gotoProject: false,
    };
  },
  computed: {
    ...mapGetters(["avatar"]),
    initMessageTitle() {
      return this.$t("index.messageCenter");
    },
    initTodoTitle() {
      return this.$t("index.todo");
    },
  },
  created() {
  },
  mounted() {
    this.queryMessage();
  },
  activated() {
    this.queryMessage();
  },
  methods: {
    handleComingClick(type) {
      switch (type) {
        case 1:
          this.$tab.openPage(this.$t("menu.custome"), "/account");
          break;
        case 2:
          this.$tab.openPage(this.$t("menu.clues"), "/lead");
          break;
        case 3:
          this.$tab.openPage(this.$t("menu.flow"), "/follow");
          break;
        case 4:
          this.$tab.openPage(this.$t("menu.project"), "/project");
          break;
        case 5:
          this.$tab.openPage(this.$t("menu.quotation"), "/quotation/quotation");
          break;
        case 6:
          this.$tab.openPage(this.$t("menu.civil"), "/civil/engineering");
          break;
        case 7:
          this.$tab.openPage(this.$t("menu.train"), "/train/trainlist");
          break;
        default:
          this.$alert(this.$t("index.commingMessage"), this.$t("common.tips"), {
            confirmButtonText: this.$t("audit.confirm"),
          });
          break;
      }
    },
    queryMessage() {
      selectMessageForIndex().then((res) => {
        if (res && res.data) {
          this.unReadItems = res.data;
        }
      });
      getTodoList({ indexQuery: true }).then((res) => {
        if (res && res.rows) {
          this.todoItems = res.rows;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.indexGuideCard {
  ::v-deep .box-card {
    border-radius: 0.75rem;
  }
}

.home {
  background-color: rgba(245, 245, 245, 1);
  padding: 0 !important;
}

.leftContainer {
  padding: 20px 20px 0 0 !important;
  margin-left: 3%;
}

.rightContainer {
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  min-height: calc(90vh - 94px);
  margin-top: 10px;
}

.helloName {
  width: 100%;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 0.85);
  font-size: 30px;
  font-family: Arial-BoldMT;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 4vw;
}

.helloWord {
  width: 100%;
  overflow-wrap: break-word;
  color: rgba(107, 118, 136, 1);
  font-size: 20px;
  font-family: ArialMT;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 2vw;
  margin-top: 12px;
}

.guideText {
  height: 35%;
  overflow-wrap: break-word;
  color: rgba(60, 72, 91, 1);
  font-size: 16px;
  font-family: ArialMT;
  font-weight: normal;
  text-align: center;
  line-height: 1.1vw;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-top: 8%;
}

.guideImage {
  align-items: center;
  text-align: center;
  display: flex;
  justify-content: center;
}

.guideInner {
  align-items: center;
  text-align: center;
  display: flex;
  justify-content: center;
  border-radius: 0.75rem;
}

.dataBoard {
  width: 97px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 18px;
  font-family: Arial-BoldMT;
  font-weight: 550;
  text-align: left;
  white-space: nowrap;
  line-height: 21px;
  margin-top: 24px;
}

.chartContainer {
  background: rgba(255, 255, 255, 0.85);
  min-height: 10vw;
}

.todoItems {
  background-color: rgba(242, 245, 249, 1);
  border-radius: 6px;
  width: 99%;
  text-align: center;
  align-items: center;
  margin: 4% 0 0 0;
  display: flex;
  cursor: pointer;
}

.shortContainer {
  background-color: rgba(100, 153, 255, 1);
  border-radius: 50%;
  height: 35px;
  width: 35px;
  text-align: center;
  white-space: nowrap;
  line-height: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3% 0 0 6%;
  padding: 0 !important;
}

.todoShort {
  height: 35px;
  width: 35px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 10pt;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.todoItemsModule {
  width: 104px;
  height: 20px;
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 18px;
  font-family: Arial-BoldMT;
  font-weight: 550;
  text-align: left;
  white-space: nowrap;
  line-height: 21px;
}

.todoItemTitle {
  overflow-wrap: break-word;
  color: rgba(0, 0, 0, 1);
  font-size: 12pt;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 2vw;
  margin-top: 1%;
}

.todoItemDesc {
  overflow-wrap: break-word;
  color: rgba(74, 85, 103, 1);
  font-size: 12pt;
  font-weight: normal;
  text-align: left;
  white-space: pre-wrap;
  line-height: 1vw;
  margin-top: 1%;
}

.toReadMessageDesc {
  overflow-wrap: break-word;
  color: rgba(74, 85, 103, 1);
  font-size: 12pt;
  font-weight: normal;
  text-align: left;
  line-height: 1vw;
  margin-top: 2%;
}

.todoItemDate {
  overflow-wrap: break-word;
  color: rgba(74, 85, 103, 0.61);
  font-size: 14px;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 2vw;
  margin-top: 2%;
}

.toReadMessageItemDate {
  overflow-wrap: break-word;
  color: rgba(74, 85, 103, 0.61);
  font-size: 10pt;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 2vw;
  padding-top: 2%;
}

.noReadImageContainer {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 50%;
  width: 35px;
  height: 35px;
  text-align: center;
  white-space: nowrap;
  line-height: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3% 0 0 6%;
  padding: 0 !important;
}

.noReadImageClass {
  width: 35px;
  height: 35px;
  display: flex;
}

.indexDashBoard {
  height: auto !important;
}

.NoDataEmpty {
  background-color: rgba(244, 248, 252, 1);
  border-radius: 6px;
  height: 381px;
  margin: 24px 0 37px 0;
  align-items: center;
  display: flex;
  justify-content: space-around;
  flex-direction: row;
}

.noDataEmptyText {
  width: 160px;
  height: 22px;
  overflow-wrap: break-word;
  color: rgba(147, 152, 173, 1);
  font-size: 16px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 22px;
  margin: 16px 0 0 3px;
}
.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
