<template>
  <div class="dashboard-editor-container">
    <div class="newDate">
      <div class="hello">Hello~</div>
      <div class="today">
        今天是{{ new Date() | parseTime("{y}年{m}月{d}日") }}，{{
          currentDaysOfWeek
        }}。新的一天开始了！
      </div>
    </div>
    <div>
      <!-- <div class="title">工单详情</div> -->
      <div class="list">
        <!-- <div
          class="item"
          @click="$router.push({ path: '/ticket/unProcessed' })"
        > -->
        <div
          class="item"
          @click="
            userInfo.type === 9
              ? ''
              : userInfo.type === 5
              ? $router.push({ path: '/ticket/bankUnProcessed' })
              : userInfo.type === 6 ||
                userInfo.type === 7 ||
                userInfo.type === 8
              ? $router.push({ path: '/ticket/filingsUnProcessed' })
              : $router.push({ path: '/ticket/unProcessed' })
          "
        >
          <!--  -->
          <div class="itemPic unProgress"></div>
          <div>未处理</div>
          <div v-if="data" class="num">{{ data.wait }}</div>
          <div v-else class="num">0</div>
        </div>
        <!-- <div class="item" @click="$router.push({ path: '/ticket/passed' })"> -->
        <div
          class="item"
          @click="
            userInfo.type === 9
              ? ''
              : userInfo.type === 3
              ? $router.push({ path: '/ticket/processed' })
              : userInfo.type === 6 ||
                userInfo.type === 7 ||
                userInfo.type === 8
              ? $router.push({ path: '/ticket/filingsProcessed' })
              : $router.push({ path: '/ticket/passed' })
          "
        >
          <div class="itemPic progress"></div>
          <div>今日已处理</div>
          <div v-if="data" class="num">{{ data.today }}</div>
          <div v-else class="num">0</div>
        </div>
        <!-- <div class="item" @click="userInfo.type === 4?$router.push({ path: '/ticket/passed' }):$router.push({ path: '/ticket/processed' })">
          <div class="itemPic progress"></div>
          <div>今日已处理</div>
          <div v-if="data" class="num">{{ data.today }}</div>
          <div v-else class="num">0</div>
        </div> -->
        <div
          class="item"
          @click="
            userInfo.type === 4
              ? ''
              : userInfo.type === 9
              ? ''
              : $router.push({ path: '/ticket/list' })
          "
        >
          <div class="itemPic allTicket"></div>
          <div>全部工单</div>
          <div v-if="data" class="num">{{ data.all }}</div>
          <div v-else class="num">0</div>
        </div>
      </div>
    </div>
    <el-dialog
      title="上传开发商服务协议"
      :visible.sync="dialogVisible"
      width="30%"
      :show-close="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- <el-upload
        class="upload-demo"
        action="/"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload> -->
      <el-upload
        class="upload-demo"
        drag
        action="/"
        :auto-upload="false"
        :limit="1"
        :on-change="handleFileChange"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
      <!-- <el-input type="file"></el-input> -->
      <!-- <input type="file" @change="handleChange" /> -->
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="handleUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import PanThumb from "@/components/PanThumb";
import GithubCorner from "@/components/GithubCorner";
import { getNormalData } from "@/api/ticket";
import { uploadFile } from "@/api/upload";
import { serviceAgreementUrl } from "@/api/kfs";

export default {
  name: "DashboardEditor",
  components: { PanThumb, GithubCorner },
  data() {
    return {
      currentDaysOfWeek: "",
      data: undefined,
      dialogVisible: false,
      file: undefined,
      fileList: undefined,
    };
  },
  created() {
    const currentDate = new Date();
    const dayOfWeek = currentDate.getDay();

    const daysOfWeek = [
      "星期天",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六",
    ];
    this.currentDaysOfWeek = daysOfWeek[dayOfWeek];
    this.getInfo();
    // console.log('userInfo',this.userInfo);
    console.log(this.userInfo.serviceAgreementUrl === null);
    if (
      this.userInfo.type === 4 &&
      this.userInfo.serviceAgreementUrl === null
    ) {
      this.dialogVisible = true;
    }
  },
  computed: {
    ...mapGetters(["name", "avatar", "roles", "userInfo"]),
  },
  methods: {
    getInfo() {
      getNormalData().then((res) => {
        this.data = res.d;
      });
    },

    handleFileChange(file, fileList) {
      console.log(file, fileList);
      this.file = file.raw;
    },
    handleUpload() {
      uploadFile({ file: this.file }).then((res) => {
        // console.log(res);
        if (res.c === 200) {
          serviceAgreementUrl({ url: res.d }).then((response) => {
            console.log(response);
            if (response.c === 200) {
              this.$message.success("上传成功");
              this.dialogVisible = false;
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.emptyGif {
  display: block;
  width: 45%;
  margin: 0 auto;
}

.dashboard-editor-container {
  background-color: #ffffff;
  min-height: 100vh;
  padding: 50px 20px 0px;
  .pan-info-roles {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
  }
  .info-container {
    position: relative;
    margin-left: 190px;
    height: 150px;
    line-height: 200px;
    .display_name {
      font-size: 48px;
      line-height: 48px;
      color: #212121;
      position: absolute;
      top: 25px;
    }
  }
}
.newDate {
  background: url("../../../assets/images/newDate.png") no-repeat;
  background-size: 100% 100%;
  min-width: 1600px;
  min-height: 208px;
  margin-bottom: 38px;
  padding: 56px 0 59px 89px;
  .hello {
    font-size: 39px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #3e8bfd;
    margin-bottom: 20px;
  }
  .today {
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #3e8bfd;
  }
}
.title {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #272727;
}
.list {
  display: flex;
  margin-top: 24px;
  .item {
    cursor: pointer;
    width: 506px;
    // width: 33.33%;
    height: 409px;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-right: 68px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #6b7699;
    &:last-child {
      margin-right: 0;
    }
    .progress {
      background: url("../../../assets/images/icon_progress.png") no-repeat;
    }
    .unProgress {
      background: url("../../../assets/images/icon_unProgress.png") no-repeat;
    }
    .allTicket {
      background: url("../../../assets/images/icon_allTicket.png") no-repeat;
    }
    .itemPic {
      width: 104px;
      height: 104px;
      display: inline-block;
      background-size: cover;
      margin-bottom: 40px;
    }
    .num {
      font-size: 26px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #1d1e20;
      margin-top: 24px;
    }
  }
}
</style>
