<template>
  <div>
    <div v-if="mtIs">
      <div class="indexHome" v-show="isNum===1">
        <div class="header el-main">
          <el-row type="flex" justify="space-between">
            <el-col :span="3">
              <h1>首页</h1>
            </el-col>
          </el-row>
        </div>
        <div class="seaction el-main">
          <div class="oneSeaction">
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="4">
                <div class="onetitle" @click="toViewWork(1)">
                  <div class="onetitleIcon">
                    <span>
                      <img src="../../../../assets/img/index/xingzhen.png" alt />
                    </span>
                    <span>行政待办</span>
                  </div>
                  <div>
                    <h3>{{unfinishedNum.adminNum}}</h3>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="onetitle" @click="toViewWork(2)">
                  <div class="onetitleIcon">
                    <span>
                      <img src="../../../../assets/img/index/jixiu.png" alt />
                    </span>
                    <span>急修待办</span>
                  </div>
                  <div>
                    <h3>{{unfinishedNum.repairNum}}</h3>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="onetitle" @click="toViewWork(3)">
                  <div class="onetitleIcon">
                    <span>
                      <img src="../../../../assets/img/index/weibao.png" alt />
                    </span>
                    <span>维保待办</span>
                  </div>
                  <div>
                    <h3>{{unfinishedNum.maintenanceNum}}</h3>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="onetitle" @click="toViewWork(4)">
                  <div class="onetitleIcon">
                    <span>
                      <img src="../../../../assets/img/index/daxiu.png" alt />
                    </span>
                    <span>大修待办</span>
                  </div>
                  <div>
                    <h3>{{unfinishedNum.bigNum}}</h3>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="onetitle" @click="toViewWork(5)">
                  <div class="onetitleIcon">
                    <span>
                      <img src="../../../../assets/img/index/nianjian.png" alt />
                    </span>
                    <span>年检待办</span>
                  </div>
                  <div>
                    <h3>{{unfinishedNum.inspectionNum}}</h3>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="btnMap">
                  <div>
                    <span @click="getMapData">电梯分布地图</span>
                  </div>
                  <div>
                    <span></span>
                  </div>
                  <!-- <div @click="getEnterprise">
                    <span>认证企业统计</span>
                  </div>-->
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="twoSeaction">
            <el-row type="flex" justify="space-between">
              <el-col :span="8">
                <div>
                  <div id="customerBIOne"></div>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <div id="customerBITwo"></div>
                </div>
              </el-col>
              <el-col :span="8">
                <div>
                  <div id="customerBIThree"></div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div></div>
        </div>
        <v-calendar class="el-main"></v-calendar>
        <!-- <span class="homeMap">
      
        </span>-->
      </div>
      <div v-show="isNum===2" class="indexHome">
        <div class="header el-main">
          <el-row type="flex" justify="space-between">
            <el-col :span="5">
              <h1>首页/电梯分布地图页</h1>
            </el-col>
            <el-col :span="2">
              <el-button size="mini" plain type="primary" @click="goReturn">返回首页</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="el-main">
          <v-bmap ref="child"></v-bmap>
          <div class="iconIndexC">
            <el-row type="flex" justify="space-around">
              <el-col :span="20">
                <el-row type="flex" justify="start" class="iconBtn">
                  <el-col :span="4">
                    <span class="iconfont conversionInBlIcon icondingwei" style="color:#51B0FF"></span>
                    <span class="fs16" @click="getNumData(0)">所有电梯({{numElevtor.allEle}})</span>
                  </el-col>
                  <el-col :span="4">
                    <span class="iconfont conversionInBlIcon icondingwei" style="color:#e8e171"></span>
                    <span class="fs16" @click="getNumData(10)">今日待保养({{numElevtor.readyEle}})</span>
                  </el-col>
                  <el-col :span="4">
                    <span class="iconfont conversionInBlIcon icondingwei" style="color:#b7e5a1"></span>
                    <span class="fs16" @click="getNumData(12)">今日已保养({{numElevtor.goingEle}})</span>
                  </el-col>
                  <el-col :span="4">
                    <span class="iconfont conversionInBlIcon icondingwei" style="color:#FEE188"></span>
                    <span class="fs16" @click="getNumData(21)">今日已急修({{numElevtor.emergEndEle}})</span>
                  </el-col>
                  <el-col :span="4">
                    <span class="iconfont conversionInBlIcon icondingwei" style="color:#DC4F4A"></span>
                    <span class="fs16" @click="getNumData(20)">今日急修中({{numElevtor.emergEle}})</span>
                  </el-col>
                  <el-col :span="4">
                    <span class="iconfont conversionInBlIcon icondingwei" style="color:#ff9c00"></span>
                    <span class="fs16" @click="getNumData(11)">今日保养中({{numElevtor.allEle}})</span>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="4">
                <span>未定位的电梯({{numElevtor.nullEle}})</span>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <div v-if="!mtIs">
      <div class="indexHome" v-show="isNum===1">
        <div class="header el-main">
          <el-row type="flex" justify="space-between">
            <el-col :span="3">
              <h1>首页</h1>
            </el-col>
          </el-row>
        </div>
        <div class="seaction el-main">
          <div class="oneSeaction">
            <el-row type="flex" justify="start">
              <el-col :span="4">
                <div class="onetitle" @click="toViewWork(1)">
                  <div class="onetitleIcon">
                    <span>
                      <img src="../../../../assets/img/index/xingzhen.png" alt />
                    </span>
                    <span>行政待办</span>
                  </div>
                  <div>
                    <h3>{{unfinishedNum.adminNum}}</h3>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="btnMap">
                  <div class="btnRZ" @click="getEnterprise">
                    <span>认证企业统计</span>
                  </div>
                  <div class="btnRZ">
                    <span></span>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="onetitle">
                  <div>
                    <span></span>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="onetitle">
                  <div>
                    <span></span>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="onetitle">
                  <div>
                    <span></span>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="onetitle">
                  <div>
                    <span></span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
          <div>
            <div class="twoSeaction">
              <el-row type="flex" justify="space-between">
                <el-col :span="8">
                  <div>
                    <div id="customerBIOne"></div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div>
                    <div id="customerBITwo"></div>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div>
                    <div id="customerBIThree"></div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div>
              <v-bmap ref="child"></v-bmap>
            </div>
          </div>
        </div>
      </div>
      <!---->
      <div v-show="isNum===3" class="indexHome">
        <div class="header el-main">
          <el-row type="flex" justify="space-between">
            <el-col :span="5">
              <h1>首页/认证企业</h1>
            </el-col>
            <el-col :span="2">
              <el-button size="mini" plain type="primary" @click="goReturn">返回首页</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="el-main">
          <div>
            <div class="EnterpriseTitle">
              <div>
                <span>
                  <el-select
                    v-model="searchData.provinceCode"
                    clearable
                    @visible-change="getProvince"
                    placeholder="请选择省份"
                  >
                    <el-option
                      v-for="item in cityData"
                      :key="item.code"
                      :label="item.name"
                      :value="item.code"
                    ></el-option>
                  </el-select>
                </span>
                <span>
                  <el-input v-model="searchData.companyNames" placeholder="请输入公司名称"></el-input>
                </span>
                <span>
                  <el-checkbox v-model="searchData.vipFlag">VIP企业</el-checkbox>
                </span>
                <span>
                  <el-button @click="getSearch" type="primary" round size="mini">查询</el-button>
                  <el-button @click="resetSearch" type="info" round plain size="mini">重置</el-button>
                </span>
              </div>
            </div>
            <div>
              <div>
                <div class="totalTitle">
                  <span>总记录条数</span>
                  <i>{{searchData.total}}</i>
                  <span>条</span>
                </div>
              </div>
              <div></div>
              <div></div>
            </div>
            <div>
              <div>
                <el-table
                  :data="priseTableData.data"
                  style="width: 100%; text-align:center;"
                  border
                  v-loading="priseTableData.listloading"
                  :header-cell-style="{'background-color': '#fafafa','font-weight':'800'}"
                >
                  <el-table-column
                    prop="companyName"
                    label="公司名称"
                    min-width="80"
                    align="center"
                    :show-overflow-tooltip="true"
                  ></el-table-column>
                  <!-- <el-table-column prop="confirmTime" label="认证时间" min-width="80" align="center"></el-table-column> -->
                  <el-table-column prop="teamNum" label="团队人数" min-width="80" align="center"></el-table-column>
                  <el-table-column prop="projectNum" label="项目数" min-width="80" align="center"></el-table-column>
                  <el-table-column prop="totalLiftNum" label="总台量" min-width="80" align="center"></el-table-column>
                  <el-table-column prop="activeLiftNum" label="活跃台量" min-width="80" align="center"></el-table-column>
                  <el-table-column prop="stopLiftNum" label="停止服务台量" min-width="80" align="center"></el-table-column>
                  <el-table-column prop="maintenanceNum" label="维保次数" min-width="80" align="center"></el-table-column>
                  <el-table-column prop="emergencyNum" label="急修次数" min-width="80" align="center"></el-table-column>
                  <el-table-column
                    prop="lastActiveTime"
                    label="最后活跃时间"
                    min-width="80"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="contractStartDate"
                    label="合同开始时间"
                    min-width="80"
                    align="center"
                  ></el-table-column>
                  <el-table-column
                    prop="contractEndDate"
                    label="合同终止时间"
                    min-width="80"
                    align="center"
                  ></el-table-column>
                  <el-table-column min-width="80" align="center" label="操作">
                    <template slot-scope="{row,$index}">
                      <div>
                        <el-button
                          type="danger"
                          plain
                          size="small"
                          round
                          @click="printPlan(row,$index)"
                        >编辑</el-button>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="pagenation">
                <span>
                  <el-pagination
                    background
                    layout="prev, pager, next, sizes, total, jumper"
                    :total="searchData.total"
                    @current-change="click"
                    @size-change="handleSizeChange"
                    :page-sizes="[5, 15,25, 50]"
                    :page-size="searchData.pageSize"
                  ></el-pagination>
                </span>
              </div>
            </div>
          </div>
        </div>
        <el-dialog title="认证企业编辑" :visible.sync="isEditModial" :before-close="closeEdit">
          <el-form
            class="CompanyEnterpriseForm"
            :model="CompanyEnterpriseForm"
            :inline="true"
            label-position="left"
            width="680px"
          >
            <el-row>
              <el-form-item label="VIP用户：">
                <el-radio-group v-model="CompanyEnterpriseForm.vipFlag">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <el-row>
              <div class="contratDate">
                <span>合同开始日期:</span>
                <span>
                  <el-date-picker
                    v-model="CompanyEnterpriseForm.contractStartDate"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </span>
              </div>
            </el-row>
              <el-row>
              <div class="contratDate">
                <span>合同结束日期:</span>
                <span>
                  <el-date-picker
                    v-model="CompanyEnterpriseForm.contractEndDate"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </span>
              </div>
            </el-row>
            <el-row>
              <el-form-item label="电梯台量：">
                <el-input v-model="CompanyEnterpriseForm.limitedNum" placeholder="请输入电梯台量"></el-input>
              </el-form-item>
            </el-row>
            <div class="radioList">
              <el-row>菜单列表：</el-row>
              <el-row type="flex" justify="space-between" class="listModal">
                <el-col :span="11" :offset="1">
                  <span>主菜单</span>
                </el-col>
                <el-col :span="11" :offset="1" style="padding-left: 2%;">
                  <span>子菜单</span>
                </el-col>
                <!-- <el-col :span="14">
                <span>操作权限</span>
                </el-col>-->
              </el-row>
              <el-checkbox-group v-model="checkList">
                <el-row
                  v-for="(item,index) in menuList"
                  :key="index"
                  type="flex"
                  justify="space-between"
                  class="border1"
                >
                  <el-col :span="11" :offset="1">
                    <div>
                      <el-checkbox
                        :label="item.id"
                        v-model="item.id"
                        :checked="item.checked"
                        :disabled="isModal.isCheck"
                        @change="changeOne(item)"
                      >{{item.name}}</el-checkbox>
                    </div>
                  </el-col>
                  <el-col :span="11" :offset="1">
                    <el-row
                      v-for="(itemTwo,iTwo) in item.children"
                      :key="iTwo"
                      type="flex"
                      justify="space-between"
                    >
                      <el-col :span="22" :offset="1">
                        <div>
                          <el-checkbox
                            :disabled="isModal.isCheck"
                            :label="itemTwo.id"
                            v-model="itemTwo.checked"
                            :checked="itemTwo.checked"
                            @change="changeState(index,item,itemTwo)"
                          >{{itemTwo.name}}</el-checkbox>
                        </div>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-checkbox-group>
            </div>
          </el-form>

          <div slot="footer" class="dialog-footer Txc">
            <el-button type="primary" @click="submitCompanyEnterprise">确 定</el-button>
            <el-button @click="closeEdit">取 消</el-button>
          </div>
        </el-dialog>
      </div>
      <!--  -->
    </div>
  </div>
