<template>

  <a-card :bordered="false">
    <a-row style="padding-left: 2%;text-align: center;">
      <a-col :span="6">
        <a-statistic :value=checkStateTotal style="margin-right: 50px">
          <div class="title-font" slot="title">
            <a-icon type="warning" :style="{ color: '#fa073f'}"/>
            总计
          </div>
        </a-statistic>
      </a-col>

      <a-col :span="6">
        <a-statistic :value=checkState0 style="margin-right: 50px">
          <div class="title-font" slot="title">
            <a-icon type="warning" :style="{ color: '#fa073f'}"/>
            未处理
          </div>
        </a-statistic>
      </a-col>

      <a-col :span="6">
        <a-statistic :value=checkState1 style="margin-right: 50px">
          <div class="title-font" slot="title">
            <a-icon type="warning" :style="{ color: '#fa073f'}"/>
            未完善
          </div>
        </a-statistic>
      </a-col>

      <a-col :span="6">
        <a-statistic :value=checkState4 style="margin-right: 50px">
          <div class="title-font" slot="title">
            <a-icon type="warning" :style="{ color: '#fa073f'}"/>
            待整改
          </div>
        </a-statistic>
      </a-col>

    </a-row>
    <template>
      <div style="background-color: #ececec; padding: 5px">
        <a-row :gutter="16">
          <a-col :span="8">
            <a-card :bordered="false">
              <div id="quantityPie" ref="quantityPie" style="width:95%;height:376px"></div>
              <div id="quantityStaff" ref="quantityStaff" style="width:95%;height:376px"></div>
            </a-card>
          </a-col>

          <a-col :span="16">
            <a-card :bordered="false">
              <div id="quantityTrend" ref="quantityTrend" style="width:95%;height:750px"></div>
            </a-card>
          </a-col>

        </a-row>
      </div>
    </template>

    <template>
      <a-table :dataSource="warningDataSource" :columns="warningColumns"/>
    </template>

  </a-card>


</template>

<script>
import Vue from 'vue'
import '@/assets/less/TableExpand.less'
import {mixinDevice} from '@/utils/mixin'
import {JeecgListMixin} from '@/mixins/JeecgListMixin'
import {httpAction} from "@api/manage";
import * as echarts from 'echarts';


