<template>
  <transition name="slide">
    <div class="index-container">
      <Loading v-show="isLoading"/>
      <!--标题-->
      <mt-header class="header" title="工单查询" fixed>
        <div slot="left">
          <mt-button icon="back" @click="$router.back(-1)"></mt-button>
        </div>
      </mt-header>
      <div class="listbody">
        <div class="well-info-card">
          <!--<div class="well-title">-->
          <mt-field label="井编号" placeholder="请输入井编号" v-model="listQuery.keywords"></mt-field>
          <div class="well-info">
            <div class="search-name">告警内容</div>
            <div class="search-value">
              <span class="search-btn" v-for="item of alarmContentList">
                <div class="select-item" :class="listQuery.alarmContent==item.value?'selected-item':''"
                     @click="selectAlarmContentType(item.value)">{{item.name}}</div>
              </span>
            </div>
          </div>
          <div class="well-info">
            <div class="search-name">告警等级</div>
            <div class="search-value">
              <span class="search-btn" v-for="item of levelList">
                <div class="select-item" :class="listQuery.alarmLevel==item.value?'selected-item':''"
                     @click="selectAlarmLevel(item.value)">{{item.name}}</div>
              </span>
            </div>
          </div>
          <div class="well-info">
            <div class="search-name">工单状态</div>
            <div class="search-value">
              <span class="search-btn" v-for="item of jobStatusList">
                <div class="select-item" :class="listQuery.jobStatus==item.value?'selected-item':''"
                     @click="selectJobStatus(item.value)">{{item.name}}</div>
              </span>
            </div>
          </div>
          <!--<mt-field label="接单开始时间" placeholder="" v-model="listQuery."></mt-field>-->
          <mt-cell title="创建开始时间" :value="listQuery.beginTime"
                   @click.native="openTimeSelectWindow('beginTimePicker')"></mt-cell>
          <mt-cell title="创建结束时间" :value="listQuery.endTime"
                   @click.native="openTimeSelectWindow('endTimePicker')"></mt-cell>
          <!--<mt-cell title="接单时间" :value="listQuery.getJobBeginTime" @click.native="openTimeSelectWindow('getBeginTimePicker')"></mt-cell>-->
          <!--<mt-cell title="" :value="listQuery.getJobEndTime" @click.native="openTimeSelectWindow('getEndTimePicker')"></mt-cell>-->
          <!--<mt-cell title="应接单开始时间" :value="listQuery.shouldGetBeginTime" @click.native="openTimeSelectWindow('shouldGetBeginTimePicker')"></mt-cell>-->
          <!--<mt-cell title="应接单结束时间" :value="listQuery.shouldGetEndTime" @click.native="openTimeSelectWindow('shouldGetEndTimePicker')"></mt-cell>-->
          <!--<mt-cell title="处理开始时间" :value="listQuery.handleJobBeginTime" @click.native="openTimeSelectWindow('handleBeginTimePicker')"></mt-cell>-->
          <!--<mt-cell title="处理结束时间" :value="listQuery.handleJobEndTime" @click.native="openTimeSelectWindow('handleEndTimePicker')"></mt-cell>-->
          <!--<mt-cell title="应处理开始时间" :value="listQuery.shouldHandleBeginTime" @click.native="openTimeSelectWindow('shouldHandleBeginTimePicker')"></mt-cell>-->
          <!--<mt-cell title="应处理结束时间" :value="listQuery.shouldHandleEndTime" @click.native="openTimeSelectWindow('shouldHandleEndTimePicker')"></mt-cell>-->
          <!--<div class="well-info">-->
          <!--<div class="search-name">接单开始时间</div>-->
          <!--<div class="search-value">-->

          <!--</div>-->
          <!--</div>-->
          <div class="row-block">
            <mt-button class="search-btn" type="primary" @click="beginSearch()">查询</mt-button>
            <mt-button class="clear-btn" type="default" @click="cleanSearch()">清空</mt-button>
          </div>

        </div>
      </div>
      <!--<mt-popup-->
      <!--v-model="popupVisible"-->
      <!--position="bottom">-->
      <!--<mt-picker :slots="levelList" @change="onValuesChange"></mt-picker>-->
      <!--</mt-popup>-->
      <!--时间选择器-->
      <div>
        <!--创建开始时间-->
        <mt-datetime-picker
          ref="beginTimePicker"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          v-model="dateForm.beginTime"
          @confirm="handleConfirm('beginTime')">
        </mt-datetime-picker>
        <!--创建结束时间-->
        <mt-datetime-picker
          ref="endTimePicker"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          v-model="dateForm.endTime"
          @confirm="handleConfirm('endTime')">
        </mt-datetime-picker>
        <!--接单开始时间-->
        <mt-datetime-picker
          ref="getBeginTimePicker"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          v-model="dateForm.getJobBeginTime"
          @confirm="handleConfirm('getJobBeginTime')">
        </mt-datetime-picker>
        <!--接单结束时间-->
        <mt-datetime-picker
          ref="getEndTimePicker"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          v-model="dateForm.getJobEndTime"
          @confirm="handleConfirm('getJobEndTime')">
        </mt-datetime-picker>
        <!--应接单开始时间-->
        <mt-datetime-picker
          ref="shouldGetBeginTimePicker"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          v-model="dateForm.shouldGetBeginTime"
          @confirm="handleConfirm('shouldGetBeginTime')">
        </mt-datetime-picker>
        <!--应接单结束时间-->
        <mt-datetime-picker
          ref="shouldGetEndTimePicker"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          v-model="dateForm.shouldGetEndTime"
          @confirm="handleConfirm('shouldGetEndTime')">
        </mt-datetime-picker>
        <!--处理开始时间-->
        <mt-datetime-picker
          ref="handleBeginTimePicker"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          v-model="dateForm.handleJobBeginTime"
          @confirm="handleConfirm('handleJobBeginTime')">
        </mt-datetime-picker>
        <!--处理结束时间-->
        <mt-datetime-picker
          ref="handleEndTimePicker"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          v-model="dateForm.handleJobEndTime"
          @confirm="handleConfirm('handleJobEndTime')">
        </mt-datetime-picker>
        <!--处理开始时间-->
        <mt-datetime-picker
          ref="shouldHandleBeginTimePicker"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          v-model="dateForm.shouldHandleBeginTime"
          @confirm="handleConfirm('shouldHandleBeginTime')">
        </mt-datetime-picker>
        <!--处理结束时间-->
        <mt-datetime-picker
          ref="shouldHandleEndTimePicker"
          type="date"
          year-format="{value} 年"
          month-format="{value} 月"
          date-format="{value} 日"
          v-model="dateForm.shouldHandleEndTime"
          @confirm="handleConfirm('shouldHandleEndTime')">
        </mt-datetime-picker>
      </div>
    </div>
  </transition>
