<template>
  <div class="app-container">
    <!--<div class="title">
      <span>项目跟进记录统计</span>
    </div>

    <div class="search-row">
      <el-form ref="ruleForm" :model="query" :rules="rules" class="demo-ruleForm" label-width="90px">
        <el-row :gutter="32">
          <el-col :span="4">
            <el-form-item label="区域">
              <treeselect v-model="query.node" :options="areaTree" :placeholder="$t('user.placeholder_area')"
                          :show-count="true">
                <div slot="option-label" slot-scope="{ node }" style="white-space: nowrap; font-size: 14px">
                  {{ node.raw['label' + labelSuffix] ? node.raw['label' + labelSuffix] : "" }}
                </div>
                <div slot="value-label" slot-scope="{ node }">
                  {{ node.raw['label' + labelSuffix] ? node.raw['label' + labelSuffix] : "" }}
                </div>
              </treeselect>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item :label="$t('board.statType')" prop="statMode">
              <el-select v-model="query.statMode" :placeholder="$t('common.pleaseSelect')">
                <el-option :label="$t('board.year')" value="year"></el-option>
                <el-option :label="$t('board.month')" value="month"></el-option>
                <el-option :label="$t('board.day')" value="day"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="4">
            <el-form-item :label="queryDateLabel" prop="queryDate">
              <el-date-picker v-if="query.statMode === 'year'" v-model="query.queryDate" placeholder="选择年"
                              type="year"/>
              <el-date-picker v-if="query.statMode === 'month'" v-model="query.queryDate" placeholder="选择月"
                              type="month"/>
              <el-date-picker v-if="query.statMode === 'day'" v-model="query.queryDate" end-placeholder="结束日期"
                              range-separator="至" start-placeholder="开始日期" type="daterange"/>
            </el-form-item>

          </el-col>
          <el-col :offset="4" :span="4">
            <el-form-item>
              <el-button size="mini" type="primary" @click="getCountAndPieData">{{ $t('common.search') }}</el-button>
              <el-button size="mini" @click="reset">{{ $t('common.reset') }}</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="count-wrapper">
      <el-row>
        <el-col :span="6">
          <div class="count-box">
            <div class="count-content">
              <span>项目总数</span>
              <span>111</span>
            </div>

          </div>
        </el-col>
        <el-col :span="6">
          <div class="count-box">
            <div class="count-content">
              <span>跟进项目数</span>
              <span>222</span>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="count-box">
            <div class="count-content">
              <span>未跟进项目数</span>
              <span>333</span>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="pie-chart-wrapper">
      &lt;!&ndash;<el-row>&ndash;&gt;
      &lt;!&ndash;  <el-col :span="24">&ndash;&gt;
      &lt;!&ndash;    <div class="chart-box">&ndash;&gt;
      &lt;!&ndash;      <div ref="target" class="pie-chart"/>&ndash;&gt;
      &lt;!&ndash;    </div>&ndash;&gt;
      &lt;!&ndash;  </el-col>&ndash;&gt;
      &lt;!&ndash;</el-row>&ndash;&gt;
      <div ref="target" class="pie-chart"/>
    </div>-->

    <!-- 未跟进项目列表 -->
    <div class="unfollowed-list">
      <div class="unfollowed-list-title">
        <el-row :gutter="32">
          <el-col :span="3">
            <span>{{ $t('board.unfollowedList') }}</span>
          </el-col>
          <el-col :offset="2" :span="4">
            <!--<el-radio-group v-model="unfollow.unfollowedMode"  @input="modeChange">-->
            <!--  <el-radio :label="1">{{ $t('board.lastWeek' )}}</el-radio>-->
            <!--  <el-radio :label="2">{{ $t('board.lastMonth' )}}</el-radio>-->
            <!--  <el-radio :label="3">{{ $t('board.lastSixMonths' )}}</el-radio>-->
            <!--</el-radio-group>-->

            <el-select v-model="unfollow.unfollowedMode" placeholder="请选择" @change="modeChange">
              <el-option :label="$t('board.lastWeek')" value="1"></el-option>
              <el-option :label="$t('board.lastMonth')" value="2"></el-option>
              <el-option :label="$t('board.lastSixMonths')" value="3"></el-option>
            </el-select>
          </el-col>
        </el-row>


        <!--<el-button type="text" @click="queryDateShortcut(1)">最近一周</el-button>-->
        <!--<el-button type="text" @click="queryDateShortcut(2)">最近一月</el-button>-->
        <!--<el-button type="text" @click="queryDateShortcut(3)">最近半年</el-button>-->


      </div>
      <div class="table-wrapper">
        <el-table v-loading="loading" :data="unfollowedList"
                  :header-cell-style="{'text-align':'center','background-color':'#F4F3F2','border-right':'1px solid #dfdcdc'}"
                  border stripe
        >
          <el-table-column label="No" type="index" width="60"></el-table-column>
          <!-- 项目编号-->
          <el-table-column :label="$t('project.no')" prop="projectNo" show-overflow-tooltip
                           width="150"></el-table-column>
          <!--项目名称-->
          <el-table-column :label="$t('project.name')" prop="projectName" show-overflow-tooltip
                           width="200"></el-table-column>
          <!--&lt;!&ndash;关联线索编号&ndash;&gt;-->
          <!--<el-table-column prop="clueNo" label="关联线索编号" width="120"></el-table-column>-->
          <!--&lt;!&ndash;关联合同编号&ndash;&gt;-->
          <!--<el-table-column prop="contractNo" label="关联合同编号" width="120"></el-table-column>-->
          <!--项目类型-->
          <el-table-column :label="$t('project.type')" prop="type" show-overflow-tooltip width="120">
            <template slot-scope="{row}">
              <!--this.dict.type(dict_type).label(value)-->
              <!--<span>{{ dict.type.project_type.find(item => item.value === row.projectType).label }}</span>-->
              <span>{{ getI18nDictName('project_type', row.type) }}</span>
            </template>
          </el-table-column>
          <!--区域-->
          <el-table-column label="区域" prop="areaName" show-overflow-tooltip width="120"></el-table-column>
          <!--城市-->
          <el-table-column :label="$t('project.countryId')" prop="city" show-overflow-tooltip
                           width="120"></el-table-column>
          <!--开发商-->
          <el-table-column :label="$t('project.developer')" prop="developer" show-overflow-tooltip></el-table-column>
          <!--项目周期-->
          <el-table-column :label="$t('project.period')" prop="projectCycle" show-overflow-tooltip>
            <template slot-scope="{row}">
              <span>{{ formatTime(row) }}</span>
            </template>
          </el-table-column>
          <!-- 最后跟进日期 -->
          <el-table-column :label="$t('board.lastFollowDate')" prop="lastFollowTime" show-overflow-tooltip width="160">
            <template slot-scope="{row}">
              <span>{{ row.lastFollowTime ? getLocalTime(row.lastFollowTime) : '-' }}</span>
            </template>
          </el-table-column>
          <!--&lt;!&ndash;联系人&ndash;&gt;-->
          <!--<el-table-column prop="contactName" label="联系人" width="120"></el-table-column>-->
          <!--&lt;!&ndash;联系方式&ndash;&gt;-->
          <!--<el-table-column prop="contactPhone" label="联系方式"></el-table-column>-->
        </el-table>
        <pagination :limit.sync="unfollow.pageSize" :page.sync="unfollow.pageNum"
                    :total="total"
                    @pagination="getUnfollowedList"/>
      </div>

    </div>

  </div>
