<template>
  <div class="app-container">
    <div class="left-container">
      <el-carousel height="300px">
        <el-carousel-item v-for="item in cates" :key="item.id" @click="goImageList">
          <div class="index-flex" @click="goImageList">
            <div class="cata-name">{{ item.cataName }}</div>
            <img class="single-image image-border" :src="imageUrl(item.images[0])"/>
          </div>
          <div class="index-flex" @click="goImageList">
            <img class="double-image image-border" :src="imageUrl(item.images[1])"/>
            <img class="double-image image-border" style="margin-left: 10px;" :src="imageUrl(item.images[2])"/>
          </div>
        </el-carousel-item>
      </el-carousel>

      <el-card style="margin-top: 50px;" >
        <div slot="header" class="clearfix">
          <span>我的任务</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="goMoreTask">查看更多</el-button>
        </div>
        <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        :data="tableData"
        class="w100p"
        border
        header-cell-class-name="duojibiaotou"
      >
        <el-table-column
          align="center"
          label="任务名称"
          show-overflow-tooltip
          min-width="160"
          prop="taskTitle"
        />
        <el-table-column label="任务类型" align="center" prop="taskType"  min-width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.task_type" :value="scope.row.taskType"/>
          </template>
        </el-table-column>
        <el-table-column label="任务状态" align="center" prop="taskStatus"  min-width="100">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.task_status" :value="scope.row.taskStatus"/>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="状态"
          show-overflow-tooltip
          min-width="90"
        >
          <template v-slot="{ row }">
            <template v-if="row.sdTaskOther && row.sdTaskOther.status === '2'">
              <el-tag
                type="success">已办结</el-tag>
            </template>
            <template v-else-if="row.sdTaskOtherFeedbackByCreate">
              <el-tag v-if="row.sdTaskOtherFeedbackByCreate.status === '1'"
              >已反馈</el-tag
              >
              <el-tag
                v-else-if="row.sdTaskOtherFeedbackByCreate.status === '2'"
                type="success"
              >已通过</el-tag
              >
              <el-tag
                v-else-if="row.sdTaskOtherFeedbackByCreate.status === '-1'"
                type="danger"
              >驳回</el-tag
              >
              <el-tag v-else type="info">未反馈</el-tag>
            </template>
            <el-tag v-else type="info">未反馈</el-tag>
          </template>
        </el-table-column>
      </el-table>
      </el-card>

    </div>
    <div class="right-container">
      <index_v1 ></index_v1>
    </div>
  </div>
</template>

<script>
import { listCata } from "@/api/gallery/cata";
import { pageListImages } from "@/api/gallery/images";
import index_v1 from "./index_v1.vue";
import { pageListByUser } from "@/api/task/branch";

export default {
  name: "Index",
  components: {
    index_v1,
  },
  dicts: ['task_type','task_status'],
  data() {
    return {
      cates: [],
      tableData: []
    };
  },
  created() {
    listCata().then((res) => {
      this.cates = res.data || [];
      this.cates.forEach((item) => {
        this.$set(item, "images", []);
        pageListImages({ cataId: item.id, pageNum: 1, pageSize: 3 }).then((result) => {
          this.$set(item, "images", result.rows || []);
        });
      });
    });

    pageListByUser({ pageNum: 1, pageSize: 10 }).then((res) => {
      this.tableData = res.rows || [];
    });
  },
  methods: {
    goMoreTask() {
      this.$router.push({ path: "/task/MyTask" });
    },
    goImageList() {
      this.$router.push({ path: "/gallery/list" });
    },
    imageUrl(item) {
      if (!item) {
        return "";
      }
      let url = item.imagePath;
      if (item.file?.length > 0) {
        url = item.file[0].attachFileUrl || item.imagePath;
      }
      if (url.indexOf("http") === 0) {
          return url;
      }
      return process.env.VUE_APP_BASE_API + url;
    }
  }
};
</script>

<style scoped lang="scss">
.app-container {
  display: flex;

  .index-flex {
    display: flex;
    padding: 5px;
    height: 50%;
  }

  .cata-name {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    height: 100%;
    width: 120px;
    padding: 10px;
  }

  .image-border {
    border-radius: 6px;
    overflow: hidden;
  }

  .single-image {
    flex: 1;
    height: 100%;
    background: #f5f5f5;
    object-fit: cover;
  }

  .double-image {
    flex: 1;
    height: 100%;
    background: #f5f5f5;
    object-fit: cover;
  }

  .left-container {
    width: 400px;

    .image {
      width: 100%;
      height: 100%;
    }
  }

  .right-container {
    flex: 1;
  }
}
</style>

