<template>
  <div class="box-center">
    <div class="app-top">
      <div class="app-titel" style="margin-bottom: 10px">
        <div style="display: flex">
          <div class="titel-text" style="line-height: 32px">月份:</div>
          <div style="margin-left: 10px">
            <el-date-picker
              v-model="time"
              type="month"
              :clearable="false"
              value-format="yyyy-MM"
              @change="confirmtime"
              placeholder="选择月"
            >
            </el-date-picker>
          </div>
        </div>

        <el-select
          v-model="selValue"
          @change="selChange"
          style="width: 100px; margin-left: 20px"
          placeholder="请选择"
        >
          <el-option label="代理商" v-if="orgType == 0" value="0"></el-option>
          <el-option label="公司" v-if="orgType != 2" value="1"></el-option>
          <el-option label="项目" value="2"></el-option>
        </el-select>

        <div style="margin-left: 10px" v-if="selValue == 1">
          <el-select
            v-model="choicValue"
            @change="valuechange"
            placeholder="默认为全部"
            clearable
            filterable
          >
            <el-option
              v-for="item in houseList"
              :key="item.orgCode"
              :label="item.name"
              :value="item.orgCode"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 项目 -->
        <div style="margin-left: 26px" v-else-if="selValue == 2">
          <el-select
            v-model="choicValue"
            @change="valuechange"
            placeholder="默认为全部"
            clearable
            filterable
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.propertyName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <div style="margin-left: 26px" v-else>
          <el-select
            v-model="choicValue"
            @change="valuechange"
            clearable
            filterable
            placeholder="默认为全部"
          >
            <el-option
              v-for="item in houseList"
              :key="item.id"
              :label="item.agentName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>

        <div v-if="orgType == 0 || orgType == 1" class="div-lab">
          <div class="label">运营人员：</div>
          <el-select
            v-model="operationStaffId"
            placeholder="请选择"
            class="div-inp"
            filterable
            clearable
          >
            <el-option
              v-for="item in operaList"
              :key="item.accountId"
              :label="item.name"
              :value="item.accountId"
            >
            </el-option>
          </el-select>
        </div>
        <div style="margin-left: auto; display: flex; margin-right: 50px">
          <div style="margin-left: 20px">
            <el-button type="primary" @click="screen">筛选</el-button>
          </div>
          <div style="margin-left: 20px">
            <el-button @click="clascreen">清空筛选条件</el-button>
          </div>
        </div>
      </div>
    </div>

    <div class="app-box-san">
      <div class="zuo">
        <div class="title">
          <div class="text1">目标分析</div>
        </div>
        <div style="min-height: 350px;padding: 0 0 20px 0;width: 94%; margin: 0 auto">
          <div id="data1" style="min-height: 350px"></div>
        </div>
      </div>
      <div class="zuo">
        <div class="title">
          <div class="text1">运营目标完成排名</div>
          <div
            style="
              display: flex;
              margin-left: auto;
              line-height: 54px;
              margin-right: 20px;
              cursor: pointer;
            "
          >
            <div
              :class="{ colostyle: tabFlag == 1 }"
              style="margin-right: 10px"
              @click="tabClick1(1)"
            >
              达标
            </div>
            <div :class="{ colostyle: tabFlag == 2 }" @click="tabClick1(2)">
              未达标
            </div>
          </div>
        </div>
        <div
          style="min-height: 350px;padding: 0 0 20px 0; width: 94%; margin: 0 auto;"
        >
          <div class="jinbox" v-for="(item, i) in objList" :key="i">
            <div class="jinboxtit">{{ item.name }}</div>
            <div class="jinbox-box">
              <div
                class="boxbaifenbi"
                :style="'width:' + item.zxl1 + '%;'"
              ></div>
            </div>
            <div class="jinboxbott">{{ item.zxl }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="app-box-san">
      <div class="zuo">
        <div class="title">
          <div class="text1">对比上月分析</div>
        </div>
        <div style="min-height: 350px;padding: 0 0 20px 0;width: 94%; margin: 0 auto">
          <div id="data2" style="min-height: 350px"></div>
        </div>
      </div>
      <div class="zuo">
        <div class="title">
          <div class="text1">运营目标排名</div>
          <div
            style="
              display: flex;
              margin-left: auto;
              line-height: 54px;
              margin-right: 20px;
              cursor: pointer;
            "
          >
            <div
              :class="{ colostyle: tabFlag2 == 0 }"
              style="margin-right: 10px"
              @click="tabClick2(0)"
            >
              不变
            </div>
            <div
              :class="{ colostyle: tabFlag2 == 1 }"
              style="margin-right: 10px"
              @click="tabClick2(1)"
            >
              上升
            </div>
            <div :class="{ colostyle: tabFlag2 == 2 }" @click="tabClick2(2)">
              下降
            </div>
          </div>
        </div>
        <div
          style="min-height: 350px;padding: 0 0 20px 0;width: 94%; margin: 0 auto"
        >
          <div class="jinbox" v-for="(item, i) in objList1" :key="i">
            <div class="jinboxtit">{{ item.name }}</div>
            <div class="jinbox-box">
              <div
                class="boxbaifenbi"
                :style="'width:' + item.zxl1 + '%;'"
              ></div>
            </div>
            <div class="jinboxbott">{{ item.zxl }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 表格 -->
    <div class="cen-tab">
      <div class="app-titel" style="margin-bottom: 10px">
        <el-button type="primary" :disabled='choiceList.length==0' @click="setTits">批量设置目标</el-button>
        <!-- <el-button
          >导出</el-button
        > -->
      </div>
      <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        stripe
        style="width: 100%"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="houseName" label="项目名称" align="center">
        </el-table-column>
        <el-table-column label="地区" align="center">
          <template slot-scope="{ row }">
            {{ row.provinceName || "-" }}-{{ row.cityName || "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="operationStaffName" :show-overflow-tooltip="true" width="200" label="运营" align="center">
        </el-table-column>

        <el-table-column
          :label="item.month"
          align="center"
          v-for="(item, idx) in childList"
          :key="idx"
          type="index"
        >
          <el-table-column
            width="100"
            prop="fraction"
            label="平均执行率"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.childList[idx].fraction }}
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            prop="comparedFraction"
            label="对比上月"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.childList[idx].comparedFraction }}
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            prop="target"
            label="目标执行率"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.childList[idx].target }}
            </template>
          </el-table-column>
          <el-table-column
            width="100"
            prop="targetProportion"
            label="目标完成率"
            align="center"
          >
            <template slot-scope="scope">
              {{ scope.row.childList[idx].targetProportion }}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="getAnalyse(scope)">趋势图</el-button>
            <el-button type="text" @click="setTit(scope)">设置目标</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: flex-end; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 30, 50]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog title="趋势图" :visible.sync="dialogVisible">
      <div class="houseSize">项目： {{houseName||''}} 运营：{{operationStaffName||'暂无'}}</div>
      <div style="min-height: 350px;padding: 0 0 20px 0;width: 94%; margin: 0 auto">
        <div id="line" style="min-height: 350px"></div>
      </div>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addEquipment()">保存</el-button>
      </div> -->
    </el-dialog>

    <el-dialog
      title="目标"
      :visible.sync="targetVisible"
      width="650px"
      @close="reset"
    >
      <el-form
        :model="receiveForm"
        ref="receiveForm"
        :rules="receiveRules"
        label-width="200px"
      >
        <el-form-item :label="receiveForm.name0+'月目标执行率'" prop="num0">
          <el-input
            v-model="receiveForm.num0"
            style="width: 80%; margin-left: 20px"
            maxlength="2"
            clearable
          >
            <i slot="suffix" style="font-style: normal; margin-right: 10px"
              >%</i
            >
          </el-input>
        </el-form-item>
        <el-form-item :label="receiveForm.name1+'月目标执行率'" prop="num1">
          <el-input
            v-model="receiveForm.num1"
            style="width: 80%; margin-left: 20px"
            maxlength="2"
            clearable
          >
            <i slot="suffix" style="font-style: normal; margin-right: 10px"
              >%</i
            >
          </el-input>
        </el-form-item>
        <el-form-item :label="receiveForm.name2+'月目标执行率'" prop="num2">
          <el-input
            v-model="receiveForm.num2"
            style="width: 80%; margin-left: 20px"
            maxlength="2"
            clearable
          >
            <i slot="suffix" style="font-style: normal; margin-right: 10px"
              >%</i
            >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="targetVisible = false">取 消</el-button>
        <el-button type="primary" @click="sava()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { exportMethodPost } from "@/util/util";
