<template>
  <div class="p-10">
    <criteria-paged :model="model" v-ref:cp>
      <criteria partial='criteria' @condition-changed='search' 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_contact condition="u.f_contact 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.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="f_apply_date <= '{}'">
              </datepicker>
            </div>
          </div>
          <div class="row app-row text-right" style="padding-bottom: 10px;height: auto">
            <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" style="margin: 10px">
          <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_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_user_name }}</p>
            </div>
            <div class="col-xs-12">
              <p class="col-xs-3 text-left font"><b>报建类型：</b></p>
              <p class="col-xs-6 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-6 text-left input-font">{{ row.f_user_classification }}</p>
            </div>
            <div class="col-xs-12" >
              <p class="col-xs-3 text-left font"><b>办理环节：</b></p>
              <p class="col-xs-6 text-left input-font">{{ row.defname }}</p>
            </div>
            <div class="col-xs-12" v-show="row.defname==='工程施工'||row.defname==='工程队派工'">
              <p class="col-xs-3 text-left font"><b>报警器：</b></p>
              <p class="col-xs-6 text-left input-font">{{ row.f_install_project }}</p>
            </div>
            <div class="col-xs-12">
              <p class="col-xs-3 text-left font"><b>小&emsp;&emsp;区：</b></p>
              <p class="col-xs-6 text-left input-font">{{ row.f_residential_area }}</p>
            </div>
            <div class="col-xs-12">
              <p class="col-xs-3 text-left font"><b>联&ensp;系&ensp;人：</b></p>
              <p class="col-xs-6 text-left input-font">{{ row.f_contact }}</p>
            </div>
            <div class="col-xs-12">
              <p class="col-xs-3 text-left font"><b>联系电话：</b></p>
              <p class="col-xs-6 text-left input-font">{{ row.f_phone }}</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_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_designer_people }}</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.jiance }}</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_construction_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.anzhuang }}</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.tujian }}</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.jianli }}</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.jianshe }}</p>
            </div>
            <div class="col-xs-12" v-if="row.f_drawing_change">
              <p class="col-xs-3 text-left font"><b>变更原因：</b></p>
              <p class="col-xs-9 text-left input-font">{{ row.f_drawing_change }}</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: '报建流程',
    data () {
      return {
        model: new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/appSupervisory`, 20, {
          data: {
            id: Vue.user.id,
            f_filiale: "榆林."+Vue.user.orgs
          }
        }),
        criteriaShow: false,
        applytype: [{label: '全部', value: ''}, ...this.$appdata.getParam('报建类型')], // 所有报建类型
        defnames: [{label: '全部', value: ''}],
        applyNatures: [{label: '全部', value: ''}], // 报建性质
        areaList: []
      }
    },
    ready () {
      this.search()
    },
    methods: {
      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: ''}]
        }
      },
      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()
      },
      click (row) {
        let _this = this
        this.$dispatch('gotoson', {
          _this: _this,
          title: '详情信息',
          safe: true
        })
        this.$goto('app-supervisory-cart', {selectdata: row}, 'self', _this.search)
      }
    },
    events: {
    },
    watch: {
    }
  }
</script>
<style scoped>
  .app-row {
    height: auto;
    background-color: white;
    padding: 10px 10px 0 10px;
    border-bottom: 1px solid rgba(235, 235, 235, 0.5);
  }
  .search_input {
    border: 0;
    outline: none;
  }
  .input-font{
    font: 15px PingFang-SC-Medium;
    color: #333333;
  }
  .app-text {
    font-size: 12px;
  }
  .panel-self{
    border-radius: 10px;
    border:1px solid #499EDF;
    background-color: #F8F8F8;
  }
  .font{
    font: 15px PingFang-SC-Medium;
    color: #666666;
  }
  .input-font{
    font: 15px PingFang-SC-Medium;
    color: #333333;
  }

  .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>
