<template>
  <div class="content">
    <div class="main">
      <!-- 待办 头部  -->
      <a-layout-header class="todoBox">
        <div class="left fl clearfix">
          <!-- 待办 -->
          <span v-if="isshow == '1'">
            <img src="@assets/todo.png" alt="?????" />
            <div class="info" style="color:white; top:3%; left:26%;">
              <span>我的待办</span>
              <a-badge class="numTips" style="backgroundColor:#f94f46;">
                {{ todoList.length }}
              </a-badge>
            </div>
          </span>
          <!-- 无 待办 -->
          <span v-if="isshow == '2'">
            <img src="@assets/nothing.png" alt="?????" />
            <div class="info" style="top:2%; left:33%;">
              <span style="color:white;">暂无待办</span>
              <a-badge class="numTips" style="color:#ffcf2d;backgroundColor:#ffcf2d;">
                {{ todoList.length }}
              </a-badge>
            </div>
          </span>
        </div>

        <!-- 右边 -->
        <a href="#" @click.stop.prevent="todo()" class="more right fr clearfix">
          <a-icon type="more" class="moreIcon" />
          <a-divider type="vertical" />
          <span>更多</span>
        </a>
      </a-layout-header>

      <!-- OA工作台 -->
      <a-card title="OA工作台" :bordered="false" style="width: 100%; background:#F7E0D4;">
        <div class="oa">
          <a
            href="#"
            class="oaItem"
            v-for="(item, index) in activeKeyAll"
            :key="index.id"
            @click.prevent="aClick(item)"
          >
            <span>
              <img :src="item.iconAddress" />
            </span>

            <p>{{ item.name }}</p>
          </a>
        </div>
      </a-card>

      <!-- 数据渲染 表单 -->
      <a-modal v-model="lcModal.visible" :title="lcModal.Title" :footer="null" :maskClosable="false">
        <component
          :disabled="lcModal.disabled"
          v-if="lcModal.visible"
          :is="lcModal.formComponent"
          :processData="lcModal.processData"
          :isNew="lcModal.isNew"
          @afterSubmit="afterSub"
          @close="(lcModal.visible = false), (lcModal.disabled = false)"
        >
        </component>
      </a-modal>
    </div>

    <!-- 底部 -->
    <a-layout-footer class="footer">
      上海萃颠信息科技有限公司出品
    </a-layout-footer>
  </div>
</template>

<script>
// 组件中使用映射，所以需要导入
import { mapActions } from 'vuex'
import Vue from 'vue'
import { ACCESS_TOKEN, ENCRYPTED_STRING, USER_INFO } from '@/store/mutation-types'
import api from '@/api'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { activitiMixin } from '@/views/activiti/mixins/activitiMixin'
import JSelectUserByDep from '@/components/jeecgbiz/JSelectUserByDep'

