<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="20" :offset="1" class="creat_order">
        <div v-loading="loading">
          <el-form
            ref="ruleForm"
            :model="ruleForm"
            :rules="rules"
            label-width="150px"
            class="order_form"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item label="订单号" prop="F_Id">
                  <el-input v-model="ruleForm.F_Id" placeholder="请输入订单号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="消息来源" prop="F_ADFrom">
                  <el-input v-model="ruleForm.F_ADFrom" placeholder="请输入消息来源" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="客户姓名" prop="F_Customer">
                  <el-input v-model="ruleForm.F_Customer" placeholder="请输入客户姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号码" prop="F_CustomerPhone">
                  <el-input
                    v-model="ruleForm.F_CustomerPhone"
                    placeholder="请输入手机号码"
                    @change="changeCustomerPhone"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="商品分类" prop="className">
                  <el-cascader
                    v-model="parentids"
                    :options="commodityTypeLists"
                    :props="typeDropProps"
                    placeholder="请选择商品分类"
                    clearable
                    filterable
                    change-on-select
                    class="form_select"
                    @change="commodityTypeChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="商品" prop="productName">
                  <el-select
                    v-model="commoditySearchData.productName"
                    class="form_select"
                    value-key="F_ProductId"
                    clearable
                    placeholder="请选择商品"
                    @change="commodityListChange"
                  >
                    <el-option
                      v-for="item in commodityListLists"
                      :key="item.F_ProductId"
                      :label="item.F_ProductName"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label="商品数量" prop="num">
                  <el-input-number v-model="commoditySearchData.num" :min="1" label="描述文字" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="山西仓" prop="stockQuantity">
                  <span>{{ stockQuantity.stockOne }}</span>
                  <!-- <el-input v-model="" placeholder="库存（一）" disabled/> -->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="新乡仓" prop="stockQuantity">
                  <span>{{ stockQuantity.stockTwo }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-form-item>
                <el-button type="primary" @click="addCommodity">添加商品</el-button>
                <el-button type="primary" @click="getActivityAccountList">获取优惠</el-button>
              </el-form-item>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="商品">
                  <el-table :data="commodityTableData" stripe style="width: 100%">
                    <el-table-column prop="F_ProductName" label="商品名称" align="center" />
                    <el-table-column prop="F_Count" label="商品数量" align="center" />
                    <el-table-column label="操作" align="center">
                      <template slot-scope="scope">
                        <el-button type="text" @click="btn_deleteCommodity(scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="优惠">
                  <el-table
                    :data="activityAccountData"
                    stripe
                    style="width: 100%"
                    @selection-change="activityAccountSelectionChange"
                  >
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="活动类型" align="center">
                      <template slot-scope="scope">{{ scope.row.type | activityAccountTypeFilter }}</template>
                    </el-table-column>
                    <el-table-column prop="money" label="优惠金额" align="center" />
                    <el-table-column prop="gift" label="赠品" align="center" />
                  </el-table>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="12">
                <el-form-item label="订单类型" prop="F_Type">
                  <el-select
                    v-model="ruleForm.F_Type"
                    class="form_select"
                    filterable
                    clearable
                    placeholder="请选择订单类型"
                  >
                    <el-option
                      v-for="item in orderType"
                      :key="item.F_Value"
                      :label="item.F_Value"
                      :value="item.F_Value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="出库货仓" prop="F_Stock">
                  <el-select
                    v-model="ruleForm.F_Stock"
                    placeholder="请选择出库货仓"
                    class="form_select"
                    clearable
                  >
                    <el-option
                      v-for="item in stockList"
                      :key="item.F_Value"
                      :label="item.F_Value"
                      :value="item.F_Value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <!-- <el-col :span='12'>
                <el-form-item label="快递单号" prop="F_TrackingNo" >
                  <el-input v-model="ruleForm.F_TrackingNo" placeholder="请输入快递单号"/>
                </el-form-item>
              </el-col>-->
              <el-col :span="12">
                <el-form-item label="收件人" prop="F_Addressee">
                  <el-input v-model="ruleForm.F_Addressee" placeholder="请输入收件人" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="收件人手机号" prop="F_AddPhone">
                  <el-input v-model="ruleForm.F_AddPhone" placeholder="请输入收件人手机号" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="送货说明" prop="F_AddDes">
                  <el-input v-model="ruleForm.F_AddDes" placeholder="请输入送货说明" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="省" prop="F_AddProvince">
                  <el-select
                    v-model="ruleForm.F_AddProvince"
                    class="form_select"
                    value-key="id"
                    filterable
                    clearable
                    placeholder="请选择省"
                    @change="getCity"
                  >
                    <el-option
                      v-for="item in provinceDatas"
                      :key="item.id"
                      :label="item.text"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="市" prop="F_AddCity">
                  <el-select
                    v-model="ruleForm.F_AddCity"
                    class="form_select"
                    value-key="id"
                    filterable
                    clearable
                    placeholder="请选择市"
                    @change="getArea"
                  >
                    <el-option
                      v-for="item in cityDatas"
                      :key="item.id"
                      :label="item.text"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="区/县" prop="F_AddArea">
                  <el-select
                    v-model="ruleForm.F_AddArea"
                    class="form_select"
                    value-key="id"
                    filterable
                    clearable
                    placeholder="请选择区/县"
                    @change="getTown"
                  >
                    <el-option
                      v-for="item in areaDatas"
                      :key="item.id"
                      :label="item.text"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="乡镇/街道" prop="F_AddTown">
                  <el-select
                    v-model="ruleForm.F_AddTown"
                    class="form_select"
                    value-key="id"
                    filterable
                    clearable
                    placeholder="请选择乡镇/街道"
                    @change="sleectTown"
                  >
                    <el-option
                      v-for="item in townDatas"
                      :key="item.id"
                      :label="item.text"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="详细地址" prop="F_Address">
                  <el-input v-model="ruleForm.F_Address" placeholder="请输入详细地址" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="邮编" prop="F_PostalCode">
                  <el-input v-model="ruleForm.F_PostalCode" placeholder="请输入邮编" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="快递" prop="F_Express">
                  <el-select
                    v-model="ruleForm.F_Express"
                    placeholder="请选择快递"
                    class="form_select"
                    clearable
                  >
                    <el-option
                      v-for="item in expressList"
                      :key="item.F_Value"
                      :label="item.F_Value"
                      :value="item.F_Value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="运费" prop="F_ExpressFee">
                  <el-select
                    v-model="ruleForm.F_ExpressFee"
                    placeholder="请选择运费"
                    class="form_select"
                    clearable
                  >
                    <el-option label="10" value="10" />
                    <el-option label="28" value="28" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="支付方式" prop="F_PayType">
                  <el-select
                    v-model="ruleForm.F_PayType"
                    placeholder="请选择支付方式"
                    class="form_select"
                    clearable
                  >
                    <el-option
                      v-for="item in payTypeList"
                      :key="item.F_Value"
                      :label="item.F_Value"
                      :value="item.F_Value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <!-- <el-col :span='12'>
                <el-form-item label="实收金额" prop="F_RealPrice" >
                  <el-input v-model="ruleForm.F_RealPrice" placeholder="请输入实收金额"/>
                </el-form-item>
              </el-col>-->
              <el-col :span="6">
                <el-form-item label="使用积分" prop="F_Score">
                  <el-input v-model="ruleForm.F_Score" placeholder="请输入使用积分" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="拥有积分" prop="F_Score">
                  <span>{{ alreadyPoints }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="推荐人" prop="F_RecommendName">
                  <el-select
                    v-model="ruleForm.F_RecommendName"
                    :remote-method="remoteMethodRecommend"
                    :loading="loading"
                    class="form_select"
                    filterable
                    remote
                    reserve-keyword
                    clearable
                    value-key="F_ID"
                    placeholder="请输入电话号码"
                    @change="recommendChangeSelect"
                  >
                    <el-option
                      v-for="item in recommendListOptions"
                      :key="item.F_ID"
                      :label="item.F_Name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="归属人" prop="F_BelongName">
                  <el-select
                    v-model="ruleForm.F_BelongName"
                    :remote-method="remoteMethodBelong"
                    :loading="loading"
                    class="form_select"
                    filterable
                    remote
                    reserve-keyword
                    clearable
                    value-key="F_UserId"
                    placeholder="请输入归属人"
                    @change="belongChangeSelect"
                  >
                    <el-option
                      v-for="item in belongListOptions"
                      :key="item.F_UserId"
                      :label="item.F_UserName"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="备注" prop="F_Remark">
              <el-input
                :autosize="{ minRows: 4}"
                v-model="ruleForm.F_Remark"
                type="textarea"
                placeholder="请输入备注"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm(0)">保存</el-button>
              <el-button type="primary" @click="submitForm(1)">提交</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getProviceCity, getDictionaryValueList } from '@/api/commonAPI'
import { addOrder, getActivityAccount } from '@/api/orderManagement/orderList'
import { validateTel } from '@/utils/validate'
import { delFiles, filterContent, pickerOptions } from '@/utils'
import { getCommodityType } from '@/api/commodityManagement/commodityType'
import { getCommodityList } from '@/api/commodityManagement/commodityList'
import { getAreaTreeChildNode } from '@/api/systemSetup/roleSetting/areaManagement'
import { getOrderLists } from '@/api/memberManagement/memberList'
import { getUserAccountLists } from '@/api/systemSetup/roleSetting/userManage'
const validateTelRule = (rule, value, callback) => {
  if (!validateTel(value)) {
    callback(new Error('请输入有效的客户电话!'))
  } else {
    callback()
  }
}

export default {
  name: 'OrderCreate',
  props: {
    layerid: {
      type: String,
      default: ""
    }
  },
  filters: {
    activityAccountTypeFilter (status) {
      const statusMap = {
        1: '满赠',
        2: '生日',
        3: '满减',
        4: '特惠'
      }
      return statusMap[status]
    }
  },
  data () {
    return {
      parentids: [],
      provinceDatas: [], // 省下拉数据
      cityDatas: [], // 市下拉数据
      areaDatas: [], // 区/县下拉数据
      townDatas: [], // 乡镇/下拉数据
      stockList: [], // 出库货仓下拉数据
      expressList: [], // 快递
      payTypeList: [], // 支付方式
      recommendList: [], // 会员列表数据
      recommendListOptions: [], // 会员列表数据
      belongList: [], // 归属人列表数据
      belongListOptions: [], // 归属人列表数据
      commodityTypeLists: [], // 商品分类下拉数据
      // 自定义菜单下拉数据的key值
      typeDropProps: {
        value: 'id',
        label: 'text'
      },
      commodityListLists: [], // 商品下拉数据
      commoditySearchData: { // 商品搜索数据
        classId: '', // 商品分类id
        className: '', // 商品分类名称
        productName: '', // 商品名称
        productId: '', // 商品id
        num: 1 // 商品数量
      },
      commodityTableData: [], // 添加商品
      activityAccountData: [], // 活动核算数据
      orderType: [], // 订单类型
      pickerOptions, // 日期数据
      stockQuantity: { // 库存数量
        stockOne: '',
        stockTwo: ''
      },
      alreadyPoints: '', // 已拥有积分
      ruleForm: {
        F_Customer: '', // 是 sring 客户姓名
        F_CustomerPhone: '', // 是 sting 手机号码
        F_ADFrom: '', // 是 string 消息来源
        F_Type: '', // 是 sring  订单类型
        F_Id: '', // 是 string 订单号
        OrderDetailList: [], // 订单详情list
        UseActList: [], // 活动详情list
        F_State: '', // 是 string 订单状态
        F_TrackingNo: '', // 否 string 快递单号
        F_Addressee: '', // 否 string 收件人
        F_AddPhone: '', // 否 string 收件人手机号
        F_AddDes: '', // 否 string 送货说明
        F_AddProvince: '', // 否 string 省
        F_AddCity: '', // 否 string 市
        F_AddArea: '', // 否 string 区/县
        F_AddTown: '', // 否 string 乡/镇
        F_Address: '', // 否 string 详细地址
        F_PostalCode: '', // 否 string 邮编
        F_Express: '', // 否 string 选择的快递
        F_ExpressFee: '10', // 否 number 运费
        F_PayType: '', // 否 string  支付方式
        F_Stock: '', // 否 string 出货仓库
        F_RealPrice: '', // 否 number 实收金额
        F_Score: '', // 否 number  使用积分
        F_RecommendId: 0, // 否 number 推荐人id
        F_RecommendName: '', // 否 string 推荐人名称
        F_Belong: 0, // 否 number 归属人id
        F_BelongName: '' // 否 string 归属人名称
      },
      rules: {
        F_Customer: [{
          required: true,
          trigger: 'blur',
          message: '请输入客户姓名'
        }],
        F_CustomerPhone: [{
          required: true,
          trigger: 'blur',
          validator: validateTelRule
        }],
        F_ADFrom: [{
          required: true,
          trigger: 'blur',
          message: '请输入消息来源'
        }],
        F_Type: [{
          required: true,
          trigger: 'blur',
          message: '请输入订单类型'
        }],
        F_Id: [{
          required: true,
          trigger: 'blur',
          message: '请输入订单号'
        }]
      },
      loading: false,
      staffNumber: '8000'
    }
  },
  created () {
    this.getRecommendList()
    this.getBelongList()
    this.getCommodityTypeSelect()
    this.getStock()
    this.getOrderType()
    this.getExpress()
    this.getPayType()
    this.getProvince()
    this.generateId()
  },
  methods: {
    submitForm (state) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.ruleForm.F_State = state
          this.ruleForm.OrderDetailList = this.commodityTableData
          this.ruleForm.F_ExpressFee = this.ruleForm.F_ExpressFee === '' ? 0 : this.ruleForm.F_ExpressFee
          this.ruleForm.F_RealPrice = this.ruleForm.F_RealPrice === '' ? 0 : this.ruleForm.F_RealPrice
          this.ruleForm.F_Score = this.ruleForm.F_Score === '' ? 0 : this.ruleForm.F_Score
          this.loading = true
          addOrder(this.ruleForm).then(response => {
            this.loading = false
            if (response.state.toLowerCase() === 'success') {
              this.$parent.$layer.close(this.layerid)
              this.$message.success('恭喜你，工单信息添加成功!')
              this.resetForm()
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message.error('请输入有效的必填项信息!')
          return false
        }
      })
    },
    resetForm () {
      this.$refs.ruleForm.resetFields()
      this.activityAccountData = []
      this.commodityTableData = []
      this.generateId()
      this.commoditySearchData.classId = '' // 商品分类id
      this.commoditySearchData.className = '' // 商品分类名称
      this.commoditySearchData.productName = '' // 商品名称
      this.commoditySearchData.productId = '' // 商品id
      this.commoditySearchData.num = 1 // 商品数量
    },
    // 获取省下拉数据
    getProvince () {
      return new Promise(resolve => {
        const params = {
          pid: '1'
        }
        getAreaTreeChildNode(params).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.provinceDatas = response.data
          }
        })
        resolve()
      })
    },
    // 获取市下拉数据
    getCity (item) {
      this.ruleForm.F_AddProvince = item.text
      return new Promise(resolve => {
        const params = {
          pid: item.id
        }
        getAreaTreeChildNode(params).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.cityDatas = response.data
          }
        })
        resolve()
      })
    },
    // 获取区/县下拉数据
    getArea (item) {
      this.ruleForm.F_AddCity = item.text
      return new Promise(resolve => {
        const params = {
          pid: item.id
        }
        getAreaTreeChildNode(params).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.areaDatas = response.data
          }
        })
        resolve()
      })
    },
    // 获取区/县下拉数据
    getTown (item) {
      this.ruleForm.F_AddArea = item.text
      return new Promise(resolve => {
        const params = {
          pid: item.id
        }
        getAreaTreeChildNode(params).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.townDatas = response.data
          }
        })
        resolve()
      })
    },
    // 选中乡/镇
    sleectTown (item) {
      this.ruleForm.F_AddTown = item.text
    },
    // 获取出库货仓
    getStock () {
      return new Promise(resolve => {
        const params = {
          isleaf: true,
          code: 'STOCK'
        }
        getDictionaryValueList(params).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.stockList = response.data.Rows
          }
        })
      })
    },
    // 获取订单类型
    getOrderType () {
      return new Promise(resolve => {
        const params = {
          isleaf: true,
          code: 'ORDERTYPE'
        }
        getDictionaryValueList(params).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.orderType = response.data.Rows
          }
        })
      })
    },
    // 获取快递
    getExpress () {
      return new Promise(resolve => {
        const params = {
          isleaf: true,
          code: 'EXPRESS'
        }
        getDictionaryValueList(params).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.expressList = response.data.Rows
          }
        })
      })
    },
    // 获取支付方式
    getPayType () {
      return new Promise(resolve => {
        const params = {
          isleaf: true,
          code: 'PayType'
        }
        getDictionaryValueList(params).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.payTypeList = response.data.Rows
          }
        })
      })
    },
    generateId () {
      const timestamp = new Date().getTime()
      this.ruleForm.F_Id = 'BJ' + this.$store.state.user.usercode + 'T' + timestamp
    },
    // 获取商品分类
    getCommodityTypeSelect () {
      this.loading = true
      return new Promise(resolve => {
        const data = {
          pageindex: 1, // int 第几页
          pagesize: 300, // int 每页几条信息
          ParentId: 0
        }
        getCommodityType(data).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.commodityTypeLists = response.data
          }
        })
        resolve()
      })
    },
    // 获取已有积分
    getAlreadyPoints (phone) {
      this.loading = true
      return new Promise(resolve => {
        const params = {
          pageindex: '', // int 第几页
          pagesize: '', // int 每页几条信息
          name: '', // 客户姓名
          phone: phone, // 手机号码
          type: '', // 会员类型
          province: '', // 省份
          city: '', // 市
          area: '', // 县区
          town: '', // 乡镇
          address: '', // 详细地址
          birthday: '', // 会员生日
          recommender: '', // 推荐人
          saleperson: '' // 销售负责人
        }
        getOrderLists(params).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.alreadyPoints = response.rows.Rows[0].F_TotalScore
          }
        })
        resolve()
      })
    },
    changeCustomerPhone (value) {
      this.getAlreadyPoints(value)
    },
    // 获取推荐人列表
    getRecommendList () {
      this.loading = true
      return new Promise(resolve => {
        const params = {
          pageindex: '', // int 第几页
          pagesize: '', // int 每页几条信息
          name: '', // 客户姓名
          phone: '', // 手机号码
          type: '', // 会员类型
          province: '', // 省份
          city: '', // 市
          area: '', // 县区
          town: '', // 乡镇
          address: '', // 详细地址
          birthday: '', // 会员生日
          recommender: '', // 推荐人
          saleperson: '', // 销售负责人
          contact: '' // 联系频次
        }
        getOrderLists(params).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.recommendList = response.rows.Rows
          }
        })
        resolve()
      })
    },
    // 获取推荐人
    remoteMethodRecommend (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.recommendListOptions = this.recommendList.filter(item => {
            return (item.F_Phone).toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.recommendListOptions = []
      }
    },
    recommendChangeSelect (item) {
      this.ruleForm.F_RecommendId = item.F_ID
      this.ruleForm.F_RecommendName = item.F_Name
    },
    // 获取归属人列表
    getBelongList () {
      this.loading = true
      return new Promise(resolve => {
        const params = {
          pageindex: '', // 第几页
          pagesize: '', // 每页几条信息
          keyword: '', // 否	string	模糊查询
          roleid: '', // 否	string	角色id
          deptid: '' // array  部门 id
        }
        getUserAccountLists(params).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.belongList = response.data.Rows
          }
        })
        resolve()
      })
    },
    // 获取归属人
    remoteMethodBelong (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.belongListOptions = this.belongList.filter(item => {
            return (item.F_UserName).toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.belongListOptions = []
      }
    },
    belongChangeSelect (item) {
      this.ruleForm.F_Belong = item.F_UserId
      this.ruleForm.F_BelongName = item.F_UserName
    },
    // 获取商品
    getCommodityListSelect () {
      this.loading = true
      return new Promise(resolve => {
        const params = {
          pageindex: 1, // int 第几页,
          pagesize: 300, // int 每页几条信息,
          ProductId: '',
          ClassId: this.commoditySearchData.classId === '' ? 0 : this.commoditySearchData.classId,
          ClassName: '',
          ProductName: '',
          PinyinShort: '',
          ProductNumber: '',
          ProductShortName: '',
          tag: '',
          issale: 1,
          Stock: 0 // 0不显示库存
        }
        getCommodityList(params).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.commodityListLists = response.data.Rows
          }
        })
        resolve()
      })
    },
    commodityTypeChange (item) {
      this.commoditySearchData.classId = this.parentids[this.parentids.length - 1]
      this.getCommodityListSelect()
    },
    getCommodityDetail () {
      // this.loading = true
      return new Promise(resolve => {
        const params = {
          ProductId: this.commoditySearchData.productId,
          tag: '',
          issale: -1,
          Stock: 1 // 1显示库存
        }
        getCommodityList(params).then(response => {
          // this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.stockQuantity.stockOne = response.data.Rows[0].F_Stock
            this.stockQuantity.stockTwo = response.data.Rows[0].F_Stock1
          }
        })
        resolve()
      })
    },
    commodityListChange (item) {
      this.commoditySearchData.productId = item.F_ProductId
      this.commoditySearchData.productName = item.F_ProductName
      this.getCommodityDetail()
    },
    addCommodity () {
      if (this.commoditySearchData.productName === '') {
        this.$message({
          message: '请选择商品！',
          type: 'warning'
        })
        return
      }
      const data = {
        F_ProductId: this.commoditySearchData.productId,
        F_ProductName: this.commoditySearchData.productName,
        F_Count: this.commoditySearchData.num
      }
      this.commodityTableData.push(data)
    },
    // 获取活动核算
    getActivityAccountList () {
      return new Promise(resolve => {
        const params = this.commodityTableData
        getActivityAccount(params).then(response => {
          if (response.state.toLowerCase() === 'success') {
            if (response.data.length === 0) {
              this.$message({
                message: '没有优惠！',
                type: 'warning'
              })
            } else {
              this.activityAccountData = response.data
            }
          }
        })
        resolve()
      })
    },
    // 删除商品
    btn_deleteCommodity (val) {
      const index = this.commodityTableData.indexOf(val)
      this.commodityTableData.splice(index, 1)
    },
    activityAccountSelectionChange (selection) {
      this.ruleForm.UseActList = selection
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  margin: 0;
  padding: 0;
}
.order_form .form_select {
  width: 100%;
}
.order_form .el-upload-list--picture li {
  width: 24%;
  margin-right: 1%;
  float: left;
}
.creat_order .el-card__body {
  padding-top: 60px;
  padding-bottom: 60px;
}
.creat_order {
  margin-top: 20px;
  padding-top: 40px;
}
</style>