export default {
  name: 'TaskList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {},
  data() {
    return {
      description: '稽核任务管理页面',
      chart: "",
      chartPie: "",
      checkStateTotal: '',
      checkState0: "",
      checkState1: "",
      checkState4: "",
      warningDataSource: [],
      warningColumns: [
        {
          title: '任务名称',
          dataIndex: 'taskName',
          key: 'taskName',
        },
        {
          title: '任务结束时间',
          dataIndex: 'taskEndTime',
          key: 'taskEndTime',
        },
        {
          title: '客户编号',
          dataIndex: 'customerNo',
          key: 'customerNo',
        },
        {
          title: '客户名称',
          dataIndex: 'customerName',
          key: 'customerName',
        },
        {
          title: '用户发展员工',
          dataIndex: 'staffInfo',
          key: 'staffInfo',
        },
        {
          title: '用户状态',
          dataIndex: 'userOpenState',
          key: 'userOpenState',
        },
        {
          title: '稽核状态',
          dataIndex: 'checkState',
          key: 'checkState',
        },
      ],
      url: {
        warningCountTime: "/smsCheck/customerInfo/checkInfo/warning/count/time",
        warningCount: "/smsCheck/customerInfo/checkInfo/warning/all/count",
        editCheck: "/smsCheck/customerInfo/edit/check/state",
        list: "/smsCheck/customerInfo/staff/list",
        delete: "/smsCheck/customerInfo/delete",
        deleteBatch: "/smsCheck/customerInfo/deleteBatch",
        exportXlsUrl: "/smsCheck/customerInfo/exportXls",
        importExcelUrl: "/smsCheck/customerInfo/importExcel",
        warningCountStaff: "/smsCheck/customerInfo/checkInfo/warning/count/staff",
        warningList: "/smsCheck/customerInfo/warning/list"
      },
      dictOptions: {},
      superFieldList: [],

    }
  },
  created() {
    this.getSuperFieldList();
    this.getWarningList();
  },
  mounted() {
    this.warningCount();
    this.getEchartDataHttp();
    this.getEchartStaffPie();

    //this.getEchartDataTrend();
  },
  filters: {
    statusTypeFilter(type) {
      const statusTypeMap = {
        '0': 'error',
        '1': 'error',
        '2': 'warning',
        '3': 'warning',
        '4': 'processing',
        '5': 'success'
      }
      return statusTypeMap[type]
    },
    statusFilter(status) {
      const statusMap = {
        '0': '未完善',
        '1': '未完善',
        '2': '待稽核',
        '3': '待稽核',
        '4': '待整改',
        '5': '通过'
      }
      return statusMap[status]
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
    }
    ,
  },
  methods: {

    getEchartStaffPie() {
      let model = {}
      httpAction(this.url.warningCountStaff, model, "post")
        .then((res) => {
          if (res.success) {
            let resultList = res.resultList;
            var data = [];
            for (var i in resultList) {
              let resultListElement = resultList[i];
              let count = resultListElement.count;
              let staffInfo = resultListElement.staffInfo;
              var value = {
                "value": count,
                "name": staffInfo.split("(")[0]
              }
              data.push(value);
            }
            this.getEchartDataStaff(data)

          } else {

          }
        }).finally(() => {

      })

    },

    getEchartDataHttp() {
      let model = {
        "checkState": 0,
        //value1:fileUrl
      }
      httpAction(this.url.warningCountTime, model, "post")
        .then((res) => {
          if (res.success) {
            let resultList = res.resultList;
            this.getEchartDataTrend(resultList);
          } else {
            //this.$message.warning(res.message)
          }
        }).finally(() => {

      })
    },

    warningCount() {
      let model = {};
      this.warningCountHttpAction(model);
    },

    warningCountHttpAction(model) {
      httpAction(this.url.warningCount, model, "post")
        .then((res) => {
          if (res.success) {
            let result = res.data;
            let newVar0 = result.checkState0 == null ? 0 : result.checkState0;
            let newVar1 = result.checkState1 == null ? 0 : result.checkState1;
            let newVar4 = result.checkState4 == null ? 0 : result.checkState4;
            this.checkState0 = newVar0;
            this.checkState1 = newVar1;
            this.checkState4 = newVar4;
            this.checkStateTotal = newVar0 + newVar1 + newVar4;
            this.getEchartDataPie();

          } else {
          }
        }).finally(() => {
      })
    },

    getEchartDataTrend(data, legend) {
      let xAxis = [];
      let seriesData = [];
      for (var i in data) {
        let date = data[i].date;
        let count = data[i].count;
        xAxis.push(date)
        seriesData.push(count)
      }
      let colors = ["#2f96f6", "#FFF", "#5EBEFC", "#2EF7F3"];
      this.chart = echarts.init(document.getElementById('quantityTrend'));
      this.chart.setOption(
        {
          title: {
            text: '任务结束时间预警数量柱状图',
            subtext: '',
            left: 'left'
          },
          xAxis: {
            type: 'category',
            data: xAxis
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: seriesData,
              type: 'bar',
              showBackground: true,
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)'
              }
            }
          ]
        }
      )
    },

    getEchartDataPie() {
      let option = {
        title: {
          text: '预警类型数量饼图',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: [
              {value: this.checkState0, name: '未处理'},
              {value: this.checkState1, name: '未完善'},
              {value: this.checkState4, name: '待整改'},
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.chartPie = echarts.init(document.getElementById('quantityPie'));
      this.chartPie.setOption(option)
    },

    getEchartDataStaff(data) {

      let option = {
        title: {
          text: '用户预警饼图',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.chartPie = echarts.init(document.getElementById('quantityStaff'));
      this.chartPie.setOption(option)
    },


    loadSubData(record) {
      let checkState = record.checkState;
      let state = true;
      switch (checkState) {
        case 0:
          state = true;
          break;
        case 1:
          state = true;
          break;
        case 2:
          state = true;
          break;
        case 3:
          state = false;
          break;
        case 4:
          state = true;
          break;
        case 5:
          state = false;
          break;
      }
      return state;

    },


    // 显示添加页面
    showAdd() {
      this.$emit('goAdd', true);
    }
    ,
    // 显示导入页面
    showImport() {
      this.$emit('goImport', true);
    }
    ,
    handUpload(record) {
      let infoId = record.id;
      if (infoId == undefined || infoId == null) {
        this.$message.warning('用户编号不能为空！');
        return;
      }
      //console.log(record)
      this.$emit('goImport', infoId);
    }
    ,

    handSubmit(record) {
      let nowIpagination = this.ipagination;
      let model = {
        "id": record.id,
        //value1:fileUrl
      }
      httpAction(this.url.editCheck, model, "post")
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.loadData(nowIpagination.current);
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {

      })
      //this.ipagination.current = 2;
    }
    ,
    initDictConfig() {


    }
    ,

    getWarningList() {

      httpAction(this.url.editCheck, model, "post")
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.loadData(nowIpagination.current);
          } else {
            this.$message.warning(res.message)
          }
        }).finally(() => {

      })
    },

  getSuperFieldList() {
    let fieldList = [];
    fieldList.push({type: 'string', value: 'customerNo', text: '任务名称', dictCode: ''})
    fieldList.push({type: 'string', value: 'checkState', text: '任务状态', dictCode: 'sms_check_task_state'})
    fieldList.push({type: 'datetime', value: 'taskStartTime', text: '任务开始时间'})
    fieldList.push({type: 'datetime', value: 'taskEndTime', text: '任务结束时间'})
    this.superFieldList = fieldList
  }
  ,
  // handleAdd: function () {
  //   this.$refs.modalForm.add();
  //   this.$refs.modalForm.title = "新增";
  //   this.$refs.modalForm.disableSubmit = false;
  // },
  // handleEdit: function (record) {
  //   this.$refs.modalForm.edit(record);
  //   this.$refs.modalForm.title = "编辑";
  //   this.$refs.modalForm.disableSubmit = false;
  // },
}
}
</script>

<style scoped>
.title-font {
  font-size: 24px;
  color: #f60202
}

</style>