<template>
  <div>
    <tabset v-ref:tabs :close="false" nav-style="tabs nav-apply-tab" :active.sync="active">
      <tab header='任务地图'>
        <div class="auto tip">
          <p>当前任务数量：{{ tasknumber }}</p>
          <p>当前任务点：{{labelmarksarray.length}}</p>
        </div>
        <app-map-location
          :islocation="true"
          :locationzoomcenter="false"
          :usenative="true"
          :isshowsearch="false"
          :mylocationinfo="false"
          :islocationclearmark="false"
          :isshowmapmodel="false"
          :locationwindow="false"
          mapmodel="dragMarker"
          :labelmarksarray="labelmarksarray"
          @diyspotmouseclick="diyspotmouseclick"
        ></app-map-location>
      </tab>
      <tab header='任务列表'>
        <div class="p-10">
          <criteria-paged :model="model" v-ref:cp>
            <criteria partial='criteria' @condition-changed='$parent.$parent.$parent.searchCondition' v-ref:cri>
              <div partial class="auto">
                <div class="row form-group app-input">
                  <label class="">表&emsp;&emsp;号：</label>
                  <div class="col-xs-8" >
                    <input class="col-xs-11" type="text" v-model="model.f_meternumber" condition="uf.f_meternumber like '%{}%'">
                    <div class="col-xs-1">
                      <svg @click="$parent.$parent.$parent.$parent.scanCode()" style="width: 25px;height: 25px;margin-right: 10px" t="1636095770822" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2457" width="64" height="64">
                        <path d="M928.016126 543.908618 95.983874 543.908618c-17.717453 0-31.994625-14.277171-31.994625-31.994625S78.26642 479.919368 95.983874 479.919368l832.032253 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S945.73358 543.908618 928.016126 543.908618z" p-id="2458"></path>
                        <path d="M832.032253 928.016126 639.892491 928.016126c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l191.967747 0c17.717453 0 31.994625-14.277171 31.994625-31.994625l0-159.973123c0-17.717453 14.277171-31.994625 31.994625-31.994625s31.994625 14.277171 31.994625 31.994625l0 159.973123C928.016126 884.840585 884.840585 928.016126 832.032253 928.016126z" p-id="2459"></path>
                        <path d="M351.94087 928.016126l-159.973123 0c-52.980346 0-95.983874-43.003528-95.983874-95.983874l0-159.973123c0-17.717453 14.277171-31.994625 31.994625-31.994625S159.973123 654.341676 159.973123 672.05913l0 159.973123c0 17.717453 14.449185 31.994625 31.994625 31.994625l159.973123 0c17.717453 0 31.994625 14.277171 31.994625 31.994625C383.935495 913.738955 369.658324 928.016126 351.94087 928.016126z" p-id="2460"></path>
                        <path d="M127.978498 383.935495c-17.717453 0-31.994625-14.277171-31.994625-31.994625l0-159.973123c0-52.980346 43.003528-95.983874 95.983874-95.983874l159.973123 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S369.658324 159.973123 351.94087 159.973123l-159.973123 0c-17.545439 0-31.994625 14.449185-31.994625 31.994625l0 159.973123C159.973123 369.658324 145.695952 383.935495 127.978498 383.935495z" p-id="2461"></path>
                        <path d="M896.021502 383.935495c-17.717453 0-31.994625-14.277171-31.994625-31.994625l0-159.973123c0-17.545439-14.277171-31.994625-31.994625-31.994625L639.892491 159.973123c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l191.967747 0c52.980346 0 95.983874 43.003528 95.983874 95.983874l0 159.973123C928.016126 369.658324 913.738955 383.935495 896.021502 383.935495z" p-id="2462"></path>
                      </svg>
                    </div>
                  </div>
                </div>
                <div class="row form-group app-input" v-if="$parent.$parent.$parent.$parent.criteriaShow">
                  <label class="">客户名称：</label>
                  <div class="col-xs-8" >
                    <input class="" v-model=model.f_user_name condition="ui.f_user_name like '%{}%'" />
                  </div>
                </div>
                <div class="row form-group app-input" v-if="$parent.$parent.$parent.$parent.criteriaShow">
                  <label class="">工程编号：</label>
                  <div class="col-xs-8" >
                    <input class="" v-model=model.f_applycode condition="ui.f_applycode like '%{}%'" />
                  </div>
                </div>
                <div class="row form-group app-input" v-if="$parent.$parent.$parent.$parent.criteriaShow">
                  <label class="">联系电话：</label>
                  <div class="col-xs-8" >
                    <input class="" v-model=model.f_phone condition="ui.f_phone like '%{}%'" />
                  </div>
                </div>
                <div class="row form-group app-input" v-if="$parent.$parent.$parent.$parent.criteriaShow">
                  <label class="">小&emsp;&emsp;区：</label>
                  <div class="col-xs-8" >
                    <v-select
                      width="100%"
                      v-model="model.f_residential_area"
                      placeholder='小区'
                      condition="ui.f_residential_area = '{}'"
                      :value.sync="model.f_residential_area"
                      :options='$parent.$parent.$parent.$parent.area'
                      class="select select_list"
                      :value-single="true"
                      close-on-select ></v-select>
                  </div>
                </div>
                <div class="row form-group app-input" v-if="$parent.$parent.$parent.$parent.criteriaShow">
                  <label class="">楼&emsp;&emsp;号：</label>
                  <div class="col-xs-8" >
                    <input class="" v-model=model.f_building condition="ui.f_building like '%{}%'" />
                  </div>
                </div>
                <div class="row form-group app-input" v-if="$parent.$parent.$parent.$parent.criteriaShow">
                  <label class="">单&emsp;&emsp;元：</label>
                  <div class="col-xs-8" >
                    <input class="" v-model=model.f_unit condition="ui.f_unit like '%{}%'" />
                  </div>
                </div>
                <div class="row form-group app-input" v-if="$parent.$parent.$parent.$parent.criteriaShow">
                  <label class="">门&nbsp;牌&nbsp;号：</label>
                  <div class="col-xs-8" >
                    <input class="" v-model=model.f_room condition="ui.f_room like '%{}%'" />
                  </div>
                </div>
                <div class="row form-group text-right" style="">
                  <button class="btn btn-primary" @click="$parent.$parent.$parent.$parent.changeState()">{{ $parent.$parent.$parent.$parent.shared_dispatch ? '个人' : '共享' }}</button>
                  <button class="btn btn-primary" @click="$parent.$parent.$parent.$parent.search()">查询</button>
                  <button class="btn btn-info" @click="$parent.$parent.$parent.$parent.clear()">清空</button>
                  <button class="btn" :class="{'button_shrink_top':$parent.$parent.$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.$parent.$parent.criteriaShow}" @click="$parent.$parent.$parent.$parent.criteriaShow = !$parent.$parent.$parent.$parent.criteriaShow"></button>
                </div>
              </div>
            </criteria>

            <list :model="model" partial='list'>
              <div partial class="auto app-text panel">
                <div class="panel-body panel-self">
                  <div class="col-xs-12">
                    <p class="col-xs-3 text-left font"><b>用户编号：</b></p>
                    <p class="col-xs-9 text-left input-font">{{ row.f_userinfo_id }}</p>
                  </div>
                  <div class="col-xs-12">
                    <p class="col-xs-3 text-left font"><b>用户名称：</b></p>
                    <p class="col-xs-9 text-left input-font">{{ row.f_user_name }}</p>
                  </div>
                  <div class="col-xs-12">
                    <p class="col-xs-3 text-left font"><b>电&emsp;&emsp;话：</b></p>
                    <p class="col-xs-9 text-left input-font">
                      {{ row.f_user_phone }}&ensp;
                      <svg v-if="row.f_user_phone" @click.prevent="$parent.$parent.$parent.$parent.$parent.dialNumber(row.f_user_phone)" style="width: 25px;height: 25px;position: absolute;" t="1628575136009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2374" width="200" height="200"><path d="M682.25 465.262c0 16.695 11.115 27.811 27.81 27.811s27.812-11.116 27.812-27.811A167.395 167.395 0 0 0 570.96 298.35c-16.695 0-27.811 11.116-27.811 27.811s11.16 27.812 27.811 27.812a111.597 111.597 0 0 1 111.29 111.289z m111.289 0c0 16.695 11.115 27.811 27.81 27.811s27.812-11.116 27.812-27.811c0-152.984-125.217-278.201-278.2-278.201-16.696 0-27.812 11.16-27.812 27.855s11.16 27.811 27.811 27.811c122.405 0 222.579 100.174 222.579 222.535zM417.976 367.9c30.623-30.579 33.391-77.898 5.58-111.289L337.31 148.134c-27.811-36.16-80.666-41.74-116.869-13.928-2.768 2.812-5.536 2.812-5.536 5.58l-75.13 75.13c-72.318 72.318 30.623 267.041 217.042 453.417C543.15 854.708 735.06 954.88 807.378 885.33l75.13-75.13c33.392-33.391 33.392-86.246 0-116.825l-5.536-5.58-108.52-86.246c-33.348-27.81-80.623-25.043-111.246 5.58l-47.275 47.319c-50.087-30.623-94.593-64.014-133.564-102.941-38.927-38.971-72.275-83.478-102.898-133.565l44.507-50.043z m-38.927-75.13c8.348 11.16 8.348 27.855-2.812 36.203l-61.202 63.97a29.569 29.569 0 0 0-5.536 33.392 721.425 721.425 0 0 0 122.405 164.1 721.512 721.512 0 0 0 164.1 122.405 29.569 29.569 0 0 0 33.39-5.58l63.971-63.97c11.16-11.116 25.043-11.116 36.203-2.769l108.477 89.014s2.768 0 2.768 2.768a26.889 26.889 0 0 1 0 38.971l-75.13 75.13c-36.115 36.115-208.606-55.666-372.75-217.042-164.1-161.332-253.114-336.548-216.955-372.75l77.854-77.899c11.16-8.348 30.623-8.348 38.971 5.58l86.246 108.521z" fill="#8A8A8A" p-id="2375"></path></svg>
                    </p>
                  </div>
                  <div class="col-xs-12">
                    <p class="col-xs-3 text-left font"><b>地&emsp;&emsp;址：</b></p>
                    <p class="col-xs-9 text-left input-font">{{ row.f_address }}</p>
                  </div>
                  <div class="col-xs-12">
                    <p class="col-xs-3 text-left font"><b>定位地址：</b></p>
                    <p class="col-xs-9 text-left input-font">
                      {{ row.f_location_address }}
                      <svg v-if="row.f_location_address" @click.prevent="$parent.$parent.$parent.$parent.$parent.openAmap(row)" style="width: 25px;height: 25px;position: absolute;" t="1628575336648" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3201" width="200" height="200"><path d="M512 956h-1.1c-10.9 0-20.5-6.9-24.7-17L369.9 654.1 85 537.8c-10.1-4.1-16.8-13.7-17.2-24.6-0.4-10.9 5.6-21 15.3-25.9l833-416.5c10.7-5.3 23.6-3.2 32.1 5.2s10.5 21.4 5.2 32.1L536.8 940.9c-4.7 9.4-14.3 15.1-24.8 15.1zM162.7 509.6l239 97.6c6.9 2.8 12.4 8.3 15.2 15.2l97.6 239 351.9-703.8-703.7 352z" fill="#666666" p-id="3202"></path></svg>
                    </p>
                  </div>
                  <div class="col-xs-12">
                    <p class="col-xs-3 text-left font"><b>报建类型：</b></p>
                    <p class="col-xs-9 text-left input-font">
                      {{ row.f_apply_type }}
                    </p>
                  </div>
                  <div class="col-xs-12">
                    <p class="col-xs-3 text-left font"><b>派单时间：</b></p>
                    <p class="col-xs-9 text-left input-font">{{ row.f_date }}</p>
                  </div>
                  <div class="col-xs-12 text-right">
                    <button class="btn btn-info" @click="$parent.$parent.$parent.$parent.$parent.click(row)">处理</button>
                  </div>
                </div>
              </div>
            </list>
          </criteria-paged>
        </div>
      </tab>
    </tabset>
  </div>
