<template>
  <a-card>
    <!-- <BasicForm @register="searchFormSchema" @submit="handleSubmit" style="margin-top: 50px; margin-left: 50px" /> -->
    <div class="searchform">
      <a-form layout="inline" labelAlign="left" :label-col="labelCol">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="监控主体：">
              <a-input v-model:value="modelRef.name" />
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item label="风险级别：">
              <JDictSelectTag v-model:value="modelRef.risk_level" placeholder="请选择" dictCode="risk_level" />
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item label="动态类型：">
              <JCategorySelect placeholder="请选择" v-model:value="modelRef.news_type" pcode="B07" />
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item>
              <a-button type="primary" @click.prevent="onSearch">查询</a-button>
              <a-button style="margin-left: 10px" @click="reset">重置</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-tabs v-model:activeKey="activeKey" type="card" @tab-click="handleChangePanel">
      <a-tab-pane key="1" tab="日报">
        <div class="risk_level">
          <div class="risk_part">
            <div class="risk_num high">0</div>
            <span class="risk_title">高风险</span>
            <a class="detail" @click="handleRiskDetail">查看详情</a>
          </div>
          <div class="risk_part">
            <div class="risk_num warn">1</div>
            <span class="risk_title">警示</span>
            <a class="detail" @click="handleRiskDetail">查看详情</a>
          </div>
          <div class="risk_part">
            <div class="risk_num note">3</div>
            <span class="risk_title">提示</span>
            <a class="detail" @click="handleRiskDetail">查看详情</a>
          </div>
          <div class="risk_part">
            <div class="risk_num good">10</div>
            <span class="risk_title">利好</span>
            <a class="detail" @click="handleRiskDetail">查看详情</a>
          </div>
        </div>
        <div style="margin-top: 20px">
          <BasicTable @register="registerTable">
            <!--操作栏-->
            <template #action="{ record }">
              <TableAction :actions="getTableAction(record)" />
            </template>
            <!--字段回显插槽-->
            <template #htmlSlot="{ text }">
              <div v-html="text"></div>
            </template>
          </BasicTable>
        </div>
      </a-tab-pane>
      <a-tab-pane key="2" tab="周报（最近7天）">
        <a-page-header title="风险级别" sub-title="" />
        <div>
          <div class="risk_level">
            <div class="risk_part">
              <div class="risk_num high">1</div>
              <span class="risk_title">高风险</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
            <div class="risk_part">
              <div class="risk_num warn">5</div>
              <span class="risk_title">警示</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
            <div class="risk_part">
              <div class="risk_num note">12</div>
              <span class="risk_title">提示</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
            <div class="risk_part">
              <div class="risk_num good">23</div>
              <span class="risk_title">利好</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
          </div>
          <div id="lineChart" style="width: 90%; height: 50vh; margin-top: 20px"></div>
        </div>
        <a-page-header title="风险维度" sub-title="" />
        <div>
          <div class="risk_level">
            <div class="risk_part">
              <div class="risk_num">4</div>
              <span class="risk_title">法律诉讼</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
            <div class="risk_part">
              <div class="risk_num">15</div>
              <span class="risk_title">工商风险</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
            <div class="risk_part">
              <div class="risk_num">8</div>
              <span class="risk_title">经营风险</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
            <div class="risk_part">
              <div class="risk_num">14</div>
              <span class="risk_title">经营状况</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
          </div>
          <div id="pieChart" style="width: 90%; height: 50vh; margin-top: 20px"></div>
        </div>
      </a-tab-pane>
      <a-tab-pane key="3" tab="月报（最近30天）">
        <a-page-header title="风险级别" sub-title="" />
        <div>
          <div class="risk_level">
            <div class="risk_part">
              <div class="risk_num high">3</div>
              <span class="risk_title">高风险</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
            <div class="risk_part">
              <div class="risk_num warn">11</div>
              <span class="risk_title">警示</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
            <div class="risk_part">
              <div class="risk_num note">21</div>
              <span class="risk_title">提示</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
            <div class="risk_part">
              <div class="risk_num good">64</div>
              <span class="risk_title">利好</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
          </div>
          <div id="lineChartMonth" style="width: 90%; height: 50vh; margin-top: 20px"></div>
        </div>
        <a-page-header title="风险维度" sub-title="" />
        <div>
          <div class="risk_level">
            <div class="risk_part">
              <div class="risk_num">10</div>
              <span class="risk_title">法律诉讼</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
            <div class="risk_part">
              <div class="risk_num">25</div>
              <span class="risk_title">工商风险</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
            <div class="risk_part">
              <div class="risk_num">37</div>
              <span class="risk_title">经营风险</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
            <div class="risk_part">
              <div class="risk_num">27</div>
              <span class="risk_title">经营状况</span>
              <a class="detail" @click="handleRiskDetail">查看详情</a>
            </div>
          </div>
          <div id="pieChartMonth" style="width: 90%; height: 50vh; margin-top: 20px"></div>
        </div>
      </a-tab-pane>
    </a-tabs>
  </a-card>
  <!--引用表格-->
  <WbSurveyRiskModal @register="registerModal" @success="handleSuccess" />
  <WbSurveyRiskDetailModal @register="registerRiskModal" />
