<template>
  <div>
    <criteria-paged :model="model" v-ref:cp>
      <criteria partial='criteria' @condition-changed='$parent.searchCondition' v-ref:cri>
        <div novalidate class="form-horizontal select-overspread container-fluid auto" partial>
          <div class="row">
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>管线编号：</strong></label>
              <input type="text" style="width:60%" class="input_search" placeholder='管线编号' v-model="model.f_apply_num"
                     v-on:keyup.enter="$parent.$parent.search()"
                     condition="f_apply_num like '%{}%'">
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>工程名称：</strong></label>
              <input type="text" style="width:60%" class="input_search" v-model="model.f_user_name"
                     v-on:keyup.enter="$parent.$parent.search()" condition="f_address_name like '%{}%'" placeholder='道路名'>
            </div>
            <div class="form-group col-sm-2">
              <label class="font_normal_body"><strong>办理环节：</strong></label>
              <v-select
                v-model="model.defname"
                placeholder='办理环节'
                condition="defname = '{}'"
                :value.sync="model.defname"
                :options='$parent.$parent.defnames'
                class="select select_list"
                :value-single="true"
                close-on-select ></v-select>
            </div>
            <div class="form-group col-sm-3 button-range">
              <button class="button_search button_spacing" @click="$parent.$parent.search()" v-el:cx>查询</button>
              <button class="button_search button_spacing" @click="$parent.$parent.loadPage()">返回</button>
              <button class="button_clear button_spacing"  @click="$parent.$parent.clear()">清空</button>
            </div>
          </div>
        </div>
      </criteria>
      <data-grid v-if="$parent.showData" :model="model" partial='list' v-ref:grid class="list_area table_sy" style="height: 100%">
        <template partial='head'>
          <tr>
            <th style="white-space: nowrap;">序号</th>
            <th style="white-space: nowrap;">完成状态</th>
            <th style="white-space: nowrap;">管线编号</th>
            <th style="white-space: nowrap;">工程名称</th>
            <th style="white-space: nowrap;">办理环节</th>
            <th style="white-space: nowrap;">流程状态</th>
            <th style="white-space: nowrap;">流程开始时间</th>
          </tr>
        </template>
        <template partial='body'>
          <tr >
            <td @click="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{$index+1}}</font></nobr>
            </td>
            <td @click="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_sub_save_state}}</font></nobr>
            </td>
            <td :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_apply_num}}</font></nobr>
            </td>
            <td @click="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_address_name}}</font></nobr>
            </td>
            <td @click="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.defname}}</font></nobr>
            </td>
            <td @click="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.f_sub_state}}</font></nobr>
            </td>
            <td @click="$parent.$parent.$parent.click(row)" :class="[ row.isover ==='过期' ? 'p1' : row.isbeforeover === '预期提醒'? 'p':''  ]" style="text-align: center;">
              <nobr><font>{{row.sendtime}}</font></nobr>
            </td>
          </tr>
        </template>
      </data-grid>
    </criteria-paged>
  </div>
</template>
<script>
import {HttpResetClass, PagedList} from 'vue-client'
import {isEmpty} from '../../Util'

export default {
  title: '工程列表',
  props: ['showData'],
  data () {
    return {
      model: new PagedList('rs/sql/getGuanXianliuCheng', 20, {
        data: {
          userid: this.$login.f.id,
          f_filiale: "榆林."+this.$login.f.orgs
        }
      }),
      showModal: false, // 控制发起类型选择
      defnames: isEmpty(this.$appdata.getParam('管线建设环节')) ? [{label: '全部', value: ''}] : [{label: '全部', value: ''}, ...this.$appdata.getParam('管线建设环节')], // 流程节点
      save_states: [{label: '全部', value: ''},{label: '已完成', value: '已完成'},{label: '已退回', value: '已退回'}], // 报建性质
      apply_types: [{label: '管线建设', value: '管线建设'}],
      criteriaShow: false,
      getfield: {
        'f_apply_num': ' 工 程 编 号 ',
        'f_user_name': '  客 户 名 称  ',
        'f_contact': ' 联 系 人 ',
        'f_phone': '   电   话   ',
        'f_user_type': '   用户类型   ',
        'f_user_classification': ' 用户分类 ',
        'f_address': '     地     址     ',
        'f_apply_type': ' 报 建 类 型 ',
        'f_apply_nature': ' 报 建 性 质 ',
        'defname': ' 办 理 环 节 ',
        'f_install_count': ' 安装户数 ',
        'f_designer_people':' 设计人员 '
      }
    }
  },
  ready () {
    // 调用查询
    this.search()
  },
  methods: {
    // 点击操作
    click (val) {
      this.$dispatch('apply', val)
    },
    loadPage () {
      this.$dispatch('loadPage')
    },
    searchCondition (args) {
      this.model.search(args.condition, args.model)
      console.log("当前数据",this.model)
    },
    search () {
      this.$dispatch('search')
    },
    clear () {
      Object.keys(this.$refs.cp.$refs.cri.model).forEach((key) => {
        this.$refs.cp.$refs.cri.model[key] = null
      })
    }
  },
  computed: {
    getCondition () {
      return {
        condition: this.$refs.cp.$refs.cri.condition,
        data: {
          userid: this.$login.f.id,
          f_filiale: "榆林."+this.$login.f.orgs
        }
      }
    }
  },
  watch: {
  },
  events: {
  }
}
</script>
<style scoped>

.p1 {
  color: #dc0b12;
  font-weight:bold
}
.p {
  color: #ffaf4f;
}
</style>
