<template>
  <div>
    <criteria-paged :model="model" v-ref:paged>
      <criteria partial='criteria' @condition-changed='$parent.selfSearch' v-ref:criteria>
        <div partial>
          <div class="row">
            <label class="form-group font_normal_body"><b>计划信息</b></label>
            <div class="form-group col-sm-1" v-show="false">
              <!--隐藏条件-->
              <input type="text" class="input_search" v-model="model.f_plan_id"
                     style="width: 95%" placeholder="计划id" condition=" i.f_plan_id='{}'">
            </div>
            <div class="form-group col-sm-1" >
              <input type="text" class="input_search" v-model="model.f_userinfo_code"
                     style="width: 95%" placeholder="客户编号" condition="i.f_userinfo_code='{}'">
            </div>
            <div class="form-group col-sm-1" >
              <input type="text" class="input_search" v-model="model.f_user_name"
                     style="width: 95%" placeholder="客户名称" condition="i.f_user_name like '%{}%'">
            </div>
            <div class="form-group col-sm-1" >
              <input type="text" class="input_search" v-model="model.f_address"
                     style="width: 95%" placeholder="客户地址" condition="i.f_address like '%{}%'">
            </div>
            <!--<div class="form-group col-sm-1" >
              <v-select :width="'95%'"
                        class="select select_list"
                        :value.sync="$parent.$parent.f_state"
                        v-model="$parent.$parent.f_state"
                        :options='$parent.$parent.checkState'
                        placeholder='安检状态'
                        close-on-select
                        value-single
              >
              </v-select>
            </div>-->
            <div class="form-group col-sm-3" >
              <button class="button_new" style="margin-right: 10px"  @click="$parent.$parent.showUserCondition()">更多条件</button>
              <button class="button_search" style="margin-right: 10px"  @click="search()">查询</button>
              <button class="button_search" style="margin-right: 10px"  @click="clear()">清除</button>
              <export-excel-safe :data="$parent.$parent.exportParameter"
                                 :field="$parent.$parent.exportExcelField"
                                 style="margin-left: 0px"
                                 sqlurl="rs/logic/SafeExportExcel" sql-name="planItem"
                                 :template-name="$parent.$parent.selectplan.f_plan_name + '安检计划导出'" :choose-col="true">
              </export-excel-safe>
            </div>
            <div class="form-group col-sm-2 safe_p">
              <label class="font_normal_body" :title="$parent.$parent.selectplan.f_plan_name">{{$parent.$parent.selectplan.f_plan_name?'当前选中 : '+$parent.$parent.selectplan.f_plan_name:''}}</label>
            </div>
            <div class="form-group col-sm-2" style="float: right">
              <button class="button_search" style="margin-right: 10px"  @click="$parent.$parent.showplanModal()">计划调整</button>
              <button class="button_search" style="margin-right: 10px"  @click="$parent.$parent.delPlanItem()">移出计划</button>
            </div>
            <modal :show.sync="$parent.$parent.showCondtion" v-ref:modal :width="'50%'" :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">
                  <div class="form-group col-sm-4" >
                    <label class="font_normal_body">是否已检:</label>
                    <v-select
                      class="select select_list"
                      :value.sync="model.f_state"
                      v-model="model.f_state"
                      :options='$parent.$parent.checkState'
                      @change="$parent.$parent.checkStateChange(model.f_state)"
                      placeholder='请选择'
                      condition="i.f_state='{}'"
                      close-on-select
                      value-single
                    >
                    </v-select>
                  </div>
                  <div class="form-group col-sm-4" >
                    <label class="font_normal_body">安检结果:</label>
                    <v-select
                      class="select select_list"
                      :value.sync="model.f_check_state"
                      v-model="model.f_check_state"
                      :options='$parent.$parent.checkResults'
                      placeholder='请选择'
                      condition="i.f_last_check_state='{}'"
                      close-on-select
                      value-single
                    >
                    </v-select>
                  </div>
                  <div class="form-group col-sm-4" >
                    <label class="font_normal_body">安检起始:</label>
                    <datepicker
                      placeholder='请选择'
                      style="width:60%"
                      :disabled-days-of-week="[]"
                      :format="'yyyy-MM-dd'"
                      :show-rest-button="reset"
                      :value.sync="model.f_startfile_time"
                      v-model="model.f_startfile_time"
                      condition="i.f_last_check_date >='{} 00:00:00'">
                    </datepicker>
                  </div>
                  <div class="form-group col-sm-4" >
                    <label class="font_normal_body">安检截止:</label>
                    <datepicker
                      placeholder='请选择'
                      :disabled-days-of-week="[]"
                      style="width:60%"
                      :format="'yyyy-MM-dd'"
                      :show-rest-button="reset"
                      :value.sync="model.f_endfile_time"
                      v-model="model.f_endfile_time"
                      condition="i.f_last_check_date  <='{} 00:00:00'">
                    </datepicker>
                  </div>
                </div>
              </div>
              <div slot="modal-footer" class="modal-footer" style="text-align: center">
                <button class="button_search" style="margin-right: 15px" @click="search()">查询</button>
                <button class="button_search" @click="$parent.$parent.cancel">取消</button>
              </div>
            </modal>
          </div>
        </div>
      </criteria>
      <data-grid :model="model" partial='list' class="table_sy">

        <template partial='head'>
          <tr>
            <th><nobr><input type="checkbox" onClick="event.cancelBubble = true" :checked="$parent.$parent.$parent.checkAll" @change="$parent.$parent.$parent.setCheckAll()"/> 全选</nobr></th>
            <th><nobr>用户编号</nobr></th>
            <th><nobr>用户名称</nobr></th>
            <th><nobr>表号</nobr></th>
            <th><nobr>用户类型</nobr></th>
            <th><nobr>小区名称</nobr></th>
            <th><nobr>安检状态</nobr></th>
            <th><nobr>地址</nobr></th>
          </tr>
        </template>
        <template partial='body'>
          <td style="text-align: center;white-space:nowrap;"><input type="checkbox" onClick="event.cancelBubble = true" :checked="$parent.$parent.$parent.isChecked(row.f_check_item_id)"  @change="$parent.$parent.$parent.setCheckes(row.f_check_item_id)" /></td>
          <td style="text-align: center"><nobr>{{row.f_userinfo_code}}</nobr></td>
          <td style="text-align: center"><nobr>{{row.f_user_name}}</nobr></td>
          <td style="text-align: center"><nobr>{{row.f_meternumber}}</nobr></td>
          <td style="text-align: center"><nobr>{{row.f_user_type}}</nobr></td>
          <td style="text-align: center"><nobr>{{row.f_residential_area}}</nobr></td>
          <td style="text-align: center"><nobr>{{row.f_state==='已检'?row.f_last_check_state:'未检'}}</nobr></td>
          <td style="text-align: center"><nobr>{{row.f_address}}</nobr></td>
        </template>
      </data-grid>
    </criteria-paged>
    <modal :show.sync="showPlanModal" v-ref:modalp>
      <div slot="modal-header" class="modal-header">
        <h4 class="modal-title">
          计划内用户调整
        </h4>
      </div>
      <div slot="modal-body" class="modal-body">
        <plan-chooser :f.sync="userlogin.orgid" v-ref:chooser></plan-chooser>
      </div>
      <div slot="modal-footer" class="modal-footer" style="text-align: center">
        <button class="button_search" style="margin-right: 15px" @click="dragtoOtherPlanIteem">确认</button>
        <button class="button_search" @click="cancel">取消</button>
      </div>
    </modal>
  </div>