</template>

<script>

import DatePicker from "@/components/YearDatePicker/date-picker";
import QuarterPicker from "@/components/QuarterPicker/index.vue";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getAreaTree} from "@/api/common/common";
import * as echarts from "echarts";
import {getUnFollowedList} from "@/api/board/projectFollow";
import {getLocalTime} from "@/utils/data/dataUtils";
import {getI18nDictName} from "../../../utils/dict/DictFind";

export default {
  components: {Treeselect, QuarterPicker, DatePicker},

  dicts: ['project_type'],
  data() {
    return {
      chart: null,
      labelSuffix: localStorage.getItem('labelSuffix') || '',

      statLabel: this.$t('board.month'),
      queryDateLabel: this.$t('board.queryM'),

      areaTree: [],

      query: {
        statMode: 'month',
        node: null,
        leadDateRange: [],
        queryDate: '',
      },
      rules: {
        leadDateRange: [
          {type: 'array', required: true, message: '请选择日期范围', trigger: 'change'}
        ]
      },

      // queryParam: {
      //   startDate: '',
      //   endDate: '',
      // },


      unfollowedList: [],
      loading: false,
      total: 0,
      unfollow: {
        unfollowedMode: '1',
        pageNum: 1,
        pageSize: 10,
      }
    };
  },

  watch: {
    'query.statMode': {
      handler: function (val) {
        const {statLabel, queryDateLabel} = {
          year: {
            statLabel: this.$t('board.year'),
            queryDateLabel: this.$t('board.queryY'),
          },
          month: {
            statLabel: this.$t('board.month'),
            queryDateLabel: this.$t('board.queryM'),
          },
          day: {
            statLabel: this.$t('board.day'),
            queryDateLabel: this.$t('board.queryD'),
          }
        }[val];

        this.statLabel = statLabel;
        this.queryDateLabel = queryDateLabel;
      }
    }
  },


  created() {
    this.getAreaTree();
    this.getUnfollowedList();
  },

  mounted() {
    this.$nextTick(async () => {
      // this.initChart()
      this.getCountAndPieData();
    });
  },


  methods: {
    getI18nDictName,
    getLocalTime,
    initChart() {
      this.chart = echarts.init(this.$refs.target, 'macarons')
      console.log('query:', this.query)
      let areaName = '';
      if (this.query.node) {
        areaName = this.query.node['areaName' + this.labelSuffix] + '-'
      }

      this.chart.setOption({
        title: {
          text: areaName + '项目跟进记录统计(' + this.statLabel + ')',
          left: 'center'
        },
        tooltip: {

          trigger: 'item'
        },
        legend: {
          top: '10%',
        },

        // grid: {
        //   top: '12%',
        //   left: '2%',
        //   right: '2%',
        //   bottom: '3%',
        //   containLabel: true
        // },
        series: [
          {
            name: '项目数',
            type: 'pie',
            radius: ['30%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 25,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: '跟进中'},
              {value: 735, name: '未跟进'},
            ]
          }
        ]
      })
    },

    getCountAndPieData() {
    },


    reset() {
      this.$refs.ruleForm.resetFields()
      this.getCountAndPieData()
    },

    // queryDateShortcut(type) {
    //   // const now = new Date();
    //   // let startDate = '';
    //   // let endDate = '';
    //   // switch (type) {
    //   //   case 1:
    //   //     startDate = new Date(now.getTime() - 7 * 24 * 3600 * 1000);
    //   //     break;
    //   //   case 2:
    //   //     startDate = new Date(now.getTime() - 30 * 24 * 3600 * 1000);
    //   //     break;
    //   //   case 3:
    //   //     startDate = new Date(now.getTime() - 180 * 24 * 3600 * 1000);
    //   //     break;
    //   // }
    //   // this.query.queryDate = [startDate, endDate];
    //   this.unfollowedMode = type;
    //   this.getUnfollowedList();
    // },

    modeChange(e) {
      this.unfollow.pageNum = 1;
      this.getUnfollowedList();
    },

    getUnfollowedList() {
      this.loading = true;
      getUnFollowedList(this.unfollow).then(response => {
        this.unfollowedList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },


    getAreaTree() {
      getAreaTree().then(response => {
        this.areaTree = response.data;
        console.log('allAreaList', this.areaTree)
      });
    },

    formatTime(row) {
      if (row.startTime && row.overTime) {
        return getLocalTime(row.startTime) + ' ~ ' + getLocalTime(row.overTime)
      } else {
        return '-'
      }
    },

  }
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 1.5vw;
  //background-color: #fff;

  .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .search-row {
    margin-bottom: 1.5vw;
  }

  .count-wrapper {
    .count-box {
      height: 10vw;
      width: 15vw;
      border: 1px solid #BBBBBB;
      border-radius: 4px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 1.5vw;

      .count-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1vw;

        span {
          font-size: 16px;
          font-weight: bold;
        }
      }
    }
  }

  .pie-chart-wrapper {
    .pie-chart {
      height: 20vw;
      width: 20vw;
    }
  }

  .unfollowed-list {
    .unfollowed-list-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 1.5vw;
    }
  }

  .table-wrapper {
    width: 80%;
    padding: 24px;
    margin-top: 16px;
    background: #FFFFFF;
    box-shadow: 0px 2px 10px 0px #CED6DD;
    border-radius: 6px;
  }
}


</style>