export default {
  name: 'Login',
  components: {},
  data() {
    return {
      todoList: [],
      activeKeyAll: [],
      url: {
        todoList: '/actTask/todoList',
        doneList: '/actTask/doneList'
      },
      //按钮弹框
      lcModal: {
        title: '',
        visible: false,
        disabled: false,
        formComponent: null,
        isNew: false
      },
      isshow: '0'
    }
  },
  // 页面打开时，默认已登录
  created() {
    Vue.ls.remove(ACCESS_TOKEN)
    // 进入页面自动登录
    this.autoLogin()
      .then(res => {
        this.getDataList() // 待办、已办 列表
      })
      .then(res => {
        this.getActiveKeyAll() // OA 4个按钮
      })
  },

  methods: {
    // init() {
    //   this.getDataList()
    // },
    // 映射store/user.js 中 actions的方法
    ...mapActions(['Login']),

    // 自动登录
    async autoLogin() {
      var that = this
      let loginParams = {}
      loginParams.username = 'fenghf'
      loginParams.password = 'fenghf`123456'
      loginParams.slidered = true // 默认滑块
      // console.log('打印出登录参数', loginParams)
      // 异步操作
      await that
        .Login(loginParams)
        .then(res => {
          console.log('Login拿到token | 登录上啦！')
        })
        .catch(err => {
          console.log(err)
        })
    },

    // 点击全部 跳转页面
    todo() {
      this.$router.push({ path: '/user/todo' })
      console.log(this.$router)
    },

    // 待办 num
    getDataList() {
      this.postFormAction(this.url.todoList, {}).then(res => {
        if (res.success) {
          this.todoList = res.result || []
          console.log('login 待办num：', this.todoList.length)
          if (this.todoList && this.todoList.length > 0) {
            this.isshow = '1'
          } else {
            this.isshow = '2'
          }
        }
      })
      // 已办列表
      // this.postFormAction(this.url.doneList, this.searchForm).then(res => {
      // this.loading = false
      // if (res.success) {
      //   this.doneList = res.result || []
      //   console.log('已渲染到已办数目', this.doneList.length)
      // } else {
      //   this.$message.error(res.message)
      // }
      // })
    },

    // 获取 OA 按钮
    getActiveKeyAll() {
      this.postFormAction('/activiti_process/listData', { status: 1, roles: true }).then(res => {
        this.activeKeyAll = []
        if (res.success) {
          var result = res.result || []
          if (result.length > 0) {
            this.activeKeyAll = result
            // this.activeKeyAll.push.apply(this.activeKeyAll,result);
            // console.log(this.activeKeyAll)
            console.log('OA 4个按钮被渲染')
          }
        }
      })
    },

    //OA图标点击事件
    aClick(v) {
      //点击的该项按钮
      console.log(v)
      // this.$refs.modal.add("1")
      if (!v.routeName) {
        this.$message.warning('该流程信息未配置表单，请联系开发人员！')
        return
      }
      if (v.routeName.indexOf('外部表单') != -1) {
        alert('调用其他项目页面')
      } else if (v.routeName.indexOf('自定义') != -1) {
        this.lcModal.disabled = false
        let com = { component: () => import(`@/views/activiti/form/demoForm2`) }
        this.lcModal.formComponent = com.component
        this.lcModal.title = '发起流程：' + v.name
        this.lcModal.isNew = true
        this.lcModal.processData = v
        this.lcModal.visible = true
      } else {
        this.lcModal.disabled = false
        this.lcModal.formComponent = this.getFormComponent(v.routeName).component
        this.lcModal.title = '发起流程：' + v.name
        this.lcModal.isNew = true
        this.lcModal.processData = v
        this.lcModal.visible = true
      }
      console.log('发起', v)

      // this.getDataList()
    },

    //提交后
    afterSub(formData) {
      this.lcModal.visible = false
    }
  }
}
</script>

<style src="@assets/less/overwrite.less" lang="less" scoped></style>
<style lang="less" scoped>
/deep/.ant-card-head-title {
  padding: 0;
}
/deep/.ant-card-body {
  padding: 0 24px;
}
/deep/.ant-layout-header {
  line-height: 0;
}
/deep/.ant-card-head-title {
  font-size: 18px;
}
.content {
  width: 100%;
  height: 100%;
  background-color: rgba(#f7e0d4);
  .main {
    //头部 蓝盒子
    .todoBox {
      padding: 18px;
      height: 180px;
      width: 100%;
      background-color: #347b98;
      box-shadow: 0 4px 8px 1px rgba(0, 0, 0, 0.1), 0 6px 20px 1px rgba(0, 0, 0, 0.19);
      margin-bottom: 30px;
      border-bottom-right-radius: 18px;
      border-bottom-left-radius: 18px;
      // 待办小黑板
      .left {
        height: 100%;
        width: 190px;
        //黑板内信息
        .info {
          position: absolute;
          span {
            font-weight: 700;
            position: relative;
            letter-spacing: 1px;
            font-size: 16px;
          }
        }
        // 待办 数量
        .numTips {
          position: absolute;
          top: -10px;
          left: 0px;
          padding: 3px 8px;
          text-align: center;
          line-height: 20px;
          border-radius: 50%;
          color: white !important;
          font-size: 16px;
        }
      }

      // 按钮
      .right {
        line-height: 30px;
        margin: 30px 8px 0 0;
        padding: 12px 24px;
        background-color: #f7e0d4;
        border-radius: 10px;
        letter-spacing: 1px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);

        .moreIcon {
          margin: 0;
          padding: 0;
          font-size: 16px;
          color: #1489b8;
          margin-top: 10%;
        }
        // 文字
        span {
          font-size: 16px;
          color: #092834;
          font-weight: 700;
        }
      }
    }

    // OA 工作台
    .oa {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      text-align: center;
      padding: 40px;
      //四个按钮
      .oaItem {
        width: calc((100% - 70px) / 2);
        color: #092834;
        border-radius: 10px;
        margin-bottom: 70px;
        box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);

        // 图
        span {
          display: block;
          width: 60px;
          height: 60px;
          margin: auto;
          margin-top: 20px;
        }
        // 文字
        p {
          margin-top: 10px;
          color: #092834;
        }
      }
    }
  }
}
</style>