</template>

<script>
  import {getAlarmContentType, getJobStatus} from '@/api/job'
  import {formatDate} from '@/utils/dateutils'
  import Loading from '@/components/Loading'
  let isFromDetail = false // 是否来自SearchList
  export default {
    name: "searchPage",
    components: {
      Loading
    },
    data() {
      return {
        listQuery: {
          keywords: '', // 关键字
          alarmLevel: '', // 告警等级
          alarmType: '1', // 告警类型
          alarmContent: '', // 告警内容
          jobStatus: '', // 工单状态
          beginTime: '点击选择开始时间', // 工单开始时间
          endTime: '点击选择结束时间', // 工单结束时间
          getJobBeginTime: '',// 接单开始时间
          getJobEndTime: '',// 接单结束时间
          shouldGetBeginTime: '',// 应接单开始时间
          shouldGetEndTime: '',// 应接单结束时间
          handleJobBeginTime: '',// 处理开始时间
          handleJobEndTime: '',// 接单结束时间
          shouldHandleBeginTime: '',// 应处理开始时间
          shouldHandleEndTime: '',// 应处理结束时间
          offset: 1,
          limit: 20,
          sort: '',
          order: ''
        }, // 筛选条件表单
        dateForm: {
          beginTime: new Date(),// 接单开始时间
          endTime: new Date(),// 接单结束时间
          etJobBeginTime: new Date(),// 接单开始时间
          getJobEndTime: new Date(),// 接单结束时间
          shouldGetBeginTime: '',// 应接单开始时间
          shouldGetEndTime: '',// 应接单结束时间
          handleJobBeginTime: '',// 处理开始时间
          handleJobEndTime: '',// 接单结束时间
          shouldHandleBeginTime: '',// 应处理开始时间
          shouldHandleEndTime: '',// 应处理结束时间
        },
        levelList: [
          {name: '全部', value: ''},
          {name: '一级', value: 1},
          {name: '二级', value: 2},
          {name: '三级', value: 3}
        ],// 告警等级列表
        isLoading: true, //加载动画
        alarmContentList: [], // 告警内容类型列表
        jobStatusList: [] // 工单状态列表
      }
    },
    beforeRouteEnter(to, from, next) {
      if (from.name) {
        if (from.name.indexOf('searchList') === -1) {
          isFromDetail = false
        } else {
          isFromDetail = true
        }
      } else {
        isFromDetail = false
      }
      next()
    },
    mounted() {
      this.isLoading = true
      this.fetchJobStatus()
      this.fetchAlarmContentType()
    },
    methods: {
      // 获取工单状态列表
      fetchJobStatus() {
        const jobStatusList = [{
          name: '全部',
          value: ''
        }]
        getJobStatus().then(response => {
          this.jobStatusList = [...jobStatusList, ...response.data]
        })
      },
      fetchAlarmContentType() {
        this.alarmContentList = [{
          name: '全部',
          value: ''
        }]
        getAlarmContentType('1').then(response => {
          // const supportDeviceTypes = this.$store.getters.deviceTypes
          for (const item of response.data.list) {
            // if (supportDeviceTypes.indexOf(item.deviceType) !== -1) {
            this.alarmContentList.push(item)
            this.isLoading = false
            // }
          }
        })
      },
      // 打开选择时间弹窗
      openTimeSelectWindow(timePicker) {
        this.$refs[timePicker].open()
      },
      // 时间选择确定后，格式化
      handleConfirm(item) {
        console.log(this.dateForm[item])
        this.listQuery[item] = formatDate(this.dateForm[item])
      },
      selectAlarmContentType(value) {
        this.listQuery.alarmContent = value
      },
      selectAlarmLevel(value) {
        this.listQuery.alarmLevel = value
      },
      selectJobStatus(value) {
        this.listQuery.jobStatus = value
      },
      beginSearch() {
        const listQuery = this.listQuery
        if (listQuery.beginTime === '点击选择开始时间') {
          listQuery.beginTime = ''
        }
        if (listQuery.endTime === '点击选择结束时间') {
          listQuery.endTime = ''
        }
        this.$router.push({name: 'searchList', query: {listQuery}})
      },
      cleanSearch() {
        this.listQuery = {
          keywords: '', // 关键字
          alarmLevel: '', // 告警等级
          alarmType: '', // 告警类型
          alarmContent: '', // 告警内容
          jobStatus: '', // 工单状态
          beginTime: '点击选择开始时间', // 工单开始时间
          endTime: '点击选择结束时间', // 工单结束时间
          getJobBeginTime: '',// 接单开始时间
          getJobEndTime: '',// 接单结束时间
          shouldGetBeginTime: '',// 应接单开始时间
          shouldGetEndTime: '',// 应接单结束时间
          handleJobBeginTime: '',// 处理开始时间
          handleJobEndTime: '',// 接单结束时间
          shouldHandleBeginTime: '',// 应处理开始时间
          shouldHandleEndTime: '',// 应处理结束时间
          offset: 1,
          limit: 20,
          sort: '',
          order: ''
        }
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  .listbody {
    margin-top 40px
    padding 0.4rem 0
    .well-info-card {
      margin 5px 1vw 0px 1vw
      background-color #ffffff
      border 1px solid #f0f0f0
      border-radius 4px
      padding 1rem 1rem
      .well-title {
        padding-left 1rem
        line-height 2rem
        margin-bottom 0.6rem
        .title-left {
          font-size 1.2rem
          font-weight 600
          color: #000
        }
        .title-right {
          font-size 0.8rem
          float right
          margin-right 1rem
          color: #a7a7a7
        }
      }
      .well-info {
        overflow auto
        /*border-bottom 1px solid #f0f0f0*/
        padding 0.5rem 1rem 0rem 0rem
        line-height: 1.5rem
        /*font-size: 1rem*/
        .search-btn {
          margin: 5px
          line-height 40px
          font-size:16px
          float left
        }
        .search-name {
          line-height 30px
          font-size 16px
          font-weight 400
          margin-left 15px
        }
        .search-value {
          margin-left 10px
        }
        .select-item {
          display inline-block
          float: left
          width: auto
          background-color #f6f6f6
          padding 5px 10px
          line-height 20px
          border-radius 3px
          font-size: 15px
        }
        .selected-item {
          background-color #246af7
          color: #ffffff
        }
        .info-name {
          float left
        }
        .info-value {
          float right
          color #4b4b4b
          max-width 70%
          text-align right
        }
        .text-red {
          color: red
        }
        .text-blue {
          color: #1d55c6
        }
      }
    }
    .well-info-button {
      overflow auto
      padding 0.2rem 1rem 0.2rem 1rem
      line-height: 1.2rem
      font-size: 0.9rem
      .info-name {
        float left
      }
      .info-value {
        float right
        color #4b4b4b
        max-width 60%
        text-align right
      }
    }
    .mint-cell .mint-cell-wrapper .mint-cell-title .mint-cell-text{
      font-size: 10px !important
    }
    .mint-cell {
      font-size: 10px !important
      .mint-cell-wrapper .mint-cell-title {
        font-size: 10px !important
        .mint-cell-text {
          font-size: 10px !important
        }
      }
    }
    .well-info:last-child {
      border-bottom none
    }
    textarea {
      width: 80vw
      margin-left 5px
    }
    .img-area {
      padding 0.5rem 0.5rem
    }
    .imgzip {
      height 20vw
      margin 0.2rem
    }
    .firststate {
      padding-top 0.4rem
    }
    .button-div {
      text-align center
      padding 0px 15vw
      .mint-button {
        width 30vw
        margin 10px 2vw
      }
      .mint-button--primary {
        background-color #1d55c6
      }
      .mint-button--default {
        background-color #ffffff
      }
    }
    .mint-popup {
      width: 50vw
    }
    .mint-cell {
      diaplay: inline
    }
    .mint-cell-wrapper {
      float left
      width 30%
    }
    .mint-radiolist-label {
      font-size: 0.8rem
    }
    .grey {
      color: #7c7c7c
      font-size 0.8rem
    }
    .img-show {
      width: 50px
      height: 50px
      margin: 10px
    }
    .imageShowPopup {
      width: 80%
    }
  }

  .row-block {
    margin-top 20px 0
    padding-top 15px
    .mint-button--primary {
      background-color #1d55c6
    }
    .search-btn{
      width:60%
      margin:10px
    }
    .clear-btn{
      width:30%
    }
    button {
      /*display block*/
      /*width 90%*/
      /*margin 10px 5px*/
    }
  }
</style>