</template>

<script>
  import {HttpResetClass, PagedList} from "vue-client";
  import Vue from "vue";

  export default {
    name: "PlanManage",
    title: '计划管理',
    data() {
      return {
        model:new PagedList('/rs/sql/planItem', 100, {}),
        a:'1',
        opt:[{label:"测试",value:"测试"}],
        showCondtion:false,
        checkAll:false,
        checkes:[],
        checkResults:[{label:'到访不遇',value:'到访不遇'},{label:'拒检',value:'拒检'},{label:'入户',value:'入户'}],
        checkState:[{label:'全部',value:''},{label:'未检',value:'未检'},{label:'已检',value:'已检'}],
        showPlanModal:false,
        exportExcelField: {
          'f_userinfo_code':'用户编号',
          'f_user_name':'用户名称',
          'f_meternumber':'表号',
          'f_user_type':'用户类型',
          'f_residential_area':'小区名称',
          'f_state':'安检状态',
          'f_address':'地址'
        }
      }
    },
    props:["selectplan","userlogin"],
    ready(){

    },
    computed:{
      exportParameter(){
        // excel 导出条件拼接
        return {
          condition: this.$refs.paged.model.condition,
          groupName: this.groupNameForSql
        }
      }
    },
    methods:{
      clear(){
        this.model.f_plan_id = '';
        this.model.f_userinfo_code = '';
        this.model.f_user_name = '';
        this.model.f_address='';

      },
      //将某个计划下的一项拖到另一个计划
      async dragtoOtherPlanIteem() {
        //tag)

        if (!this.$refs.modalp.$children[0].selectedRow.id) {
          this.$showMessage("请选择需要调整到那个计划中！")
          return
        }
        this.$parent.isSend=true
        try{
          let res=await new HttpResetClass().load("POST", "/rs/logic/UpCheckPlanItem", {
            data:{
              f_operator:this.userlogin.name,
              f_plan_id:this.$refs.modalp.$children[0].selectedRow.id,
              condition:this.model.condition,
              switchCheckAll:true,
              checkAll:this.checkAll,
              param:this.checkes,
              columnName: "i.id"
            }
          }, {resolveMsg: null, rejectMsg: null})
          this.$parent.isSend=false
          if(res.data.code==200){
            this.$showMessage("更换安检计划成功！")
            this.$parent.refreshPlan()
          }else{
            this.$showMessage("更换安检计划失败！")
          }
        }catch (e) {
          this.$parent.isSend=false
          this.$showMessage("更换安检计划失败！")
        }
      },
      showplanModal(){
        if(!this.selectplan || !this.selectplan.id){
          this.$showMessage("请先打开一个计划再进行操作")
          return
        }
        if(!this.checkAll && this.checkes.length==0){
          this.$showMessage("请先在计划中勾选你要调整的用户！")
          return
        }
        this.showPlanModal=true
      },
      showUserCondition(){
        this.showCondtion=true
      },
      isChecked(v) {
        // 如果全选，不在的按选中算，否则，在的按选中算
        if (this.checkAll) {
          return this.checkes.indexOf(v) == -1
        } else {
          return this.checkes.indexOf(v) != -1
        }
      },
      setCheckAll() {
        this.checkAll=this.checkAll?false:true;
        // 全选改变后，清空选中数据
        this.checkes = []
      },
      setCheckes(id) {
        let index=this.checkes.indexOf(id)
        if(index<0){
          this.checkes.push(id)
        }else{
          this.checkes.splice(index,1)
        }
      },
      cancel(){
        this.showCondtion=false
        this.showPlanModal=false
      },
      selfSearch (args) {
        if(!this.selectplan.id){
          this.$showMessage("请先选择一个计划！")
          return
        }
        this.cancel()
        this.checkes=[]
        this.checkAll=false
        this.model.search(args.condition, args.model, args.condValue)
      },
      checkStateChange(val){
        if(val=='已检'){
          this.checkResults=[{label:'到访不遇',value:'到访不遇'},{label:'拒检',value:'拒检'},{label:'入户',value:'入户'}]
        }else{
          this.checkResults=[]
          this.$refs.paged.$refs.criteria.model.f_check_state=''
        }
      },
      //修改计划项状态为作废
      async delPlanItem() {
        if(!this.selectplan || !this.selectplan.id){
          this.$showMessage("请先打开一个计划再进行操作")
          return
        }
        if(!this.checkAll && this.checkes.length==0){
          this.$showMessage("请先在计划中勾选你要作废的用户！")
          return
        }
        this.$showMessage("此操作无法撤回,确定要执行作废安检单操作吗？",['confirm','cancel']).then((button)=>{
          if(button=='confirm'){
            let resu=new HttpResetClass().load("POST", "/rs/logic/UpCheckPlanItemState", {
              data: {
                f_operator:this.userlogin.name,
                condition:this.model.condition,
                switchCheckAll:true,
                checkAll:this.checkAll,
                param:this.checkes,
                columnName: "i.id"
              }
            }, {resolveMsg: null, rejectMsg: null}).then((resu)=>{

              //tag)
              if(resu.data.code==200){
                this.$showMessage("移除安检单成功! 成功移除:"+resu.data.res.up+"条"+(resu.data.res.noup>0?"有"+resu.data.res.noup+"条已经不是 ‘未检’ 状态！":""))
                //this.checkes=[]
                //this.checkAll=false
                this.$parent.refresh()
              }else{
                this.$showMessage("取消安检计划失败!")
              }
            })
          }
        })
      }
    },
    watch:{
      'selectplan.id' (){
        //tag
        if(this.selectplan.id){
          this.$refs.paged.$refs.criteria.model.f_plan_id=this.selectplan.id
          this.$refs.paged.$refs.criteria.search()
        }
      }
    }
  }
</script>

<style scoped>
  .safe_p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