</template>

<script>
import header from "../../components/header/header.vue";
import leftside from "../../components/header/leftside.vue";
import Bmap from "../../components/home/amaps.vue";
import cakendar from "../../components/home/calendar.vue";
import EleReasize from "../../../../assets/js/EleResize.js";
export default {
  components: {
    appHeader: header,
    leftSide: leftside,
    vBmap: Bmap,
    vCalendar: cakendar
  },
  name: "home",
  data() {
    return {
      isEditModial: false,
      isNum: 1,
      numElevtor: {},
      unfinishedNum: {
        adminNum: 0,
        repairNum: 0,
        maintenanceNum: 0,
        bigNum: 0,
        inspectionNum: 0
      },
      // 是否能点击
      IsAcitve1: true,
      IsAcitve2: true,
      searchData: {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        provinceCode: "",
        provinceCodeS: "",
        companyName: "",
        companyNames: "",
        // vipFlag:"",
        vipFlag: false,
        vipFlags: false,
        pageNum: 1,
        pageSize: 15,
        total: 0
      },
      priseTableData: {
        data: [],
        listloading: false
      },
      listCondition: {
        total: 0,
        pageSize: 15
      },
      cityData: null,
      mtIs: false,
      CompanyEnterpriseForm: {
        vipFlag: 0,
        limitedNum: "",
        id: "",
        contractStartDate: "",
        contractEndDate: ""
      },
      checkList: [],
      menuList: [],
      isModal: {
        isAdd: false,
        isCheck: true
      }
    };
  },
  created() {
    this.mtIs =
      JSON.parse(JSON.parse(sessionStorage.getItem("companyID")).id) === 10086
        ? false
        : true;
    // this.getCalendarList();
  },
  mounted() {
    // this.getCityList();
    this.getTodoNum();
    this.getEchartOne();
    this.getEchartTwo();
    this.getEchartThree();
    if (!this.mtIs) this.getAllMap();
  },
  methods: {
    click(val) {
      this.searchData.pageNum = val;
      this.getEnterprise();
    },
    handleSizeChange(val) {
      this.searchData.pageNum = 1;
      this.searchData.pageSize = val;
      this.getEnterprise();
      // this.listCondition
    },
    getAllMap() {
      var url = "/system/home/platform/lift/liftDataList";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.$refs.child.allEvent(res.data);
        }
      });
    },
    // getCityList() {
    //   var url = "business/common/area/list";
    //   var param = {
    //     mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
    //   };
    //   this.axios.post(url, param).then(res => {
    //     if (res.statusCode === "1") {
    //       this.cityData = res.data;
    //     }
    //     console.log(res.data);
    //   });
    // },
    getEchartOne() {
      var _this = this;
      var titleBI;
      var chart = this.$echarts.init(document.getElementById("customerBIOne"));
      var resDiv = document.getElementById("customerBIOne");
      let listener = function() {
        chart.resize();
      };
      EleReasize.on(resDiv, listener);
      var option = {
        color: [
          "#51B0FF",
          "#b7e5a1",
          "#DC4F4A",
          "#ff9c00",
          "#f48b7b",
          "#3480cb"
        ],
        title: {
          text: "客户统计数据",
          left: "center",
          top: "3%",
          color: "#000",
          subtext: "模拟数据"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          bottom: 10,
          left: "center",
          data: []
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "55%",
            center: ["50%", "50%"],
            data: [{ value: 0, name: "湖北省" }],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };

      chart.setOption(option);
      if (this.mtIs) {
        _this.getCustomerStatistics(chart);
      } else {
        _this.getCustomerStatisticsTwo(chart);
      }
    },
    // 获取用户数据
    getCustomerStatistics(chart) {
      /*
      ****
      var url = "system/home/platform/statistics/customerStatistics";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          if (res.data.length > 0) {
            var data = res.data;
            var listCity = [];
            var newList = data.map(item => {
              listCity.push(item.key);
              var a = item.value;
              var obj = {};
              a.map(val => {
                if (val.key == 10) obj.value = val.value;
                if (val.key == 1) obj.vipNum = val.value;
                return;
              });
              obj.name = item.key;
              return obj;
            });

            var option = {
              color: [
                "#51B0FF",
                "#b7e5a1",
                "#DC4F4A",
                "#ff9c00",
                "#248b7b",
                "#3480cb"
              ],
              title: {
                text: "客户统计数据",
                left: "center",
                top: "3%",
                subtext: "总台量"
              },
              tooltip: {
                trigger: "item",
                // formatter: '{a} <br/>{b} : {c} ({d}%)'
                formatter: function(params, ticket, callback) {
                  return (
                    params.data.name +
                    "</br>" +
                    "客户总数:" +
                    params.data.value +
                    "</br>" +
                    "付费客户:" +
                    params.data.vipNum
                  );
                }
              },
              legend: {
                bottom: 10,
                left: "center",
                data: listCity
              },
              series: [
                {
                  name: "访问来源",
                  type: "pie",
                  radius: "55%",
                  center: ["50%", "50%"],
                  data: newList,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)"
                    }
                  }
                }
              ]
            };

            chart.setOption(option);
          }
        } else {
        }
      });
      ****
        */
      var url = "batch/applet/lift/regionRank";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          var data = res.data.regionLiftResponseList;
          if (!data) return;
          if (data.length > 0) {
            var listCity = [];
            var totalNum = res.data.totalLiftNum;
            var newList = data.map((item, index) => {
              listCity.push(item.regionName);
              var obj = {};
              obj.name = item.regionName;
              obj.value = item.totalLiftNums;
              obj.newLiftNums = item.newLiftNums;
              obj.lostLiftNums = item.lostLiftNums;
              return obj;
            });
            if (newList.length > 5) {
              let oldList = newList.sort((a, b) => {
                return b.value - a.value;
              });
              newList = oldList.slice(0, 6);
            }
            var option = {
              color: [
                "#51B0FF",
                "#b7e5a1",
                "#DC4F4A",
                "#ff9c00",
                "#248b7b",
                "#3480cb"
              ],
              title: {
                text: "客户统计数据",
                left: "center",
                top: "3%",
                subtext: "总台量" + totalNum ? totalNum : 0
              },
              tooltip: {
                trigger: "item",
                // formatter: '{a} <br/>{b} : {c} ({d}%)'
                formatter: function(params, ticket, callback) {
                  return (
                    params.data.name +
                    "</br>" +
                    "总电梯台量:" +
                    params.data.value +
                    "</br>" +
                    "新增电梯台量:" +
                    params.data.newLiftNums +
                    "</br>" +
                    "丢失电梯台量:" +
                    params.data.lostLiftNums
                  );
                }
              },
              legend: {
                bottom: 10,
                left: "center",
                data: listCity
              },
              series: [
                {
                  name: "访问来源",
                  type: "pie",
                  radius: "55%",
                  center: ["50%", "50%"],
                  data: newList,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)"
                    }
                  }
                }
              ]
            };
            chart.clear();
            chart.setOption(option);
          }
        } else {
          var option = {
            color: [
              "#51B0FF",
              "#b7e5a1",
              "#DC4F4A",
              "#ff9c00",
              "#248b7b",
              "#3480cb"
            ],
            title: {
              text: "客户统计数据",
              left: "center",
              top: "3%",
              subtext: "总台量" + 0
            },
            tooltip: {
              trigger: "item",
              // formatter: '{a} <br/>{b} : {c} ({d}%)'
              formatter: function(params, ticket, callback) {
                return (
                  params.data.name +
                  "</br>" +
                  "总电梯台量:" +
                  params.data.value +
                  "</br>" +
                  "新增电梯台量:" +
                  params.data.newLiftNums +
                  "</br>" +
                  "丢失电梯台量:" +
                  params.data.lostLiftNums
                );
              }
            },
            legend: {
              bottom: 10,
              left: "center",
              data: ["无数据"]
            },
            series: [
              {
                name: "访问来源",
                type: "pie",
                radius: "55%",
                center: ["50%", "50%"],
                data: [
                  { value: 0, newLiftNums: 0, name: "无数据", lostLiftNums: 0 }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)"
                  }
                }
              }
            ]
          };
          chart.clear();
          chart.setOption(option);
        }
      });
    },
    getCustomerStatisticsTwo(chart) {
      var url = "system/home/platform/statistics/customerStatistics";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          if (res.data.length > 0) {
            var data = res.data;
            var listCity = [];
            var newList = data.map(item => {
              listCity.push(item.key);
              var a = item.value;
              var obj = {};
              a.map(val => {
                if (val.key == 10) obj.value = val.value;
                if (val.key == 1) obj.vipNum = val.value;
                return;
              });
              obj.name = item.key;
              return obj;
            });

            var option = {
              color: [
                "#51B0FF",
                "#b7e5a1",
                "#DC4F4A",
                "#ff9c00",
                "#248b7b",
                "#3480cb"
              ],
              title: {
                text: "客户统计数据",
                left: "center",
                top: "3%",
                subtext: "总台量"
              },
              tooltip: {
                trigger: "item",
                // formatter: '{a} <br/>{b} : {c} ({d}%)'
                formatter: function(params, ticket, callback) {
                  return (
                    params.data.name +
                    "</br>" +
                    "客户总数:" +
                    params.data.value +
                    "</br>" +
                    "付费客户:" +
                    params.data.vipNum
                  );
                }
              },
              legend: {
                bottom: 10,
                left: "center",
                data: listCity
              },
              series: [
                {
                  name: "访问来源",
                  type: "pie",
                  radius: "55%",
                  center: ["50%", "50%"],
                  data: newList,
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: "rgba(0, 0, 0, 0.5)"
                    }
                  }
                }
              ]
            };
            chart.clear();
            chart.setOption(option);
          }
        } else {
        }
      });
    },
    getEchartTwo() {
      var _this = this;
      var chart = this.$echarts.init(
        document.getElementById("customerBITwo"),
        "light"
      );
      var resDiv = document.getElementById("customerBITwo");
      let listener = function() {
        chart.resize();
      };
      EleReasize.on(resDiv, listener);
      var option = {
        title: {
          text: "平台台量统计",
          left: "center",
          top: "3%"
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          bottom: 10,
          data: ["总台量", "活跃台量"]
        },
        xAxis: [
          {
            type: "category",
            data: ["湖北省", "湖南省", "安徽省"]
          }
        ],
        color: ["#51B0FF", "#ff9c00"],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "总台量",
            type: "bar",
            data: [0]
          },
          {
            name: "活跃台量",
            type: "bar",
            data: [0]
          }
        ]
      };
      chart.clear();
      chart.setOption(option);
      if (this.mtIs) {
        _this.getCustomerUnits(chart);
      } else {
        _this.getCustomerUnitsTwo(chart);
      }
    },
    getCustomerUnits(chart) {
      var url = "batch/applet/lift/liftOverView";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          var option;
          var data = res.data;
          if (data.length > 0) {
            var listOne;
            var listTwo;
            var cityName = [];
            data.map(item => {
              if (item.key == 1) listOne = item.value;
              if (item.key == 3) listTwo = item.value;
              return item;
            });
            option = {
              title: {
                text: "台量统计",
                left: "center",
                top: "3%"
              },
              tooltip: {
                trigger: "axis"
              },
              legend: {
                data: ["新增台量", "丢失台量"],
                top: "8%"
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "8%",
                containLabel: true
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: [
                  "1",
                  "2",
                  "3",
                  "4",
                  "5",
                  "6",
                  "7",
                  "8",
                  "9",
                  "10",
                  "11",
                  "12"
                ]
              },
              yAxis: {
                type: "value",
                axisLabel: {
                  formatter: "{value} 台"
                }
              },
              series: [
                {
                  name: "新增台量",
                  type: "line",
                  data: listOne
                },
                {
                  name: "丢失台量",
                  type: "line",
                  data: listTwo
                }
              ]
            };
          } else {
            option = {
              title: {
                text: "台量统计",
                subtext: "暂无数据"
              },
              tooltip: {
                trigger: "axis"
              },
              legend: {
                data: ["新增台量", "丢失台量"]
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "8%",
                containLabel: true
              },
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: [
                  "1",
                  "2",
                  "3",
                  "4",
                  "5",
                  "6",
                  "7",
                  "8",
                  "9",
                  "10",
                  "11",
                  "12"
                ]
              },
              yAxis: {
                type: "value"
              },
              series: [
                {
                  name: "新增台量",
                  type: "line",
                  stack: "总量",
                  data: []
                },
                {
                  name: "丢失台量",
                  type: "line",
                  stack: "总量",
                  data: []
                }
              ]
            };
          }
          chart.clear();
          chart.setOption(option);
        }
      });
    },
    getCustomerUnitsTwo(chart) {
      var url = "system/home/platform/statistics/unitsStatistics";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          var data = res.data;
          var listOne = [];
          var listTwo = [];
          var cityName = [];
          data.map(item => {
            item.value.map(val => {
              if (val.key == 0) listOne.push(val.value);
              if (val.key == 1) listTwo.push(val.value);
              return val;
            });
            cityName.push(item.key);
            return item;
          });
          var option = {
            title: {
              text: "平台台量统计",
              left: "center",
              top: "3%"
            },
            grid: {
              left: "40"
            },
            tooltip: {
              trigger: "axis"
            },
            legend: {
              bottom: 10,
              data: ["总台量", "活跃台量"]
            },
            xAxis: [
              {
                type: "category",
                data: cityName,
                axisLabel: {
                  show: true,
                  rotate: 30
                }
              }
            ],
            yAxis: [
              {
                type: "value",
                axisLabel: {
                  show: true,
                  rotate: 60
                }
              }
            ],
            series: [
              {
                name: "总台量",
                type: "bar",
                data: listOne
              },
              {
                name: "活跃台量",
                type: "bar",
                data: listTwo
              }
            ]
          };
          chart.clear();
          chart.setOption(option);
        }
      });
    },
    getEchartThree() {
      var _this = this;
      var chart = this.$echarts.init(
        document.getElementById("customerBIThree")
      );
      var resDiv = document.getElementById("customerBIThree");
      let listener = function() {
        chart.resize();
      };
      EleReasize.on(resDiv, listener);
      var option = {
        title: {
          text: "基础雷达图",
          left: "center",
          top: "3%"
        },
        backgroundColor: {
          type: "radial",
          x: 0,
          y: 0,
          r: 0,
          colorStops: [
            {
              offset: 0,
              color: "#fff" // 0% 处的颜色
            },
            {
              offset: 0.2,
              color: "#fff" // 100% 处的颜色
            },
            {
              offset: 1,
              color: "#fff" // 100% 处的颜色
            }
          ],
          globalCoord: false // 缺省为 false
        },
        grid: {
          top: "30%"
        },
        color: "#51B0FF",
        tooltip: {
          bottom: 10
        },
        legend: {
          data: []
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            { name: "项目数量", max: 1 },
            { name: "维保数量", max: 1 },
            { name: "急修数量", max: 1 },
            { name: "年检数量", max: 1 },
            { name: "大修数量", max: 1 }
          ],
          center: ["50%", "60%"]
        },
        series: [
          {
            name: "各年数据",
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [0, 0, 0, 0, 0, 0],
                name: "123"
              }
            ]
          }
        ]
      };

      chart.setOption(option);
      if (this.mtIs) {
        _this.getCustomerRadia(chart);
      } else {
        _this.getCustomerOview(chart);
      }
    },
    getCustomerRadia(chart) {
      var _this = this;
      var url = "system/home/enterprise/statistics/yearBusinessData";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      _this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          var data = res.data;
          var maxList = [
            { name: "项目数量", max: 6500 },
            { name: "维保数量", max: 16000 },
            { name: "急修数量", max: 30000 },
            { name: "年检数量", max: 38000 },
            { name: "大修数量", max: 52000 }
          ];
          let a = Math.max.apply(
            Math,
            data.map(item => {
              return item.projectNum;
            })
          );
          maxList[0].max = a == 0 ? 1 : a;
          let b = Math.max.apply(
            Math,
            data.map(item => {
              return item.maintenanceNum;
            })
          );
          maxList[1].max = b == 0 ? 1 : b;
          let c = Math.max.apply(
            Math,
            data.map(item => {
              return item.emergencyNum;
            })
          );
          maxList[2].max = c == 0 ? 1 : c;
          let d = Math.max.apply(
            Math,
            data.map(item => {
              return item.annualNum;
            })
          );
          maxList[3].max = d == 0 ? 1 : d;
          let f = Math.max.apply(
            Math,
            data.map(item => {
              return item.capitalNum;
            })
          );
          maxList[4].max = f == 0 ? 1 : f;
          var yearList = data.map(item => {
            return item.year + "年";
          });
          var colorList = ["#51B0FF", "#7FFFD4", "#FFD39B", "#A020F0"];
          var colorRgba = [
            "rgba(30,144,255,0.7)",
            "rgba(127,255,212,0.7)",
            "rgba(255,211,155, 0.7)",
            "rgba(160,32,240,0.7)"
          ];
          var dataList = data.map((item, index) => {
            let a = {
              value: [
                item.projectNum,
                item.maintenanceNum,
                item.emergencyNum,
                item.annualNum,
                item.capitalNum
              ],
              name: item.year + "年",
              symbol: "circle",
              symbolSize: 5,
              areaStyle: {
                normal: {
                  color: colorList[index]
                }
              },
              lineStyle: {
                normal: {
                  type: "dashed",
                  color: colorRgba[index],
                  width: 2
                }
              }
            };
            return a;
          });
          var option = {
            title: {
              text: "基础雷达图",
              left: "center",
              top: "3%"
            },
            backgroundColor: {
              type: "radial",
              x: 0,
              y: 0,
              r: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "#fff" // 0% 处的颜色
                },
                {
                  offset: 0.2,
                  color: "#fff" // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: "#fff" // 100% 处的颜色
                }
              ],
              globalCoord: false // 缺省为 false
            },
            grid: {
              top: "30%"
            },
            color: ["#51B0FF", "#7FFFD4", "#FFD39B", "#A020F0"],
            tooltip: {
              bottom: 10
            },
            legend: {
              top: "93%",
              data: yearList
            },
            radar: {
              // shape: 'circle',
              name: {
                textStyle: {
                  color: "#fff",
                  backgroundColor: "#999",
                  borderRadius: 3,
                  padding: [3, 5]
                }
              },
              indicator: maxList,
              center: ["50%", "55%"]
            },
            series: [
              {
                name: "各年数据",
                type: "radar",
                // areaStyle: {normal: {}},
                data: dataList
              }
            ]
          };
          chart.clear();
          chart.setOption(option);
        }
      });
    },
    getCustomerOview(chart) {
      var url = "system/home/platform/statistics/overView";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          if (res.data.length > 0) {
            var num = res.data.map(item => {
              return item.value;
            });
            var data = [res.data];
            var option = {
              color: ["#51B0FF"],
              title: {
                text: "平台统计",
                left: "center",
                top: "3%"
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  // 坐标轴指示器，坐标轴触发有效
                  type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                }
              },
              grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true
              },
              xAxis: [
                {
                  type: "category",
                  data: ["认证台量", "项目录入数量", "维保次数", "急修次数"],
                  axisLabel: {
                    show: true,
                    rotate: 30
                  }
                }
              ],
              yAxis: [
                {
                  type: "value"
                }
              ],
              series: [
                {
                  type: "bar",
                  barWidth: "60%",
                  data: num
                }
              ]
            };
            chart.clear();
            chart.setOption(option);
          }
        }
      });
    },
    getTodoNum() {
      var that = this;
      var url = "system/home/enterprise/todo/todoNum";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          res.data.forEach(element => {
            switch (element.key) {
              case 1:
                that.unfinishedNum.adminNum = element.value;
                break;
              case 2:
                that.unfinishedNum.repairNum = element.value;
                break;
              case 3:
                that.unfinishedNum.maintenanceNum = element.value;
                break;
              case 4:
                that.unfinishedNum.bigNum = element.value;
                break;
              case 5:
                that.unfinishedNum.inspectionNum = element.value;
                break;
            }
          });
        }
      });
    },
    toViewWork(a) {
      switch (a) {
        case 1:
          this.$router.push({
            path: "/Userapplication"
          });
          break;
        case 2:
          this.$router.push({
            path: "/UrgentRepair"
          });
          break;
        case 3:
          this.$router.push({
            path: "/Maintenance",
            query: { activeName: "second" }
          });
          break;
        case 4:
          this.$router.push({
            path: "/CapitalRepair"
          });
          break;
        case 5:
          this.$router.push({
            path: "/Inspection"
          });
          break;
      }
    },

    getNumData(a) {
      var url = "system/home/enterprise/lift/liftDataList";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        liftDataStatus: a
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          var renmark = {};
          renmark.liftDataList = res.data ? res.data : [];
          this.$refs.child.emitEvent(renmark, a);
        }
      });
    },

    // 切换地图
    getMapData() {
      var _this = this;
      var a = {};
      var promise = new Promise((resolve, reject) => {
        var url = "system/home/enterprise/lift/liftNum";
        var param = {
          mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id
        };
        _this.axios.post(url, param).then(res => {
          if (res.statusCode === "1") {
            res.data.forEach(item => {
              switch (item.key) {
                case 0:
                  a.allEle = item.value;
                  break;
                case 10:
                  a.readyEle = item.value;
                  break;
                case 11:
                  a.goingEle = item.value;
                  break;
                case 12:
                  a.endEle = item.value;
                  break;
                case 20:
                  a.emergEle = item.value;
                  break;
                case 21:
                  a.emergEndEle = item.value;
                  break;
                case -1:
                  a.nullEle = item.value;
                  break;
              }
            });
            this.numElevtor = a;
            resolve([]);
            // _this.$refs.child.emitEvent(data, 0);
          } else {
            _this.$message.error(res.message);
            resolve([]);
          }
        });
      });
      promise.then(function() {
        var url = "system/home/enterprise/lift/liftDataList";
        var param = {
          mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
          liftDataStatus: 0
        };
        _this.axios.post(url, param).then(res => {
          if (res.statusCode === "1") {
            a.liftDataList = res.data ? res.data : [];
            _this.$refs.child.emitEvent(a, 0);
          } else {
            _this.$message.error(res.message);
          }
        });
      });
      this.isNum = 2;
    },
    goReturn() {
      this.isNum = 1;
      this.getTodoNum();
      this.getEchartOne();
      this.getEchartTwo();
      this.getEchartThree();
    },
    // 获取认证企业
    getEnterprise() {
      this.isNum = 3;
      var url = "system/mtcompany/confirmCompanyList";
      var param = {
        mtCompanyId: JSON.parse(sessionStorage.getItem("companyID")).id,
        provinceCode: this.searchData.provinceCodeS,
        companyName: this.searchData.companyName,
        vipFlag: this.searchData.vipFlags ? 1 :null,
        pageNum: this.searchData.pageNum,
        pageSize: this.searchData.pageSize
      };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.priseTableData.data = res.data.rows;
          this.searchData.total = res.data.total;
        } else {
          this.$message({
            type: "warning",
            message: res.message
          });
        }
      });
    },
    getSearch() {
      this.searchData.provinceCodeS = this.searchData.provinceCode;
      this.searchData.vipFlags = this.searchData.vipFlag;
      this.searchData.companyName = this.searchData.companyNames;
      this.searchData.pageNum = 1;
      this.searchData.pageSize = 15;
      this.getEnterprise();
    },
    resetSearch() {
      this.searchData.provinceCodeS = "";
      this.searchData.provinceCode = "";
      this.searchData.vipFlags = "";
      this.searchData.companyName = "";
      this.searchData.companyNames = "";
      this.searchData.vipFlag = "";
      this.searchData.pageNum = 1;
      this.searchData.pageSize = 15;
      this.getEnterprise();
    },
    getProvince(val) {
      if (val) {
        var url = "business/common/area/list";
        var param = {
          code: 0
        };
        this.axios.post(url, param).then(res => {
          if (res.statusCode === "1") {
            this.cityData = res.data;
          }
        });
      }
    },
    printPlan(r, i) {
      this.isEditModial = true;
      this.UpdateCompanyWyUpdate(r);
    },
    UpdateCompanyWyUpdate(row) {
      // this.UpdateCompanyWyUpdateId = row.id;
      var data=this.CompanyEnterpriseForm;
      this.isAddEnterprise = 0;
      data.contractStartDate=row.contractStartDate;
      data.contractEndDate=row.contractEndDate;
      var url = "system/menu/all";
      var param = { companyId: row.companyId };
      this.axios.post(url, param).then(res => {
        if (res.statusCode === "1") {
          this.menuList = res.data;
          console.log(this.menuList)
        } else {
          this.$message({
            type: "info",
            message: res.message
          });
        }
      });
      this.CompanyEnterpriseForm.vipFlag = row.vipFlag;
      this.CompanyEnterpriseForm.limitedNum = row.limitedNum;
      this.CompanyEnterpriseForm.id = row.attestationId;
      this.isModal.isCheck = false;
      this.isModal.isAdd = true;
      this.dialogCompanyEnterprise = true;
    },
    closeEdit() {
      this.menuList = [];
      this.checkList = [];
      this. CompanyEnterpriseForm={
        vipFlag: 0,
        limitedNum: "",
        id: "",
        contractStartDate: "",
        contractEndDate: "",
      };
      this.isEditModial = false;
      this.getEnterprise();
    },
    // 确定修改团队
    submitCompanyEnterprise() {
      if (this.CompanyEnterpriseForm.limitedNum) {
        var url = "system/mtcompany/updateCompany";
        var param = this.CompanyEnterpriseForm;
        console.log(this.CompanyEnterpriseForm)
        param.attestationId=this.CompanyEnterpriseForm.id;
        var menuId = this.checkList ? this.checkList.join(",") : [];
        param.menuIds = menuId;
        this.axios.post(url, param).then(res => {
          if (res.statusCode === "1") {
            this.$message({
              type: "success",
              message: res.message
            });
            this.isEditModial = false;
            this.getEnterprise();
          } else {
            this.$message.error(res.message);
          }
        });
      } else {
        this.$message.error("请填写电梯台量！");
      }
    },
    changeOne(item) {
      var _this = this;
      if (item.children) {
        var a = [];
        for (var i of item.children) {
          a.push(i.id);
          if (i.children) {
            for (var j of i.children) {
              a.push(j.id);
            }
          }
        }
        _this.checkList = _this.checkList.filter(value => {
          return a.every(item => {
            return value !== item;
          });
        });
      }
    },
    changeState(...age) {
      var _this = this;
      if (age[2].children) {
        _this.checkList = _this.checkList.filter(value => {
          return age[2].children.every(item => {
            return value !== item.id;
          });
        });
      }
      if (_this.checkList.indexOf(age[1].id) === -1)
        _this.checkList.push(age[1].id);
    }
  }
};
</script>

