<template>
  <div class="p-10">
    <criteria-paged :model="model" v-ref:cp>
      <criteria partial='criteria' @condition-changed='$parent.searchCondition' v-ref:cri>
        <div partial class="auto">
          <div class="row form-group app-input">
            <label class="">客户名称：</label>
            <div class="col-xs-8" >
              <input class="" v-model=model.f_user_name condition="u.f_user_name like '%{}%'" />
            </div>
          </div>
          <div class="row form-group app-input" v-if="$parent.$parent.criteriaShow">
            <label class="">联系电话：</label>
            <div class="col-xs-8" >
              <input class="" v-model=model.f_phone condition="u.f_phone like '%{}%'" />
            </div>
          </div>
          <div class="row form-group app-input" v-if="$parent.$parent.criteriaShow">
            <label class="">工程编号：</label>
            <div class="col-xs-8" >
              <input class="" v-model=model.f_apply_num condition="u.f_apply_num like '%{}%'" />
            </div>
          </div>
          <div class="row form-group app-input" v-if="$parent.$parent.criteriaShow">
            <label class="">合同编号：</label>
            <div class="col-xs-8" >
              <input class="" v-model=model.f_contract_number condition="u.f_contract_number like '%{}%'" />
            </div>
          </div>
          <div class="row form-group app-input" v-if="$parent.$parent.criteriaShow">
            <label class="">报建类型：</label>
            <div class="col-xs-8" >
              <v-select
                width="100%"
                v-model="model.f_apply_type"
                placeholder='报建类型'
                condition="u.f_apply_type like '%{}%'"
                :value.sync="model.f_apply_type"
                :options='$parent.$parent.applytype'
                class="select select_list"
                :value-single="true"
                @change="$parent.$parent.applyTypeChange()"
                close-on-select ></v-select>
            </div>
          </div>
          <div class="row form-group app-input" v-if="$parent.$parent.criteriaShow">
            <label class="">办理环节：</label>
            <div class="col-xs-8" >
              <v-select
                width="100%"
                v-model="model.defname"
                placeholder='办理环节'
                condition="act.defname = '{}'"
                :value.sync="model.defname"
                :options='$parent.$parent.defnames'
                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.criteriaShow">
            <label class="">报建性质：</label>
            <div class="col-xs-8" >
              <v-select
                width="100%"
                v-model="model.f_apply_nature"
                placeholder='报建性质'
                condition="f_apply_nature = '{}'"
                :value.sync="model.f_apply_nature"
                :options='$parent.$parent.applyNatures'
                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.criteriaShow">
            <label class="">用户地址：</label>
            <div class="col-xs-8" >
              <input class="" v-model=model.f_address condition="u.f_address like '%{}%'" />
            </div>
          </div>
          <div class="row form-group app-input" v-if="$parent.$parent.defname === '工程施工' && $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="u.f_residential_area = '{}'"
              :value.sync="model.f_residential_area"
              :options='$parent.$parent.areaList'
              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.defname === '工程施工' && $parent.$parent.criteriaShow">
            <label class="">楼&emsp;&emsp;号：</label>
            <div class="col-xs-8" >
              <input class="" v-model=model.f_building condition="u.f_building like '%{}%'" />
            </div>
          </div>
          <div class="row form-group app-input" v-if="$parent.$parent.defname === '工程施工' && $parent.$parent.criteriaShow">
            <label class="">单&emsp;&emsp;元：</label>
            <div class="col-xs-8" >
              <input class="" v-model=model.f_unit condition="u.f_unit like '%{}%'" />
            </div>
          </div>
          <div class="row form-group app-input" v-if="$parent.$parent.defname === '工程施工' && $parent.$parent.criteriaShow">
            <label class="">门&ensp;牌&ensp;号：</label>
            <div class="col-xs-8" >
              <input class="" v-model=model.f_room condition="u.f_room like '%{}%'" />
            </div>
          </div>
          <div class="row form-group app-input" v-if="$parent.$parent.criteriaShow">
            <label class="">开始时间：</label>
            <div class="col-xs-8" >
              <datepicker id="startDate" placeholder="开始日期"
                          style="width: 100%!important;"
                          v-model="model.startDate"
                          :value.sync="model.startDate"
                          :format="'yyyy-MM-dd 00:00:00'"
                          :show-reset-button="true"
                          condition="u.f_apply_date >= '{}'">
              </datepicker>
            </div>
          </div>
          <div class="row form-group app-input" v-if="$parent.$parent.criteriaShow">
            <label class="">结束时间：</label>
            <div class="col-xs-8" >
              <datepicker id="endDate" placeholder="结束日期"
                          style="width: 100%!important;"
                          v-model="model.endDate"
                          :value.sync="model.endDate"
                          :format="'yyyy-MM-dd 23:59:59'"
                          :show-reset-button="true"
                          condition="u.f_apply_date <= '{}'">
              </datepicker>
            </div>
          </div>
