<style scoped>
.app-row {
  background-color: white;
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
}

.font {
  font: 15px PingFang-SC-Medium;
  color: #666666;
}

.input-font {
  font: 15px PingFang-SC-Medium;
  color: #333333;
}

.btn-font {
  font: 600 16px PingFang-SC-Bold;
  color: #499EDF;
}

.btn-color {
  background-color: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #499EDF;
}

.app-text {
  font-size: 12px;
}

.panel-self {
  border-radius: 10px;
  border: 1px solid #499EDF;
  background-color: #F8F8F8;
}

table {
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  width: 50%;
  border-collapse: collapse;
  margin: 20px 0;
  margin: auto;
}

th,
td {
  padding: 12px;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: #f5f5f5;
}
</style>
<template>
  <div style="height: auto;width: 100%">
    <criteria-paged :model="model" v-ref:paged :pager="false">
      <criteria partial='criteria' @condition-changed='$parent.search' v-ref:cri>
        <div partial>
          <form>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_userinfo_code" class="font text-left">用户编号：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_userinfo_code" class="input-font" style="border: 0;outline: none;"
                       v-model=model.f_userinfo_code condition="f_userinfo_code like '%{}%'" />
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_user_name" class="font text-left">用户名称：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_user_name" class="input-font" style="border: 0;outline: none;"
                       v-model=model.f_user_name condition="f_user_name like '%{}%'" />
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_user_phone" class="font text-left">用户电话：</label>
              </div>
              <div class="col-xs-8" >
                <input id="f_user_phone" class="input-font" style="border: 0;outline: none;"
                       v-model=model.f_user_phone condition="f_user_phone like '%{}%'" />
              </div>
            </div>
            <div class="row app-row" >
              <div class="col-xs-4">
                <img src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label class="font text-left">表&emsp;&emsp;号：</label>
              </div>
              <div class="col-xs-5">
                <input class="search_input input-font" v-model=model.f_meter_no
                       condition="f_meter_no like '%{}%'" />
              </div>
              <div class="col-xs-3">
                <button type="button" class="btn btn-lg btn-font btn-color"
                        @click="$parent.$parent.scan()">扫码</button>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/安检状态.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_plan_name" class="font text-left">计划名称：</label>
              </div>
              <v-select id="f_plan_name" :value.sync="model.f_plan_name" class="input-font"
                        :options='$parent.$parent.planNameOptions' placeholder='计划名称' :width="'60%'"
                        v-model="model.f_plan_name" condition="f_plan_name = '{}'" close-on-select clear-button>
              </v-select>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/安检状态.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_plan_name" class="font text-left">计划类型：</label>
              </div>
              <v-select id="f_plan_name" :value.sync="model.f_safecheck_type" class="input-font"
                        :options='$parent.$parent.safecheckTypes' placeholder='计划类型' :width="'60%'"
                        v-model="model.f_safecheck_type" condition="f_safecheck_type = '{}'" close-on-select
                        clear-button>
              </v-select>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img src="../../assets/安检状态.png" style="width: 20px;margin-bottom: 5px" alt="">
                <label for="f_plan_name" class="font text-left">计划时间：</label>
              </div>
              <datepicker id="f_start_date" style="width: 30%;" :value.sync="model.f_start_date"
                          :disabled-days-of-Week="[]" v-model="model.f_start_date" class="input-font"
                          :format="'yyyy-MM-dd 00:00:00'" condition="f_issue_time >= '{}'">
              </datepicker>-
              <datepicker id="f_end_date" style="width: 30%;" :value.sync="model.f_end_date"
                          :disabled-days-of-Week="[]" v-model="model.f_end_date" class="input-font"
                          :format="'yyyy-MM-dd 23:59:00'" condition="f_issue_time <= '{}'">
              </datepicker>
            </div>
            <div class="row text-center" style="margin-top: 20px;">
              <button type="button" class="btn btn-lg btn-font btn-color" style="width: 25%;"
                      @click="search">查询</button>
              <img @click="$parent.$parent.getNewOrder" src="../../assets/shuaxindaiban1.png"
                   style="float: right;margin-right: 3%;width: 40px;padding: 5px; float:right">
            </div>
            <div class="col-sm-12">
            </div>
            <div style="height:30px;"></div>
          </form>
        </div>
      </criteria>
      <list :model="model" partial='list'>
        <div partial>
          <div class="auto app-text" style="margin-top: 5px;">
            <div class="panel" style="padding: 10px 10px 5px 10px;">
              <div class="panel-body panel-self" @click="$parent.$parent.$parent.gotoAreaSelect(row)">
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left">
                    <b>计划名称:</b>
                  </p>
                  <p class="panel-title col-xs-5 text-left input-font" style="width: 74%">{{
                      row.f_plan_name }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left">
                    <b>计划发型:</b>
                  </p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{
                      row.f_safecheck_type }}</p>
                </div>
                <div class="col-xs-12">
                  <p class="panel-title col-xs-5 text-left font" style="width: 21%;float: left">
                    <b>计划时间:</b>
                  </p>
                  <p class="panel-title col-xs-7 text-left input-font" style="width: 79%">{{
                      row.f_issue_time }}</p>
                </div>
                <div class="col-xs-12">
                  <table>
                    <tr>
                      <td style="color: #00A3F0">{{ row.jihuazongshu }}</td>
                      <td style="color: #3CC51F">{{ row.yijian }}</td>
                      <td style="color: coral">{{ row.weijian }}</td>
                      <td style="color: red">{{ row.daofangbuyu }}</td>
                    </tr>
                    <tr>
                      <th>计划总户数</th>
                      <th>已检户数</th>
                      <th>未检户数</th>
                      <th>到访不遇户数</th>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>
  </div>
