<template>
  <div class="auto">
    <criteria-paged v-ref:paged :model="model">
      <criteria v-ref:cri partial='criteria' @condition-changed='$parent.search'>
        <div partial>
          <form>
            <div class="row app-row">
              <div class="col-xs-4">
                <img alt="" src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px">
                <label class="font text-left">用户编号：</label>
              </div>
              <div class="col-xs-8">
                <input v-model="model.f_userinfo_code" class="search_input input-font"
                       condition="a.f_userinfo_code = '{}'" placeholder="请输入用户编号"/>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img alt="" src="../../assets/用户类型.png" style="width: 20px;margin-bottom: 5px">
                <label class="font text-left">客户类型：</label>
              </div>
              <div class="col-xs-8">
                <v-select v-model="model.f_user_type" :options='$parent.$parent.user_types'
                          :value-single="true" :value.sync="model.f_user_type" class="input-font"
                          clear-button close-on-select condition="b.f_user_type = '{}'"
                          placeholder='请选择客户类型'></v-select>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img alt="" src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px">
                <label class="font text-left">用户名称：</label>
              </div>
              <div class="col-xs-8">
                <input v-model="model.f_user_name" class="search_input input-font"
                       condition="a.f_user_name like '%{}%'" placeholder="请输入用户名称"/>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img alt="" src="../../assets/用户ID.png" style="width: 20px;margin-bottom: 5px">
                <label class="font text-left">用户电话：</label>
              </div>
              <div class="col-xs-8">
                <input v-model="model.f_user_phone" class="search_input input-font"
                       condition="a.f_user_phone like '%{}%'" placeholder="请输入用户电话"/>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img alt="" src="../../assets/小区.png" style="width: 20px;margin-bottom: 5px">
                <label class="font text-left">用户地址：</label>
              </div>
              <div class="col-xs-8">
                <input v-model="model.f_user_address" class="search_input input-font"
                       condition="a.f_user_address like '%{}%'" placeholder="请输入用户地址"/>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img alt="" src="../../assets/用户姓名.png" style="width: 20px;margin-bottom: 5px">
                <label class="font text-left">派&nbsp;单&nbsp;员：</label>
              </div>
              <div class="col-xs-8">
                <input v-model="model.f_operator" class="search_input input-font"
                       condition="a.f_operator like '%{}%'" placeholder="请输入派单员"/>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img alt="" src="../../assets/安检状态.png" style="width: 20px;margin-bottom: 5px">
                <label class="font text-left">安&nbsp;检&nbsp;员：</label>
              </div>
              <div class="col-xs-8">
                <v-select v-model="model.f_handlercheck_name" :options='$parent.$parent.checkerNames'
                          :value-single="true" :value.sync="model.f_handlercheck_name" class="input-font"
                          clear-button close-on-select condition="f_handlercheck_name = '{}'"
                          placeholder='请选择安检员'></v-select>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img alt="" src="../../assets/安检状态.png" style="width: 20px;margin-bottom: 5px">
                <label class="font text-left">开始时间：</label>
              </div>
              <div class="col-xs-8">
                <datepicker v-model="model.f_check_start" :disabled-days-of-Week="[]"
                            :format="'yyyy-MM-dd'" :value.sync="model.f_check_start" class="input-font"
                            condition="f_handler_time >= '{} 00:00:00'" placeholder='开始时间'
                            style="width: 100%"></datepicker>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img alt="" src="../../assets/安检状态.png" style="width: 20px;margin-bottom: 5px">
                <label class="font text-left">结束时间：</label>
              </div>
              <div class="col-xs-8">
                <datepicker v-model="model.f_check_end" :disabled-days-of-Week="[]"
                            :format="'yyyy-MM-dd'" :value.sync="model.f_check_end" class="input-font"
                            condition="f_handler_time <= '{} 23:59:59'" placeholder='结束时间'
                            style="width: 100%"></datepicker>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img alt="" src="../../assets/安检状态.png" style="width: 20px;margin-bottom: 5px">
                <label class="font text-left">预约状态：</label>
              </div>
              <div class="col-xs-8">
                <v-select v-model="model.f_handler_state" :options='$parent.$parent.handler_states'
                          :value-single="true" :value.sync="model.f_handler_state" class="input-font"
                          clear-button close-on-select condition="f_handler_state = '{}'"
                          placeholder='请选择预约状态'></v-select>
              </div>
            </div>
            <div class="row app-row">
              <div class="col-xs-4">
                <img alt="" src="../../assets/安检状态.png" style="width: 20px;margin-bottom: 5px">
                <label class="font text-left">安检结果：</label>
              </div>
              <div class="col-xs-8">
                <v-select v-model="model.f_last_check_state" :options='$parent.$parent.last_check_states'
                          :value-single="true" :value.sync="model.f_last_check_state" class="input-font"
                          clear-button close-on-select
                          condition="f_handler_state = '已安检' and f_last_check_state = '{}'"
                          placeholder='请选择安检结果'></v-select>
              </div>
            </div>
            <div class="row text-center" style="margin-top: 20px;">
              <button class="btn btn-lg btn-font btn-color" style="width: 90%;" type="button"
                      @click="search">查询
              </button>
            </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">
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户编号</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_userinfo_code }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">客户类型</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.user_type }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户名</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_user_name }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户电话</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_user_phone }}
                    <img v-if="row.f_user_phone" src="../../assets/phone.png" style="width: 6%"
                         v-on:click.stop.prevent='$parent.$parent.$parent.makeAPhoneCall(row.f_user_phone)'/>
                  </p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">用户地址</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.address }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">预约状态</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_handler_state }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">预约时间</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_handler_time == 'null' ? '' : row.f_handler_time }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">安检时间</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_last_check_date }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">安检员</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_handlercheck_name }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">派单员</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_single_man }}</p>
                </div>
                <div class="row">
                  <p class="panel-title col-xs-4 text-left font">备注</p>
                  <p class="panel-title col-xs-8 text-left input-font">{{ row.f_safe_remark }}</p>
                </div>
                <div class="row text-center" style="margin-top: 10px;">
                  <button class="btn btn-sm btn-font btn-yy" style="width: 45%;" type="button"
                          @click="$parent.$parent.$parent.yyChange(1, row)">转单
                  </button>
                  <button class="btn btn-sm btn-font btn-qx" style="width: 45%;" type="button"
                          @click="$parent.$parent.$parent.yyChange(2, row)">取消预约
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </list>
    </criteria-paged>

    <modal :show.sync="selecetChecker" :backdrop="false">
      <div slot="modal-header" class="modal-header">
        <h4 class="modal-title">转单</h4>
      </div>
      <div slot="modal-body" class="modal-body">
        <div class="row" style="margin: 5px">
          <label class="control-label">安&nbsp;检&nbsp;员</label>
          <v-select :value.sync="changeData.f_handlercheck_name" v-model="changeData.f_handlercheck_name"
                    :value-single="false" clear-button :options='checkers' placeholder='请选择安检员'></v-select>
        </div>
        <div class="row" style="margin: 5px">
          <label class="control-label" style="float: left;">备&emsp;&emsp;注</label>
          <input class="input_search" type="text" style="margin-left: 5px;width: 60%"
                 v-model="changeData.f_safe_remark" placeholder="备注">
        </div>
      </div>
      <div slot="modal-footer" class="modal-footer" style="text-align: center">
        <button class="button_search" style="margin-right: 20px" @click="ok">确认</button>
        <button class="button_search" @click="selecetChecker = false">取消</button>
      </div>
    </modal>
  </div>
