<template>
  <div
    :class="'height100 bi-filter-contanier '+uuid"
    :style="{
      background: backgroundColor,
      padding: noDate ? '0' : '4px 16px 4px 0',
    }"
  >
    <div class="shadeing" v-if="buttonTitle == '收起'" @click="addRemoveDateWinToBody(false)"></div>
    <div
      class="areaClass"
      ref="selectarea"
      v-if="childArea.length > 0 && !noArea && (isShowBigScreen || areaSingle)"
    >
      <template v-if="areaOption && areaOption.name">
        <div class="titleBox">
          <el-checkbox v-model="areaNow" @change="checkArea">本院</el-checkbox>
        </div>
        <div
          class="area_tag"
          @click="clickArea"
          :class="{ area_tag_active: areaOption.isClick }"
        >{{ areaOption.name }}</div>
      </template>
      <div class="titleBox">
        <el-checkbox v-model="otherArea" @change="checkChild" :indeterminate="isIndeterminate">院区</el-checkbox>
      </div>
      <div
        class="area_tag"
        @click="clickChildArea(item, index)"
        :class="{ area_tag_active: item.isClick }"
        v-for="(item, index) in childArea.slice(0, 4)"
        :key="index"
      >{{ item.name }}</div>

      <div class="moreButton" @click="clickMore" v-if="childArea && childArea.length > 4">
        {{ buttonTitle }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </div>
      <div
        class="hideBox"
        :style="{ top: winTop, left: winLeft, width: winWidth }"
        ref="areaWin"
        v-if="buttonTitle == '收起'"
      >
        <div
          class="area_tag"
          style="margin: 2px 5px"
          @click="clickChildArea(item, index, 4)"
          :class="{ area_tag_active: item.isClick }"
          v-for="(item, index) in childArea.slice(4)"
          :key="index"
        >{{ item.name }}</div>
      </div>
    </div>

    <!-- 时间 筛选-->
    <div
      class="areaClass"
      ref="selectarea"
      v-if="
        childArea.length > 0 &&
        !noArea &&
        !areaSingle &&
        !isShowBigScreen &&
        noDate
      "
    >
      <ts-radio
        title="院区"
        v-model="areaCode"
        name
        @change="checkSingle"
        titleWidth="41px"
        :data="childAreaSingle"
        type="group"
      ></ts-radio>
    </div>

    <!-- 院区 -->
    <div
      class="timeClass"
      :style="{ height: childArea.length > 0 && !noArea ? '52px' : '68px' }"
      v-if="!noDate"
    >
      <div
        :class="[!simple||!fastKey ? 'comClass' : 'simpleClass']"
        :style="{justifyContent:(!areaSingle&&!noArea&& childAreaSingle.length>0)?'space-between':'center'}"
      >
        <!-- 假如单选 -->
        <div
          class="areaClass"
          ref="selectarea"
          v-if="childArea.length > 0 && !noArea && !areaSingle &&childAreaSingle.length>0"
        >
          <ts-radio
            title="院区"
            v-model="areaCode"
            name
            @change="checkSingle"
            titleWidth="41px"
            :data="childAreaSingle"
            type="group"
          ></ts-radio>
        </div>
        <!-- 时间选择 -->
        <div style="display: flex" v-if="!simple">
          <div class="titleBox2">时间</div>
          <div class="time_select">
            <ts-date @done="selectDate" width="100%" ref="tsdate" v-model="realTime"></ts-date>
          </div>
          <div class="year_select">
            <el-select size="mini" v-model="chooseYear" @change="selectYear" placeholder="请选择">
              <el-option
                v-for="item in sourceSelectYear.data"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <!-- <vxe-select
              v-model="chooseYear"
              placeholder="请选择"
              size="mini"
              ref="yearSelect"
              @change="selectYear"
              clearable
            >
              <vxe-option
                v-for="(year,index) of sourceSelectYear.data"
                :key="index"
                :value="year.value"
                :label="year.label"
              ></vxe-option>
            </vxe-select>-->
            <!-- <ts-select
              ref="yearSelect"
              :source="sourceSelectYear"
              :isClear="true"
              v-model="chooseYear"
              @selected="selectYear"
              width="80px"
            ></ts-select>-->
          </div>
        </div>
        <div v-else style="display: flex;align-items:center;">
          <div class="formTitle">
            <el-select size="mini" v-model="dateType" @change="changeType" placeholder="请选择">
              <el-option
                v-for="item in dateTypeOption"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div v-if="dateType == 'year'">
            <!-- <span class="formTitle">年份</span> -->
            <el-date-picker
              v-model="yearTime"
              type="year"
              :clearable="false"
              value-format="yyyy"
              @change="changeYear"
              size="mini"
              placeholder="选择年"
            ></el-date-picker>
          </div>
          <div v-else-if="dateType == 'month'">
            <!-- <span class="formTitle">月份</span> -->
            <el-date-picker
              v-model="monthTime"
              type="month"
              :clearable="false"
              value-format="yyyy-MM"
              @change="changeMonth"
              size="mini"
              placeholder="选择月"
            ></el-date-picker>
          </div>
          <div v-else>
            <span style="padding:10px;">时间</span>
            <el-date-picker
              v-model="startTime"
              align="right"
              type="date"
              :clearable="false"
              size="mini"
              value-format="yyyy-MM-dd"
              @change="changeStart"
              placeholder="选择日期"
              :picker-options="pickerOptions"
            ></el-date-picker>

            <span style="padding:5px;">-</span>
            <el-date-picker
              v-model="endTime"
              align="right"
              type="date"
              value-format="yyyy-MM-dd"
              @change="changeEnd"
              :clearable="false"
              size="mini"
              placeholder="选择日期"
              :picker-options="pickerOptions2"
            ></el-date-picker>
          </div>
          <ts-button class="searchBottom" @click="searchData">查询</ts-button>
          <!-- <div class="searchBottom">
            查询
          </div>-->
        </div>
        <!-- 时间选择edn -->
      </div>
      <div class="timeBox" v-if="!simple">
        <!-- 季度 -->
        <div
          class="timeWidth"
          :style="{ height: childArea.length > 0 && !noArea ? '24px' : '32px' }"
        >
          <div
            class="time_tag"
            :class="{
              time_tag_active: item.isClick,
              disable_class: item.disable,
            }"
            :style="{
              height: childArea.length > 0 && !noArea ? '24px' : '32px',
              lineHeight: childArea.length > 0 && !noArea ? '24px' : '32px',
            }"
            @click="clickQuarter(item, index)"
            v-for="(item, index) in quarter"
            :key="index"
          >{{ item.name }}</div>
        </div>
        <div
          class="timeWidth"
          :style="{ height: childArea.length > 0 && !noArea ? '24px' : '32px' }"
        >
          <div
            class="time_tag"
            :style="{
              height: childArea.length > 0 && !noArea ? '24px' : '32px',
              lineHeight: childArea.length > 0 && !noArea ? '24px' : '32px',
            }"
            :class="{
              time_tag_active: item.isClick,
              disable_class: item.disable,
            }"
            @click="clickMonth(item, index)"
            v-for="(item, index) in monthList"
            :key="index"
          >{{ item.name }}</div>
        </div>
      </div>
      <!-- <div class="quickBtn" v-if="fastKey" :style="{width:simple?'55px':'232px'}">
        <div
          class="quickItem"
          :style="{marginTop:simple?(index>0?'4px':'0'):(index>3?'4px':'0'),
          height:(childArea.length>0&&!noArea)?'24px':'32px',
          width:simple?'calc(100% - 6px)': 'calc(25% - 6px)' ,
          lineHeight:(childArea.length>0&&!noArea)?'24px':'32px' }"
          :class="{time_tag_active:index==quickIndex}"
          @click="clickQuick(item,index)"
          v-for="(item,index) in quickList"
          :key="index"
        >{{item.name}}</div>
      </div>-->
    </div>
    <div></div>
  </div>
