<template>
  <sd-detail-form
    ref="form"
    v-sd-watermark="waterMark"
    page-id="audit/project/iamAuditProject"
    form-id="iamAuditProject"
    :record-id="this.$route.query.projectId ? parseInt(this.$route.query.projectId) : null"
    :class="$style.form"
    :read-only="true"
    @sdFormReady="
      () => {
        formReady()
      }
    "
  >
    <template v-slot="{ model, fields }">
      <div :class="$style.charts">
        <div>
          <div :class="$style.content">
            <div>基本信息</div>
            <a-divider :class="$style.divider" />
            <div :class="$style.projectBrief">
              <div>
                <span :class="$style.user">
                  <a-avatar icon="user" :src="avatars.projectPrincipal.src" />
                  <span>
                    <span>{{ model.projectPrincipalName }}</span>
                    <span>项目负责人</span>
                  </span>
                </span>

                <span :class="$style.user">
                  <a-avatar icon="user" :src="avatars.groupLeader.src" />
                  <span>
                    <span>{{ model.groupLeaderName }}</span>
                    <span>项目组长</span>
                  </span>
                </span>
              </div>
              <div style="top: 10px; right: 150px; left: 150px">
                <div>
                  <span :class="$style.label">审计类型：</span>
                  <span>{{ fields.auditType.attr.displayValue }}</span>
                  <span :class="$style.label">审计机构：</span>
                  <span>{{ model.unitName }}</span>
                  <span :class="$style.label">被审计单位：</span>
                  <span>{{ model.auditedUnitNames }}</span>
                </div>

                <div :class="$style.steps + ' ' + $style.process">
                  <span>
                    <a-icon
                      type="sd-audit-overview-plan"
                      theme="filled"
                      :class="$style.icon + ' ' + $style.passed"
                    />
                  </span>
                  <span>
                    <span>项目计划周期：</span>
                    <span>{{ model.planStartTime | sdDateFormat('YYYY-MM-DD') }}</span
                    >至<span>{{ model.planEndTime | sdDateFormat('YYYY-MM-DD') }}</span>
                  </span>
                </div>
                <div
                  v-for="step in model.iamProjectStageList"
                  :key="step.id"
                  :class="$style.steps + ' ' + (step.isEnd === 1 ? $style.process : '')"
                >
                  <span>
                    <a-icon
                      :type="'sd-audit-overview-' + step.projectStage"
                      theme="filled"
                      :class="$style.icon"
                    />
                  </span>
                  <span>
                    <span>实际{{ getStepName(step.projectStage) }}： </span
                    ><span>{{ step.stageStartTime | sdDateFormat('YYYY-MM-DD') }}</span
                    >至<span>{{ step.stageEndTime | sdDateFormat('YYYY-MM-DD') }}</span>
                  </span>
                </div>
              </div>
              <div style="top: 0; right: 0; bottom: 0; width: 150px">
                <span :class="$style.status">
                  <a-icon
                    type="sd-audit-overview-status"
                    theme="filled"
                    :class="$style.icon"
                  ></a-icon>
                  <span>{{ fields.itemStatus.attr.displayValue }}</span>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div :class="$style.content + ' ' + $style.process">
            <div>项目进度</div>
            <a-divider :class="$style.divider" />
            <template v-if="JSON.stringify(auditProcess.data) !== '{}'">
              <div
                ><sd-echart :class="$style.echarts" :options="auditProcess.chart" autoresize
              /></div>
              <div>
                <span>
                  <span>{{ auditProcess.data.totalNum }} </span>
                  <br />
                  <span>任务总数 </span>
                </span>
                <span :class="$style['no-start']">
                  <span>{{ auditProcess.data.noStartNum }} </span>
                  <br />
                  <span>未开始 </span>
                </span>
                <span :class="$style['going']">
                  <span>{{ auditProcess.data.executingNum }} </span>
                  <br />
                  <span>执行中</span>
                </span>
                <span :class="$style['finished']">
                  <span>{{ auditProcess.data.finishedNum }} </span>
                  <br />
                  <span>已完成</span>
                </span>
              </div>
            </template>
            <template v-else>
              <div :class="$style.emptyecharts"> </div>
              <div> </div>
            </template>
          </div>
        </div>
        <div>
          <div :class="$style.content">
            <div>工作底稿分布</div>
            <a-divider :class="$style.divider" />
            <template v-if="JSON.stringify(auditPaperDisct.series) !== '[]'">
              <div><sd-echart :class="$style.echarts" :options="auditPaperDisct" autoresize/></div>
            </template>
            <template v-else>
              <div :class="$style.emptyecharts"> </div>
            </template>
          </div>
        </div>
        <div>
          <div :class="$style.content + ' ' + $style.find">
            <div>审计发现</div>
            <a-divider :class="$style.divider" />
            <template v-if="JSON.stringify(auditFind.chart.series[0].data) !== '[]'">
              <div
                ><sd-echart
                  :class="[$style.echarts, $style.findEcharts]"
                  :options="auditFind.chart"
                  autoresize
              /></div>
              <div style="display: none">
                <div v-for="item in auditFind.data" :key="item.name">
                  <span>{{ item.name }}: </span>
                  <span>{{ item.value }}个 </span>
                </div>
              </div>
            </template>
            <template v-else>
              <div :class="$style.emptyecharts"> </div>
              <div></div>
            </template>
          </div>
        </div>
        <div>
          <div :class="$style.content">
            <div>工作底稿完成情况</div>
            <a-divider :class="$style.divider" />
            <template v-if="JSON.stringify(auditPaperComp.series) !== '[]'">
              <div><sd-echart :class="$style.echarts" :options="auditPaperComp" autoresize/></div>
            </template>
            <template v-else>
              <div :class="$style.emptyecharts"> </div>
            </template>
          </div>
        </div>
      </div>
    </template>
  </sd-detail-form>