</template>
<script>
import {HttpResetClass, PagedList} from 'vue-client'
import Vue from 'vue'
import * as Util from '../Util'

export default {
  title: '预约转单',
  data() {
    let model = new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/safe_singleTable_OrderBy`, 20, {
      items: "'DISTINCT a.*,b.f_user_type as user_type,c.f_address as address,swo.f_single_man'",
      tablename: "'t_userinfo a left join t_userfiles b on a.f_userinfo_id = b.f_userinfo_id left join t_user_address c on a.f_userinfo_id = c.f_userinfo_id left join t_serviceworkorder swo on swo.f_service_id = a.f_service_id'",
      orderitem: "'f_handler_time desc'"
    })
    return {
      model: model,
      changeData: {},
      selecetChecker: false,
      checkers: [],
      checkerNames: [{label: '全部', value: ''}],
      user_types: [
        {label: '请选择客户类型', value: ''},
        {label: '民用', value: '民用'},
        {label: '非民用', value: '非民用'}
      ],
      handler_states: [
        {label: '请选择预约状态', value: ''},
        {label: '待派发', value: '待派发'},
        {label: '已预约', value: '已预约'},
        {label: '已安检', value: '已安检'}
      ],
      last_check_states: [
        {label: '请选择安检结果', value: ''},
        {label: '到访不遇', value: '到访不遇'},
        {label: '拒检', value: '拒检'},
        {label: '入户', value: '入户'}
      ]
    }
  },
  ready() {
    this.getCheckers()
  },
  methods: {
    getCheckers() {
      let http = new HttpResetClass()
      http.load('POST', `${this.$androidUtil.getProxyUrl()}/rs/search`, {
        source: 'this.getParentByType($organization$).getChildByName($安检员$).getUsers()',
        userid: Vue.user.id
      }, {resolveMsg: null, rejectMsg: null}).then((res) => {
        this.checkers = []
        this.checkerNames = [{label: '全部', value: ''}]
        res.data.forEach((checker) => {
          this.checkers.push({label: checker.name, value: checker})
          this.checkerNames.push({label: checker.name, value: checker.name})
        })
      })
    },
    makeAPhoneCall(val) {
      this.$androidUtil.makeAPhoneCall(val)
    },
    search(args) {
      args.condition += ` and a.f_filialeid in ('${Vue.user.orgid}')`
      args.condition += ` and a.f_handler_state in ('已预约','已安检','待派发')`
      this.model.search(args.condition, args.model, args.condValue)
    },
    yyChange(type, row) {
      if (!row || !row.f_userinfo_id) {
        this.$showMessage('用户数据异常')
        return
      }
      this.changeData.currentRow = row
      if (type == 1) {
        this.selecetChecker = true
      } else {
        let sql = `update t_userinfo set f_handler_time = null,f_handler_state= null,f_handlercheck_id=null,f_handlercheck_name=null,f_safe_remark=null,f_contact_phone=null,f_safe_urgency=null,f_safe_isUrgent=null,f_service_id=null where f_userinfo_id in ('${row.f_userinfo_id}')`
        new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/runSQL`, {data: {sql: sql}}, {
          resolveMsg: null,
          rejectMsg: '取消预约失败'
        }).then(() => {
          this.changeData = {}
          this.$refs.paged.$refs.cri.search()
        }).catch(() => {
          this.$showMessage('取消预约失败')
        })
      }
    },
    ok() {
      let row = this.changeData.currentRow
      if (!row || !row.f_userinfo_id) {
        this.$showMessage('用户数据异常')
        return
      }
      if (!this.changeData.f_handlercheck_name || this.changeData.f_handlercheck_name.length == 0) {
        this.$showMessage('请选择安检员')
        return
      }
      let sql = `update t_userinfo set f_handler_time = '${Util.toStandardTimeString()}',f_handler_state = '已预约',f_handlercheck_id='${this.changeData.f_handlercheck_name[0].id}',f_handlercheck_name='${this.changeData.f_handlercheck_name[0].name}',f_safe_remark='${this.changeData.f_safe_remark || ''}' where f_userinfo_id in ('${row.f_userinfo_id}')`
      new HttpResetClass().load('POST', `${this.$androidUtil.getProxyUrl()}/rs/logic/runSQL`, {data: {sql: sql}}, {
        resolveMsg: null,
        rejectMsg: '预约转单失败'
      }).then(() => {
        this.changeData = {}
        this.selecetChecker = false
        this.$refs.paged.$refs.cri.search()
      }).catch(() => {
        this.$showMessage('转单失败')
      })
    }
  }
}
</script>
<style scoped>
.app-row {
  background-color: white;
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
}

.search_input {
  border: 0;
  outline: none;
}

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

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

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

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

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