<template>
  <div class="courtMain">
    <div class="left">
      <div class="leftOne">
        <div class="title">智慧法庭</div>
        <div class="courtHouse">
          <div class="courtData" v-for="(item, index) in courtList" :key="index">
            <div style="color: #fff; font-size: 0.55rem">{{ item.name }}</div>
            <div
              :class="houseList[index]"
              style="width: 100%; height: 100%; color: #fff; font-size: 0.6rem"
            >
              {{ item.count }}
            </div>
          </div>
        </div>
      </div>
      <div class="leftTwo">
        <div class="caseTitle">案件统计</div>
        <div class="select">
          <el-select
            v-model="departmentValue"
            :popper-append-to-body="false"
            clearable
            placeholder="请选择"
            style="margin-left: 5%"
          >
            <el-option
              v-for="(item, index) in departmentOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="userValue"
            :popper-append-to-body="false"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in userOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div id="caseEcharts"></div>
      </div>
      <div class="leftThree">
        <div class="caseTitle" style="width: 32%; padding-left: 6%">案件类型统计</div>
        <div class="caseType">
          <div id="caseTypeLeft"></div>
          <div id="caseTypeRight"></div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="title" style="height: 5%">案件列表</div>
      <div class="caseList">
        <div class="selectList">
          <div class="selectChange" v-for="(item, index) in selectList" :key="index">
            <el-select
              v-model="item.name"
              :popper-append-to-body="false"
              clearable
              :placeholder="item.name"
              style="margin-left: 5%"
            >
              <el-option
                v-for="(item, index) in item.list"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="caseDetail">
          <div class="caseDetailList">
            <div class="detail" v-for="(item, index) in caseDetailList" :key="index">
              <div class="rowDetail">
                <span>{{ item.id }}&nbsp;&nbsp;案件案号:</span>
                <span>{{ item.caseCode }}</span>
              </div>
              <div style="padding-left: 5%" class="rowDetail">
                <span>案件名称:</span>
                <span
                  style="
                    width: 80%;
                    display: flex;
                    justify-content: flex-end;
                    text-align: left;
                  "
                  >{{ item.caseName }}</span
                >
              </div>
              <div style="padding-left: 5%" class="rowDetail">
                <span>开庭时间:</span>
                <span>{{ item.time }}</span>
              </div>
              <div style="padding-left: 5%" class="rowDetail">
                <span>开庭法庭:</span>
                <span>{{ item.court }}</span>
              </div>
              <div style="padding-left: 5%" class="rowDetail">
                <span>案件案由:</span>
                <span
                  style="
                    width: 80%;
                    display: flex;
                    justify-content: flex-end;
                    text-align: left;
                  "
                  >{{ item.brief }}</span
                >
              </div>
              <div style="padding-left: 5%" class="rowDetail">
                <span>当事人:</span>
                <span>{{ item.user }}</span>
              </div>
              <div style="padding-left: 5%" class="rowDetail">
                <span>书记员:</span>
                <span>{{ item.clerk }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "court",
  data() {
    return {
      courtList: [
        {
          name: "空闲中",
          count: "7",
        },
        {
          name: "已开庭",
          count: "15",
        },
        {
          name: "已预约",
          count: "17",
        },
        {
          name: "法官办公室",
          count: "86",
        },
      ], // 智慧法庭小房子
      houseList: ["blueHouse", "redHouse", "yellowHouse", "orangeHouse"],
      userValue: "", //人员选择
      userOptions: [
        {
          label: "人员",
          value: "1",
        },
        {
          label: "人员2",
          value: "2",
        },
      ], //人员子项
      departmentValue: "", //部门选择
      departmentOptions: [
        {
          label: "部门",
          value: "1",
        },
        {
          label: "部门2",
          value: "2",
        },
      ], //部门子项
      selectList: [
        {
          name: "立案日期",
          list: [
            {
              label: "立案日期",
              value: "1",
            },
            {
              label: "立案日期2",
              value: "2",
            },
          ],
        },
        {
          name: "法官",
          list: [
            {
              label: "法官",
              value: "1",
            },
            {
              label: "法官2",
              value: "2",
            },
          ],
        },
        {
          name: "案件类型",
          list: [
            {
              label: "案件类型",
              value: "1",
            },
            {
              label: "案件类型2",
              value: "2",
            },
          ],
        },
        {
          name: "收案日期",
          list: [
            {
              label: "收案日期",
              value: "1",
            },
            {
              label: "收案日期2",
              value: "2",
            },
          ],
        },
        {
          name: "经办法院代码",
          list: [
            {
              label: "经办法院代码",
              value: "1",
            },
            {
              label: "经办法院代码2",
              value: "2",
            },
          ],
        },
        {
          name: "结案日期",
          list: [
            {
              label: "结案日期",
              value: "1",
            },
            {
              label: "结案日期2",
              value: "2",
            },
          ],
        },
        {
          name: "结案方式",
          list: [
            {
              label: "结案方式",
              value: "1",
            },
            {
              label: "结案方式2",
              value: "2",
            },
          ],
        },
        {
          name: "案件状态代码",
          list: [
            {
              label: "案件状态代码",
              value: "1",
            },
            {
              label: "案件状态代码2",
              value: "2",
            },
          ],
        },
      ], //案件列表选择器
      caseDetailList: [
        {
          id: "1",
          caseCode: "(2022)苏0192民初14272号",
          caseName: "崔怀宁与高保加买卖合同纠纷",
          time: "2023-01-16 09:00--09:30",
          court: "新楼第十五法庭",
          brief: "买卖合同纠纷",
          user: "原告：崔怀宁;被告：高保加",
          clerk: "甫明",
        },
        {
          id: "2",
          caseCode: "(2022)苏0192民初14272号",
          caseName:
            "崔怀宁与高保加买卖合同纠纷;崔怀宁与高保加买卖合同纠纷;崔怀宁与高保加买卖合同纠纷;",
          time: "2023-01-16 09:00--09:30",
          court: "新楼第十五法庭",
          brief: "买卖合同纠纷",
          user: "原告：崔怀宁;被告：高保加",
          clerk: "甫明",
        },
        {
          id: "3",
          caseCode: "(2022)苏0192民初14272号",
          caseName: "崔怀宁与高保加买卖合同纠纷",
          time: "2023-01-16 09:00--09:30",
          court: "新楼第十五法庭",
          brief: "买卖合同纠纷",
          user: "原告：崔怀宁;被告：高保加",
          clerk: "甫明",
        },
      ],
    };
  },
  mounted() {
    let that = this
    // setTimeout(() => {
      that.caseEcharts();
      that.caseTypeLeft();
      that.caseTypeRight();
    // }, 1000);
  },
  methods: {
    caseEcharts() {
      var myChart = this.$echarts.init(document.getElementById("caseEcharts"));
      let option = {
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "item",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          icon: "rect",
          bottom: 0,
          itemWidth: 15,
          data: ["收案", "结案", "存案"],
          textStyle: {
            color: "#fff",
            fontSize: "0.5rem",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          top: "25%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["一季度", "二季度", "三季度", "四季度"],
            //x轴坐标点
            axisTick: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            //x轴坐标线样式
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              color: "#fff",
              fontSize: "0.5rem",
            },
            //x轴线
            splitLine: {
              show: false,
              lineStyle: {
                type: [5, 10],
                dashOffset: 10,
                color: "#1282C8",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "次",
            //x轴坐标点
            axisTick: {
              show: false,
              lineStyle: {
                color: "#fff",
              },
            },
            //x轴坐标线样式
            axisLine: {
              show: true,
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              color: "#fff",
              fontSize: "0.5rem",
            },
            //x轴线
            splitLine: {
              show: true,
              lineStyle: {
                type: "",
                dashOffset: 10,
                color: "rgb(108,108,109)",
              },
            },
          },
        ],
        series: [
          {
            name: "收案",
            type: "bar",
            // data: [22, 30, 50, 10],
            data: [22, 30, 0, 0],
            itemStyle: {
              //定义柱子的样式
              // color:params=>color[params.dataIndex],//定义每根柱子的不同颜色(不渐变)
              //不同柱子颜色渐变
              color: (params) => ({
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(84,112,198,1)", // 柱子最高度% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(84,112,198,0)", // X轴处的颜色
                  },
                ],
                global: false, // 缺省为 false
              }),
            },
            label: {
              normal: {
                show: true,
                fontSize: "0.4rem",
                color: "#fff",
                position: "top",
              },
            },
          },
          {
            name: "结案",
            type: "bar",
            // data: [20, 34, 20, 30],
            data: [20, 34, 0, 0],
            itemStyle: {
              //定义柱子的样式
              // color:params=>color[params.dataIndex],//定义每根柱子的不同颜色(不渐变)
              //不同柱子颜色渐变
              color: (params) => ({
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(145,204,117,1)", // 柱子最高度% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(145,204,117,0)", // X轴处的颜色
                  },
                ],
                global: false, // 缺省为 false
              }),
            },
            label: {
              normal: {
                show: true,
                fontSize: "0.4rem",
                color: "#fff",
                position: "top",
              },
            },
          },
          {
            name: "存案",
            type: "bar",
            // data: [12, 40, 20, 10],
            data: [12, 40, 0, 0],
            itemStyle: {
              //定义柱子的样式
              // color:params=>color[params.dataIndex],//定义每根柱子的不同颜色(不渐变)
              //不同柱子颜色渐变
              color: (params) => ({
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(250,200,88,1)", // 柱子最高度% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(250,200,88,0)", // X轴处的颜色
                  },
                ],
                global: false, // 缺省为 false
              }),
            },
            label: {
              normal: {
                show: true,
                fontSize: "0.4rem",
                color: "#fff",
                position: "top",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    caseTypeLeft() {
      var myChart = this.$echarts.init(document.getElementById("caseTypeLeft"));
      var data = [
        { value: "25", name: "民事案件" },
        { value: "25", name: "行政案件" },
        { value: "25", name: "刑事案件" },
        { value: "25", name: "其他案件" },
      ];
      var color = [
        "rgb(185,8,25)",
        "rgb(160,87,6)",
        "rgb(16,134,165)",
        "rgb(178,178,178)",
      ];
      let option = {
        color: color,
        title: {
          left: "43%",
          top: "40%",
          textAlign: "center",
          text: "当月统计",
          textStyle: {
            fontSize: "0.6rem",
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.5)",
          color: "#ffffff",
          formatter: function (params) {
            return (
              // params.name +
              // "<br/>" +
              params.marker +
              '<span style="color:' +
              params.color +
              '">' +
              params.data["name"] +
              "\n" +
              params.data["value"] +
              "%" +
              "</span>"
            );
          },
        },
        legend: {
          orient: "horizontal",
          icon: "rect",
          bottom: "0",
          x: "center",
          itemWidth: 30,
          itemGap: 20,
          textStyle: {
            rich: {
              a: {
                color: "#fff",
                fontSize: "0.4rem",
                padding: [0, 10, 0, 0],
              },
              b: {
                color: "rgba(255,255,255,0)",
                fontSize: "0.1rem",
                padding: [0, 10, 0, 10],
              },
            },
          },
          formatter: function (name) {
            var target, unit;
            for (var i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
                unit = data[i].unit;
              }
            }
            return `{a| ${name}}{b|${target}}`;
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["45%", "60%"],
            center: ["45%", "45%"],
            avoidLabelOverlap: true,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{d}",
                textStyle: {
                  align: "center",
                  baseline: "middle",
                  fontSize: "0.5rem",
                  fontWeight: "100",
                  color: "auto",
                },
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 10,
            },

            data: data,
          },
        ],
      };
      myChart.setOption(option);
    },
    caseTypeRight() {
      var myChart = this.$echarts.init(document.getElementById("caseTypeRight"));
      var data = [
        { value: "25", name: "民事案件" },
        { value: "25", name: "行政案件" },
        { value: "25", name: "刑事案件" },
        { value: "25", name: "其他案件" },
      ];
      var color = [
        "rgb(185,8,25)",
        "rgb(160,87,6)",
        "rgb(16,134,165)",
        "rgb(178,178,178)",
      ];
      let option = {
        color: color,
        title: {
          left: "43%",
          top: "40%",
          textAlign: "center",
          text: "第一季度统计",
          textStyle: {
            fontSize: "0.6rem",
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.5)",
          color: "#ffffff",
          formatter: function (params) {
            return (
              // params.name +
              // "<br/>" +
              params.marker +
              '<span style="color:' +
              params.color +
              '">' +
              params.data["name"] +
              "\n" +
              params.data["value"] +
              "%" +
              "</span>"
            );
          },
        },
        legend: {
          orient: "horizontal",
          icon: "rect",
          bottom: "0",
          x: "center",
          itemWidth: 30,
          itemGap: 20,
          textStyle: {
            rich: {
              a: {
                color: "#fff",
                fontSize: "0.4rem",
                padding: [0, 10, 0, 0],
              },
              b: {
                color: "rgba(255,255,255,0)",
                fontSize: "0.1rem",
                padding: [0, 10, 0, 10],
              },
            },
          },
          formatter: function (name) {
            var target, unit;
            for (var i = 0, l = data.length; i < l; i++) {
              if (data[i].name == name) {
                target = data[i].value;
                unit = data[i].unit;
              }
            }
            return `{a| ${name}}{b|${target}}`;
          },
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["45%", "60%"],
            center: ["45%", "45%"],
            avoidLabelOverlap: true,
            label: {
              normal: {
                show: true,
                position: "outside",
                formatter: "{d}",
                textStyle: {
                  align: "center",
                  baseline: "middle",
                  fontSize: "0.5rem",
                  fontWeight: "100",
                  color: "auto",
                },
              },
            },
            labelLine: {
              show: true,
              length: 20,
              length2: 10,
            },

            data: data,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  watch: {},
  components: {},
};
</script>

<style lang="less" scoped>
@fontsize: 0.6rem;
.courtMain {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 0.3% 0 0.3%;
  box-sizing: border-box;
  .left {
    width: 24.7%;
    height: 95%;
    padding: 0.5% 0.3% 1% 0.3%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background: url(../assets/images/leftKuang.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation-name: leftAnimation;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    .leftOne {
      width: 100%;
      height: 20%;
      .courtHouse {
        height: calc(100% - 20%);
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        .courtData {
          display: flex;
          flex-direction: column;
          align-items: center;
          height: 61%;
          width: 14%;
          .blueHouse {
            background: url(../assets/images/blueHouse.png) no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10%;
          }
          .redHouse {
            background: url(../assets/images/redHouse.png) no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10%;
          }
          .yellowHouse {
            background: url(../assets/images/yellowHouse.png) no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10%;
          }
          .orangeHouse {
            background: url(../assets/images/orangeHouse.png) no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 10%;
          }
        }
      }
    }
    .leftTwo {
      width: 100%;
      height: 35%;
      position: relative;
      .select {
        position: absolute;
        right: 5%;
        width: 45%;
        height: 10%;
        display: flex;
        z-index: 999;
        /deep/ .el-select {
          width: 100%;
          height: 100%;
          border-radius: 15px;
        }
        /deep/ .el-input__inner {
          width: 100%;
          height: 100%;
          background: transparent;
          border: 1px solid rgb(1, 176, 202);
          border-radius: 15px;
          color: #fff;
        }
        /deep/ .el-select-dropdown {
          background: transparent;
          border: 1px solid rgb(1, 176, 202);
          border-radius: 5px;
          left: -30px !important;
        }
        /deep/ .el-select-dropdown__item {
          color: turquoise;
        }
        /deep/ .el-select .el-input .el-select__caret {
          color: rgb(1, 176, 202);
          font-size: 0.3rem;
          font-weight: 500;
        }
        /deep/ .el-input__suffix {
          display: flex;
          align-items: center;
        }
      }
      #caseEcharts {
        width: 100%;
        height: calc(100% - 16%);
      }
    }
    .leftThree {
      width: 100%;
      height: 40%;
      .caseType {
        height: calc(100% - 8%);
        width: 100%;
        display: flex;
        #caseTypeLeft {
          width: 50%;
          height: 100%;
        }
        #caseTypeRight {
          width: 50%;
          height: 100%;
        }
      }
    }
  }
  @keyframes leftAnimation {
    0% {
      position: relative;
      left: 38%;
      transform: scale(0);
    }
    100% {
      position: relative;
      left: 0%;
      transform: scale(1);
    }
  }
  .right {
    width: 24.7%;
    height: 95%;
    padding: 0.5% 0.3% 1% 0.3%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    background: url(../assets/images/leftKuang.png) no-repeat;
    background-size: 100% 100%;
    -webkit-animation-name: rightAnimation;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 1s;
    .caseList {
      width: 100%;
      height: calc(100% - 5%);
      display: flex;
      flex-wrap: wrap;
      .selectList {
        width: 100%;
        height: 20%;
        position: relative;
        display: flex;
        flex-wrap: wrap;
        .selectChange {
          width: 25%;
          height: 20%;
          margin-top: 3%;
          margin-left: 5%;
          /deep/ .el-select {
            width: 100%;
            height: 100%;
            border-radius: 15px;
          }
          /deep/ .el-input__inner {
            width: 100%;
            height: 100%;
            background: transparent;
            border: 1px solid rgb(1, 176, 202);
            border-radius: 15px;
            color: #fff;
          }
          /deep/ .el-select-dropdown {
            background: rgba(0, 23, 28, 0.3);
            border: 1px solid rgb(1, 176, 202);
            border-radius: 5px;
            // left: -3px !important;
          }
          /deep/ .el-select-dropdown__item {
            color: turquoise;
          }
          /deep/ .el-select .el-input .el-select__caret {
            color: rgb(1, 176, 202);
            font-size: 0.3rem;
            font-weight: 500;
          }
          /deep/ .el-input__suffix {
            display: flex;
            align-items: center;
          }
        }
      }
      .caseDetail {
        width: 100%;
        height: calc(100% - 20%);
        padding: 0 5%;
        box-sizing: border-box;
        .caseDetailList {
          width: 100%;
          height: 100%;
          background: url(../assets/images/warnDottedLine.png) no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-wrap: wrap;
          overflow: auto;
          .detail {
            width: 100%;
            height: 50%;
            border: 1px dashed #fff;
            color: #fff;
            font-size: 0.65rem;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-around;
            .rowDetail {
              width: 100%;
              display: flex;
              justify-content: space-between;
              padding: 0 3%;
              box-sizing: border-box;
            }
          }
        }
        ::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
  @keyframes rightAnimation {
    0% {
      position: relative;
      right: 38%;
      transform: scale(0);
    }
    100% {
      position: relative;
      right: 0%;
      transform: scale(1);
    }
  }
}
.title {
  width: 100%;
  height: 20%;
  background: url("../assets/images/title.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  padding-left: 12%;
  box-sizing: border-box;
}
.caseTitle {
  width: 23%;
  height: 5%;
  background: url("../assets/images/faTingImg/anjianTitle.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  padding-left: 5%;
  box-sizing: border-box;
}
</style>
