<template>
  <div id="workbench">
    <div id="LeftBox">
      <div id="LeftBox_1">
        <div class="BoxTitle">个人信息</div>
        <div class="BoxCentent">
          <div id="TL_IconBox">
            <img :src="userInfo.icon" id="TL_IconImg" alt="" />
          </div>
          <div id="TL_UserInfo">
            <div class="TL_UserInfo_list">
              <span class="TL_UserInfo_list_label">姓名</span>
              <span class="TL_UserInfo_list_value">{{ userInfo.name }}</span>
            </div>
            <div class="TL_UserInfo_list">
              <span class="TL_UserInfo_list_label">部门</span>
              <span class="TL_UserInfo_list_value">{{
                userInfo.department
              }}</span>
            </div>
            <div class="TL_UserInfo_list">
              <span class="TL_UserInfo_list_label">岗位</span>
              <span class="TL_UserInfo_list_value">{{ userInfo.post }}</span>
            </div>
            <div class="TL_UserInfo_list">
              <span class="TL_UserInfo_list_label">电话</span>
              <span class="TL_UserInfo_list_value">{{ userInfo.phone }}</span>
            </div>
          </div>
        </div>
      </div>
      <div id="LeftBox_2">
        <div class="BoxTitle">我的任务</div>
        <div class="BoxCentent">
          <div id="BL1_top">
            <div id="BL1_top_left1">
              <div class="BL1_top_left1_box1"></div>
              <div class="BL1_top_left1_box2">已处理</div>
              <div class="BL1_top_left1_box3">{{ myMission.Processed }}</div>
            </div>
            <div id="BL1_top_left2"></div>
            <div id="BL1_top_left3">
              <div class="BL1_top_left1_box1"></div>
              <div class="BL1_top_left1_box2">未处理</div>
              <div class="BL1_top_left1_box3 BL1_top_left1_box3RED">
                {{ myMission.Untreated }}
              </div>
            </div>
          </div>
          <div id="BL1_bottom_slide">
            <div id="BL1_bottom">
              <div
                class="BL1_bottom_list"
                v-for="(item, index) in myMission.missionList"
                @click="BL1_bottom_list(item, index)"
                :class="{
                  BL1_bottom_list_Check: index == BL1_bottom_list_CheckIndex,
                }"
              >
                <img :src="item.icon" class="BL1_bottom_list_logo" />
                <div class="BL1_bottom_list_name">
                  {{ item.name }}
                </div>
                <div class="BL1_bottom_list_h"></div>
                <div class="BL1_bottom_list_value">{{ item.value }}个</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="LeftBox_3">
        <div class="BoxTitle">气象信息</div>
        <div class="BoxCentent">
          <!-- <TianQi /> -->

          <LineChart :data="chartData2"></LineChart>
        </div>
      </div>
    </div>
    <div id="CenterBox">
      <div id="CenterBox_1">
        <div class="BoxTitle">我的工作统计</div>
        <div class="BoxCentent">
          <MyWorkStatistics />
        </div>
      </div>
      <div id="CenterBox_2">
        <n-data-table
          ref="tableRef"
          :bordered="false"
          :max-height="480"
          striped
          :columns="columns"
          :data="data"
        ></n-data-table>
      </div>
    </div>
    <div id="RightBox">
      <div id="RightBox_1">
        <div class="BoxTitle">工作日历</div>
        <div class="BoxCentent">
          <n-calendar
            @update:value="handleUpdateValue"
            #="{ _, year, month, date }"
          >
            <!-- 通过判断获取对应的年/月 在这个月当中去加载有工作内容的日期-->
            <span
              v-show="
                workForDay.includes(date) &&
                month == monthNow &&
                year == yearNow
              "
              ><Checkbox class="CheckboxStyle" />
            </span>
          </n-calendar>
        </div>
      </div>
      <div id="RightBox_2">
        <div class="BoxTitle">待办事项明细</div>
        <div class="BoxCentent">
          <div id="DaiBanHeader">
            <span class="DaiBanHeader_List_Span1">待办事项</span>
            <span class="DaiBanHeader_List_Span2">派单人</span>
            <span class="DaiBanHeader_List_Span3">时间</span>
          </div>
          <div id="DaiBanBody">
            <div class="DaiBanBody_list" v-for="(item, index) in DaiBanData">
              <span class="DaiBanBody_list_Span1">{{ item.value1 }}</span>
              <span class="DaiBanBody_list_Span2">{{ item.value2 }}</span>
              <span class="DaiBanBody_list_Span3">{{ item.value3 }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { ref, reactive, toRefs, onMounted, h } from "vue";
import { useMessage, NButton } from "naive-ui";
import { Checkbox } from "@vicons/ionicons5";
import { getImageUrlForPublic } from "/src/utils/util.js";

import MyWorkStatistics from "./components/WorkStatistics.vue";
import TianQi from "./../oneMap/components/boxsCompontents/BottomBox1.vue";
import LineChart from "./../prevention/components/LineChart.vue";
export default {
  name: "workbench",
  components: {
    Checkbox,
    MyWorkStatistics,
    TianQi,
    LineChart,
  },
  setup() {
    let allData = reactive({
      // 个人信息
      userInfo: {
        icon: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2Fef8a896b-7ecd-3e46-08fa-52b381020931%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645255322&t=41b82a63c90871f8115cbcea65f8186d",
        name: "张三丰",
        department: "运营中心",
        post: "运营工程师",
        phone: "15578666888",
      },
      // 我的任务
      myMission: {
        Processed: "26",
        Untreated: "10",
        missionList: [
          {
            name: "巡查任务",
            value: "2",
            icon: getImageUrlForPublic("myMission1"),
          },
          {
            name: "设备维修任务",
            value: "9",
            icon: getImageUrlForPublic("myMission2"),
          },
          {
            name: "值班任务",
            value: "1",
            icon: getImageUrlForPublic("myMission3"),
          },
          {
            name: "设备故障",
            value: "10",
            icon: getImageUrlForPublic("myMission4"),
          },
          {
            name: "设备告警",
            value: "2",
            icon: getImageUrlForPublic("myMission5"),
          },
          {
            name: "工况信息",
            value: "2",
            icon: getImageUrlForPublic("myMission6"),
          },
          {
            name: "防汛检查",
            value: "2",
            icon: getImageUrlForPublic("myMission7"),
          },
          {
            name: "绩效考核提醒",
            value: "2",
            icon: getImageUrlForPublic("myMission8"),
          },
        ],
      },
      BottomDivShow: false,
      //表格相关
      columns: [
        {
          title: "序号",
          key: "A",
          align: "center",
        },
        {
          title: "设备名称",
          key: "B",
          align: "center",
          ellipsis: {
            tooltip: true,
          },
        },
        {
          title: "设备编号",
          key: "C",
          align: "center",
          ellipsis: {
            tooltip: true,
          },
        },
        {
          title: "设备类型",
          key: "D",
          align: "center",
          ellipsis: {
            tooltip: true,
          },
        },
        {
          title: "所属泵站",
          key: "E",
          width: "120",
          align: "center",
          ellipsis: {
            tooltip: true,
          },
        },
        {
          title: "要求处理时间",
          key: "F",
          align: "center",
          width: "120",
        },
        {
          title: "派发人",
          key: "G",
          align: "center",
        },
        {
          title: "操作",
          key: "H",
          align: "center",
          render(row) {
            const btn = allData.actionColumn.map((item, index) => {
              return h(
                NButton,
                {
                  text: true,
                  size: item.size,
                  style: {
                    margin: "10px",
                  },
                  type: item.btnType,
                  onClick: () => handleClick(row, item.type),
                },
                { default: () => item.default }
              );
            });
            return btn;
          },
        },
      ],
      data: [
        {
          A: "1",
          B: "1#粗格栅",
          C: "RJ-CGS001",
          D: "格栅",
          E: "后湖二期泵站",
          F: "2021-12-12",
          G: "王三",
        },
        {
          A: "2",
          B: "1#粗格栅",
          C: "RJ-CGS001",
          D: "格栅",
          E: "铁路桥泵站",
          F: "2021-12-12",
          G: "王三",
        },
        {
          A: "3",
          B: "1#粗格栅",
          C: "RJ-CGS001",
          D: "格栅",
          E: "机场河补水泵站",
          F: "2021-12-12",
          G: "王三",
        },
        {
          A: "4",
          B: "1#粗格栅",
          C: "RJ-CGS001",
          D: "格栅",
          E: "王家墩污水泵站",
          F: "2021-12-12",
          G: "王三",
        },
        {
          A: "5",
          B: "1#粗格栅",
          C: "RJ-CGS001",
          D: "格栅",
          E: "铁路桥泵站",
          F: "2021-12-12",
          G: "王三",
        },
        {
          A: "6",
          B: "1#粗格栅",
          C: "RJ-CGS001",
          D: "格栅",
          E: "后湖二期泵站",
          F: "2021-12-12",
          G: "王三",
        },
        {
          A: "7",
          B: "1#粗格栅",
          C: "RJ-CGS001",
          D: "格栅",
          E: "王家墩污水泵站",
          F: "2021-12-12",
          G: "王三",
        },
        {
          A: "8",
          B: "1#粗格栅",
          C: "RJ-CGS001",
          D: "格栅",
          E: "后湖二期泵站",
          F: "2021-12-12",
          G: "王三",
        },
        {
          A: "9",
          B: "1#粗格栅",
          C: "RJ-CGS001",
          D: "格栅",
          E: "后湖二期泵站",
          F: "2021-12-12",
          G: "王三",
        },
        {
          A: "10",
          B: "1#粗格栅",
          C: "RJ-CGS001",
          D: "格栅",
          E: "后湖二期泵站",
          F: "2021-12-12",
          G: "王三",
        },
      ],
      actionColumn: [
        {
          size: "small",
          btnType: "primary",
          type: "edit",
          default: "接单",
        },
      ],
      BL1_bottom_list_CheckIndex: null,
      // 日历中有计划的日期
      workForDay: [1, 3, 5, 7, 9, 20, 21, 22, 23, 24],
      monthNow: 2,
      yearNow: 2022,
      // 待办事项明细
      DaiBanData: [
        {
          value1: "12月25日格栅维护",
          value2: "系统",
          value3: "2021-12-12 18:59:00",
        },
        {
          value1: "12月25日格栅维护",
          value2: "系统",
          value3: "2021-12-12 18:59:00",
        },
        {
          value1: "12月25日格栅维护",
          value2: "系统",
          value3: "2021-12-12 18:59:00",
        },
        {
          value1: "12月25日格栅维护",
          value2: "系统",
          value3: "2021-12-12 18:59:00",
        },
        {
          value1: "12月25日格栅维护",
          value2: "系统",
          value3: "2021-12-12 18:59:00",
        },
        {
          value1: "12月25日格栅维护",
          value2: "系统",
          value3: "2021-12-12 18:59:00",
        },
        {
          value1: "12月25日格栅维护",
          value2: "系统",
          value3: "2021-12-12 18:59:00",
        },
        {
          value1: "12月25日格栅维护",
          value2: "系统",
          value3: "2021-12-12 18:59:00",
        },
        {
          value1: "12月25日格栅维护",
          value2: "系统",
          value3: "2021-12-12 18:59:00",
        },
        {
          value1: "12月25日格栅维护",
          value2: "系统",
          value3: "2021-12-12 18:59:00",
        },
        {
          value1: "12月25日格栅维护",
          value2: "系统",
          value3: "2021-12-12 18:59:00",
        },
      ],
      chartData2: {
        xData: [
          "11月11日",
          "11月12日",
          "11月13日",
          "11月14日",
          "11月15日",
          "11月16日",
          "11月17日",
        ],
        info: [
          {
            y: [15, 30, 24, 28, 35, 14, 26],
            color: "rgba(255, 69, 69, 1)",
            bgColor: [
              { offset: 0.1, color: "rgba(255, 69, 69, .8)" },
              { offset: 1, color: "rgba(255, 69, 69, .1)" },
            ],
          },
        ],
        legendShow: false,
        yAxisShow: true,
        yLineShow: true,
        yAxisColor: ["rgba(97, 96, 96, .1)"],
        yName: "%",
        smooth: true,
      },
    });
    onMounted(() => {});
    function BL1_bottom_list(item, index) {
      allData.BL1_bottom_list_CheckIndex = index;
      console.log(item);
    }
    const message = useMessage();
    return {
      ...toRefs(allData),
      handleUpdateValue(_, { year, month, date }) {
        if (
          allData.workForDay.includes(date) &&
          month == allData.monthNow &&
          year == allData.yearNow
        ) {
          message.success(`${year}-${month}-${date}:工作内容:处理泵站格栅`);
        } else {
          message.info(`当前日期无工作安排`);
        }
      },
      BL1_bottom_list,
    };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#workbench {
  width: 100%;
  height: 100%;

  #LeftBox {
    width: 370px;
    height: 100%;
    float: left;

    #LeftBox_1 {
      background: var(--Box-Background);
      box-shadow: 0px 1px 7px 0px rgba(0, 109, 247, 0.35);
      border-radius: 4px;
      height: 235px;
      width: 100%;

      #TL_IconBox {
        width: 170px;
        height: 100%;
        box-sizing: border-box;
        padding-top: 30px;
        padding-left: 20px;
        float: left;

        #TL_IconImg {
          width: 133px;
          height: 167px;
        }
      }

      #TL_UserInfo {
        width: calc(100% - 170px);
        height: 100%;
        float: left;
        box-sizing: border-box;
        padding-top: 40px;

        .TL_UserInfo_list {
          width: 100%;
          height: 38px;
          line-height: 38px;

          .TL_UserInfo_list_label {
            font-size: 14px;
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            color: #1a9aff;
            float: left;
          }
          .TL_UserInfo_list_value {
            float: right;
            font-size: 14px;
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
            color: var(--color-Invert);
            margin-right: 10px;
          }
        }
      }
    }

    #LeftBox_2 {
      background: var(--Box-Background);
      box-shadow: 0px 1px 7px 0px rgba(0, 109, 247, 0.35);
      border-radius: 4px;
      height: 305px;
      width: 100%;
      margin-top: 15px;
      margin-bottom: 15px;

      #BL1_top {
        width: 100%;
        height: 36px;
        background: #34a0ff38;
        margin-top: 25px;

        #BL1_top_left1 {
          width: 160px;
          height: 36px;
          float: left;
          box-sizing: border-box;
          padding-left: 20px;
        }
        #BL1_top_left2 {
          width: 2px;
          height: 15px;
          background: #a1b4d3;
          float: left;
          margin: 10px 20px 0 20px;
        }
        #BL1_top_left3 {
          width: 160px;
          height: 36px;
          float: left;
          box-sizing: border-box;
          padding-left: 20px;
        }

        .BL1_top_left1_box1 {
          width: 3px;
          height: 12px;
          background: #6fd2fa;
          float: left;
          margin-top: 12px;
          margin-right: 13px;
          margin-left: 10px;
        }
        .BL1_top_left1_box2 {
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: bold;
          color: #1a9aff;
          float: left;
          height: 36px;
          line-height: 36px;
          margin-right: 22px;
        }
        .BL1_top_left1_box3 {
          font-size: 14px;
          font-family: DIN;
          font-weight: bold;
          color: #2eb99d;
          float: left;
          height: 36px;
          line-height: 36px;
        }
        .BL1_top_left1_box3RED {
          color: #ff6565;
        }
      }
      #BL1_bottom_slide {
        height: calc(100% - 61px);
        display: inline-block;
        width: 100%;
        overflow-x: auto;
        #BL1_bottom {
          height: calc(100% - 61px);
          width: 752px;

          .BL1_bottom_list {
            width: 80px;
            height: 180px;
            box-shadow: 1px 1px 16px 3px rgba(2, 29, 61, 0.19);
            float: left;
            margin: 12px 7px;
            border-radius: 6px;
            padding: 21px 10px;
            box-sizing: border-box;
            cursor: pointer;
            border: 2px solid #ffffff;

            &:hover {
              border: 2px solid #98b8e9;
            }

            .BL1_bottom_list_logo {
              width: 44px;
              height: 44px;
              border-radius: 22px;
              margin: 0 7px;
            }
            .BL1_bottom_list_name {
              font-size: 14px;
              font-weight: bold;
              color: #34a1ff;
              width: 100%;
              text-align: center;
              height: 40px;
              line-height: 20px;
              margin: 10px 0;
            }
            .BL1_bottom_list_h {
              width: 100%;
              height: 1px;
              background: #a9bbd7;
              margin-bottom: 10px;
            }
            .BL1_bottom_list_value {
              font-size: 14px;
              font-weight: bold;
              color: var(--color-Invert);
              width: 100%;
              text-align: center;
            }
          }
          .BL1_bottom_list_Check {
            border: 2px solid #4386ec;
          }
        }
      }
    }

    #LeftBox_3 {
      background: var(--Box-Background);
      box-shadow: 0px 1px 7px 0px rgba(0, 109, 247, 0.35);
      border-radius: 4px;
      height: calc(100% - 575px);
      width: 100%;
    }
  }

  #CenterBox {
    width: 840px;
    height: 100%;
    float: left;
    margin: 0 15px;

    #CenterBox_1 {
      width: 100%;
      height: 320px;
      background: var(--Box-Background);
      box-shadow: 0px 1px 7px 0px rgba(0, 109, 247, 0.35);
      border-radius: 4px;
      margin-bottom: 15px;
    }

    #CenterBox_2 {
      width: 100%;
      height: calc(100% - 340px);
      background: var(--Box-Background);
      box-shadow: 0px 1px 7px 0px rgba(0, 109, 247, 0.35);
      border-radius: 4px;
    }
  }

  #RightBox {
    width: calc(100% - 1242px);
    height: 100%;
    float: left;

    #RightBox_1 {
      width: 100%;
      height: 520px;
      background: var(--Box-Background);
      box-shadow: 0px 1px 7px 0px rgba(0, 109, 247, 0.35);
      border-radius: 4px;
      margin-bottom: 15px;

      .CheckboxStyle {
        color: aqua;
        width: 28px;
        height: 28px;
      }
    }
    #RightBox_2 {
      width: 100%;
      height: calc(100% - 540px);
      background: var(--Box-Background);
      box-shadow: 0px 1px 7px 0px rgba(0, 109, 247, 0.35);
      border-radius: 4px;

      #DaiBanHeader {
        width: 100%;
        height: 58px;
        line-height: 58px;
        border-bottom: 1px solid #939fb1;
        box-sizing: border-box;

        .DaiBanHeader_List_Span1 {
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: bold;
          height: 58px;
          line-height: 58px;
          width: 40%;
          float: left;
          text-align: center;
        }
        .DaiBanHeader_List_Span2 {
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: bold;
          height: 58px;
          line-height: 58px;
          width: 20%;
          float: left;
          text-align: center;
        }
        .DaiBanHeader_List_Span3 {
          font-size: 14px;
          font-family: Alibaba PuHuiTi;
          font-weight: bold;
          height: 58px;
          line-height: 58px;
          width: 40%;
          float: left;
          text-align: center;
        }
      }

      #DaiBanBody {
        width: 100%;
        height: calc(100% - 60px);
        overflow: auto;

        .DaiBanBody_list {
          width: 100%;
          height: 40px;
          line-height: 40px;

          .DaiBanBody_list_Span1 {
            width: 40%;
            float: left;
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
          }
          .DaiBanBody_list_Span2 {
            width: 20%;
            float: left;
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
          }
          .DaiBanBody_list_Span3 {
            width: 40%;
            float: left;
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-family: Alibaba PuHuiTi;
            font-weight: bold;
          }
        }
      }
    }
  }

  .BoxTitle {
    width: 100%;
    height: 36px;
    background: linear-gradient(
      90deg,
      rgba(9, 124, 253, 0.3) 0%,
      rgba(9, 145, 253, 0) 100%
    );
    font-size: 18px;
    font-family: Alibaba PuHuiTi;
    font-weight: bold;
    color: var(--color-Invert);
    line-height: 36px;
    box-sizing: border-box;
    padding-left: 10px;
  }
  .BoxCentent {
    width: 100%;
    height: calc(100% - 36px);
  }
}

::-webkit-scrollbar {
  width: 1px;
}
:deep(.n-calendar) {
  height: 470px;
}
:deep(.n-calendar .n-calendar-cell .n-calendar-date .n-calendar-date__day) {
  width: 40px;
  font-size: 12px;
}

// 动画

.nameoftransition-enter-active,
.nameoftransition-leave-active {
  transition: opacity 0.5s;
}
.nameoftransition-enter, .nameoftransition-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
  opacity: 0;
}
@keyframes opacity {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
  }
}
</style>