</template>
<script>
import {HttpResetClass, PagedList} from 'vue-client'
import Vue from 'vue'
import {isEmpty} from '../../Util'

export default {
  title: '通气点火',
  data () {
    return {
      model: new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/getWaitIgnitionTaskApp`, 20, null),
      // model: new PagedList(`rs/sql/getWaitIgnitionTask`, 20, null),
      criteriaShow: false,
      tasknumber: 0,
      labelmarksarray: [],
      active: 0,
      f_lat: null,
      f_lng: null,
      shared_dispatch: false,
      area: [],
      sealSize: Number.parseFloat(this.$appdata.getSingleValue('铅封规模')),
    }
  },
  ready () {
    this.refresh()
  },
  methods: {
    refresh () {
      this.getWaitIgnitionTaskDot()
      this.getArea()
      this.search()
    },
    click (row) {
      console.log('----------------------++++++++++++++++++',row.f_blobid)
      let _this = this
      this.$dispatch('gotoson', {
        _this: _this,
        title: '通气点火',
        safe: true
      })
      row.defname = '通气点火'
      row.f_apply_type = '通气点火'
      // row.f_process_id = row.f_blobid
      console.log('----------------------++++++++++++++++++',row.f_process_id)
      this.$goto('ventilation-ignition-handle', {selectdata: row}, 'self', _this.refresh)
    },
    dialNumber (tel) {
      this.$showMessage(`是否拨打电话：${tel}`, ['confirm']).then((res) => {
        if (res === 'confirm') {
          this.$androidUtil.makeAPhoneCall(tel)
        }
      })
    },
    // 导航
    openAmap (row) {
      HostApp.openThirdPartyMap({
        lon: row.f_lng,
        lat: row.f_lat,
        address: row.f_location_address
      })
    },
    diyspotmouseclick (data) {
      console.log('************************************')
      console.log(data)
      this.f_lat = data.f_lat
      this.f_lng = data.f_lng
      this.search()

      this.active = 1
    },
    async getWaitIgnitionTaskDot () {
      this.tasknumber = 0
      let http = new HttpResetClass()
      let data = {
        userid: Vue.user.id
        // userid: this.$login.f.id
      }
      let res = await http.load(
        'POST',
        `${this.$androidUtil.getProxyUrl()}/rs/sql/getWaitIgnitionTaskDot`,
        // `rs/sql/getWaitIgnitionTaskDot`,
        {data: data},
        {
          resolveMsg: null,
          rejectMsg: '任务点获取失败！！！'
      })
      this.labelmarksarray = res.data.map(item => {
        this.tasknumber += item.count
        return {
          data: {
            data: item,
            content: `<p>任务数：${item.count}</p>`
          },
          position: [item.f_lng, item.f_lat],
          isclearmarker: false,
          islabel: false
        }
      })
      // for (const item of res.data) {
      //   this.tasknumber += item.count
      //   if (isEmpty(item.f_lng) || isEmpty(item.f_lat)) {
      //     continue
      //   }
      //
      //   this.labelmarksarray.push({
      //     data: {
      //       data: item,
      //       content: `<p>任务数：${item.count}</p>`
      //     },
      //     position: [item.f_lng, item.f_lat],
      //     isclearmarker: true,
      //     islabel: false
      //   })
      // }
    },
    searchCondition (args) {
      args.condition += `and ir.f_ignition_operator_id = '${Vue.user.id}' and ir.f_state = '正在进行'`
      // args.condition += `and ir.f_ignition_operator_id = '${this.$login.f.id}' and ir.f_state = '正在进行'`

      if (this.shared_dispatch) {
        // args.condition = args.condition.replace(`ir.f_ignition_operator_id = \'${this.$login.f.id}\'`, 'ir.f_shared_dispatch = \'是\'');
        args.condition = args.condition.replace(`ir.f_ignition_operator_id = \'${Vue.user.id}\'`, 'ir.f_shared_dispatch = \'是\'');
      }
      if (!isEmpty(this.f_lat) && !isEmpty(this.f_lng)) {
        args.condition += `and ui.f_lat = '${this.f_lat}' and ui.f_lng = '${this.f_lng}'`
      }
      this.model.search(args.condition, args.model)

      this.f_lng = null
      this.f_lat = null
    },
    // 查询
    search () {
      this.$refs.cp.$refs.cri.search()
    },
    scanCode () {
      console.log('===============扫码===================')
      HostApp.__this__=this,
        HostApp.scanCode({callback:"javascript:HostApp.__this__.getCode();"})

      this.getCode()
    },
    getCode() {
      let code = HostApp.getCode().data;
      // let code = '012199312345'
      console.log('===========扫码结果=============',code)

      // Vue.set(this.model, 'f_meternumber', code)
      this.$refs.cp.$refs.cri.model.f_meternumber = code
      console.log('===========扫码结果=============',this.model.f_meternumber)
    },
    clear () {
      Object.keys(this.$refs.cp.$refs.cri.model).forEach((key) => {
        this.$refs.cp.$refs.cri.model[key] = null
      })
    },
    changeState(){
      this.shared_dispatch = !this.shared_dispatch
      this.search()
    },
    // 获取小区
    async getArea () {
      let data = {
        tablename: 't_area_address',
        condition: `f_filiale like '%${"榆林."+Vue.user.orgs}%' and f_area_status = '启用'`
        // condition: `f_filiale = '${this.$login.f.f_fengongsi}' and f_area_status = '启用'`
      }
      let http = new HttpResetClass()
      let res = await http.load(
        'POST',
        // `rs/sql/applySingleTable`,
        `${this.$androidUtil.getProxyUrl()}/rs/sql/applySingleTable`,
        {data: data},
        {resolveMsg: null, rejectMsg: '小区查询失败！！！'}
      )
      this.area =  res.data.map(item => {
        return {
          label: item.f_residential_area,
          value: item.id
        }
      })
    }
  },
  events: {
  },
  watch: {
  },
  computed: {
  }
}
</script>
<style scoped>
  .tip{
    position: absolute;
    z-index: 1000;
    color: red;
    font-size: 24px;
    right: 30px;
    padding-top: 20px;
  }
  .panel-self{
    border-radius: 10px;
    border:1px solid #499EDF;
    background-color: #F8F8F8;
  }
  .font{
    font: 15px PingFang-SC-Medium;
    color: #666666;
  }

  .button_shrink_top {
    width: 34px;
    height: 34px;
    border: solid 1px #6aa6e2;
    background-size: 100%;
    background-image: url("../../../../static/newStyle/stretch_top.png")
  }

  .button_shrink_bottom {
    width: 34px;
    height: 34px;
    border: solid 1px #6aa6e2;
    background-size: 100%;
    background-image: url("../../../../static/newStyle/stretch_bottom.png")
  }
</style>
<style lang="less">
  .nav-apply-tab {
    li {
      width: 50%;
      text-align: center;
    }
  }
  .app-input {
    label {
      float: left;
    }
    .select {
      button {
        border: none;
        outline: none;
        text-align: left;
        .btn-placeholder {
          color: #ACA899
        }
      }
    }
    .datepicker {
      .form-control:focus {
        border: none!important;
        outline: none!important;
        -webkit-box-shadow: none;
        box-shadow: none;
      }
    }
  }
</style>
