<template>
  <div>
    <Card style="margin: 20px 0;">
      <div>

        <div class="contract">
          <div class="contract__title">
            <h3>待办通知</h3>


            <div class="more" @click="$router.push('/lease')">
              更多
              <i class="el-icon-d-arrow-right"></i>
            </div>
          </div>
          <div class="type-bar">
            <div class="type-bar__item" :class="{ 'type-bar__item--active': radio === 0  }" @click="radioPick(0)">合约中</div>
            <div class="type-bar__item" :class="{ 'type-bar__item--active': radio === 1  }" @click="radioPick(1)">临期</div>
            <div class="type-bar__item" :class="{ 'type-bar__item--active': radio === 2  }" @click="radioPick(2)">已过期</div>

            <svg xmlns="http://www.w3.org/2000/svg" :style="{ 'left': 80 * radio + 'px'  }" viewBox="0 0 100 10" preserveAspectRatio="xMinYMin meet">
              <path d="M 0 10,L 44 10,L 50 2,L56 10,L 100 10" stroke="#aaa" stroke-width="1" fill="#fff"></path>
            </svg>
          </div>
          <!--      <Tabs style="width: 24%;">-->
          <!--        <TabPane label="合约中3"></TabPane>-->
          <!--        <TabPane label="临期1"></TabPane>-->
          <!--        <TabPane label="已过期2"></TabPane>-->
          <!--      </Tabs>-->

          <Table style="margin-top: 20px;" :loading="leaseTableLoading" size="small" stripe highlight-row :height="400" :data="leases" :columns="leaseTable"></Table>
          <Page style="margin-top: 14px;display: flex;justify-content: flex-end;" size="small" :total="leaseTotal" show-elevator show-total :page-size="leaseSelect.page_size"></Page>
          <!--        <xy-table :border="false" :is-page="false" :height="400" :table-item="table1" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" :action="index" :req-opt="select"></xy-table>-->
        </div>

        <Divider></Divider>

        <el-row :gutter="80" type="flex">
          <el-col :span="12">
            <div class="contract__title">
              <h3>系统通知</h3>

              <div class="more" @click="$router.push('/notice')">
                更多
                <i class="el-icon-d-arrow-right"></i>
              </div>
            </div>

            <div class="list">
              <div class="list-item" v-for="item in notices.slice((noticeSelect.page-1)*noticeSelect.page_size,(noticeSelect.page-1)*noticeSelect.page_size+noticeSelect.page_size)" @click="item.name ? ($refs['drawer'].setType(1),$refs['drawer'].setRow(item),$refs['drawer'].show()) : ($refs['drawer'].setType(3),$refs['drawer'].setRow(item),$refs['drawer'].show())">
                <span>{{ item.name || item.dikuaimingcheng }}</span>
                <span>{{ item.shijian || item.zulinkaishiqixian }}</span>
              </div>

              <Page class="list-page" :page-size="noticeSelect.page_size" :total="noticeTotal" size="small" @on-change="e => (noticeSelect.page = e)"/>
            </div>
            <!--          <xy-table :height="400" :table-item="table1" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" :action="index" :req-opt="select"></xy-table>-->
          </el-col>

          <el-col :span="12">
            <div class="contract__title">
              <h3>制度文档</h3>

              <div class="more" @click="$router.push('/system/documents')">
                更多
                <i class="el-icon-d-arrow-right"></i>
              </div>
            </div>

            <div class="list">
              <div class="list-item" v-for="item in systems" @click="$refs['drawer'].setType(2),$refs['drawer'].setRow(item),$refs['drawer'].show()">
                <span>{{ item.name }}</span>
                <span>{{ $moment(new Date(item.created_at)).format('YYYY-MM-DD') }}</span>
              </div>

              <Page class="list-page" :page-size="systemSelect.page_size" :total="systemTotal" size="small" />
            </div>
<!--            <xy-table :height="400" :table-item="table2" style="margin-top: 20px" size="mini" stripe ref="table1" :auths="[]" :action="index" :req-opt="select1"></xy-table>-->
          </el-col>
        </el-row>
<!--        <el-row :gutter="80" type="flex">-->
<!--          <el-col :span="12">-->
<!--            <div class="contract__title">-->
<!--              <h3>安全检查</h3>-->

<!--              <div class="more" @click="$router.push('/system/documents')">-->
<!--                更多-->
<!--                <i class="el-icon-d-arrow-right"></i>-->
<!--              </div>-->
<!--            </div>-->

