<template>
  <section class="homeRTGT">
    <div class="htaTitle">
      <span class="TitleName"><strong>挂图作战</strong></span>
      <span class="TitleTab"><em v-for="(item, index) in titleArr" :key="index" @click="titleClick(item, index)"
          :class="inx == index ? 'active' : ''">{{ item.name }}</em></span>
      <span class="more" @click="more">
        <!-- <img src="~@/assets/images/RTImgs/morei.png" /> -->
        更多
      </span>
    </div>
    <div class="htaBoxGT">
      <div class="tableContent" v-if="type == 1">
        <div class="left">
          <span class="dbsx">
            <em><i><img src="~@/assets/images/RTImgs/gti1.png" /></i><strong>督办事项</strong></em>
            <b>{{ tableData.total }}</b>
          </span>
          <span class="dbsx wcsx">
            <em><i><img src="~@/assets/images/RTImgs/gti2.png" /></i><strong>完成事项</strong></em>
            <b>{{ tableData.finish }}</b>
          </span>
        </div>
        <div class="right">
          <ul>
            <li v-for="(item, index) in tableData.datas" :key="index">
              <img src="~@/assets/images/RTImgs/gticonL.png" class="img" />
              <span class="nr">
                <strong>{{ item.item_task_name }}</strong>
                <span class="txt"><em v-if="item.item_person_name">{{
                    item.item_person_name
                  }}</em><b v-if="item.item_depart_name">{{
                    item.item_depart_name
                  }}</b><i v-if="item.item_completetime">{{ item.item_completetime }}截止</i></span>
              </span>
              <span class="progress">
                <el-progress type="circle" :percentage="item.item_progress" :width="45" color="#0F71FF"></el-progress>
              </span>
            </li>
            <!-- <li>
                            <img src="~@/assets/images/RTImgs/shi.png" class="img">
                            <span class="nr">
                                <strong>集团督办事项集团督办事项集团督办事项</strong>
                                <span class="txt"><em>董力天</em><b>智能科技部</b><i>2022-05-01截止</i></span>
                            </span>
                            <span class="progress"><el-progress type="circle" :percentage="25" :width="45"></el-progress></span>
                        </li>
                        <li>
                            <img src="~@/assets/images/RTImgs/shi.png" class="img">
                            <span class="nr">
                                <strong>集团督办事项集团督办事项集团督办事项</strong>
                                <span class="txt"><em>董力天</em><b>智能科技部</b><i>2022-05-01截止</i></span>
                            </span>
                            <span class="progress"><el-progress type="circle" :percentage="25" :width="45"></el-progress></span>
                        </li> -->
          </ul>
        </div>
      </div>

      <div class="tableContent" v-if="type == 2">
        <div class="left">
          <span class="dbsx">
            <em><i><img src="~@/assets/images/RTImgs/gti1.png" /></i><strong>任务名称</strong></em>
            <b>{{ tableData2.total }}</b>
          </span>
          <span class="dbsx wcsx">
            <em><i><img src="~@/assets/images/RTImgs/gti2.png" /></i><strong>完成事项</strong></em>
            <b>{{ tableData2.finish }}</b>
          </span>
        </div>
        <div class="right">
          <ul>
            <li v-for="(item, index) in tableData2.datas" :key="index">
              <img src="~@/assets/images/RTImgs/shi.png" class="img" />
              <span class="nr">
                <strong>{{ item.item_task_name }}</strong>
                <span class="txt"><em v-if="item.item_person_name">{{ item.item_person_name }}</em><b
                    v-if="item.item_depart_name">{{ item.item_depart_name }}</b><i
                    v-if="item.item_completetime">{{ item.item_completetime }}截止</i></span>
              </span>
              <span class="progress">
                <el-progress type="circle" :percentage="item.item_progress" :width="45" color="#0F71FF"></el-progress>
              </span>
            </li>
          </ul>
        </div>
      </div>

      <div class="tableContent" v-if="type == 3">
        <div class="left">
          <span class="dbsx">
            <em><i><img src="~@/assets/images/RTImgs/gti1.png" /></i><strong>考核任务</strong></em>
            <b>{{ tableData3.total }}</b>
          </span>
          <span class="dbsx wcsx">
            <em><i><img src="~@/assets/images/RTImgs/gti2.png" /></i><strong>完成事项</strong></em>
            <b>{{ tableData3.finish }}</b>
          </span>
        </div>
        <div class="right">
          <ul>
            <li v-for="(item, index) in tableData3.datas" :key="index">
              <img src="~@/assets/images/RTImgs/shi.png" class="img" />
              <span class="nr">
                <strong>{{ item.item_task_name }}</strong>
                <span class="txt"><em v-if="item.item_person_name">{{
                    item.item_person_name
                  }}</em><b v-if="item.item_depart_name">{{
                    item.item_depart_name
                  }}</b><i v-if="item.item_completetime">{{ item.item_completetime }}截止</i></span>
              </span>
              <span class="progress">
                <el-progress type="circle" :percentage="item.item_progress" :width="45" color="#0F71FF"></el-progress>
              </span>
            </li>
          </ul>
        </div>
      </div>

      <div class="tableContent" v-if="type == 4">
        <div class="left">
          <span class="dbsx">
            <em><i><img src="~@/assets/images/RTImgs/gti1.png" /></i><strong>在办事项</strong></em>
            <b>{{ tableData4.total }}</b>
          </span>
          <span class="dbsx wcsx">
            <em><i><img src="~@/assets/images/RTImgs/gti2.png" /></i><strong>完成事项</strong></em>
            <b>{{ tableData4.finish }}</b>
          </span>
        </div>
        <div class="right">
          <ul>
            <li v-for="(item, index) in tableData4.datas" :key="index">
              <img src="~@/assets/images/RTImgs/gticonL.png" class="img" />
              <span class="nr">
                <strong>{{ item.item_specificjob }}</strong>
                <span class="txt"><em v-if="item.item_personincharge">{{
                    item.item_personincharge
                  }}</em><i v-if="item.item_time">{{ item.item_time }}截止</i></span>
              </span>
              <span class="progress">
                <el-progress type="circle" :percentage="item.item_progress" :width="45" color="#0F71FF"></el-progress>
              </span>
            </li>
            <!-- <li>
                            <img src="~@/assets/images/RTImgs/shi.png" class="img">
                            <span class="nr">
                                <strong>集团督办事项集团督办事项集团督办事项</strong>
                                <span class="txt"><em>董力天</em><b>智能科技部</b><i>2022-05-01截止</i></span>
                            </span>
                            <span class="progress"><el-progress type="circle" :percentage="25" :width="45"></el-progress></span>
                        </li>
                        <li>
                            <img src="~@/assets/images/RTImgs/shi.png" class="img">
                            <span class="nr">
                                <strong>集团督办事项集团督办事项集团督办事项</strong>
                                <span class="txt"><em>董力天</em><b>智能科技部</b><i>2022-05-01截止</i></span>
                            </span>
                            <span class="progress"><el-progress type="circle" :percentage="25" :width="45"></el-progress></span>
                        </li> -->
          </ul>
        </div>
      </div>

       <div class="tableContent" v-if="type == 5">
        <div class="left">
          <span class="dbsx">
            <em><i><img src="~@/assets/images/RTImgs/gti1.png" /></i><strong>问题事项</strong></em>
            <b>{{ tableData5.total }}</b>
          </span>
          <span class="dbsx wcsx">
            <em><i><img src="~@/assets/images/RTImgs/gti2.png" /></i><strong>完成事项</strong></em>
            <b>{{ tableData5.finish }}</b>
          </span>
        </div>
        <div class="right">
          <ul>
            <li v-for="(item, index) in tableData5.datas" :key="index">
              <img src="~@/assets/images/RTImgs/gticonL.png" class="img" />
              <span class="nr">
                <strong>{{ item.item_problemdescription }}</strong>
                <span class="txt"><em v-if="item.item_personname">{{
                    item.item_personname
                  }}</em><i v-if="item.item_time">{{ item.item_time }}截止</i></span>
              </span>
              <span class="progress">
                <el-progress type="circle" :percentage="item.item_progress" :width="45" color="#0F71FF"></el-progress>
              </span>
            </li>
            <!-- <li>
                            <img src="~@/assets/images/RTImgs/shi.png" class="img">
                            <span class="nr">
                                <strong>集团督办事项集团督办事项集团督办事项</strong>
                                <span class="txt"><em>董力天</em><b>智能科技部</b><i>2022-05-01截止</i></span>
                            </span>
                            <span class="progress"><el-progress type="circle" :percentage="25" :width="45"></el-progress></span>
                        </li>
                        <li>
                            <img src="~@/assets/images/RTImgs/shi.png" class="img">
                            <span class="nr">
                                <strong>集团督办事项集团督办事项集团督办事项</strong>
                                <span class="txt"><em>董力天</em><b>智能科技部</b><i>2022-05-01截止</i></span>
                            </span>
                            <span class="progress"><el-progress type="circle" :percentage="25" :width="45"></el-progress></span>
                        </li> -->
          </ul>
        </div>
      </div>

    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      titleArr: [
        { name: "督办事项", type: 1 },
        { name: "工作要点", type: 2 },
        { name: "绩效考核", type: 3 },
        { name: "在办事项", type: 4 },
        { name: "问题清单", type: 5 },
      ],
      inx: 0,
      params: {
        //搜索条件
        pageIndex: 1,
        pageSize: 3,
        total: 0,
      },
      type: 1,
      tableData: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
    };
  },
  mounted() {
    this.groupSupervisionList(); //督办事项
    this.performanceAppraisalList(); //工作要点
    this.AnnualHighlightsList(); //绩效考核
    this.inServiceList(); //在办事项
    this.questionList(); //问题清单
  },
  methods: {
    titleClick(item, index) {
      this.inx = index;
      this.type = item.type;
    },
    groupSupervisionList() {
      this.$api.groupSupervisionListApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          this.tableData = response.data;
        },
      });
    },
    performanceAppraisalList() {
      this.$api.performanceAppraisalListApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          this.tableData2 = response.data;
        },
      });
    },
    AnnualHighlightsList() {
      this.$api.AnnualHighlightsListApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          this.tableData3 = response.data;
        },
      });
    },
    inServiceList() {
      this.$api.inServiceListApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          this.tableData4 = response.data;
        },
      });
    },
    questionList() {
      this.$api.questionListApi(this.params, {
        onSucess: (response) => {
          console.log(response);
          this.tableData5 = response.data;
        },
      });
    },

    more() {
      let appId = "__Yx8O5Fp3GzCvJCloYYV";
      let name = "绩效管理";
      let flag = 1;
      this.$store.dispatch("loadMenus", { appId, name, flag });
      // if(this.type==1){
      //      let appId='__Yx8O5Fp3GzCvJCloYYV'
      //     let name='集团督办事项'
      //     let flag=1
      //     this.$store.dispatch("loadMenus", {appId, name,flag});
      // }else if(this.type==2){
      //     let appId='__Yx8O5Fp3GzCvJCloYYV'
      //     let name='年度工作要点'
      //     let flag=1
      //     this.$store.dispatch("loadMenus", {appId, name,flag});
      // }else if(this.type==3){
      //     let appId='__Yx8O5Fp3GzCvJCloYYV'
      //     let name='绩效考核指标'
      //     let flag=1
      //     this.$store.dispatch("loadMenus", {appId, name,flag});
      // }
    },
  },
};
</script>
<style lang="scss" scoped>
.homeRTGT {
  display: flex;
  flex-direction: column;
  background: #fff;
  // box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  margin-bottom: 24px;
  height: 301px;
  .htaTitle {
    background: linear-gradient(180deg, #e7eeff 0%, #ffffff 100%);
    opacity: 0.92;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 14px;
    color: rgba(0, 0, 0, 0.85);
    padding: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    align-items: center;
    .TitleName {
      display: flex;
      align-items: center;
      margin-right: 40px;
      i {
        width: 2px;
        height: 18px;
        background: #0e71ff;
        margin-right: 4px;
      }
      strong {
        color: rgba(0, 0, 0, 0.85);
        font-size: 16px;
      }
    }
    .TitleTab {
      flex: 1;
      em {
        margin-right: 15px;
        font-size: 16px;
        padding-bottom: 9px;
        cursor: pointer;
        color: #999;
        &.active {
          border-bottom: 2px solid #0f71ff;
          color: #0f71ff;
        }
      }
    }
    .more {
      flex-wrap: 150px;
      font-size: 14px;
      cursor: pointer;
      color: rgba(0, 0, 0, 0.45);
      display: flex;
      align-items: center;
    }
  }
  .htaBoxGT {
    .tableContent {
      display: flex;
      padding: 10px 16px 16px 16px;
      height: 265px;
      .left {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .dbsx {
          background: #f5f9ff;
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 88px;
          height: 105px;
          color: #fff;
          em {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 16px;
            img {
              width: 16px;
              height: 16px;
              margin-bottom: 8px;
            }
            strong {
              color: #808191;
              font-size: 14px;
              font-weight: normal;
            }
          }
          b {
            color: #7d5fff;
            font-size: 24px;
            margin-top: 2px;
          }
        }
        .wcsx {
          background: #f3fff8;
          b {
            color: #15cd64;
          }
        }
      }
      .right {
        margin-left: 16px;
        flex: 1;
        overflow: hidden;
        ul {
          display: flex;
          flex-direction: column;
          height: 240px;
          justify-content: space-around;
          li {
            border-radius: 8px;
            border: 1px solid #e6e9f4;
            padding: 12px;
            padding-left: 16px;
            padding-right: 16px;
            display: flex;
            min-height: 63px;
            position: relative;
            .img {
              width: 16px;
              height: 16px;
            }
            .nr {
              display: flex;
              flex-direction: column;
              margin-left: 8px;
              min-width: 250px;
              max-width: calc(100% - 100px);
              flex: 1;
              strong {
                color: #11142d;
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 80%;
                font-weight: normal;
                height: 16px;
                line-height: 16px;
              }
              .txt {
                display: flex;
                margin-top: 6px;
                font-size: 12px;
                align-items: center;
                em {
                  color: #808191;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  //   width: 60px;
                  margin-right: 8px;
                }
                b {
                  color: #808191;
                  padding-left: 8px;
                  padding-right: 8px;
                  white-space: nowrap;
                  font-weight: normal;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  border-left: 1px solid #e6e9f4;
                  border-right: 1px solid #e6e9f4;
                  //   width: 100px;
                }
                i {
                  color: #ff8c8c;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  margin-left: 8px;
                  display: inline-block;
                  //   width: 150px;
                }
              }
            }
            .progress {
              margin-left: 17px;
              position: absolute;
              right: 16px;
              top: 8px;
            }
          }
        }
      }
    }
  }
}
</style>