</template>
<script>
import LocalPagedList from '../../plugins/LocalPagedList'
export default {
  title: 'current-create',
  data() {
    return {
      planNameOptions: [{ label: '请选择', value: '' },],
      safecheckTypes: [{ label: '请选择', value: '' }, { label: '年度安检', value: '年度安检' }, { label: '抽检', value: '抽检' }],
      model: new LocalPagedList('androidGetuserinfo', 20, { condition: 'this.condition' }),
    }
  },
  ready() {
    this.getAllPlanName()
  },
  methods: {
    scan() {
      HostApp.__this__ = this,
        HostApp.scanCode({ callback: "javascript:HostApp.__this__.getCode();" })
    },
    getCode() {
      const datapa = HostApp.getCode().data;
      this.$refs.paged.$refs.cri.model.f_meter_no = datapa

    },
    getNewOrder() {
      HostApp.__this__ = this
      HostApp.logicWithHint({
        'logic': 'SafeCheckServiceTimeOut',
        'callback': 'javascript:HostApp.__this__.getNewOrderCallBack()',
        'data': { params: '' },
        'backresult': 1
      })
      HostApp.logicWithHint({
        'logic': 'FreshPlanItem',
        'callback': 'javascript:HostApp.__this__.getNewOrderCallBack()',
        'data': { params: '' },
        'backresult': 1
      })
    },
    getNewOrderCallBack() {
      this.model.search()
    },
    gotoAreaSelect(row) {
      var _this = this
      _this.$dispatch('gotoson', {
        _this: _this,
        title: '小区',
        safe: false
      })
      _this.$goto('area-select-safe', { row: row })
    },
    search(args) {
      let condition = '1=1'
      this.model.rows = []
      let criteria = {
        items: `tcp.id,tcp.f_plan_name,tcp.f_issue_time,tcp.f_safecheck_type,COUNT(tcp.id) as jihuazongshu,sum( CASE WHEN tcpi.f_state = '未检' THEN 1 ELSE 0 END ) as weijian,sum( CASE WHEN tcpi.f_state = '已检' THEN 1 ELSE 0 END ) as yijian,sum( CASE WHEN tcpi.f_last_check_state = '到访不遇' THEN 1 ELSE 0 END ) as daofangbuyu`,
        tablename: 't_check_plan tcp LEFT JOIN t_check_plan_item tcpi ON tcp.id = tcpi.f_plan_id',
        condition: args.condition || condition,
        groupitem: 'tcp.id,tcp.f_plan_name,tcp.f_issue_time,tcp.f_safecheck_type'
      }
      let result = HostApp._executeTask({ 'type': 'sql', 'data': { 'alias': 'safe_singleTable_GroupBy', 'criteria': criteria } })
      this.model.rows = result.data.rows
    },
    getAllPlanName() {
      let criteria = {
        items: 'f_plan_name',
        tablename: 't_check_plan',
        condition: `f_plan_name IS NOT NULL AND f_plan_name != ''`,
        groupitem: 'f_plan_name'
      }
      let result = HostApp._executeTask({ 'type': 'sql', 'data': { 'alias': 'safe_singleTable_GroupBy', 'criteria': criteria } })
      if (result.code == 200) {
        result.data.rows.forEach(item => this.planNameOptions.push({ label: item.f_plan_name, value: item.f_plan_name }))
      }
    },
  }
}
</script>