</template>

<script>
import 'echarts/lib/chart/pie'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/gauge'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import { Message, Modal } from 'ant-design-vue'
import auditProjectoverviewService from '@product/iam/audit/work/projectoverview/audit-projectoverview-service'
import systemManage from '@/system-manage/system-manage'
import crossWindowWatcher from '@/common/services/cross-window-watcher'
import components from './_import-components/audit-projectoverview-form-import'

export default {
  name: 'AuditProjectOverviewForm',
  metaInfo: {
    title: '项目概况',
  },
  components: {
    ...components,
  },
  data() {
    return {
      waterMark: systemManage.getFormWaterMark(),
      projectId: '',
      currenStep: 0,
      avatars: {
        groupLeader: {
          src: '',
        },
        projectPrincipal: {
          src: '',
        },
      },
      steps: [],
      auditFind: {
        data: [],
        chart: {
          tooltip: {
            trigger: 'item',
            // formatter: '{a} <br/>{b}: {c} ({d}%)',
            formatter: function(parms) {
              var str =
                parms.seriesName +
                '</br>' +
                parms.marker +
                '' +
                parms.data.legendname +
                '</br>' +
                '数量：' +
                parms.data.value +
                '</br>' +
                '占比：' +
                parms.percent +
                '%'
              return str
            },
          },
          legend: {
            show: true,
            data: [],
            icon: 'circle',
            orient: 'vertical',
            top: 'middle',
            right: 50,
          },
          series: [
            {
              left: -250,
              name: '问题类型',
              type: 'pie',
              radius: ['35%', '45%'],
              label: {
                normal: {
                  show: true,
                  // formatter: '{b}\n{d}%',
                  // formatter: function(parms) {
                  //   return parms.data.legendname + '\n' + parms.data.value
                  // },
                },
              },
              data: [],
            },
          ],
        },
      },
      auditPaperDisct: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          top: 'bottom',
        },
        grid: {
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [],
      },
      auditPaperComp: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          top: 'bottom',
        },
        grid: {
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: [],
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [],
      },
      auditProcess: {
        data: {},
        chart: {
          title: [
            {
              text: '95%',
              textStyle: {
                color: '#8675FF',
                fontSize: 40,
              },
              itemGap: 20,
              x: 'center',
              top: '50%',
            },
            {
              text: '完成率',
              textStyle: {
                color: '#444444',
                fontSize: 25,
                fontWeight: 'normal',
              },
              itemGap: 20,
              x: 'center',
              top: '40%',
            },
          ],

          angleAxis: {
            polarIndex: 0,
            min: 0,
            max: 100,
            show: false,
            boundaryGap: ['40%', '40%'],
            startAngle: 90,
          },
          radiusAxis: {
            type: 'category',
            show: true,
            axisLabel: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
          },
          polar: [{}],

          series: [
            {
              type: 'bar',
              z: 10,
              name: '完成度',
              data: [50],
              showBackground: false,
              backgroundStyle: {
                borderWidth: 10,
                width: 10,
              },
              coordinateSystem: 'polar',
              roundCap: true,
              barWidth: 20, // 大的占比环
              itemStyle: {
                normal: {
                  opacity: 1,
                  color: '#8675FF',
                },
              },
            },
            {
              type: 'pie',
              name: '内层细圆环',
              radius: ['45%', '35%'],
              startAngle: 90,
              hoverAnimation: false,
              clockWise: true,
              silent: true,
              itemStyle: {
                normal: {
                  color: '#DCE0FA',
                  shadowBlur: 0,
                  shadowColor: '#66666a',
                },
              },
              tooltip: {
                show: false,
              },
              label: {
                show: false,
              },
              data: [100],
            },
          ],
        },
      },
    }
  },
  created() {
    const projectId = this.$route.query.projectId
    if (projectId) {
      this.projectId = projectId
    }
  },
  mounted() {},
  methods: {
    getStepName(stepId) {
      const steps = this.steps.filter((item) => {
        return item.id === stepId
      })
      if (steps.length !== 0) {
        return steps[0].name
      }
      return ''
    },
    getUserAvatar(account) {
      return auditProjectoverviewService.getUserAvatar(account).then((res) => {
        return URL.createObjectURL(res.data)
      })
    },
    formReady() {
      const ini = setInterval(() => {
        if (this.$refs.form.getFieldValue) {
          this.initData()
          clearInterval(ini)
        }
      })
    },
    initData() {
      this.getUserAvatar(this.$refs.form.getFieldValue('projectPrincipalAccount')).then((res) => {
        this.avatars.projectPrincipal.src = res
      })

      this.getUserAvatar(this.$refs.form.getFieldValue('groupLeaderAccount')).then((res) => {
        this.avatars.groupLeader.src = res
      })

      auditProjectoverviewService.getDictionary('PROJECT_PHASE').then((res) => {
        this.steps = res.data
      })

      auditProjectoverviewService.getProjectProgress(this.projectId).then((res) => {
        if (res.data) {
          const data = JSON.parse(res.data.data)
          this.auditProcess.chart.series[0].data = [Math.round(data.completionRate * 100)]
          this.auditProcess.chart.title[0].text = Math.round(data.completionRate * 100) + '%'

          this.auditProcess.data = data
        }
      })
      auditProjectoverviewService.getAuditFindings(this.projectId).then((res) => {
        if (res.data) {
          const data = JSON.parse(res.data.data)
          let totalNum = 0
          data.seriesData.forEach((item) => {
            this.auditFind.chart.legend.data.push(item.name + ' ' + item.value)
            totalNum = totalNum + item.value
          })
          this.auditFind.chart.series[0].data = data.seriesData.map((item) => {
            return { ...item, name: item.name + ' ' + item.value, legendname: item.name }
          })
          this.auditFind.data = data.seriesData.concat({
            name: '总计',
            value: totalNum,
          })
        }
      })
      auditProjectoverviewService.getWorkingPaperSDistribution(this.projectId).then((res) => {
        if (res.data) {
          const data = JSON.parse(res.data.data)
          this.auditPaperDisct.series = data.series.map(function(item, index) {
            return {
              ...item,
              barWidth: 30,
              itemStyle: {
                normal: {
                  barBorderRadius: [20, 20, 0, 0],
                  color: index === 0 ? '#54C5EB' : '#8675FF',
                },
              },
            }
          })
          this.auditPaperDisct.xAxis[0].data = data.xAxisData
        }
      })

      auditProjectoverviewService.getWorkingPapersCompletion(this.projectId).then((res) => {
        if (res.data) {
          const data = JSON.parse(res.data.data)
          this.auditPaperComp.series = data.series.map(function(item) {
            return {
              ...item,
              barWidth: 30,
              itemStyle: {
                normal: {
                  barBorderRadius: [20, 20, 0, 0],
                  color: '#54C5EB',
                },
              },
            }
          })
          this.auditPaperComp.xAxis[0].data = data.xAxisData
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
@import '@/webflow/sd-flow-form.scss';

:global(.title_sd-detail-form_common) {
  visibility: hidden;
}

.form {
  background-color: rgb(232, 232, 232);
  .title_sd-detail-form_common .buttons_sd-detail-form_common {
    display: none;
  }
  :global(.buttons_sd-detail-form_common) {
    visibility: hidden;
  }
}
.process > div:last-child {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
  & > span {
    display: inline-block;
    margin: 0 5px;
    color: #000;

    &.no-start {
      color: grey;
    }
    &.going {
      color: green;
    }
    &.finished {
      color: blue;
    }
  }
}
.find > div:last-child {
  position: absolute;
  top: 50px;

  span {
    display: inline-block;
    margin: 0 5px;
  }
}

.charts {
  padding: 10px 0 0 10px;
  .icon {
    position: relative;
    top: 20%;
    // margin-right: 10px;
    font-size: 25px;
    color: #e9e9e9;
  }

  .emptyecharts {
    width: 600px;
    height: 400px;
    margin: auto auto;
    text-align: center;
    &::after {
      display: block;
      padding-top: 150px;
      content: '无数据';
    }
  }

  & > div {
    float: left;
    width: 50%;
    padding: 0 10px 10px 0;
  }
  & > div:first-child {
    width: 100%;
    .content > div:first-child {
      margin-left: 0;
    }
    .content > div {
      margin-left: 20px;
      // height: 30px;
      & > span {
        margin-right: 50px;
      }
      &.projectBrief {
        position: relative;
        height: 140px;
        & > div {
          position: absolute;
        }

        & > div:first-child {
          top: 15px;
          width: 140px;
          border-right: 1px solid #f6f6f6;

          .user {
            display: block;
            float: left;
            margin: 10px 0;
            & > span {
              float: left;
              margin-right: 5px;
            }
            & > span > span {
              display: block;
              font-size: 14px;
              color: #1e1e1e;
            }
            & > span > span:last-child {
              font-size: 10px;
              color: #b8b9be;
            }
          }
        }

        .label {
          margin-left: 20px;
          color: #c0c0c6;
        }
        .label:first-child {
          margin-left: 0;
        }

        .steps.process {
          & > span:first-child {
            border-color: #6dcded;
          }
          .icon {
            color: #6dcded;
          }
        }
        .steps {
          position: relative;
          float: left;
          width: 260px;
          padding: 20px 10px;
          &::before {
            position: absolute;
            right: 5px;
            display: block;
            width: 1px;
            height: 56px;
            content: '';
            border: 1px solid rgb(246, 246, 246);
          }
          &:last-child::before {
            display: none;
          }
          & > span:first-child {
            display: inline-block;
            width: 50px;
            height: 50px;
            margin: 0;
            margin-right: 10px;
            text-align: center;
            border: 2px solid #e9e9e9;
            border-radius: 50%;
          }
          & > span {
            display: inline-block;
            float: left;
            font-size: 14px;
            line-height: 25px;
            color: #1e1e1e;
            word-break: keep-all;
          }
          & > span > span:first-child {
            display: block;
            font-size: 14px;
            color: #c0c0c6;
          }
        }
      }

      &.divider {
        height: 1px;
        margin: 10px 0;
      }
    }
    .status {
      display: block;
      height: 100%;
      background-color: #54c5eb;
      border-radius: 10%;
      .icon {
        top: 20px;
        font-size: 100px;
        color: #76d1ef;
      }
      span {
        position: absolute;
        top: 60px;
        left: 40px;
        font-size: 18px;
        color: #fbfdfe;
      }
    }
  }
  .echarts {
    margin: auto auto;
  }
  .find-echarts {
    width: 100%;
  }
  .content {
    position: relative;
    padding: 10px;
    background-color: #fff;
    & > div:first-child {
      font-weight: bold;
    }
    & > div:first-child::before {
      display: inline-block;
      width: 3px;
      height: 0;
      margin: 0 10px;
      vertical-align: bottom;
      content: '';
      background-color: #1890ff;
    }
  }

  .divider {
    margin: 10px 0;
  }
}
</style>