<!--          <div class="row form-group app-input" v-if="$parent.$parent.criteriaShow">-->
<!--            <label class="">稍后处理：</label>-->
<!--            <div class="col-xs-8" >-->
<!--              <v-select-->
<!--                width="100%"-->
<!--                v-model="model.f_is_later"-->
<!--                placeholder='稍后处理'-->
<!--                condition="f_is_later = '{}'"-->
<!--                :value.sync="model.f_is_later"-->
<!--                :options='$parent.$parent.laterList'-->
<!--                class="select select_list"-->
<!--                :value-single="true"-->
<!--                close-on-select ></v-select>-->
<!--            </div>-->
<!--          </div>-->
          <div class="row form-group text-right" style="">
            <button class="btn btn-primary" v-if="$parent.$parent.defname === '现场勘察'" @click="$parent.$parent.changeSearch()">{{ $parent.$parent.showSupervisory ? '需整改' : '正常' }}</button>
            <button class="btn btn-primary" v-if="$parent.$parent.defname === '工程队派工' || $parent.$parent.defname === '维修派单'" @click="$parent.$parent.changeSearch()">{{ $parent.$parent.showSupervisory ? '有纠纷' : '正常' }}</button>
            <button class="btn btn-primary" @click="$parent.$parent.search()">查询</button>
            <button class="btn btn-info" @click="$parent.$parent.clear()">清空</button>
            <button class="btn" :class="{'button_shrink_top':$parent.$parent.criteriaShow,'button_shrink_bottom':!$parent.$parent.criteriaShow}" @click="$parent.$parent.criteriaShow = !$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_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_phone }}&ensp;
                <svg @click.prevent="$parent.$parent.$parent.dialNumber(row.f_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>工程编号：</b></p>
              <p class="col-xs-9 text-left input-font">{{ row.f_apply_num }}</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_userinfo_code }}</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.defname }}</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_order_address }}
                <svg @click.prevent="$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>地&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_apply_date }}</p>
            </div>
            <div class="col-xs-12" style="color: red">
              <p class="col-xs-3 text-left font"><b>施工备注：</b></p>
              <p class="col-xs-9 text-left input-font">{{ row.f_construction_remarks }}</p>
            </div>

            <div class="col-xs-12 text-right">
              <button class="btn btn-info" @click="$parent.$parent.$parent.click(row)">处理</button>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
  </div>