</template>
<script lang="ts" setup>
  import { ref, onMounted, nextTick } from 'vue';
  import * as echarts from 'echarts';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { columns, searchFormSchema } from './WbSurveyRiskReport.data';
  import WbSurveyRiskModal from './WbSurveyRiskModal.vue';
  import WbSurveyRiskDetailModal from './WbSurveyRiskDetailModal.vue';
  import { reactive, toRaw } from 'vue';
  import { Form } from 'ant-design-vue';
  import {
    JDictSelectTag,
    JTreeSelect,
    JCategorySelect,
    JSelectUserByDept,
    JSelectDept,
    JPopup,
    JAreaLinkage,
    JInput,
    JSearchSelect,
  } from '/@/components/Form';
  const useForm = Form.useForm;
  // function handleSubmit() {}
  const labelCol = { span: 9 };
  // const wrapperCol = { span: 24 };

  const modelRef = reactive({
    name: '',
    risk_level: '',
    news_type: '',
  });
  const { resetFields, validate, validateInfos } = useForm(modelRef);
  const onSearch = () => {
    // validate()
    //   .then((res) => {
    //     console.log(res, toRaw(modelRef));
    //   })
    //   .catch((err) => {
    //     console.log('error', err);
    //   });
  };
  const reset = () => {
    resetFields();
  };
  //注册table数据
  const { tableContext } = useListPage({
    // designScope: 'basic-table-demo',
    tableProps: {
      title: '',
      useSearchForm: false,
      showTableSetting: false,
      dataSource: [
        {
          key: '1',
          name: '恒大集团',
          risk_level: '警示信息',
          news_type: '开庭公告',
          news: '新增（2024）川0105民初7693号修理合同纠纷案件',
          time: '2024-05-08',
        },
        {
          key: '2',
          name: '恒大集团',
          risk_level: '提示信息',
          news_type: '招投标',
          news: '新增数据管控系统配合新核心改造采购项目成交公示',
          time: '2024-05-06',
        },
        {
          key: '3',
          name: '恒大集团',
          risk_level: '提示信息',
          news_type: '专利信息',
          news: '数据库查询语句的生成方法、装置、设备及介质',
          time: '2024-05-25',
        },
      ],
      columns: columns,
      size: 'small',
      actionColumn: {
        // ifShow: false,
        width: 100,
      },
    },
  });
  // BasicTable绑定注册
  const [registerTable] = tableContext;

  const activeKey = ref('1');
  function handleChangePanel(key) {
    activeKey.value = key;
    if (activeKey.value == '2') {
      nextTick(() => setLine());
      nextTick(() => setPie());
    }
    if (activeKey.value == '3') {
      nextTick(() => setLineMonth());
      nextTick(() => setPieMonth());
    }
  }
  function setLine() {
    const myChart = echarts.init(document.getElementById('lineChart'));
    const option = {
      color: ['#ff3b30', '#ff7d18', '#aa77cc', '#119944'],
      legend: {
        bottom: '3%',
        left: 'center',
        data: ['高风险', '警示', '提示', '利好'],
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        data: ['2024/5/21', '2024/5/22', '2024/5/23', '2024/5/24', '2024/5/25', '2024/5/26', '2024/5/27'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '高风险',
          type: 'line',
          data: [0, 0, 1, 0, 0, 0, 0],
          smooth: true,
          showSymbol: false,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#ff3b30', //改变折线颜色
              },
            },
          },
        },
        {
          name: '警示',
          type: 'line',
          data: [1, 0, 1, 0, 2, 1, 0],
          smooth: true,
          showSymbol: false,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#ff7d18', //改变折线颜色
              },
            },
          },
        },
        {
          name: '提示',
          type: 'line',
          data: [1, 3, 4, 0, 1, 2, 1],
          smooth: true,
          showSymbol: false,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#aa77cc', //改变折线颜色
              },
            },
          },
        },
        {
          name: '利好',
          type: 'line',
          data: [3, 6, 2, 1, 7, 1, 3],
          smooth: true,
          showSymbol: false,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#119944', //改变折线颜色
              },
            },
          },
        },
      ],
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
      // 改变图表尺寸，在容器大小发生改变时需要手动调用
      myChart.resize();
    });
  }
  function setPie() {
    const myChart = echarts.init(document.getElementById('pieChart'));
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)',
      },
      legend: {
        bottom: '3%',
        left: 'center',
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 4, name: '法律诉讼' },
            { value: 15, name: '工商风险' },
            { value: 8, name: '经营风险' },
            { value: 14, name: '经营状况' },
          ],
        },
      ],
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
      // 改变图表尺寸，在容器大小发生改变时需要手动调用
      myChart.resize();
    });
  }
  // 月度
  function setLineMonth() {
    const myChart = echarts.init(document.getElementById('lineChartMonth'));
    const option = {
      color: ['#ff3b30', '#ff7d18', '#aa77cc', '#119944'],
      legend: {
        bottom: '3%',
        left: 'center',
        data: ['高风险', '警示', '提示', '利好'],
      },
      tooltip: {
        trigger: 'axis',
      },
      xAxis: {
        type: 'category',
        data: ['2024/4/23', '2024/4/29', '2024/5/04', '2024/5/14', '2024/5/19', '2024/5/22', '2024/5/27'],
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '高风险',
          type: 'line',
          data: [0, 0, 1, 0, 1, 1, 0],
          smooth: true,
          showSymbol: false,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#ff3b30', //改变折线颜色
              },
            },
          },
        },
        {
          name: '警示',
          type: 'line',
          data: [1, 2, 1, 1, 3, 2, 1],
          smooth: true,
          showSymbol: false,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#ff7d18', //改变折线颜色
              },
            },
          },
        },
        {
          name: '提示',
          type: 'line',
          data: [1, 3, 4, 5, 3, 2, 3],
          smooth: true,
          showSymbol: false,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#aa77cc', //改变折线颜色
              },
            },
          },
        },
        {
          name: '利好',
          type: 'line',
          data: [5, 7, 10, 9, 16, 8, 9],
          smooth: true,
          showSymbol: false,
          itemStyle: {
            normal: {
              lineStyle: {
                color: '#119944', //改变折线颜色
              },
            },
          },
        },
      ],
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
      // 改变图表尺寸，在容器大小发生改变时需要手动调用
      myChart.resize();
    });
  }

  function setPieMonth() {
    const myChart = echarts.init(document.getElementById('pieChartMonth'));
    const option = {
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)',
      },
      legend: {
        bottom: '3%',
        left: 'center',
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 10, name: '法律诉讼' },
            { value: 25, name: '工商风险' },
            { value: 37, name: '经营风险' },
            { value: 27, name: '经营状况' },
          ],
        },
      ],
    };
    myChart.setOption(option);
    window.addEventListener('resize', function () {
      // 改变图表尺寸，在容器大小发生改变时需要手动调用
      myChart.resize();
    });
  }
  // 操作栏
  // 注册model
  import { useModal } from '/@/components/Modal';
  const [registerModal, { openModal }] = useModal();
  function getTableAction(record) {
    return [
      {
        label: '详情',
        onClick: handleDetail.bind(null, record),
      },
    ];
  }

  // 详情
  function handleDetail(record: Recordable) {
    openModal(true, {
      record,
      showFooter: false,
    });
  }

  //查看分类详情
  const [registerRiskModal, { openModal: opeRiskModal }] = useModal();
  function handleRiskDetail() {
    opeRiskModal(true, {
      showFooter: false,
    });
  }
</script>

<style scoped>
  .searchform {
    margin-bottom: 20px;
  }
  ::v-deep .ant-tabs-tab {
    width: 200px; /*设置标签宽度为100px*/
    padding: 0; /*移除内边距*/
  }
  .news {
    border: 1px solid red;
  }
  .risk_level {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .risk_part {
    width: 20%;
    height: 100px;
    border: 1px solid #eeeeee;
    border-radius: 3px;
    padding: 10px;
    text-align: center;
  }
  .risk_title {
    font-size: 16px;
  }
  .detail {
    display: block;
    font-size: 12px;
    color: #808080;
  }
  .risk_num {
    font-size: 24px;
    font-weight: 600;
  }
  .high {
    color: #ff3b30;
  }
  .warn {
    color: #ff7d18;
  }
  .note {
    color: #aa77cc;
  }
  .good {
    color: #119944;
  }
</style>