</template>

<script>
// import targetInfoTab from '../targetInfoTab'
let _this = this
export default {
  name: 'biFilter',
  props: {
    initData: {
      type: [Object],
      default: () => {
        return {}
      }
    },
    value: {
      type: [Object, String],
      default: () => {
        return {}
      }
    },
    fastKey: {
      //去掉快捷方式
      type: Boolean,
      default: true
    },
    defaultTime: {
      type: [String],
      default: 'lastDay'
    },
    isShowBigScreen: {
      type: Boolean,
      default: false
    },
    simple: {
      type: Boolean,
      default: true
    },
    single: {
      //单选院区
      type: Boolean,
      default: false
    },
    areaSingle: {
      type: Boolean,
      default: false
    },
    noDate: {
      // 不显示日期
      type: Boolean,
      default: false, // 不显示日期
      type: Boolean,
      default: false
    },
    noArea: {
      // 不显示院区
      type: Boolean,
      default: false
    },
    backgroundColor: {
      type: String,
      default: '#fff'
    }
  },
  data() {
    return {
      uuid: 'biFilter' + this.$utils.uuid(6),
      dateType: 'custom',
      dateTypeOption: [
        {
          value: 'custom',
          label: '自定义'
        },
        {
          value: 'month',
          label: '月份'
        },
        {
          value: 'year',
          label: '年份'
        }
      ],
      // pickerOptions: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now() && time.getTime() < Date(_this.endTime);
      //   },
      // shortcuts: [{
      //   text: '今天',
      //   onClick(picker) {
      //     picker.$emit('pick', new Date());
      //   }
      // }, {
      //   text: '昨天',
      //   onClick(picker) {
      //     const date = new Date();
      //     date.setTime(date.getTime() - 3600 * 1000 * 24);
      //     picker.$emit('pick', date);
      //   }
      // }, {
      //   text: '一周前',
      //   onClick(picker) {
      //     const date = new Date();
      //     date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      //     picker.$emit('pick', date);
      //   }
      // }]
      // },
      monthTime: '',
      yearTime: '2022',
      startTime: '',
      endTime: '',
      quickIndex: null,
      quickList: [
        { name: '昨日', value: '1' },
        { name: '上月', value: 'prev' },
        { name: '上季', value: 'pj' },
        { name: '上年', value: 'py' },
        { name: '本月', value: 'now' },
        { name: '本季', value: 'j' },
        { name: '本年', value: 'y' },
        { name: '近3年', value: 'y3' }
      ],
      thisMonth: '',
      thisQuarter: '',
      chooseYear: '2022',
      sourceSelectYear: {
        dataType: 'local',
        code: 'value',
        text: 'label',
        data: [
          { value: '2022', label: '2022年' },
          { value: '2021', label: '2021年' },
          { value: '2020', label: '2020年' },
          { value: '2019', label: '2019年' },
          { value: '2018', label: '2018年' }
        ],
        value: {
          name: '',
          code: ''
        }
      },
      isAllyear: false,
      winWidth: '100%',
      winTop: '33px',
      winLeft: '0',
      buttonTitle: '更多',
      areaCode: '',
      nowYear: '',
      nowMonth: '',
      nowQuater: '',
      realTime: '',
      isIndeterminate: false,
      yearList: [
        // {name:'2019年',code:'2019',isClick:false},
        // {name:'2020年',code:'2020',isClick:true},
        // {name:'2021年',code:'2021',isClick:false}
      ],
      monthList: [
        { name: '1月', code: '01', isClick: false },
        { name: '2月', code: '02', isClick: false },
        { name: '3月', code: '03', isClick: false },
        { name: '4月', code: '04', isClick: false },
        { name: '5月', code: '05', isClick: false },
        { name: '6月', code: '06', isClick: false },
        { name: '7月', code: '07', isClick: false },
        { name: '8月', code: '08', isClick: false },
        { name: '9月', code: '09', isClick: false },
        { name: '10月', code: '10', isClick: false },
        { name: '11月', code: '11', isClick: false },
        { name: '12月', code: '12', isClick: false }
      ],
      quarter: [
        { name: '1季度', code: '01', isClick: false },
        { name: '2季度', code: '02', isClick: false },
        { name: '3季度', code: '03', isClick: false },
        { name: '4季度', code: '04', isClick: false }
      ],
      areaOption: {
        // name:'益阳市第三人民医院',
        // code:'01',
        // isClick:true
      },
      childArea: [],
      childAreaSingle: [],
      areaNow: true,
      otherArea: false,
      layObj: {
        title: '指标详情', // 标题
        width: '100%', // 宽
        height: '100%', // 高
        closeBtn: true // 关闭按钮区域，boolean 默认：false
      },
      item: this.isEditable
    }
  },
  async created() {
    this.getNowMonth()
    // this.areaSingle = window.areaSingle ? true : false;
    const areaOption = sessionStorage.getItem('areaOption')
    const childArea = sessionStorage.getItem('childArea')
    if (
      // 院区数据不存在，获取数据
      (!areaOption && !childArea) ||
      (areaOption &&
        Object.keys(areaOption).length == 0 &&
        childArea &&
        childArea.length == 0)
    ) {
      await this.getArea()
    } else {
      this.areaOption = areaOption ? JSON.parse(areaOption) : {}
      this.childArea = childArea ? JSON.parse(childArea) : []
      if (this.areaOption.code) {
        //如果有多院区多科室
        this.areaCode = this.areaOption.code
      } else {
        //假如就几个
        let valueList = []
        let allValue = '00'
        let childAreaSingle =
          this.childArea.length > 0
            ? this.childArea.map(res => {
                valueList.push(res.code)
                return { value: res.code, text: res.name }
              })
            : []
        if (valueList.length > 0) {
          allValue = valueList.join(',')
        }
        let deleteIndex = childAreaSingle.findIndex(res => res.text == '互联网')
        childAreaSingle.splice(deleteIndex, 1) //省人医 特殊化处理 全院需要有互联网院区数据 但是不显示互联网
        childAreaSingle.length > 0
          ? childAreaSingle.unshift({ value: allValue, text: '全院' })
          : []
        this.childAreaSingle = childAreaSingle
        this.areaCode = allValue
      }
      //  if(!this.areaCode&&this.childArea&&this.childArea.length>0){ //选中第一个院区
      //   this.clickChildArea(this.childArea[0],0)
      // }
    }
  },
  computed: {
    pickerOptions() {
      let endTime = new Date(this.endTime).getTime()
      return {
        disabledDate(time) {
          return time.getTime() >= Date.now() || time.getTime() >= endTime
        }
      }
    },
    pickerOptions2() {
      let exchange = this.startTime.replace(/-/g, '/') //是为了或者00整点的 如果-0开头默认为英国时间 换算到现在会多八小时
      let startTime = new Date(exchange).getTime()
      return {
        disabledDate(time) {
          return time.getTime() >= Date.now() || time.getTime() < startTime
        }
      }
    }
  },
  mounted() {
    // this.getNowDate(true)
    if (!this.noDate) {
      // 存在日期
      this.initDate()
    } else {
      this.changeEmit()
      // this.$emit('change', { area: this.areaCode })
    }
    // if(this.simple){
    //   this.quickList= [
    //     { name: '昨日', value: '1' },
    //     { name: '本年', value: 'y' },
    //   ]
    // }
  },
  deactivated(val) {
    this.buttonTitle = '更多'
    this.addRemoveDateWinToBody(false)
  },
  methods: {
    getNowMonth() {
      let day = new Date()
      let month = day.getMonth() + 1
      this.yearTime = day.getFullYear().toString()
      let data = []
      for (let i = 0; i < 4; i++) {
        let year = (this.yearTime - i).toString()
        data.push({
          value: year,
          label: year + '年'
        })
      }
      this.sourceSelectYear.data = data
      this.monthTime = this.yearTime + '-' + (month < 10 ? '0' + month : month)
    },

    changeType(val) {
      if (val == 'month') {
        this.changeMonth(this.monthTime)
      } else if (val == 'year') {
        this.changeYear(this.yearTime)
      } else if (val == 'custom') {
        this.realTime = this.fastBtnLink('1')
        // this.realTime = this.startTime + " ~ " + this.endTime
        // this.changeEmit();
      }
    },
    changeYear(val) {
      this.realTime = this.getRangeTime('year', Number(val))
      // this.changeEmit();
    },
    changeMonth(val) {
      let arr = []
      if (val) {
        arr = val.split('-')
      }
      this.realTime = this.getRangeTime('month', Number(arr[0]), Number(arr[1]))
      // this.changeEmit();
    },
    changeStart(val) {
      this.resetOther(this.monthList)
      this.resetOther(this.quarter)
      this.isAllyear = false
      this.nowMonth = ''
      this.quickIndex = 'null'
      this.nowQuater = ''
      let dateArr = this.realTime.split(' ~ ')
      this.realTime = val + ' ~ ' + dateArr[1]
    },
    changeEnd(val) {
      this.resetOther(this.monthList)
      this.resetOther(this.quarter)
      this.isAllyear = false
      this.nowMonth = ''
      this.quickIndex = 'null'
      this.nowQuater = ''
      let dateArr = this.realTime.split(' ~ ')
      this.realTime = dateArr[0] + ' ~ ' + val
    },
    searchData() {
      //点击查询
      this.realTime = this.startTime + ' ~ ' + this.endTime
      this.changeEmit()
    },
    checkSingle({ label }) {
      this.areaCode = label
    },
    // 点击快捷方式
    clickQuick(item, index) {
      this.resetOther(this.monthList)
      this.resetOther(this.quarter)
      this.chooseYear = this.thisYear.toString()
      this.quickIndex = index
      this.realTime = this.fastBtnLink(item.value)
    },
    getHide() {
      this.addRemoveDateWinToBody(false)
    },
    async getArea() {
      await this.$api({
        url: '/ts-query/api/user/query/table/query',
        method: 'post',
        data: {
          roleCode: '', //global.userInfo.sysRoleCode,
          userId: '', //global.userInfo.id,
          id: '611786aca31d827e6268556c'
        }
      }).then(res => {
        let allAreaList = res.rows
        if (allAreaList && allAreaList.length > 0) {
          this.initArea(allAreaList)
        }
      })
    },

    initArea(data) {
      let areaOption = {}
      let i = data.findIndex(res => res.HOSP_FLAG == 1)
      if (i != -1) {
        // 有本院
        areaOption = data.splice(i, 1)[0]
        areaOption.name = areaOption.NAME
        areaOption.code = areaOption.CODE
        areaOption.isClick = true
      }
      data.forEach((res, index) => {
        res.name = res.NAME
        res.code = res.CODE
        res.isClick = false
      })
      let childArea = data
      sessionStorage.setItem('areaOption', JSON.stringify(areaOption))
      sessionStorage.setItem('childArea', JSON.stringify(childArea))
      this.areaOption = areaOption
      this.childArea = childArea
      this.areaOption = areaOption
      this.childArea = childArea
      if (this.areaOption.code) {
        //如果有多院区多科室
        this.areaCode = this.areaOption.code
      } else {
        //假如就几个
        let valueList = []
        let allValue = '00'
        let childAreaSingle =
          this.childArea.length > 0
            ? this.childArea.map(res => {
                valueList.push(res.code)
                return { value: res.code, text: res.name }
              })
            : []
        if (valueList.length > 0) {
          allValue = valueList.join(',')
        }
        let deleteIndex = childAreaSingle.findIndex(res => res.text == '互联网')
        childAreaSingle.splice(deleteIndex, 1)
        childAreaSingle.length > 0
          ? childAreaSingle.unshift({ value: allValue, text: '全院' })
          : []
        this.childAreaSingle = childAreaSingle
        this.areaCode = allValue
      }
      // if(!this.areaCode&&this.childArea&&this.childArea.length>0){
      //   this.clickChildArea(this.childArea[0],0)  //选中分院
      // }
    },
    // getArea2() {
    //   let _this = this
    //   this.$api({
    //     url: '/ts-query/api/user/query/table/query',
    //     method: 'post',
    //     data: {
    //       id: '611786aca31d827e6268556c'
    //     }
    //   }).then(res => {
    //     _this.allAreaList = res.rows
    //     if (_this.allAreaList.length && _this.allAreaList.length > 0) {
    //       this.initArea(_this.allAreaList)
    //     }
    //   })
    // },
    // getArea() {
    //   let _this = this
    //   this.$api({
    //     url: 'ts-system/dept/deptlist',
    //     method: 'get',
    //     data: {
    //       rows: 15,
    //       page: 1,
    //       // sidx: 'deptcode',
    //       // deptcode:'430903000000',
    //       pdcode: '430903000000',
    //       // nd:new Date().getTime(),
    //       _search: true,
    //       status: 1
    //     }
    //   }).then(res => {
    //     _this.allAreaList = res.rows
    //     if (_this.allAreaList.length && _this.allAreaList.length > 0) {
    //       this.initArea(_this.allAreaList)
    //     }
    //   })
    // },
    // initArea(data) {
    //   let i = data.findIndex(res => res.HOSP_FLAG == 1)
    //   this.areaOption = data.splice(i, 1)[0]
    //   this.areaOption.name = this.areaOption.NAME
    //   this.areaOption.code = this.areaOption.CODE
    //   this.areaOption.isClick = true
    //   data.forEach((res, index) => {
    //     res.name = res.NAME
    //     res.code = res.CODE
    //     res.isClick = false
    //   })
    //   this.childArea = data
    // },
    clickMore() {
      if (this.buttonTitle == '更多') {
        this.buttonTitle = '收起'
        this.$nextTick(() => {
          // this.addRemoveDateWinToBody(true)
        })
      } else {
        // this.addRemoveDateWinToBody(false)
      }
    },

    addRemoveDateWinToBody(type) {
      // const elm = this.$refs.selectarea.getBoundingClientRect()
      // this.winLeft = elm.left + 'px'
      // this.winTop = elm.top + 33 + 'px'
      // this.winWidth = elm.width + 'px'
      // this.$nextTick(() => {
      //   const body = document.querySelector('body')
      if (type) {
        //     // 显示
        //     let areaWin = this.$refs.areaWin
        //     let pTabName = areaWin.parentNode ? areaWin.parentNode.tagName : ''
        //     if (pTabName != 'body') {
        //       // 未加入，body，选择加入
        //       if (body.append) {
        //         body.append(areaWin)
        //       } else {
        //         body.appendChild(areaWin)
        //       }
        //     }
      } else {
        this.buttonTitle = '更多'
        //     // 隐藏
        //     body.removeChild(body.lastChild)
      }
      // })
    },
    selectDate(e) {
      this.resetOther(this.monthList)
      this.resetOther(this.quarter)
      this.isAllyear = false
      this.nowMonth = ''
      this.quickIndex = 'null'
      this.nowQuater = ''
      this.changeEmit()
    },
    getNowDate(isFirst) {
      let nowDate = new Date()
      let year = nowDate.getFullYear()
      let month = nowDate.getMonth()
      this.thisYear = year
      this.thisMonth = month
      if (this.defaultTime == 'lastMonth') {
        if (month == 0) {
          return
        }
      }
      if (this.defaultTime == 'lastDay') {
        return
      }
      if (month == 0 || month == 1 || month == 2) {
        this.thisQuarter = 0
      } else if (month == 3 || month == 4 || month == 5) {
        this.thisQuarter = 1
      } else if (month == 6 || month == 7 || month == 8) {
        this.thisQuarter = 2
      } else if (month == 9 || month == 10 || month == 11) {
        this.thisQuarter = 3
      }
      this.monthList.forEach((res, m) => {
        if (m > this.thisMonth) {
          res.isClick = false
          res.disable = true
        } else {
          res.isClick = true
          // (isFirst && m == this.thisMonth-1) || !isFirst ? true : false
        }
      })

      this.quarter.forEach((res, m) => {
        if (m > this.thisQuarter) {
          res.isClick = false
          res.disable = true
        } else {
          res.isClick = true
          // res.isClick = isFirst ? false : true
        }
      })
    },
    initDataFn(n) {
      let obj = {
        area: n.orgIds,
        s: n.beginDate,
        e: n.endDate
      }
      this.realTime = n.beginDate + ' ~ ' + n.endDate
      this.areaCode = n.orgIds
      this.startTime = n.beginDate
      this.endTime = n.endDate
    }, //初始化赋值
    //默认当前月
    initDate() {
      let nowDate = new Date()
      if (this.realTime) {
        //假如有初始值
        let arr = this.realTime.split(' ~ ')
        nowDate = new Date(arr[0])
      }
      let year = nowDate.getFullYear()
      let month = nowDate.getMonth()
      this.nowYear = year
      this.nowMonth = month

      for (let i = 2; i >= 0; i--) {
        this.yearList.push({
          name: year - i + '年',
          isClick: year == year - i,
          code: year - i
        })
      }
      if (this.initData && this.initData.beginDate) {
        //初始化数据 默认的日期或者院区
        this.initDataFn(this.initData)
        return
      }
      if (this.defaultTime == 'lastMonth') {
        if (month == 0) {
          this.monthList[11].isClick = true //上个月
          year = year - 1
          month = 12
          this.chooseYear = year.toString()
          this.nowYear = year
          this.yearTime = year.toString()
          this.$forceUpdate()
        } else {
          this.monthList[month - 1].isClick = true //上个月
        }
        this.$forceUpdate()
        this.realTime = this.getRangeTime('month', year, month, true)
      } else if (this.defaultTime == 'nowMonth') {
        this.monthList[month].isClick = true
        this.$forceUpdate()
        this.realTime = this.getRangeTime('month', year, month + 1, true)
      } else {
        this.quickIndex = 0
        this.realTime = this.fastBtnLink('1')
      }
    },
    // 左侧快捷按钮
    fastBtnLink(type) {
      let startDate = ''
      let endDate = ''
      let realTime = ''
      let date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      let d = date.getDate()
      let _date =
        y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)
      let q = 1
      switch (true) {
        case m < 4:
          q = 1
          break
        case m > 3 && m < 7:
          q = 2
          break
        case m > 6 && m < 10:
          q = 3
          break
        case m > 9 && m < 13:
          q = 4
          break
      }
      if (type === 'now') {
        startDate = y + '-' + (m < 10 ? '0' + m : m) + '-01'
        endDate = y + '-' + (m < 10 ? '0' + m : m) + '-' + this.days(y, m)
        this.monthList[m - 1].isClick = true
      } else if (type === 'prev') {
        m -= 1
        if (m < 1) {
          m = 12
          y -= 1
        }
        this.monthList[m - 1].isClick = true
        startDate = y + '-' + (m < 10 ? '0' + m : m) + '-01'
        endDate = y + '-' + (m < 10 ? '0' + m : m) + '-' + this.days(y, m)
      } else if (type === 'j') {
        // 当季度
        let _q = this.getQuarterDate(y, q)
        startDate = _q.s
        endDate = _q.e
      } else if (type === 'pj') {
        // 上个季度
        let _y = q - 1 < 1 ? y - 1 : y
        q = q - 1 < 1 ? 4 : q - 1
        let _q = this.getQuarterDate(_y, q)
        startDate = _q.s
        endDate = _q.e
      } else if (type === 'y') {
        // 今年
        startDate = y + '-' + '01-01'
        endDate = y + '-' + '12-31'
      } else if (type === 'py') {
        // 去年
        var _y = y - 1
        this.nowYear = _y
        this.chooseYear = _y.toString()
        startDate = _y + '-' + '01-01'
        endDate = _y + '-' + '12-31'
      } else if (type === '1') {
        startDate = this.beforeDate(_date, parseInt(type))
        endDate = this.beforeDate(_date, parseInt(type))
      } else if (type == 'y3') {
        startDate = y - 3 + '-' + '01-01'
        endDate = y + '-' + '12-31'
      } else {
        startDate = this.beforeDate(_date, parseInt(type))
        endDate = _date
      }

      realTime = startDate + ' ~ ' + endDate
      let dateArr = realTime.split(' ~ ')
      let obj = {
        area: this.areaCode,
        s: dateArr[0],
        e: dateArr[1]
      }
      this.startTime = dateArr[0]
      this.endTime = dateArr[1]
      this.changeEmit(obj)
      return realTime
    },
    // 月天数
    days(y, m) {
      const d = new Date(y, m, 0)
      return d.getDate()
    },
    // 季度时间
    getQuarterDate(y, q) {
      let d = {}
      switch (q) {
        case 1:
          d.s = y + '-' + '01-01'
          d.e = y + '-' + '03-31'
          break
        case 2:
          d.s = y + '-' + '04-01'
          d.e = y + '-' + '06-30'
          break
        case 3:
          d.s = y + '-' + '07-01'
          d.e = y + '-' + '09-30'
          break
        case 4:
          d.s = y + '-' + '10-01'
          d.e = y + '-' + '12-31'
          break
      }
      this.quarter[q - 1].isClick = true
      this.nowMonth = ''
      this.nowQuater = q
      this.setMonth(q - 1) //点击季度选择相应的月份
      return d
    },
    // 相隔n天日期
    beforeDate(date, days) {
      if (days == undefined || days == '') {
        days = 0
      }
      if (days == undefined || days == '') {
        days = 0
      }
      date = date ? new Date(date) : new Date()
      date.setDate(date.getDate() - days)
      let m = date.getMonth() + 1
      let day = date.getDate()
      return (
        date.getFullYear() +
        '-' +
        (m < 10 ? '0' + m : m) +
        '-' +
        (day < 10 ? '0' + day : day)
      )
    },
    //获取当前选中的时间
    getRangeTime(type, year, num, first) {
      let realTime = ''
      if (type == 'month') {
        //获取某一个月第一天和最后一天
        this.isAllyear = false
        let nowDate = new Date(year, num, 1)
        let nextMonth = num
        let nextMonthFirstDay = new Date(nowDate.getFullYear(), nextMonth, 1)
        let oneDay = 1000 * 60 * 60 * 24
        let lastTime = new Date(nextMonthFirstDay - oneDay)
        let endMonth = parseInt(lastTime.getMonth() + 1)
        let endDay = lastTime.getDate()
        if (endMonth < 10) {
          endMonth = '0' + endMonth
        }
        if (endDay < 10) {
          endDay = '0' + endDay
        }
        let startTime = year + '-' + (num < 10 ? '0' + num : num) + '-01'
        let endTime = year + '-' + endMonth + '-' + endDay
        realTime = startTime + ' ~ ' + endTime
      } else if (type == 'quarter') {
        //获取某个季度第一天和最后一天
        this.isAllyear = false
        if (num == 1) {
          realTime = year + '-01-01' + ' ~ ' + year + '-03-31'
        } else if (num == 2) {
          realTime = year + '-04-01' + ' ~ ' + year + '-06-30'
        } else if (num == 3) {
          realTime = year + '-07-01' + ' ~ ' + year + '-09-30'
        } else if (num == 4) {
          realTime = year + '-10-01' + ' ~ ' + year + '-12-31'
        }
      } else if (type == 'year') {
        //获取某一年第一天和最后一天
        this.isAllyear = true
        realTime = year + '-01-01' + ' ~ ' + year + '-12-31'
      }
      let dateArr = realTime.split(' ~ ')
      let obj = {
        area: this.areaCode,
        s: dateArr[0],
        e: dateArr[1]
      }
      this.startTime = dateArr[0]
      this.endTime = dateArr[1]
      // //
      // if(!first){ // 为了维持旧状，首次渲染可进入change
      this.changeEmit(obj)
      // }
      return realTime
    },
    checkYear() {
      this.resetOther(this.monthList)
      this.resetOther(this.quarter)
      this.realTime = this.getRangeTime('year', this.nowYear)
    },
    checkArea() {
      this.areaOption.isClick = this.areaNow
      this.areaCode = this.getCode(this.childArea)
    },
    clickArea() {
      this.areaOption.isClick = !this.areaOption.isClick
      this.areaNow = this.areaOption.isClick
      this.areaCode = this.getCode(this.childArea)
    },
    checkChild() {
      this.isIndeterminate = false
      if (this.otherArea) {
        this.resetOther(this.childArea, true)
      } else {
        this.resetOther(this.childArea)
      }
      this.areaCode = this.getCode(this.childArea)
    },
    //分院点击
    clickChildArea(item, index, num) {
      if (item.isClick == false) {
        this.childArea[index + (num || 0)].isClick = true
        this.isIndeterminate = true
      } else {
        this.childArea[index + (num || 0)].isClick = false
      }
      //  获取选取的院区节点
      this.areaCode = this.getCode(this.childArea)
      //是否全选分院
      this.otherArea = this.childArea.every(res => res.isClick)
      let isOne = this.childArea.some(res => res.isClick)
      if (!isOne) {
        this.isIndeterminate = false
      } else {
        this.isIndeterminate = true
      }
      if (this.otherArea) {
        this.isIndeterminate = false
      }
    },
    getCode(data) {
      //本院区
      let mainArea = this.areaOption.isClick ? this.areaOption.code : ''
      let codeArr = []
      let childCode = ''
      if (data && data.length > 0) {
        data.forEach(res => {
          if (res.isClick) {
            codeArr.push(res.code)
          }
        })
      }
      childCode = codeArr.length > 0 ? (childCode = codeArr.join(',')) : ''
      if (mainArea && childCode) {
        return mainArea + ',' + childCode
      } else {
        if (mainArea) {
          return mainArea
        } else if (childCode) {
          return childCode
        } else {
          return ''
        }
      }
    },
    //选择年份
    selectYear(value) {
      if (!value) {
        return
      }
      let _this = this
      this.quickIndex = null
      this.nowYear = value
      if (this.thisYear == value) {
        this.getNowDate()
      } else {
        this.monthList.forEach(res => {
          res.disable = false
        })
        this.quarter.forEach(item => {
          item.disable = false
        })
      }
      if (this.thisYear == value) {
        this.monthList.forEach((res, m) => {
          if (m > _this.thisMonth) {
            res.disable = true
            res.isClick = false
          } else {
            res.isClick = true
          }
        })
        this.quarter.forEach((res, m) => {
          if (m > this.thisQuarter) {
            res.disable = true
            res.isClick = false
          } else {
            res.isClick = true
          }
        })
      } else {
        this.monthList.forEach((res, m) => {
          res.isClick = true
        })
        this.quarter.forEach((res, m) => {
          res.isClick = true
        })
      }

      this.realTime = this.getRangeTime('year', this.nowYear)
    },
    resetOther(data, type) {
      if (type) {
        //假如有值
        data.forEach(res => {
          res.isClick = type
        })
      } else {
        data.forEach(res => {
          res.isClick = false
        })
      }
      this.$forceUpdate()
    },
    //选择月份
    clickMonth(item, index) {
      if (true) {
        this.resetOther(this.monthList)
        this.resetOther(this.quarter)
        this.monthList[index].isClick = true
        this.nowMonth = index + 1
        this.nowQuater = ''
        this.quickIndex = null
        //点击当前月
        this.realTime = this.getRangeTime('month', this.nowYear, index + 1)
      } else {
        return
        //取消当前月
        // this.monthList[index].isClick = false
        // this.nowMonth = ''
        // this.nowQuater = ''
        // this.realTime = this.getRangeTime('year', this.nowYear)
      }
    },
    setMonth(index) {
      this.monthList.forEach((res, i) => {
        if (index == 0) {
          if (i == 0 || i == 1 || i == 2) {
            res.isClick = true
          }
        } else if (index == 1) {
          if (i == 3 || i == 4 || i == 5) {
            res.isClick = true
          }
        } else if (index == 2) {
          if (i == 6 || i == 7 || i == 8) {
            res.isClick = true
          }
        } else if (index == 3) {
          if (i == 9 || i == 10 || i == 11) {
            res.isClick = true
          }
        }
      })
    },
    // 选择季度
    clickQuarter(item, index) {
      if (true) {
        this.quickIndex = null
        this.resetOther(this.quarter)
        this.resetOther(this.monthList)
        this.quarter[index].isClick = true
        this.nowMonth = ''
        this.nowQuater = index + 1
        this.setMonth(index) //点击季度选择相应的月份
        this.realTime = this.getRangeTime('quarter', this.nowYear, index + 1)
      } else {
        return
        // this.nowMonth = ''
        // this.nowQuater = ''
        // this.realTime = this.getRangeTime('year', this.nowYear)
        // this.quarter[index].isClick = false
      }
    },
    changeEmit(obj) {
      if (this.noDate) {
        // 取消日期
        this.$emit('change', { area: this.areaCode })
      } else {
        let dateArr = this.realTime.split(' ~ ')
        let obj_ = obj || {
          area: this.areaCode,
          s: dateArr[0],
          e: dateArr[1]
        }
        if (this.noArea) {
          delete obj_.area
        }
        this.$emit('change', obj_)
      }
    }
  },
  watch: {
    value: {
      handler(val) {
        //初始值
        if (this.$refs.tsdate) {
          this.$refs.tsdate.valueInit = true //初始化为true
        }
        this.realTime = val
      }
    },
    initData: {
      handler(val) {
        this.initDataFn(val)
      },
      deep: true
    },
    areaCode: {
      handler(n, o) {
        if (!o || !n) {
          return
        }
        this.changeEmit()
      }
    },
    realTime: {
      handler(val) {
        this.$emit('input', val)
      }
    }
  },
  beforeDestroy: function() {
    this.buttonTitle = '更多'
    this.addRemoveDateWinToBody(false)
  }
}
</script>
<style lang="less" scoped>
.searchBottom {
  margin: 0 10px;
}
.formTitle {
  padding: 0 5px 0 13px;
}

