<template>
  <!-- 点火派单 -->
  <div class="flex-row">
    <div class="basic-main">
      <criteria-paged :model="model" v-ref:cp>
        <criteria
          partial="criteria"
          @condition-changed="$parent.searchCondition"
          v-ref:cri
        >
          <div
            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>片&emsp;&emsp;区：</strong></label
                >
                <v-select
                  v-model="model.f_slice_area"
                  placeholder="片区"
                  condition="ui.f_slice_area = '{}'"
                  :value.sync="model.f_slice_area"
                  :options="$parent.$parent.sliceareas"
                  class="select select_list"
                  :value-single="true"
                  close-on-select
                >
                </v-select>
              </div>
              <div class="form-group col-sm-2">
                <label class="font_normal_body"
                  ><strong>发卡状态：</strong></label
                >
                <v-select
                  v-model="model.f_whether_hairpin"
                  placeholder="发卡状态"
                  condition="uf.f_whether_hairpin = '{}'"
                  :value.sync="model.f_whether_hairpin"
                  :options="$parent.$parent.whether_hairpin"
                  class="select select_list"
                  :value-single="true"
                  close-on-select
                >
                </v-select>
              </div>
              <div class="form-group col-sm-2">
                <label for="startDate" class="font_normal_body"
                  ><strong>发卡时间：</strong></label
                >
                <datepicker
                  id="startDate"
                  placeholder="开始日期"
                  style="width: 60% !important"
                  v-model="model.startDate"
                  :value.sync="model.startDate"
                  :format="'yyyy-MM-dd 00:00:00'"
                  :show-reset-button="true"
                  condition="uf.f_open_date >= '{}'"
                >
                </datepicker>
              </div>
              <div class="form-group col-sm-2">
                <label for="endDate" class="font_normal_body"
                  ><strong>发卡时间：</strong></label
                >
                <datepicker
                  id="endDate"
                  placeholder="结束日期"
                  style="width: 60% !important"
                  v-model="model.endDate"
                  :value.sync="model.endDate"
                  :format="'yyyy-MM-dd 23:59:59'"
                  :show-reset-button="true"
                  condition="uf.f_open_date <= '{}'"
                >
                </datepicker>
              </div>
              <div class="form-group col-sm-3 button-range">
                <button
                  class="button_export button_spacing"
                  @click="$parent.$parent.openOperatorModal()"
                >
                  批量派单
                </button>
                <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
                  :class="{
                    button_shrink_top: $parent.$parent.criteriaShow,
                    button_shrink_bottom: !$parent.$parent.criteriaShow,
                  }"
                  @click="
                    $parent.$parent.criteriaShow = !$parent.$parent.criteriaShow
                  "
                  class="button_spacing"
                  style="float: right"
                ></div>
              </div>
            </div>
            <div class="row" v-show="$parent.$parent.criteriaShow">
              <div class="form-group col-sm-2">
                <label class="font_normal_body"
                  ><strong>工程编号：</strong></label
                >
                <input
                  type="text"
                  class="input_search"
                  style="width: 60%"
                  v-model="model.f_applycode"
                  v-on:keyup.enter="$parent.$parent.search()"
                  condition="ui.f_applycode = '{}'"
                  placeholder="工程编号"
                />
              </div>
              <div class="form-group col-sm-2">
                <label class="font_normal_body"
                  ><strong>用户类型：</strong></label
                >
                <v-select
                  v-model="model.f_user_type"
                  placeholder="用户类型"
                  condition="uf.f_user_type = '{}'"
                  :value.sync="model.f_user_type"
                  :options="$parent.$parent.usertype"
                  class="select select_list"
                  :value-single="true"
                  close-on-select
                >
                </v-select>
              </div>
              <div class="form-group col-sm-2">
                <label class="font_normal_body"
                  ><strong>用户编号：</strong></label
                >
                <input
                  type="text"
                  class="input_search"
                  style="width: 60%"
                  v-model="model.f_userinfo_id"
                  v-on:keyup.enter="$parent.$parent.search()"
                  condition="ui.f_userinfo_id = '{}'"
                  placeholder="用户编号"
                />
              </div>
              <div class="form-group col-sm-2">
                <label class="font_normal_body"
                  ><strong>用&ensp;户&ensp;名：</strong></label
                >
                <input
                  type="text"
                  class="input_search"
                  style="width: 60%"
                  v-model="model.f_user_name"
                  v-on:keyup.enter="$parent.$parent.search()"
                  condition="ui.f_user_name = '{}'"
                  placeholder="用户名"
                />
              </div>
              <div class="form-group col-sm-2">
                <label class="font_normal_body"
                  ><strong>电&emsp;&emsp;话：</strong></label
                >
                <input
                  type="text"
                  class="input_search"
                  style="width: 60%"
                  v-model="model.f_user_phone"
                  v-on:keyup.enter="$parent.$parent.search()"
                  condition="ui.f_user_phone = '{}'"
                  placeholder="电话"
                />
              </div>
              <div class="form-group col-sm-2">
                <label class="font_normal_body">小&emsp;&emsp;区：</label>
                <input type="text" class="input_search" style="width: 60%" v-model="model.f_residential_area"
                       v-on:keyup.enter="$parent.$parent.search()" condition="ui.f_residential_area = '{}'" placeholder='小区'>
              </div>
              <div class="form-group col-sm-2">
                <label class="font_normal_body">表&emsp;&emsp;号：</label>
                <input type="text" class="input_search" style="width: 60%" v-model="model.f_meternumber"
                       v-on:keyup.enter="$parent.$parent.search()" condition="uf.f_meternumber like '%{}%'" placeholder='表号'>
              </div>
            </div>
          </div>
        </criteria>
        <data-grid
          :model="model"
          optional
          partial="list"
          v-ref:grid
          style="overflow: auto"
          class="list_area table_sy"
        >
          <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>
              <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 style="text-align: center">
                <nobr
                  ><font>{{ $index + 1 }}</font></nobr
                >
              </td>
              <td style="text-align: center">
                <nobr
                  ><font>{{ row.f_userinfo_id }}</font></nobr
                >
              </td>
              <td style="text-align: center">
                <nobr
                  ><font>{{ row.f_user_name }}</font></nobr
                >
              </td>
              <td style="text-align: center">
                <nobr
                  ><font>{{ row.f_user_phone }}</font></nobr
                >
              </td>
              <td style="text-align: center">
                <nobr
                  ><font>{{ row.f_user_type }}</font></nobr
                >
              </td>
              <td style="text-align: center">
                <nobr
                  ><font
                    >{{ row.f_address }}{{ row.f_address_detail }}</font
                  ></nobr
                >
              </td>
              <td style="text-align: center">
                <nobr
                  ><font>{{ row.f_area }}</font></nobr
                >
              </td>
              <td style="text-align: center">
                <nobr
                  ><font>{{ row.f_meter_classify }}</font></nobr
                >
              </td>
              <td style="text-align: center">
                <nobr
                  ><font>{{ row.f_meternumber }}</font></nobr
                >
              </td>
              <td style="text-align: center">
                <nobr
                  ><font>{{ row.f_meter_brand }}</font></nobr
                >
              </td>
              <td style="text-align: center">
                <nobr
                  ><font>{{ row.f_meter_style }}</font></nobr
                >
              </td>
              <td style="text-align: center">
                <nobr
                  ><font>{{ row.f_whether_hairpin }}</font></nobr
                >
              </td>
              <td style="text-align: center">
                <nobr
                  ><font>{{ row.f_faka_date }}</font></nobr
                >
              </td>
            </tr>
          </template>
        </data-grid>
      </criteria-paged>
    </div>
  </div>


  <validator name="v">
    <modal
      v-if="showOperator"
      :show.sync="showOperator"
      v-ref:operator
      :large="true"
      :backdrop="false"
      title="批量派单"
      >、
      <header slot="modal-header" class="modal-header">
        <button type="button" class="close" @click="closeModal('details')">
          <span>&times;</span>
        </button>
        <h4 class="modal-title">批量派单</h4>
      </header>
      <article slot="modal-body" class="modal-body clearfix">
        <!-- 基本信息 -->
        <div
          class="form-group col-sm-12"
          :class="[$v.operator.required ? 'has-error' : '']"
        >
          <label class="col-sm-2 control-label">操作人：</label>
          <div class="col-sm-10">
            <input
              type="text"
              v-show="false"
              v-model="operator.id"
              :value.sync="operator.id"
              v-validate:operator="['required']"
            />
            <input-select
              class="select select_list"
              :value.sync="operator"
              v-model="operator"
              :options="operatorList"
            ></input-select>
          </div>
        </div>
        <div class="form-group col-sm-12">
          <label class="col-sm-2 control-label">是否共享：</label>
          <div class="col-sm-10">
            <input-select
              class="select select_list"
              :value.sync="f_shared_dispatch"
              v-model="f_shared_dispatch"
              :options="sharedOptions"
            ></input-select>
          </div>
        </div>
      </article>
      <footer slot="modal-footer" class="modal-footer">
        <button
          type="button"
          class="btn btn-primary"
          @click="batchDispatch()"
          :disabled="!$v.valid"
        >
          确定
        </button>
      </footer>
    </modal>
  </validator>