<!--            <div class="list">-->
<!--              <div class="list-item" v-for="item in assetSafetyPlan" @click="$refs['drawer'].setType(4),$refs['drawer'].setRow(item),$refs['drawer'].show()">-->
<!--                <span>{{ item.jihuamingcheng }}</span>-->
<!--                <span>{{ $moment(new Date(item.jihuakaishishijian)).format('YYYY-MM-DD') }}</span>-->
<!--              </div>-->

<!--              <Page class="list-page" :page-size="systemSelect.page_size" :total="systemTotal" size="small" />-->
<!--            </div>-->
<!--          </el-col>-->
<!--        </el-row>-->
      </div>

    </Card>

      <drawer ref="drawer"></drawer>
  </div>
</template>

<script>
  import echarts from "echarts";
  import PanelGroup from './components/PanelGroup'
  import drawer from "./components/drawer.vue"

  import {
    getChartsHome, getNotice
  } from '@/api/dashboard';
  import { index } from "@/api/system/baseForm"

  export default {
    components: {
      PanelGroup,
      drawer,
    },
    data() {
      return {
        col: '',
        line: '',
        business_data: [],
        collect_data: [],
        list: {
          "business": {
            "server_money_total": Math.round(Math.random()*100000+10000),
            "nurse_money_total": Math.round(Math.random()*50000+5000),
            "remain_money_total": Math.round(Math.random()*50000+5000)
          },
          "person_efficiency": {
            "server_time_total": Math.round(Math.random()*50+20),
            "expect": Math.round(Math.random()*25+10),
            "act": Math.round(Math.random()*25+10)
          },
          "customer": {
            "active": Math.round(Math.random()*50+30),
            "add": Math.round(Math.random()*25+10),
            "wash": Math.round(Math.random()*25+10)
          },
          "order": {
            "server_total": Math.round(Math.random()*50+30),
            "cycle_total": Math.round(Math.random()*25+10),
            "unit_total": Math.round(Math.random()*25+10)
          }},
        customerArr: [],
        orderArr: [],
        chartData: {},

        radio: 0,
        config: {
          time: 1,
          unit: 'months'
        },
        leaseTableLoading: false,
        leaseSelect: {
          table_name: 'leases',
          filter: [
            {
              key: 'zulinjieshuqixian',
              op: 'range',
              value: `${this.$moment().format("YYYY-MM-DD")},2999-12-31`
            },
            {
              key: 'zulinkaishiqixian',
              op: 'range',
              value: `${this.$moment(0).format("YYYY-MM-DD")},${this.$moment().format("YYYY-MM-DD")}`
            }
          ],
          page: 1,
          page_size: 10
        },
        leases: [],
        leaseTotal: 0,
        leaseTable: [
          {
            title: '序号',
            fixed: 'left',
            align: 'center',
            width: 60,
            render:(h, { row, column, index }) => {
              return h('div',{
                style: {
                  height: '18px',
                  width: '18px',
                  'border-radius': '100%',
                  color: '#fff',
                  background: '#4986cc',
                  'text-align': 'center',
                  'font-size': '12px'
                }
              },index+1)
            }
          },
          {
            title: '地块名称',
            key: 'dikuaimingcheng',
            width: 180,
            fixed: 'left',
            align: 'left',
            render: (h, { row }) => {
              return h('div',[
                ...row?.land?.map(i => h('Tag', {
                  props: {
                    color: "green"
                  }
                },i.name)),
                ...row?.houses?.map(i => h('Tag', {
                  props: {
                    color: "blue"
                  }
                },i.name))
              ])
            }
          },
          {
            title: '出租方',
            key: 'chuzufang',
            align: 'left',
            width: 150
          },
          {
            title: '承租方',
            align: 'center',
            key: 'chengzufang',
            width: 150
          },
          {
            title: '租赁期限',
            width: 190,
            align: 'center',
            render:(h,{ row }) => {
              return ('div',[
                h('span',this.$moment(new Date(row.zulinkaishiqixian)).format('YYYY.MM.DD')),
                h('span',' - '),
                h('span',this.$moment(new Date(row.zulinjieshuqixian)).format('YYYY.MM.DD'))
              ])
            }
          },
          {
            title: '应收租金',
            key: 'yingshouzujin',
            align: 'right',
            width: 120
          },
          {
            title: '实收租金',
            label: 'shishouzujin',
            align: 'right',
            width: 120
          },
          {
            title: '保证金',
            key: 'baozhengjin',
            width: 120,
            customFn:row => {
              return (
                <div style={{'text-align': row.baozhengjin === '无' ? 'center' : 'right' }}>{ row.baozhengjin }</div>
              )
            }
          },
          {
            title: '未到位原因',
            key: 'weidaoweiyuanyin',
            minWidth: 140
          }
        ],
        systemSelect: {
          table_name: 'systems',
          filter: [
          ],
          page: 1,
          page_size: 10
        },
        systems: [],
        systemTotal: 0,
        assetSafetyPlanSelect: {
          table_name: 'asset_safety_plans',
          page: 1,
          page_size: 10,
          filter: [
            {
              key: "jihuakaishishijian",
              op: "range",
              value: `${this.$moment().format("YYYY-MM-DD")},2999-01-01`
            }
          ]
        },
        assetSafetyPlanTotal: 0,
        assetSafetyPlan: [],
        noticeSelect: {
          table_name: 'notices',
          page: 1,
          page_size: 10
        },
        noticeTotal: 0,
        notices: [],
      }
    },
    watch: {
      chartData(val, newval) {
        if (newval){
          this.init();
        }
      }
    },
    methods: {
      index,
      async loadData() {
        await getChartsHome().then((res) => {
          console.log(res);
          this.list = res.list;
          this.chartData = res;
          let _business_data = [];
          let _collect_data = [];
          res.business_data.map(item => {
            _business_data.push(item.server_money_total)
            _collect_data.push(item.collect_money)
          })
          this.business_data = _business_data;
          this.collect_data = _collect_data;
          let _customerArr = [];
          let _orderArr = [];

          res.order_data.map(item => {
            _customerArr.push(item.active_customer)
            _orderArr.push(item.order_total)
          })
          this.customerArr = _customerArr;
          this.orderArr = _orderArr;
        }).catch()
      },
      init() {
        this.col = echarts.init(document.getElementById('col-chart'))
        this.col.setOption({
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            position: 'bottom'
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
          },
          xAxis: {
            type: 'category',
            data: ['第一周', '第二周', '第三周', '第四周']
          },
          series: [{
              name: '服务金额',
              type: 'bar',
              data: this.business_data,
              itemStyle: {
                normal: {
                  color: 'rgb(42,182,252)'
                },
              },
            },
            {
              name: '收款',
              type: 'bar',
              data: this.collect_data,
              itemStyle: {
                normal: {
                  color: 'rgb(34,228,255)'
                },
              },
            }
          ],
          select1: {

          }
        })

        this.line = echarts.init(document.getElementById('line-chart'))
        this.line.setOption({
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['活跃客户', '服务订单']
          },
          grid: {
            left: '3%',
            right: '6%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {

          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['第一周', '第二周', '第三周', '第四周']
          },
          yAxis: {
            type: 'value',
          },
          series: [{
              name: '活跃客户',
              type: 'line',
              stack: 'Total',
              data: this.customerArr,
              itemStyle: {
                normal: {
                  color: 'rgb(42,182,252)'
                },
              },
            },
            {
              name: '服务订单',
              type: 'line',
              stack: 'Total',
              data: this.orderArr,
              itemStyle: {
                normal: {
                  color: 'rgb(34,228,255)'
                },
              },
            }
          ]
        })
      },

      async radioPick (e) {
        this.radio = e
        if (e === 1) {
          let date = this.$moment()
          let preDate = date.add(this.config.time, this.config.unit).format("YYYY-MM-DD")
          this.leaseSelect.filter[0].value = `${this.$moment().format("YYYY-MM-DD")},${preDate}`
          this.leaseSelect.filter[1].value = ''
        }
        if (e === 2) {
          this.leaseSelect.filter[0].value = `${this.$moment(0).format("YYYY-MM-DD")},${this.$moment().format("YYYY-MM-DD")}`
          this.leaseSelect.filter[1].value = ''
        }
        if (e === 0) {
          this.leaseSelect.filter[0].value = `${this.$moment().format("YYYY-MM-DD")},2999-12-31`
          this.leaseSelect.filter[1].value = `${this.$moment(0).format("YYYY-MM-DD")},${this.$moment().format("YYYY-MM-DD")}`
        }

        this.leaseSelect.page = 1;
        await this.getLeases();
      },

      async getConfig () {
        const res = await index({
          table_name: 'warnings',
          filter: [
            {
              key: 'flag',
              op: 'eq',
              value: 'contract'
            }
          ]
        })
        this.config.time = Number(res.data[0]?.time);
        this.config.unit = res.data[0]?.unit;
      },

      async getNotices () {
        const res = await getNotice();
        this.notices = res;
        this.noticeTotal = res.length;
      },
      async getAssetSafetyPlan () {
        this.assetSafetyPlanSelect.filter[0].value = `${this.$moment().format("YYYY-MM-DD")},${this.$moment().add(this.config.time, this.config.unit).format("YYYY-MM-DD")}`
        const res = await index(this.assetSafetyPlanSelect,false);
        this.assetSafetyPlan = res.data;
        this.assetSafetyPlanTotal = res.total;
      },
      async getSystems () {
        const res = await index(this.systemSelect,false);
        this.systems = res.data;
        this.systemTotal = res.total;
      },
      async getLeases () {
        try {
          this.leaseTableLoading = true;
          const res = await index(this.leaseSelect,false);
          this.leases = res.data;
          this.leaseTotal = res.total;
          this.leaseTableLoading = false;
        }catch (e) {
          this.leaseTableLoading = false;
        }
      }
    },
    created() {
      this.getNotices();
      this.getSystems();
      this.getConfig().then(_ => {
        this.getLeases();
        this.getAssetSafetyPlan();
      })
      //this.loadData();
    },
    mounted() {

      //this.init()

      window.onresize = () => {
        this.col.resize()
        this.line.resize()
      }

    },
    destroyed() {
      window.onresize = null
    }
  }
