<template>
  <modulen>
    <template #title>养护工单和任务</template>
    <template #end>
      <date-switcher
         :type="2"
         :selectTime="1"
        :showDateNum="true"
      v-model="selectType"
       @change="handleChangeDate"
      ></date-switcher>
    </template>
    <div class="wt-cont">
      <div class="wt-cont-item">
        <div class="ejbt">养护工单（个）</div>
        <div class="wtc-charts" >
          <Ect :options="ectOpts" v-if="categoryData?.length"/>
          <empty v-else/>
        </div>
       
      </div>
      <div class="wt-cont-item">
        <div class="ejbt">未完成任务执行情况（个）</div>
        <div class="task-top">
          <!-- <div class="task-top-it">
            <div class="task-text1">{{ taskInfo?taskInfo.finishCount:0 }}</div>
            <div class="task-text2 task-icon1">已完成</div>
          </div> -->
          <div class="task-top-it">
            <div class="task-text1">
              {{ taskInfo ?taskInfo.unfinishCount: 0 }}
            </div>
            <div class="task-text2 task-icon2">
              <i class="el-icon-caret-right"></i>
              <div>  
                <div class="weiwancheng"><b>未完成</b></div>
                 <div class="yuqiMar">(逾期任务 {{  taskInfo ? taskInfo.overdueCount : 0 }})</div>
              </div>
              
              <i class="el-icon-caret-left"></i>
            </div>
           
          </div>
        </div>
        <div class="task-cell">
          <span class="tacl-text1">审批中任务</span>
          <span class="tacl-text2">{{
            taskInfo ? taskInfo.auditCount : 0
          }}</span>
        </div>
        <div class="task-cell">
          <span class="tacl-text1">施工中</span>
          <span class="tacl-text2">{{
            taskInfo ? taskInfo.constructionCount + taskInfo.debitCount : 0
          }}</span>
        </div>
        <div class="task-cell">
          <span class="tacl-text1">派单中</span>
          <span class="tacl-text2">{{
            taskInfo ? taskInfo.backlogCount : 0
          }}</span>
        </div>
        <!-- <div class="task-cell">
          <span class="tacl-text1">逾期任务</span>
          <span class="tacl-text2">{{
            taskInfo ? taskInfo.overdueCount : 0
          }}</span>
        </div> -->
      </div>
    </div>
  </modulen>
</template>

