<template>
  <!-- 代理人信息统计 -->
  <div class="content-app">
    <div class="up">
      <SecurityCheckHeader
        title="代理人信息统计"
        @change="change"
        @search="search"
        :withExportButton="false"
      />
    </div>
    <div class="comprehensive">
      <a-row :gutter="16">
        <a-col :span="12">
          <div class="chart">
            <div class="header">
              <p>申报件数</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :texter="dataall" @echar="echar" />
              </div>
              <div class="chart_right pt90">
                <div
                  class="child"
                  v-for="(item, index) in dataall.data"
                  :key="index"
                >
                  <div class="top">
                    <div class="log" :style="{ background: item.color }"></div>
                    <div class="name" @click="echar">{{ item.name }}</div>
                  </div>
                  <div class="boot">
                    <div class="child" @click="echar">
                      件数：{{ item.value }}
                    </div>
                    <div class="child">占比：{{ item.proportion }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="chart">
            <div class="header">
              <p>普通</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :texter="dataLowpt" @echar="echar" />
              </div>
              <div class="chart_right">
                <div class="analysis">
                  <div class="analysis_cont" @click="echar">
                    <p>总件数</p>
                    <span>{{ dataLowpt.num }}</span>
                  </div>
                  <div class="analysis_cont" @click="echar">
                    <p>开包数</p>
                    <span>{{ dataLowpt.kxsNum }}</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包率</p>
                    <span>{{ dataLowpt.proportion }}</span>
                  </div>
                </div>
                <div
                  class="childcop"
                  v-for="(item, index) in dataLowpt.data"
                  :key="index"
                >
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">{{ item.name }}</div>
                  </div>
                  <div class="boot">
                    <div class="child" @click="echar">
                      件数：{{ item.value }}
                    </div>
                    <div class="child">占比：{{ item.prot }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="chart">
            <div class="header">
              <p>低风险</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :texter="dataLow" @echar="echar" />
              </div>
              <div class="chart_right">
                <div class="analysis">
                  <div class="analysis_cont" @click="echar">
                    <p>总件数</p>
                    <span>{{ dataLow.num }}</span>
                  </div>
                  <div class="analysis_cont" @click="echar">
                    <p>开包数</p>
                    <span>{{ dataLow.kxsNum }}</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包率</p>
                    <span>{{ dataLow.proportion }}</span>
                  </div>
                </div>
                <div
                  class="childcop"
                  v-for="(item, index) in dataLow.data"
                  :key="index"
                >
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">{{ item.name }}</div>
                  </div>
                  <div class="boot">
                    <div class="child" @click="echar">
                      件数：{{ item.value }}
                    </div>
                    <div class="child">占比：{{ item.prot }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
        <a-col :span="12">
          <div class="chart">
            <div class="header">
              <p>高风险</p>
            </div>
            <div class="chart_cont">
              <div class="chart_left">
                <GraphicEchart :texter="dataLowgf" @echar="echar" />
              </div>
              <div class="chart_right">
                <div class="analysis">
                  <div class="analysis_cont" @click="echar">
                    <p>总件数</p>
                    <span>{{ dataLowgf.num }}</span>
                  </div>
                  <div class="analysis_cont" @click="echar">
                    <p>开包数</p>
                    <span>{{ dataLowgf.kxsNum }}</span>
                  </div>
                  <div class="analysis_cont">
                    <p>开包率</p>
                    <span>{{ dataLowgf.proportion }}</span>
                  </div>
                </div>
                <div
                  class="childcop"
                  v-for="(item, index) in dataLowgf.data"
                  :key="index"
                >
                  <div class="top">
                    <div class="log"></div>
                    <div class="name">{{ item.name }}</div>
                  </div>
                  <div class="boot">
                    <div class="child" @click="echar">
                      件数：{{ item.value }}
                    </div>
                    <div class="child">占比：{{ item.prot }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>
<script>
import GraphicEchart from "../components/graphicHome.vue";
import SecurityCheckHeader from "../components/securityCheckHeader.vue";
import { comprehensiveTable } from "@/api/statistics/statistics.js";
export default {
  data() {
    return {
      queryData: {
        startTime: "",
        endTime: "",
        agentLevel: "",
        agentCode: "",
      },
      dataall: {
        id: 20,
        name: "总件数",
        cont: "500",
        data: [
          { value: 335, name: "1" },
          { value: 310, name: "2" },
          { value: 310, name: "3" },
        ],
        top: "38%",
        textStyle: {
          fontSize: "20",
          color: "#ffffff",
        },
        subtextStyle: {
          fontSize: "36",
          fontWeight: "800",
          color: "#ffffff",
        },
        color: ["#66ACD4", "#F1B172", "#E86E5A"],
      },
      dataLowpt: {
        id: 21,
        name: "开包数",
        cont: "500",
        data: [
          { value: 335, name: "1" },
          { value: 310, name: "2" },
          { value: 310, name: "3" },
        ],
        top: "38%",
        textStyle: {
          fontSize: "20",
          color: "#ffffff",
        },
        subtextStyle: {
          fontSize: "36",
          fontWeight: "800",
          color: "#ffffff",
        },
        color: ["#6161BD", "#FAD153", "#DC5594"],
      },
      dataLow: {
        id: 22,
        name: "开包数",
        cont: "500",
        data: [
          { value: 335, name: "1" },
          { value: 310, name: "2" },
          { value: 310, name: "3" },
        ],
        top: "38%",
        textStyle: {
          fontSize: "20",
          color: "#ffffff",
        },
        subtextStyle: {
          fontSize: "36",
          fontWeight: "800",
          color: "#ffffff",
        },
        color: ["#6161BD", "#FAD153", "#DC5594"],
      },
      dataLowgf: {
        id: 23,
        name: "开包数",
        cont: "500",
        data: [
          { value: 335, name: "1" },
          { value: 310, name: "2" },
          { value: 310, name: "3" },
        ],
        top: "38%",
        textStyle: {
          fontSize: "20",
          color: "#ffffff",
        },
        subtextStyle: {
          fontSize: "36",
          fontWeight: "800",
          color: "#ffffff",
        },
        color: ["#6161BD", "#FAD153", "#DC5594"],
      },
    };
  },
  // created() {
  //   this.getData();
  // },
  mounted() {
    this.getData();
  },
  methods: {
    search(data) {
      this.queryData = {
        startTime: data[0][0],
        endTime: data[0][1],
        agentLevel: data[1],
        agentCode: data[2],
      };
      this.getData();
    },
    //点击跳转
    echar(data) {
      if (data) {
        this.queryData.riskRating = data.namefa;
        this.queryData.openResult = data.namech;
      }
      this.$router.push({
        path: "/waybillTable",
        query: this.queryData,
      });
    },
    change() {
      this.$router.push({
        path: "/agentTable",
        query: this.queryData,
      });
    },
    async getData() {
      try {
        if (Object.keys(this.$route.query).length !== 0) {
          const { startTime, endTime, agentLevel, agentCode } =
            this.$route.query;
          this.queryData.startTime = startTime;
          this.queryData.endTime = endTime;
          this.queryData.agentLevel = agentLevel;
          this.queryData.agentCode = agentCode;
        }
        const result = await comprehensiveTable(this.queryData);
        if (result.data.length == 0) {
          result.data = [
            {
              no: 1,
              risk: "普通",
              num: 0,
              kxsNum: 0,
              yjNum: 0,
              jyNum: 0,
              fxNum: 0,
            },
            {
              no: 2,
              risk: "高风险",
              num: 0,
              kxsNum: 0,
              yjNum: 0,
              jyNum: 0,
              fxNum: 0,
            },
            {
              no: 3,
              risk: "低风险",
              num: 0,
              kxsNum: 0,
              yjNum: 0,
              jyNum: 0,
              fxNum: 0,
            },
          ];
        }
        let count = 0;
        let counts = 0;
        let arr = [];
        //获取总件数：
        result.data.forEach((item) => {
          count += item.num;
          let obj = { value: item.num, name: item.risk };
          arr.push(obj);
        });
        this.dataall.cont = count;
        this.dataall.data = arr;
        this.dataall.color = [];
        this.dataall.data.forEach((element) => {
          if (element.name == "高风险") {
            element.color = "#E86E5A";
          } else if (element.name == "严控") {
            element.color = "#9B73B4";
          } else if (element.name == "优先") {
            element.color = "#85C997";
          } else if (element.name == "低风险") {
            element.color = "#F1B172";
          } else if (element.name == "普通") {
            element.color = "#66ACD4";
          }
          counts += element.value;
          this.dataall.color.push(element.color);
        });
        this.dataall.data.forEach((element) => {
          element.proportion = element.value / counts;
          element.proportion = Math.floor(element.proportion.toFixed(2) * 100)
            ? Math.floor(element.proportion.toFixed(2) * 100) + "%"
            : "0%";
        });
        result.data.forEach((res) => {
          if (res.risk == "低风险") {
            let arr = res.yjNum + res.jyNum + res.fxNum;
            if (res.yjNum) {
              this.dataLow.data = [
                {
                  name: "移交",
                  value: res.yjNum,
                  prot:
                    arr == 0
                      ? "0%"
                      : Math.floor((res.yjNum / arr.toFixed(2)) * 100) + "%",
                },
                {
                  name: "拒运",
                  value: res.jyNum,
                  prot:
                    arr == 0
                      ? "0%"
                      : Math.floor((res.jyNum / arr.toFixed(2)) * 100) + "%",
                },
                {
                  name: "放行",
                  value: res.fxNum,
                  prot:
                    arr == 0
                      ? "0%"
                      : Math.floor((res.fxNum / arr.toFixed(2)) * 100) + "%",
                },
              ];
            } else {
              this.dataLow.data = [
                {
                  name: "移交",
                  value: 0,
                  prot:
                    arr == 0
                      ? "0%"
                      : Math.floor((res.yjNum / arr.toFixed(2)) * 100) + "%",
                },
                {
                  name: "拒运",
                  value: 0,
                  prot:
                    arr == 0
                      ? "0%"
                      : Math.floor((res.jyNum / arr.toFixed(2)) * 100) + "%",
                },
                {
                  name: "放行",
                  value: 0,
                  prot:
                    arr == 0
                      ? "0%"
                      : Math.floor((res.fxNum / arr.toFixed(2)) * 100) + "%",
                },
              ];
            }
            this.dataLow.color = ["#FAD153", "#DC5594", "#6161BD"];
            this.dataLow.num = res.num;
            this.dataLow.kxsNum = res.kxsNum;
            this.dataLow.proportion = Math.floor(
              (res.kxsNum / res.num).toFixed(2) * 100
            )
              ? Math.floor((res.kxsNum / res.num).toFixed(2) * 100) + "%"
              : " 0%";
            this.dataLow.cont = arr;
          } else if (res.risk == "优先") {
            let arr = res.yjNum + res.jyNum + res.fxNum;
            if (res.risk) {
              this.dataLowcp.data = [
                {
                  name: "移交",
                  value: res.yjNum,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.yjNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "拒运",
                  value: res.jyNum,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.jyNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "放行",
                  value: res.fxNum,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.fxNum / arr).toFixed(2) * 100) + "%",
                },
              ];
            } else {
              this.dataLowcp.data = [
                {
                  name: "移交",
                  value: 0,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.yjNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "拒运",
                  value: 0,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.jyNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "放行",
                  value: 0,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.fxNum / arr).toFixed(2) * 100) + "%",
                },
              ];
            }
            this.dataLowcp.color = ["#FAD153", "#DC5594", "#6161BD"];
            this.dataLowcp.num = res.num;
            this.dataLowcp.kxsNum = res.kxsNum;
            this.dataLowcp.proportion = Math.floor(
              (res.kxsNum / res.num).toFixed(2) * 100
            )
              ? Math.floor((res.kxsNum / res.num).toFixed(2) * 100) + "%"
              : "o%";
            this.dataLowcp.cont = arr;
          } else if (res.risk == "普通") {
            let arr = res.yjNum + res.jyNum + res.fxNum;
            if (res.risk) {
              this.dataLowpt.data = [
                {
                  name: "移交",
                  value: res.yjNum,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.yjNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "拒运",
                  value: res.jyNum,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.jyNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "放行",
                  value: res.fxNum,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.fxNum / arr).toFixed(2) * 100) + "%",
                },
              ];
            } else {
              this.dataLowpt.data = [
                {
                  name: "移交",
                  value: 0,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.yjNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "拒运",
                  value: 0,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.jyNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "放行",
                  value: 0,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.fxNum / arr).toFixed(2) * 100) + "%",
                },
              ];
            }
            this.dataLowpt.color = ["#FAD153", "#DC5594", "#6161BD"];
            this.dataLowpt.num = res.num;
            this.dataLowpt.kxsNum = res.kxsNum;
            this.dataLowpt.proportion = Math.floor(
              (res.kxsNum / res.num).toFixed(2) * 100
            )
              ? Math.floor((res.kxsNum / res.num).toFixed(2) * 100) + "%"
              : "0%";
            this.dataLowpt.cont = arr;
          } else if (res.risk == "严控") {
            let arr = res.yjNum + res.jyNum + res.fxNum;
            if (res.risk) {
              this.dataLowyk.data = [
                {
                  name: "移交",
                  value: res.yjNum,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.yjNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "拒运",
                  value: res.jyNum,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.jyNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "放行",
                  value: res.fxNum,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.fxNum / arr).toFixed(2) * 100) + "%",
                },
              ];
            } else {
              this.dataLowyk.data = [
                {
                  name: "移交",
                  value: 0,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.yjNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "拒运",
                  value: 0,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.jyNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "放行",
                  value: 0,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.fxNum / arr).toFixed(2) * 100) + "%",
                },
              ];
            }
            this.dataLowyk.color = ["#FAD153", "#DC5594", "#6161BD"];
            this.dataLowyk.num = res.num;
            this.dataLowyk.kxsNum = res.kxsNum;
            this.dataLowyk.proportion = Math.floor(
              (res.kxsNum / res.num).toFixed(2) * 100
            )
              ? Math.floor((res.kxsNum / res.num).toFixed(2) * 100) + "%"
              : "0%";
            this.dataLowyk.cont = arr;
          } else if (res.risk == "高风险") {
            let arr = res.yjNum + res.jyNum + res.fxNum;
            if (res.risk) {
              this.dataLowgf.data = [
                {
                  name: "移交",
                  value: res.yjNum,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.yjNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "拒运",
                  value: res.jyNum,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.jyNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "放行",
                  value: res.fxNum,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.fxNum / arr).toFixed(2) * 100) + "%",
                },
              ];
            } else {
              this.dataLowgf.data = [
                {
                  name: "移交",
                  value: 0,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.yjNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "拒运",
                  value: 0,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.jyNum / arr).toFixed(2) * 100) + "%",
                },
                {
                  name: "放行",
                  value: 0,
                  prot:
                    arr == 0 || arr
                      ? "0%"
                      : Math.floor((res.fxNum / arr).toFixed(2) * 100) + "%",
                },
              ];
            }
            this.dataLowgf.color = ["#FAD153", "#DC5594", "#6161BD"];
            this.dataLowgf.num = res.num;
            this.dataLowgf.kxsNum = res.kxsNum;
            this.dataLowgf.proportion = Math.floor(
              (res.kxsNum / res.num).toFixed(2) * 100
            )
              ? Math.floor((res.kxsNum / res.num).toFixed(2) * 100) + "%"
              : "0%";
            this.dataLowgf.cont = arr;
          }
        });
        this.$refs.chart.init();
      } catch (error) {
        console.log(error);
      }
    },
  },
  components: {
    GraphicEchart,
    SecurityCheckHeader,
  },
};
</script>
<style lang="scss" scoped>
.header {
  > p {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #101116;
    margin: 0 0 24px 0;
  }
}
.comprehensive {
  width: 100%;
  height: 100%;
  .chart {
    width: 100%;
    height: 39.5vh;
    background: #ffffff;
    box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding: 24px;
  }
}
.chart_cont {
  width: 100%;
  height: 90%;
  display: flex;
  justify-content: space-between;
  > .chart_left {
    width: 50%;
    height: 100%;
  }
  > .chart_right {
    width: 45%;
    height: 100%;
    padding-left: 1%;
    // padding-right: 20%;
    > .analysis {
      width: 100%;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      margin-top: 20px;
      > .analysis_cont {
        // width: 30%;
        height: 100%;
        > p {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #101116;
          margin: 0;
        }
        > span {
          font-size: 28px;
          font-family: DIN;
          font-weight: bold;
          color: #101116;
        }
      }
    }
    > .child {
      width: 68%;
      > .top {
        width: 100%;
        height: 37px;
        display: flex;
        align-items: center;
        > .log {
          width: 14px;
          height: 14px;
          background: #e86e5a;
          border-radius: 2px;
        }
        > .name {
          margin-left: 6px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #101116;
        }
      }
      > .boot {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .child {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #747784;
        }
      }
    }
    .child:nth-child(1) {
      .log {
        background: #e86e5a;
      }
    }
    .child:nth-child(2) {
      .log {
        background: #f1b172;
      }
    }
    .child:nth-child(3) {
      .log {
        background: #66acd4;
      }
    }
    > .childcop {
      width: 68%;
      > .top {
        width: 100%;
        height: 37px;
        display: flex;
        align-items: center;
        > .log {
          width: 14px;
          height: 14px;
          border-radius: 2px;
        }
        > .name {
          margin-left: 6px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #101116;
        }
      }
      > .boot {
        width: 100%;
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        > .child {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #747784;
        }
      }
    }
    .childcop:nth-child(2) {
      .log {
        background: #fad153;
      }
    }
    .childcop:nth-child(3) {
      .log {
        background: #dc5594;
      }
    }
    .childcop:nth-child(4) {
      .log {
        background: #6161bd;
      }
    }
  }
}
::v-deep .ant-col {
  margin-bottom: 16px;
}
</style>