<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" 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_address condition="u.f_address_name 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.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" >
              <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 text-right" style="">
            <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_address_name }}</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_area }}</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_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_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/getGuanXianApply`, 20, {
        data: {
          userid: Vue.user.id,
          f_filiale: "榆林."+Vue.user.orgs
        }
      }),
      criteriaShow: false,
      applytype: [{label: '全部', value: ''}, ...this.$appdata.getParam('报建类型')], // 所有报建类型
      defnames: isEmpty(this.$appdata.getParam('管线建设环节')) ? [{label: '全部', value: ''}] : [{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 === '施工信息'){
        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 {
        args.condition += `and act.defname = '${this.defname}'`
      }
      if (this.usertype){
        args.condition += `and u.f_apply_type = '${this.usertype}'`
      }

      console.log("args.condition",args.condition)
      this.model.search(args.condition, args.model)
    },
    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.f_filiale}%' 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>