<script>
import { worktableCount, taskStatusCount } from "@/api/curingBusiness";
import moment from "moment";
export default {
  data() {
    return {
      selectType: 1,
      ectOpts: {},
      categoryData: [],
      // query: {
      //   orgLevel: 0,
      //   filterOrgVal: '',
      // },
      query: {
        level: 0,
        dimension: "",
        timeflag: moment(new Date()).format("yyyy"), //年-yyyy  月=yyyyMM
        timemode: "year",
      },
      taskInfo: {},
      unfinishedCount:""
    };
  },
  computed: {
    getDate() {
      return this.$store.state.appDate;
    },
    selectRoad() {
      return this.$store.state.road.selectRoadId;
    },
    allTask() {
      return (
        this.taskInfo?.auditCount +
        this.taskInfo?.constructionCount +
        this.taskInfo?.overdueCount
      );
    },
  },
  watch: {
    getDate(newVal) {
     this.changeData(this.selectType, newVal)
      
    },
    selectRoad(newVal) {
      const level = this.$store.state.road.selectLevel;
      const roadId = newVal ? newVal[level - 1] : "";
      this.query.level = level;
      this.query.dimension = roadId;
      this.getData();
    },
  },
  mounted() {
    // this.getData();
  },
  methods: {
     handleChangeDate(value) {
       this.selectType = value;
      this.changeData(value, this.getDate)
    },

    changeData(value,date){
       if (value === 1) {
        this.query.timemode = "year";
          // 上一年
        this.query.timeflag =moment(date).format("YYYY") ;
      } else if (value === 2) {
        this.query.timemode = "month";
        // 上一年
        this.query.timeflag =moment(date).format("yyyyMM")
      }
      this.getData();
    },
    async getData() {
      try {
        // 养护工单
        this.categoryData = [];
        const data = await worktableCount(this.query);
        if (data.msgContent) {
          data.msgContent.forEach((ele) => {
            const textval = ele.totalnumsno == 0 ? 0 : 0.1;
            this.categoryData.push([ele.orgName, ele.totalnumsno, textval]);
          });
        }
      } catch (err) {
        this.categoryData = [];
      }

 
      // 
      try {
        // 任务执行情况
        const data1 = await taskStatusCount(this.query);
        this.taskInfo = data1.msgContent[0];
        console.log(163,this.taskInfo);
        this.getCharts();
        // console.log(179,this.taskInfo.unfinishCount);
        // 未完成总数
        // this.unfinishedCount = this.taskInfo.auditCount + this.taskInfo.backlogCount + this.taskInfo.constructionCount
        // this.unfinishedCount = data1.msgContent[0].unfinishedCount
      } catch (err) { }
    },
    getCharts() {
      this.ectOpts = {
        dataset: {
          dimensions: ["orgName", "totalnumsno", "test"],
          source: this.categoryData,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          formatter: (params) =>
            `${params[0].axisValue}： ${params[0].data[1]}`,
        },
        grid: {
          left: 40,
          right: 0,
          bottom: 20,
        },
        color: ["#3CAEFF"],
        legend: {
          data: ["养护工单"],
          textStyle: {
            fontSize: 11, //字体大小
            color: "#CBE7FF", //字体颜色
          },
          left: "center",
          borderRadius: 0,
          itemWidth: 17,
          itemHeight: 3,
        },
        xAxis: {
          type: "category",
          // data: ['四川', '云南', '安徽', '重庆', '贵州'],
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#778FA4",
            },
          },
        },
        yAxis: {
          type: "value",
          name: "工单数",
          nameTextStyle: {
            color: "#909FAC",
            fontSize: 12,
            fontWeight: "bold",
          },
          min: 0,
          // max: 250,
          position: "left",
          axisLine: {
            show: true,
          },
          axisLabel: {
            textStyle: {
              color: "#778FA4",
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name: "养护工单",
            type: "bar",
            // stack: "test",
            // data: [80, 66, 88, 80, 52],
            itemStyle: {
              normal: {
                color: function (params) {
                  return {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "rgba(60, 174, 255, 1)",
                      },
                      {
                        offset: 0.5,
                        color: "rgba(60, 174, 255, 1)",
                      },
                      {
                        offset: 1,
                        color: "rgba(60, 174, 255, 0)",
                      },
                    ],
                  };
                },
              },
            },
            showBackground: true,
            backgroundStyle: {
              color: "rgba(59, 152, 219, 0)",
              borderWidth: 30,
              borderColor: "rgba(59, 152, 219, 0.1)",
            },
            barWidth: 8,
            label: {
              show: true,
              position: "top",
              color: "#fff",
              offset: [0, -10],
              fontFamily: "DinNextRegular",
              fontSize: 13,
            },
          },
       
        ],
      };
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.wt-cont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-top: vw(15);
  .wt-cont-item {
    width: 48%;
  }
  .weiwancheng{
    font-size: vw(17);
  }
  .ejbt {
    width: 100%;
    height: 15px;
    background: url("@/assets/images/curingBussiness/sectitbg.png");
    background-size: 100% 100%;
    font-size: vw(11);
    padding-left: vw(23);
    line-height: 15px;
  }
  .wtc-charts {
    width: 100%;
    height: vh(290);
    position: relative;
    margin-top: 15px;
  }
  .task-top {
    width: 80%;
    margin: auto;
    margin-top: vh(15);
    margin-bottom: vh(15);
    display: flex;
    justify-content: space-around;
  }
  .task-top-it {
    width: 50%;
  }
  .task-text1 {
    width: 100%;
    text-align: center;
    font-size: vw(24);
  }
  .task-text2 {
    text-align: center;
    font-size: vw(14);
    margin: auto;
  }
  .task-icon1 {
    width: vw(90);
    height: vw(55);
    line-height: vw(45);
    background: url("@/assets/images/curingBussiness/rw-ywc.png");
    background-size: 100% 100%;
  }
  .task-icon2 {
    width: vw(140);
    height: vw(110);
    background: url("@/assets/images/curingBussiness/rw-wwc.png");
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px vh(20) 10px;
    .el-icon-caret-right {
      font-size: vw(10);
    }
    .el-icon-caret-left {
      font-size: vw(10);
    }
    
  .yuqiMar{
    padding-left: 2px;
    padding-bottom: 15px;
  }
  }
  .task-cell {
    width: 80%;
    height: vh(32);
    margin: auto;
    line-height: vh(32);
    display: flex;
    background: url("@/assets/images/curingBussiness/rw-textbg.png");
    background-size: 100% 100%;
    padding-left: 30px;
    margin-bottom: vh(12);
  }
  .tacl-text1 {
    width: 50%;
    font-size: vw(14);
  }
  .tacl-text2 {
    width: 50%;
    font-size: vw(18);
    color: #ffce5a;
    font-family: "DinNextRegular";
  }
}
</style>