</script>

<style lang="scss" scoped>
  .app-main{
    background-color: #fff !important;
  }
  .statistics {
    display: flex;

    margin-top: 20px;

    &-title {

      padding-left: 6px;
    }

    &-content {
      text-align: center;
      font-size: 13px;

      &-top {

        &__num {
          font-weight: 600;
        }

        &__name {
          font-size: 10px;
          color: rgb(140, 140, 140);
        }
      }

      &-bottom {
        display: flex;
        justify-content: space-between;

        &-left {

          &__num {
            font-weight: 600;
          }

          &__name {
            font-size: 10px;
            color: rgb(140, 140, 140);
          }
        }

        &-right {

          &__num {
            font-weight: 600;
          }

          &__name {
            font-size: 10px;
            color: rgb(140, 140, 140);
          }
        }
      }
    }

    &>div {
      flex: 1;
      margin-right: 20px;

      &:last-child {
        margin-right: 0;
      }
    }
  }

  .chart {
    display: flex;

    margin-top: 20px;


    .chartItem {

      width: 49%;

      .chartItemTitle {
        font-size: 16px;
        margin-bottom: 20px;
      }

      #col-chart {
        background: #fff;
        border-radius: 10px;
        flex: 1;
        margin-right: 20px;
        padding: 20px;
        box-sizing: border-box;
        min-height: 400px;
        width: 100%;
      }

      #line-chart {
        background: #fff;
        border-radius: 10px;
        flex: 1;
        padding: 20px;
        box-sizing: border-box;
        min-height: 400px;
      }
    }


  }

  .contract {

    &__title {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;

      & > h3 {
        position: relative;

        &::before {
          content: '';
          height: 14px;
          width: 140px;
          background: radial-gradient(12px 9px at 10px 40%,rgba(53, 122, 199, .6) 20%,#0000 70%) 0 0/12px 12px no-repeat,
          radial-gradient(120px 9px at 10px 40%,rgba(53, 122, 199, .6) 20%,#0000 70%) 12px 0/130px 12px no-repeat;

          position: absolute;
          bottom: -3px;
          left: -6px;
        }
      }

      .more {
        transition: all .2s;
        cursor: pointer;
        zoom: .9;

        i {
          zoom: .9;
        }

        &:hover {
          color: $primaryColor;
        }
      }
    }
  }

 .type-bar {
   display: flex;

   position: relative;
   top: 4px;
   &::before {
     content: '';
     height: .5px;
     background: #aaa;

     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
   }

   &__item {
     cursor: pointer;
     text-align: center;
     width: 80px;
     line-height: 40px;
     transition: all .2s;

     &--active {
       color: $primaryColor;
       font-weight: 600;
     }
   }
   & > svg {
     width: 80px;
     transition: all .2s;

     position: absolute;
     left: 0;
     bottom: 0;
   }
 }

 .list {

   padding: 10px 10px 0 10px;
   &-page {
     display: flex;
     justify-content: center;

     margin-top: 30px;
   }
   &-item {
     cursor: pointer;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;

     padding-left: 16px;
     position: relative;
     & > span + span {
       text-align: right;
       color: #999;
       zoom: .9;
       flex-basis: 90px;
       flex-shrink: 0;
     }
     &::before {
       content: '';
       width: 4px;
       height: 4px;
       border-radius: 100%;
       background: $primaryColor;
       transform: translateY(-50%);

       position: absolute;
       left: 0;
       top: 50%
     }
   }
   &-item + &-item {

     margin-top: 10px;
   }
 }
</style>