</template>

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

export default {
  title: "点火派单",
  props: ["showData"],
  data() {
    return {
      model: new PagedList("rs/sql/getWaitIgnitionTaskOld", 20, null),
      criteriaShow: false,
      source:
        "this.getParentByType($organization$).getChildByName($通气组报装$).getChildren()",
      operatorList: [],
      showOperator: false,
      operator: null,
      f_shared_dispatch: "否",
      sharedOptions: [
        { label: "是", value: "是" },
        { label: "否", value: "否" },
      ],
      sliceareas: [], // 片区
      whether_hairpin: [
        { label: "全部", value: "" },
        { label: "已发卡", value: "已发" },
        { label: "未发卡", value: "未发" },
      ], //发卡状态
      usertype: [
        { label: "全部", value: "" },
        { label: "民用", value: "民用" },
        { label: "非民用", value: "非民用" },
      ], //用户类型
    };
  },
  ready() {
    this.search();
    this.getOperator();
    setTimeout(this.getsliceareas, 500);
  },
  methods: {
    loadPage() {
      this.$dispatch("loadPage");
    },
    async batchDispatch() {
      let selectdata = this.$refs.cp.$refs.grid.getRowData();
      if (selectdata.length > 0) {
        for (let i = 0; i < selectdata.length; i++) {
          if (
            selectdata[i].f_whether_hairpin === "未发" &&
            (!selectdata[i].f_user_name.includes("原处") ||
              !selectdata[i].f_contact.includes("原处"))
          ) {
            let res = await this.$showMessage(
              `第${selectdata.length}条数据未开户，无法派单！`
            );
            if (res == "confirm") {
              return;
            }
          }
        }
        let data = {
          operator: this.$login.f,
          f_userinfo_ids: selectdata.map((item) => {
            return {
              f_userinfo_id: item.f_userinfo_id,
            };
          }),
          ignitionOperator: this.operator,
          f_shared_dispatch: this.f_shared_dispatch,
        };
        let http = new HttpResetClass()
        let res = await http.load(
          'POST',
          `rs/logic/batchDispatchGasOld`,
          {data: data},
          {resolveMsg: null, rejectMsg: '批量派单失败！！！'}
        )
        this.closeModal("details");
        this.search();
      } else {
        this.$showMessage("至少选择1个工单");
      }
    },
    async getsliceareas() {
      let http = new HttpResetClass()
      let res = await http.load(
        'POST',
        `rs/logic/getsliceareas`,
        {data: null},
        {resolveMsg: null, rejectMsg: '获取片区失败！！！'}
      )
      this.sliceareas = [{ label: "全部", value: "" }, ...res.data];
    },
    async openOperatorModal() {
      let selectdata = this.$refs.cp.$refs.grid.getRowData();
      if (selectdata.length > 10) {
        let res = await this.$showMessage(
          `当前数据条数: ${selectdata.length},最多10条数据可进行批量派单, 请重新选择数据`
        );
       return
      }
      if (selectdata.length > 0) {
        this.showOperator = true;
      } else {
        this.$showMessage("至少选择1个工单");
      }
    },
    async getOperator() {
      let data = {
        source: this.source,
        userid: this.$login.f.id,
      };
      let http = new HttpResetClass()
      let res = await http.load(
        'POST',
        `rs/search`,
        { data: data },
        {resolveMsg: null, rejectMsg: '点火人员查询失败！！！'}
      )
      this.operatorList = res.data.map((item) => {
        return {
          label: item.name,
          value: item,
        };
      });
    },
    searchCondition(args) {
      this.model.search(args.condition, args.model);
    },
    // 查询
    search() {
      this.$refs.cp.$refs.cri.search();
    },
    clear() {
      Object.keys(this.$refs.cp.$refs.cri.model).forEach((key) => {
        this.$refs.cp.$refs.cri.model[key] = null;
      });
    },
    closeModal(type) {
      this.showOperator = false;

      this.operator = null;

      if (type === "details") {
        this.$refs.cp.$refs.grid.selectInit();
      }
    },
  },
};
</script>

<style scoped></style>