<style lang="stylus">
$FAQBacGray = #EAEAEA;
$ibacPrimary = #51B0FF;
$ibacSuccess = #b7e5a1;
$ibacYellow = #FEE188;
$ibacRed = #DC4F4A;
$ibacYellowBold = #ff9c00;
$pfFontSize = 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', Arial, sans-serif;

.conversionInBl {
  display: inline-block;
}

.conversionBl {
  display: block;
}

.FAQBacGray {
  background-color: #EAEAEA;
}

.ibacPrimary {
  background-color: #51B0FF;
}

.ibacSuccess {
  background-color: #b7e5a1;
}

.ibacYellow {
  background-color: #FEE188;
}

.ibacRed {
  background-color: #DC4F4A;
}

.ibacYellowBold {
  background-color: #ff9c00;
}

$f16 = 13px;

.indexHome {
  background: #fff;

  .homeMap {
    text-align: center;
  }
  .el-form-item{
    margin-bottom:0;
  }
  .iconIndexC {
    padding: 15px;

    .iconBtn {
      .el-col {
        height: 26px;
        line-height: 26px;
      }
    }

    .iconfont {
      font-size: 16px;
      padding-right: 5px;

      >span {
      }
    }

    .conversionInBlIcon {
      vertical-align: middle;
      display: inline-block;
    }

    .el-col {
      cursor: pointer;

      .fs16 {
        vertical-align: middle;
        font-size: $f16;
      }
    }

    >.el-row {
      >.el-col:last-child {
        text-align: right;

        >span {
          display: inline-block;
          padding: 4px 8px;
          border: 1px solid #51B0FF;
          border-radius: 3px;
          color: #51B0FF;
        }
      }
    }
  }

  .neHeaderText {
    >.el-col:first-child {
      >span {
        display: inline-block;
        width: 36px;
        height: 36px;

        >img {
          wigth: 100%;
        }
      }
    }
  }

  .radioList {
    >.el-row {
      padding: 15px 0;
    }

    >.el-row:first-child {
      padding: 0;
    }

    .border1 {
      border-bottom: 1px solid #E8E8E8;
      padding: 10px 0;
    }

    .FlexContair {
      // .el-row--flex{
      // flex-flow:row wrap;
      // }
      // display: flex;
      // justify-content:start;
      // flex-flow:row wrap;
      // >span{}
    }

    .listModal {
      background: #fafafa;

      [class*=el-col-] {
        text-align: left;
      }
    }
  }
  .contratDate{
    padding-bottom:10px;
    >span{
      dispaly:inline-block;
    }
  }
}
</style>