/deep/.el-input--mini .el-input__inner {
  height: 26px;
  line-height: 26px !important;
}
/deep/.el-input--mini .el-input__icon {
  line-height: 26px;
}
/deep/ .el-select--mini {
  width: 85px;
}
/deep/.el-date-editor.el-input {
  width: 140px;
  .el-input__prefix {
    right: 0;
    left: auto;
  }
}
.quickBtn {
  height: 100%;
  width: 232px;
  margin: 0 10px;
}
.quickItem {
  color: #313233;
  background: #f0f7ff;
  text-align: center;
  width: calc(25% - 6px);
  height: 24px;
  line-height: 24px;
  border-radius: 4px;
  box-sizing: border-box;
  cursor: pointer;
  margin: 0px 2px;
  float: left;
}
/deep/.form__title {
  text-align: center;
}
@media (max-width: 1366px) {
  .timeWidth {
    width: 400px;
    display: flex;
    align-items: center;
    height: 24px;
  }
}
@media (min-width: 1366px) {
  .timeWidth {
    width: 524px;
    display: flex;
    align-items: center;
    height: 24px;
  }
}
@media (min-width: 1920px) {
  .timeWidth {
    width: 624px;
    display: flex;
    align-items: center;
    height: 24px;
  }
}
.bi-filter-contanier {
  display: flex;
  flex-direction: column;
  justify-content: center;
  // align-items: center;
  border-radius: 8px;
  // border: 1px solid var(--border_color);
  // background: #f3f8fd;
  box-sizing: border-box;
  width: 100%;
  /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
    color: #606266;
  }
  .moreButton {
    height: 24px;
    width: 80px;
    line-height: 24px;
    font-size: 12px;
    border: 1px solid #e7e7e7;
    background: #fff;
    cursor: pointer;
    text-align: center;
    border-radius: 4px;
  }
  /deep/.form__box {
    margin-bottom: 0;
  }
  .time_month {
    padding-left: 12px;
    display: flex;
    align-items: center;
  }
  .time_select {
    width: 210px;
    display: flex;
    align-items: center;
    padding: 0 5px 0 0;
  }
  .year_select {
    width: 80px;
    display: flex;
    align-items: center;
    padding: 0 5px 0 0;
    /deep/.vxe-select--panel {
      position: fixed;
    }
  }
  .time_first {
    width: 275px;
    display: flex;
    justify-content: space-between;
  }
  .hideBox {
    box-sizing: border-box;
    width: 100%;
    min-height: 60px;
    height: auto;
    padding: 2px 10px 10px 80px;
    background: #fff;
    position: absolute;
    transition: all 2s ease;
    z-index: 999;
    position: fixed;
    // animation: sideOut 0.5s ease;
  }
  @keyframes sideOut {
    from {
      opacity: 0.8;
      top: 25px;
    }
    to {
      opacity: 1;
      top: 33px;
    }
  }

  .time_tag {
    flex: 1;
    cursor: pointer;
    // margin: 0 3px;
    background-color: #f0f7ff;
    display: inline-block;
    height: 24px;
    text-align: center;
    // padding: 0 20px;
    margin: 0 2px;
    line-height: 24px;
    font-size: 12px;
    color: #333;
    // border: 1px solid rgb(242, 242, 242);
    border-radius: 4px;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .time_tag:hover {
    color: var(--base-acv);
  }
  .time_tag_active:hover {
    color: #fff;
  }
  .disable_class {
    // background: #ddd;
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.6;
  }
  .padding13 {
    padding: 0 13px !important;
  }
  .padding10 {
    padding: 0 10px !important;
  }
  .time_tag_active {
    color: #fff;
    // border: 1px solid #d9ecff;
    background-color: var(--base-acv);
  }
  .area_tag {
    background-color: #f0f7ff;
    border: none;
  }
  .titleBox2 {
    width: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 13px 0 13px;
    height: 100%;
    text-align: center;
  }
  .titleBox {
    width: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    padding: 0 10px 0 18px;
    text-align: right;
  }
  .comClass {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .simpleClass {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .timeBox {
    height: 100%;
    // display: flex;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 5px;
    .timeLine {
      height: auto;
      display: flex;
      align-items: center;
    }
  }
  .timeClass {
    height: 52px;
    display: flex;
    // padding: 0 5px 5px;
    font-size: 12px;
  }
}
</style>