</template>
<script>
import Vue from 'vue'
import { PagedList, HttpResetClass } from 'vue-client'
import {isEmpty} from '../../Util'
export default {
  title: '报建流程',
  props: ['defname', 'f_lat', 'f_lng', 'usertype'],
  data () {
    return {
      model: new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/checkuser`, 20, {
        data: {
          userid: Vue.user.id,
          f_filiale: "榆林."+Vue.user.orgs
        }
      }),
      criteriaShow: false,
      applytype: [{label: '全部', value: ''}, ...this.$appdata.getParam('报建类型')], // 所有报建类型
      defnames: [{label: '全部', value: ''}, ...this.$appdata.getParam('办理环节')],
      applyNatures: [{label: '全部', value: ''}], // 报建性质
      areaList: [],
      showSupervisory: true
    }
  },
  ready () {
    this.getArea()
    this.search()
  },
  methods: {
    refresh () {
      this.search()
      this.$dispatch('refreshDot')
    },
    openAmap (selectdata) {
      HostApp.openThirdPartyMap({
        lon: selectdata.f_lng,
        lat: selectdata.f_lat,
        address: selectdata.f_order_address
      })
    },
    dialNumber (phone) {
      this.$showMessage(`是否拨打电话：${phone}`, ['confirm']).then((res) => {
        if (res === 'confirm') {
          this.$androidUtil.makeAPhoneCall(phone)
        }
      })
    },
    clear () {
      Object.keys(this.$refs.cp.$refs.cri.model).forEach((key) => {
        this.$refs.cp.$refs.cri.model[key] = null
      })
    },
    // 查询
    search () {
      this.$refs.cp.$refs.cri.search()
      this.criteriaShow = false
    },
    searchCondition (args) {
      if (this.defname === '现场勘察'){
        if (!this.showSupervisory){
          args.condition += `and act.defname = '${this.defname}' and u.f_survey_opinion ='否'`
        }else {
          args.condition += `and act.defname = '${this.defname}' and (u.f_survey_opinion <> '否' or u.f_survey_opinion is null)`
        }
      }else if (this.defname === '工程队派工'){
        args.condition = args.condition + `and act.defname = '${this.defname}' and f_construction_unit = ${Vue.user.id} `
        if (this.showSupervisory){
          args.condition += `and (u.f_install_situation = '正常' or u.f_install_situation = '无' or u.f_install_situation is null)`
        }else {
          args.condition += `and u.f_install_situation = '有纠纷'`
        }
      }else if (this.defname === '施工信息'){
        args.condition = args.condition + ` and act.defname = '工程施工' and (f_construction_unit = '${Vue.user.id}'
        or f_check_operator_id = '${Vue.user.id}' or f_engineering_operator_id = '${Vue.user.id}'
        or f_supervisor_operator_id = '${Vue.user.id}' or f_supervisor_operator = '${Vue.user.id}'
        or f_construct_operator_id = '${Vue.user.id}')`
      }else if (this.defname === '设计出图'){
        args.condition += `and (act.defname = '${this.defname}' or act.defname ='图纸变更')`
      } else {
        args.condition += `and act.defname = '${this.defname}'`
      }
      if (this.usertype){
        args.condition += `and u.f_apply_type = '${this.usertype}'`
      }
      if (!isEmpty(this.f_lat) && !isEmpty(this.f_lng)) {
        args.condition += `and u.f_lat = '${this.f_lat}' and u.f_lng = '${this.f_lng}'`
      }
      console.log("args.condition",args.condition)
      this.model.search(args.condition, args.model)

      this.f_lat = null
      this.f_lng = null
    },
    click (row) {
      if (this.defname === '施工信息'){
        row.defname = '施工信息'
      }
      let _this = this
      this.$dispatch('gotoson', {
        _this: _this,
        title: row.defname,
        safe: true
      })
      this.$goto('app-service-control', {selectdata: row}, 'self', _this.refresh)
    },
    applyTypeChange () {
      if (!isEmpty(this.$refs.cp.$refs.cri.model.f_apply_type)) {
        let http = new HttpResetClass()
        http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/getDefnameByType`, {
          // http.load('POST', 'rs/logic/getDefnameByType', {
          f_apply_type: this.$refs.cp.$refs.cri.model.f_apply_type
        }, {resolveMsg: null, rejectMsg: null}).then((res) => {
          this.defnames = [{label: '全部', value: ''}, ...res.data]

          this.applyNatures = isEmpty(this.$appdata.getParam(`${this.$refs.cp.$refs.cri.model.f_apply_type}性质`)) ? [{label: '全部', value: ''}] : [{label: '全部', value: ''}, ...this.$appdata.getParam(`${this.$refs.cp.$refs.cri.model.f_apply_type}性质`)]
        })
      } else {
        this.defnames = [{label: '全部', value: ''}]

        this.applyNatures = [{label: '全部', value: ''}]
      }
    },
    // 获取小区
    async getArea () {
      let data = {
        tablename: 't_area_address',
        condition: `f_filiale like '%${"榆林."+Vue.user.orgs}%' and f_area_status = '启用'`
      }
      let http = new HttpResetClass()
      let res = await http.load(
        'POST',
        `${this.$androidUtil.getProxyUrl()}/rs/sql/applySingleTable`,
        {data: data},
        {resolveMsg: null, rejectMsg: '小区查询失败！！！'}
      )
      this.areaList =  res.data.map(item => {
        return {
          label: item.f_residential_area,
          value: item.f_residential_area
        }
      })
    },
    changeSearch(){
      this.showSupervisory = !this.showSupervisory
      this.search()
    },
  },
  events: {
    'loadPage' () {
      this.selectdata = {}
      // 关闭详细
      this.showtotal = false
      // 显示列表数据
      this.showData = true
      // 显示分页
      this.$refs.query.$refs.cp.pager = true
      // 调用查询
      this.$refs.query.$refs.cp.loadPage(this.$refs.query.model.pageIndex)
    }
  },
  watch: {
    // 通过计算属性同时监听多个值
    'changeData' () {
      if (!isEmpty(this.f_lat) && !isEmpty(this.f_lng)) {
        this.search()
      }
    }
  },
  computed: {
    changeData () {
      const {f_lat, f_lng} = this
      return {
        f_lat,
        f_lng
      }
    }
  }
}
</script>
<style scoped>
.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">
.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>