export default {
  data() {
    return {
      selValue:
        localStorage.getItem("orgType") == 0
          ? "0"
          : localStorage.getItem("orgType") == 1
          ? "1"
          : "2",
      choicValue: "",
      operationStaffId: "",
      houseList: [],
      operaList: [],
      tableData: [],
      choiceList:[],
      orgType: localStorage.getItem("orgType"),
      time: "",
      page: 1,
      pagesize: 10,
      total: 0,
      dialogVisible: false,
      targetVisible: false,
      receiveForm: {
        num0: "",
        num1: "",
        num2: "",
        name0:'',
        name1:'',
        name2:'',
      },
      receiveRules: {},
      tabFlag: 1,
      tabFlag2: 0,
      objList1: [],
      objList: [],
      orgData: [],
      orgArr: [],
      childList: [],
      echarIdx:'',
      houseName:'',
      operationStaffName:'',
      choiceFlag:true,
    };
  },
  mounted() {
    // 先默认获取当前月份
    this.time =
      new Date().getFullYear() +
      "-" +
      (new Date().getMonth() + 1 < 10
        ? "0" + (new Date().getMonth() + 1)
        : new Date().getMonth() + 1);
    console.log(
      new Date().getFullYear() +
        "-" +
        (new Date().getMonth() + 1 < 10
          ? "0" + (new Date().getMonth() + 1)
          : new Date().getMonth() + 1),
      "时间"
    );
    this.getList();
    this.getOperaList();
    this.screen();
  },
  methods: {
    // 表格
    houseSalesAnalysis() {
      let obj = {
        month: this.time + "-01",
        agentId: this.selValue == 0 ? this.choicValue : null,
        orgCode: this.selValue == 1 ? this.choicValue : null,
        houseId: this.selValue == 2 ? this.choicValue : null,
        operationType: localStorage.getItem("orgType") / 1 + 1,
        houseTypes: "0,1",
        operationStaffId: this.operationStaffId,
        size: this.pagesize,
        current: this.page,
      };
      if (this.orgType == 1) {
        obj.agentId = localStorage.getItem("agentId");
      }
      if (this.orgType  == 2) {
        obj.orgCode = localStorage.getItem("orgCode");
      }
      this.$api.api.houseSalesAnalysis(obj).then((res) => {
        // console.log(res, "数据");
        // 处理数据
        this.total = res.data.total;
        this.tableData = res.data.records;
        this.childList = res.data.records[0].childList;
      });
    },
    //第一个饼状图
    targetAnalysis() {
      let obj = {
        month: this.time + "-01",
        agentId: this.selValue == 0 ? this.choicValue : null,
        orgCode: this.selValue == 1 ? this.choicValue : null,
        houseId: this.selValue == 2 ? this.choicValue : null,
        operationType: localStorage.getItem("orgType") / 1 + 1,
        houseTypes: "0,1",
        operationStaffId: this.operationStaffId,
      };
            if (this.orgType == 1) {
        obj.agentId = localStorage.getItem("agentId");
      }
      if (this.orgType  == 2) {
        obj.orgCode = localStorage.getItem("orgCode");
      }
      this.$api.api.targetAnalysis(obj).then((res) => {
        let arr = [
          {
            value: res.data.upToStandard,
            name: "达标",
          },
          {
            value: res.data.didNotMakeIt,
            name: "未达标",
          },
        ];
        // console.log(res);
        this.getChart("data1", arr);
      });
    },
    // 第一个柱状图
    operationalGoals() {
      let obj = {
        month: this.time + "-01",
        agentId: this.selValue == 0 ? this.choicValue : null,
        orgCode: this.selValue == 1 ? this.choicValue : null,
        houseId: this.selValue == 2 ? this.choicValue : null,
        operationType: localStorage.getItem("orgType") / 1 + 1,
        houseTypes: "0,1",
        operationStaffId: this.operationStaffId,
      };
            if (this.orgType == 1) {
        obj.agentId = localStorage.getItem("agentId");
      }
      if (this.orgType  == 2) {
        obj.orgCode = localStorage.getItem("orgCode");
      }
      this.$api.api.operationalGoals(obj).then((res) => {
        // console.log(res);
        // 数据处理
        this.orgArr = res.data;
        this.dealData();
      });
    },
    // 数据处理
    dealData() {
      let arr = [];
      if (this.tabFlag == 1) {
        // 达标
        // res.data.upToStandardList
        let num = Math.max.apply(
          Math,
          this.orgArr.upToStandardList.map(function (o) {
            return o.upToStandard;
          })
        );
        // console.log(num, "最大值");
        this.orgArr.upToStandardList.map((item) => {
          let obj = {};
          obj.zxl = item.upToStandard;
          obj.name = item.name;
          obj.zxl1 = Math.floor((item.upToStandard / num) * 100);
          arr.push(obj);
        });
      } else {
        // res.data.didNotMakeItList
        let num = Math.max.apply(
          Math,
          this.orgArr.didNotMakeItList.map(function (o) {
            return o.didNotMakeIt;
          })
        );
        // console.log(num, "最大值");
        this.orgArr.didNotMakeItList.map((item) => {
          let obj = {};
          obj.zxl = item.didNotMakeIt;
          obj.name = item.name;
          obj.zxl1 = Math.floor((item.didNotMakeIt / num) * 100);
          arr.push(obj);
        });
      }
      this.objList = arr;
    },
    //第二个饼状图
    targetAnalysisCompared() {
      let obj = {
        month: this.time + "-01",
        agentId: this.selValue == 0 ? this.choicValue : null,
        orgCode: this.selValue == 1 ? this.choicValue : null,
        houseId: this.selValue == 2 ? this.choicValue : null,
        operationType: localStorage.getItem("orgType") / 1 + 1,
        houseTypes: "0,1",
        operationStaffId: this.operationStaffId,
      };
            if (this.orgType == 1) {
        obj.agentId = localStorage.getItem("agentId");
      }
      if (this.orgType  == 2) {
        obj.orgCode = localStorage.getItem("orgCode");
      }
      this.$api.api.targetAnalysisCompared(obj).then((res) => {
        let arr = [
          {
            value: res.data.rise,
            name: "上升",
          },
          {
            value: res.data.decline,
            name: "下降",
          },
          {
            value: res.data.constant,
            name: "不变",
          },
        ];
        // console.log(res);
        this.getChart("data2", arr);
      });
    },
    // 第二个柱状图
    operationalGoalsCompared() {
      let obj = {
        month: this.time + "-01",
        agentId: this.selValue == 0 ? this.choicValue : null,
        orgCode: this.selValue == 1 ? this.choicValue : null,
        houseId: this.selValue == 2 ? this.choicValue : null,
        operationType: localStorage.getItem("orgType") / 1 + 1,
        houseTypes: "0,1",
        operationStaffId: this.operationStaffId,
      };
            if (this.orgType == 1) {
        obj.agentId = localStorage.getItem("agentId");
      }
      if (this.orgType  == 2) {
        obj.orgCode = localStorage.getItem("orgCode");
      }
      this.$api.api.operationalGoalsCompared(obj).then((res) => {
        // console.log(res);
        this.orgData = res.data;
        this.dealData2();
      });
    },
    // 数据处理
    dealData2() {
      let arr = [];
      if (this.tabFlag2 == 0) {
        // 达标
        // res.data.upToStandardList
        let num = Math.max.apply(
          Math,
          this.orgData.riseList.map(function (o) {
            return o.rise;
          })
        );
        // console.log(num, "最大值");
        this.orgData.riseList.map((item) => {
          let obj = {};
          obj.zxl = item.rise;
          obj.name = item.name;
          obj.zxl1 = Math.floor((item.rise / num) * 100);
          arr.push(obj);
        });
      } else if (this.tabFlag2 == 1) {
        // res.data.didNotMakeItList
        let num = Math.max.apply(
          Math,
          this.orgData.constantList.map(function (o) {
            return o.constant;
          })
        );
        // console.log(num, "最大值");
        this.orgData.constantList.map((item) => {
          let obj = {};
          obj.zxl = item.constant;
          obj.name = item.name;
          obj.zxl1 = Math.floor((item.constant / num) * 100);
          arr.push(obj);
        });
      } else {
        let num = Math.max.apply(
          Math,
          this.orgData.declineList.map(function (o) {
            return o.decline;
          })
        );
        // console.log(num, "最大值");
        this.orgData.declineList.map((item) => {
          let obj = {};
          obj.zxl = item.decline;
          obj.name = item.name;
          obj.zxl1 = Math.floor((item.decline / num) * 100);
          arr.push(obj);
        });
      }
      this.objList1 = arr;
    },
    tabClick2(idx) {
      this.tabFlag2 = idx;
      this.dealData2();
    },
    tabClick1(idx) {
      this.tabFlag = idx;
      this.dealData();
    },
    reset() {
      this.receiveForm = {
        num0: "",
        num1: "",
        num2: "",
        name0:'',
        name1:'',
        name2:'',
      };
      this.$refs.receiveForm.resetFields();
    },
    screen() {
      this.targetAnalysis();
      this.operationalGoals();
      this.targetAnalysisCompared();
      this.operationalGoalsCompared();
      this.houseSalesAnalysis();
    },
    clascreen() {
      this.time = new Date().getFullYear() + "-" + (new Date().getMonth() + 1);
      this.choicValue = "";
      if (this.orgType == 0) {
        this.selValue = "0";
      } else if (this.orgType == 1) {
        this.selValue = "1";
      } else {
        this.selValue = "2";
      }
      this.operationStaffId = "";
      this.screen();
    },
    sava() {
      let obj={}
      let flag=true
      this.choiceFlag?obj.houseIds=this.receiveForm.houseId:obj.houseIds=this.choiceList.join(',')
      // obj.houseId=this.receiveForm.houseId
      let arr=[this.receiveForm.name0+'-01',this.receiveForm.name1+'-01',this.receiveForm.name2+'-01']
      let arr1=[this.receiveForm.num0,this.receiveForm.num1,this.receiveForm.num2]
      arr1.map(item=>{
        if(!item){
          flag=false
        }
      })
      if(!flag){
        this.$message.warning('请填写目标')
        return
      }
      obj.targets=arr1.join(',')
      obj.months=arr.join(',')
      this.$api.api.setTargetExecutionRate(obj)
      .then(res=>{
        console.log(res);
        this.houseSalesAnalysis();
        this.targetVisible=false
      })
    },
    getAnalyse(scope) {
      console.log("趋势图");
      this.dealEaharData(scope.row);
      // 上一个下一个懒得写
      // this.echarIdx=scope.$index
    },
    dealEaharData(row) {
      // 数据处理
      this.houseName=row.houseName
      this.operationStaffName=row.operationStaffName
      let timeDate = [];
      let Strname = ["平均执行率", "对比上月", "目标执行率", "目标完成率"];
      let arr0 = [];
      let arr1 = [];
      let arr2 = [];
      let arr3 = [];
      row.childList.map((item) => {
        timeDate.push(item.month);
        arr0.push(item.fraction);
        arr1.push(item.comparedFraction);
        arr2.push(item.target);
        arr3.push(item.targetProportion);
      });
      let arr = [];
      Strname.map((item, idx) => {
        // console.log(eval('arr'+idx));
        // return
        let obj = {
          name: item,
          data: eval("arr" + idx),
          type: "line",
          smooth: true,
        };
        arr.push(obj);
      });
      // console.log(arr,'数据');
      this.dialogVisible = true;
      // 将echar 变成异步操作，因为此时页面尚未渲染
      setTimeout(() => {
        this.SwitchCARDS(arr, "line", timeDate, Strname);
      }, 100);
    },
    setTits(){
      this.choiceFlag=false
      let obj={
        houseId:'',
        month: this.time + "-01",
      }
      this.findTargetExecutionRate(obj)
    },
    setTit(scope) {
      // console.log("设置目标");
      this.choiceFlag=true
      let obj={
        houseId:scope.row.id,
        month: this.time + "-01",
      }
      this.receiveForm.houseId=scope.row.id
      this.findTargetExecutionRate(obj)

    },
    findTargetExecutionRate(obj){
       this.$api.api.findTargetExecutionRate(obj)
      .then(res=>{
        // console.log(res);
      res.data.map((item,idx)=>{
        this.receiveForm['name'+idx]=item.month.substring(0,7)
        this.receiveForm['num'+idx]=item.target||''
      })
      console.log(this.receiveForm);
        this.targetVisible = true;
      })
    },
    // 折线图
    SwitchCARDS(arr, str, timeDate, Strname) {
      // console.log(arr, str, timeDate, Strname);
      echarts.init(document.getElementById(str)).dispose();
      var chartDom = document.getElementById(str);
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: Strname,
          bottom: "10",
        },
        grid: {
          left: 10,
          right: 10,

          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: timeDate,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              type: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
        },
        yAxis: {
          type: "value",
          splitNumber: 4,
          axisLabel: {
            //重点在这一块，其余可以忽略
            textStyle: {
              color: "#212121", //更改坐标轴文字颜色
            },
          },
          axisLine: {
            lineStyle: {
              ype: "solid",
              color: "#DDE1EE", //x线的颜色
              width: "1", //坐标线的宽度
            },
          },
          splitLine: {
            lineStyle: {
              type: "dashed", // y轴分割线类型
            },
          },
          axisTick: {
            //y轴刻度线
            show: false,
          },
        },
        series: arr,
      };
      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    // 饼状图
    getChart(id, data) {
      echarts.init(document.getElementById(id)).dispose();
      var chartDom = document.getElementById(id);
      var myChart = echarts.init(chartDom);
      var option = {
        color: [
          "#66AFF5",
          "#FABD2B",
          "#6F8EDC",
          "#FFCF8F",
          "#F98120",
          "#1CC99E",
          "#9474FB",
          "#657292",
          "#7A6A99",
          "#BF5D52",
          "#EE6666",
          "#77B7E4",
          "#E6A065",
          "#9D5139",
          "#C1AA88",
          "#F87F7A",
          "#F6CF74",
          "#7F5506",
          "#88BB9B",
          "#6E99AA",
          "#5789D0",
        ],
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "1%",
          left: "center",
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["48%", "70%"],
            avoidLabelOverlap: false,
            data: data,
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    confirmtime(e) {
      console.log(e, "获取到的时间参数");
      console.log(e.substring(5) / 1, "月份");
      // 再次要对时间进行操作  即往前六个月
    },
    selChange() {
      this.choicValue = "";
      this.getList();
    },
    valuechange() {},
    handleSelectionChange(e) {
      // console.log(e);
      this.choiceList=[]
      e.map(item=>{
        this.choiceList.push(item.id)
      })
      console.log(this.choiceList);

    },
    getList() {
      console.log(this.selValue);
      // 当为项目选择时
      if (this.selValue == 1) {
        this.$api.api
          .findMyOrg({
            orgType: localStorage.getItem("orgType"),
            agentId: localStorage.getItem("agentId"),
            houseTypes: "0,1",
          })
          .then((res) => {
            this.houseList = res.data;
          });
      } else if (this.selValue == 2) {
        this.$api.api
          .findHouseByUser({
            orgType: localStorage.getItem("orgType"),
            houseId: localStorage.getItem("houseId"),
            houseTypes: "0,1",
          })
          .then((res) => {
            this.houseList = res.data;
          });
      } else {
        this.$api.api
          .findMyAgent({
            orgType: localStorage.getItem("orgType"),
            houseTypes: "0,1",
          })
          .then((res) => {
            this.houseList = res.data;
          });
      }
    },
    getOperaList() {
      if (this.orgType == 1) {
        this.$api.http
          .getAllOperationsStaffByAgent({
            agentId: localStorage.getItem("agentId"),
          })
          .then((res) => {
            this.operaList = res.data;
          });
      } else {
        this.$api.http.getAllOperationsStaff().then((res) => {
          this.operaList = res.data;
        });
      }
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.houseSalesAnalysis();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.houseSalesAnalysis();
    },
  },
};
</script>

<style lang="scss" scoped >
.box-center {
  width: 100%;
  padding: 15px;
  min-width: 1000px;
  padding-bottom: 100px;
}
.cen-tab {
  width: 100%;
  padding: 15px;
  background: #ffffff;
  margin-top: 15px;
}
.tophove {
  color: #ffffff;
  background: #2671e2;
}
.app-titel1 {
  width: 100%;
  height: 70px;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  display: flex;
  align-items: center;
  .titel-text {
    height: 100%;
    font-size: 18px;
    // font-weight: 600;
    color: #32363d;
    line-height: 70px;
    margin-left: 30px;
  }
  .toptimeqhuan {
    width: 190px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-left: 20px;
    cursor: pointer;
  }
  .toptimeqhuan div {
    flex: 1;
    text-align: center;
    line-height: 32px;
    font-size: 16px;
  }
}

.app-top {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding-top: 15px;
  // padding-bottom: 15px;
  padding-bottom: 6px;
  .app-titel {
    width: 100%;
    display: flex;
    align-items: center;
    .titel-text {
      height: 100%;
      font-size: 16px;
      // font-weight: 600;
      color: #32363d;
      text-indent: 30px;
    }
    .toptimeqhuan {
      width: 190px;
      height: 32px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e0e0e0;
      display: flex;
      align-items: center;
      overflow: hidden;
      margin-left: 20px;
      cursor: pointer;
    }
    .toptimeqhuan div {
      flex: 1;
      text-align: center;
      line-height: 32px;
      font-size: 14px;
    }
  }
}

.app-box-san {
  width: 100%;
  // height: 400px;
  display: flex;
  margin-top: 15px;
  .zuo {
    flex: 1;
    height: 100%;
    margin-right: 15px;
    background: #ffffff;
    border-radius: 4px;
    .title {
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-content: center;
      .text1 {
        flex: 2;
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
      }
      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
  .you {
    height: 100%;
    flex: 1;
    background: #ffffff;
    border-radius: 4px;
    .title {
      width: 100%;
      height: 55px;
      border-bottom: 1px solid #e0e0e0;
      display: flex;
      align-content: center;
      .text1 {
        flex: 2;
        line-height: 55px;
        text-indent: 20px;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
      }
      .text2 {
        flex: 1;
        height: 55px;
        display: flex;
        align-items: center;
      }
    }
  }
}

.hejisan {
  width: 92%;
  margin: 0 auto;
  display: flex;
  padding-top: 10px;
  padding-bottom: 10px;
  .text1-1 {
    color: #666666;
  }
  .text1-2 {
    color: #333333;
    margin-top: 10px;
  }
}

// 进度条
.jinbox {
  width: 100%;
  height: 18px;
  line-height: 18px;
  display: flex;
  font-size: 16px;
  color: #2c3542;
  margin-top: 10px;
  .jinboxtit {
    width: 14%;
    height: 18px;
    padding-right: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .jinbox-box {
    width: 75%;
    height: 100%;
    border-radius: 8px;
    background: #f2f2f2;
  }
  .boxbaifenbi {
    height: 100%;
    background: #60d7a0;
    border-radius: 8px;
  }
  .boxbaifenbi2 {
    height: 100%;
    background: #5b8ff9;
  }
  .jinboxbott {
    width: 16%;
    text-indent: 50px;
  }
}
.div-lab {
  display: flex;
  margin: 5px;
}
.div-inp {
  width: 200px;
}
.label {
  font-size: 14px;
  font-weight: 400;
  color: #32363d;
  line-height: 32px;
  margin-left: 15px;
  min-width: 40px;
}
.noData {
  width: 100%;
  // height: 60vh;
  height: 500px;
  background: #fff;
  text-align: center;
  margin-top: 20px;
  overflow: hidden;
}
.imgboxc {
  margin-top: 100px;
  color: #999999;
}
// 进度条
.jinbox {
  width: 100%;
  height: 18px;
  line-height: 18px;
  display: flex;
  font-size: 16px;
  color: #2c3542;
  margin-top: 10px;
  .jinboxtit {
    width: 14%;
    height: 18px;
    padding-right: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .jinbox-box {
    width: 75%;
    height: 100%;
    border-radius: 8px;
    background: #f2f2f2;
  }
  .boxbaifenbi {
    height: 100%;
    background: #60d7a0;
    border-radius: 8px;
  }
  .boxbaifenbi2 {
    height: 100%;
    background: #5b8ff9;
  }
  .jinboxbott {
    width: 16%;
    text-indent: 16px;
  }
}
.colostyle {
  color: #1e90ff;
}
.houseSize {
      text-align: center;
    font-weight: bold;
    font-size: 20px;
}
// /deep/ .el-tooltip{
//   width: 140px;
// }
</style>
