<template>
  <a-form layout="inline" :class="className" :model="formState">
    <a-form-item label="总机构" :labelCol="{ span: 5 }" :colon="false">
      <a-select
        style="width: 100%"
        v-model="formState.whole"
        placeholder="请选择总机构"
        @change="wholeHandleChange"
        allowClear
      >
        <a-select-option
          v-for="item in wholeList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="省机构" :labelCol="{ span: 5 }" :colon="false">
      <a-select
        style="width: 100%"
        v-model="formState.provinceId"
        placeholder="请选择省机构"
        @change="provinceHandleChange"
        allowClear
      >
        <a-select-option
          v-for="item in provinceList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="市机构" :labelCol="{ span: 5 }" :colon="false">
      <a-select
        style="width: 100%"
        v-model="formState.cityId"
        placeholder="请选择市机构"
        allowClear
      >
        <a-select-option
          v-for="item in cityList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          @change="cityHandleChange"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
      label="区机构"
      :labelCol="{ span: 5 }"
      :colon="false"
      v-show="showTab > 3"
    >
      <a-select
        style="width: 100%"
        v-model="formState.countyId"
        placeholder="请选择区机构"
        @change="countyHandleChange"
        allowClear
      >
        <a-select-option
          v-for="item in areaList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
      label="门店机构"
      :labelCol="{ span: 7 }"
      :colon="false"
      v-show="showTab > 3"
    >
      <a-select
        style="width: 100%"
        v-model="formState.houseId"
        placeholder="请选择门店机构"
        allowClear
      >
        <a-select-option
          v-for="item in storeList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
      label="姓名"
      :labelCol="{ span: 5 }"
      :colon="false"
      v-show="className"
    >
      <a-input
        placeholder="请输入姓名"
        v-model="formState.name"
        allowClear
      ></a-input>
    </a-form-item>
    <a-form-item
      label="工号"
      :labelCol="{ span: 5 }"
      :colon="false"
      v-show="className"
    >
      <a-input
        placeholder="请输入工号"
        v-model="formState.userCode"
        allowClear
      ></a-input>
    </a-form-item>
    <a-form-item
      label="手机号"
      :labelCol="{ span: 5 }"
      :colon="false"
      v-show="className"
    >
      <a-input
        placeholder="请输入手机号"
        v-model="formState.phoneNumber"
        allowClear
      ></a-input>
    </a-form-item>
    <a-form-item
      label="管理人"
      :labelCol="{ span: 5 }"
      :colon="false"
      v-show="showManage"
    >
      <a-select
        placeholder="请选择"
        v-model="formState.leaderId"
        allowClear
        show-search
        :filter-option="filterOption"
      >
        <a-select-option
          v-for="item in manageList"
          :key="item.id"
          :value="item.id"
        >
          {{ item.name }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item
      label="是否出单"
      :labelCol="{ span: 7 }"
      :colon="false"
      v-show="showStatus"
    >
      <a-select
        placeholder="请选择"
        v-model="formState.outThere"
        allowClear
        show-search
        :filter-option="filterOption"
      >
        <a-select-option :value="1"> 出单 </a-select-option>
        <a-select-option :value="0"> 不出单 </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item
      label="             "
      :labelCol="{ span: 5 }"
      :colon="false"
      class="form-item-search"
      v-show="search"
    >
      <a-button type="primary" v-show="exportExcel" @click="exportList"
        >导出</a-button
      >
      <a-button type="primary" @click="getList" style="margin-left: 10px"
        >查询</a-button
      >
    </a-form-item>
  </a-form>
</template>

<script>
import manageminxin from "../../minins/manageMixin";

import mixin from "../../minins/mixin";

export default {
  name: "FormRow",
  mixins: [mixin, manageminxin],
  props: {
    formState: {},
    search: {
      default: true,
    },
    className: {
      default: "",
    },
    showTab: {
      default: 5,
    },
    exportExcel: {
      default: false,
    },
    showStore: {
      default: true,
    },
    showManage: {
      default: false,
    },
    showStatus: {
      default: false,
    },
  },
  watch: {
    "formState.provinceId"(val) {
      this.getCityList(val);
    },
    "formState.cityId"() {
      this.getAreaList(this.formState.cityId);
    },
    "formState.countyId"() {
      this.getStoreList(this.formState.countyId);
    },
  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    wholeHandleChange(val) {
      if (val) {
        this.getProvinceList(this.formState.whole);
      }

      if (val == undefined || val == "" || val == null) {
        this.formState.provinceId = undefined;
        this.formState.cityId = undefined;
        this.formState.countyId = undefined;
        this.formState.houseId = undefined;
        this.getProvinceList(this.formState.whole);
      }
    },
    provinceHandleChange() {
      this.getCityList(this.formState.provinceId);
    },
    cityHandleChange() {
      this.getAreaList(this.formState.cityId);
    },
    countyHandleChange() {
      this.getStoreList(this.formState.countyId);
    },
    getList() {
      this.$emit("getList", this.formState);
    },
    exportList() {
      this.$emit("exportList", this.formState);
    },
  },
};
</script>

<style lang="less" scoped>
.ant-form {
  display: flex;
  > .ant-form-item {
    flex: 1;
    /deep/.ant-form-item-control-wrapper {
      width: 100%;
    }
  }
}

.form-item-search {
  // display: flex;
  // justify-content: flex-end;
  /deep/ .ant-form-item-control {
    display: flex;
    justify-content: flex-end;
  }
}
.item-4 {
  display: flex;
  > .ant-form-item {
    flex: none;
    width: 23%;
    /deep/.ant-form-item-control-wrapper {
      width: 100%;
    }
  }
}
</style>
