<template>
  <div class="productInfoEdit-wrap">
    <a-spin :spinning="spinning" tip="Loading...">
      <a-page-header :ghost="false" :backIcon="false" class="productInfoEdit-back">
        <!-- 自定义的二级文字标题 -->
        <template slot="subTitle">
          <a id="productInfoEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
        </template>
      </a-page-header>
      <a-card size="small" :bordered="false" class="productInfoEdit-table-page-wrapper">
        <a-form-model
          id="productInfoEdit-form"
          ref="ruleForm"
          :model="form"
          :rules="rules"
          :label-col="formItemLayout.labelCol"
          :wrapper-col="formItemLayout.wrapperCol"
        >
          <a-form-model-item label="产品名称" prop="name">
            <a-input
              id="productInfoEdit-name"
              :maxLength="100"
              v-model.trim="form.name"
              @change="filterEmpty"
              placeholder="请输入产品名称(最多100个字符)"
              ref="name"
              @keydown.enter.native="nextFocus('name', 'code', $event)"
              allowClear />
          </a-form-model-item>
          <a-form-model-item label="产品编码" prop="code">
            <a-input
              id="productInfoEdit-code"
              :maxLength="100"
              :disabled="!!$route.params.id"
              v-model="form.code"
              placeholder="请输入产品编码(最多100个字符)"
              ref="code"
              @keydown.enter.native="nextFocus('code', 'origCode', $event)"
              allowClear />
          </a-form-model-item>
          <a-form-model-item label="原厂编码" prop="origCode">
            <a-input
              id="productInfoEdit-origCode"
              :maxLength="200"
              :disabled="!!$route.params.id"
              v-model="form.origCode"
              placeholder="请输入原厂编码(最多200个字符,多个编码用逗号隔开)"
              ref="origCode"
              @keydown.enter.native="nextFocus('origCode', 'unit', $event)"
              allowClear />
          </a-form-model-item>
          <a-form-model-item label="基本单位" prop="unit">
            <a-input-group compact>
              <a-input
                style="width: 80%"
                v-model="form.unit"
                id="productInfoEdit-unit-input"
                placeholder="请输入基本单位"
                ref="unit"
                @keydown.enter.native="nextFocus('unit', 'UNIT', $event, 'vSelect')"
                allowClear/>
              <v-select
                style="width: 20%"
                code="UNIT"
                @change="unitChange"
                id="productInfoEdit-unit"
                ref="UNIT"
                @keydown.enter.native="nextFocus('UNIT', 'productBrandSn', $event)"
                placeholder="快速选择单位"></v-select>
            </a-input-group>
          </a-form-model-item>
          <a-form-model-item label="产品品牌" prop="productBrandSn">
            <a-select
              show-search
              id="productInfoEdit-productBrand"
              v-model="form.productBrandSn"
              placeholder="请输入名称或拼音查询，如果没有请点击 '+' 新增"
              :disabled="!!$route.params.id"
              :filter-option="false"
              :not-found-content="fetching ? undefined : null"
              @search="fetchUser"
              style="width: 90%;"
              ref="productBrandSn"
              @keydown.enter.native="nextFocus('productBrandSn', 'productType', $event)"
            >
              <a-spin v-if="fetching" slot="notFoundContent" size="small" />
              <a-select-option v-for="item in productBrandList" :key="item.brandSn" :value="item.brandSn" :disabled="item.enabledFlag==0">{{ item.brandName }}</a-select-option>
            </a-select>
            <a-button
              v-if="$hasPermissions('B_product_dealerProductBrand_add')"
              @click="openModal=true"
              :disabled="!!$route.params.id"
              icon="plus"
              size="small"
              id="productInfoEdit-add-btn"
              style="margin-left: 5px;"></a-button>
          </a-form-model-item>
          <a-form-model-item label="产品分类" prop="productType">
            <a-cascader
              :disabled="!!$route.params.id"
              @change="changeProductType"
              expand-trigger="hover"
              :options="productTypeList"
              :fieldNames="{ label: 'productTypeName', value: 'productTypeSn', children: 'children' }"
              id="productInfoEdit-productType"
              placeholder="请选择产品分类"
              allowClear
              v-model="form.productType"
              ref="productType"
              @keydown.enter.native="nextFocus('productType', 'specialPrice', $event)" />
          </a-form-model-item>
          <a-form-model-item label="经销批发价" prop="specialPrice">
            <a-input-number
              id="productInfoEdit-specialPrice"
              v-model="form.specialPrice"
              :min="0"
              :max="999999"
              :precision="2"
              style="width: 90%;margin-right: 5px;"
              placeholder="请输入经销批发价(1~999999)"
              ref="specialPrice"
              @keydown.enter.native="nextFocus('specialPrice', 'terminalPrice', $event)"
              allowClear /><span>元</span>
          </a-form-model-item>
          <a-form-model-item label="终端价" prop="terminalPrice">
            <a-input-number
              id="productInfoEdit-terminalPrice"
              v-model="form.terminalPrice"
              :min="0"
              :max="999999"
              :precision="2"
              style="width: 90%;margin-right: 5px;"
              placeholder="请输入终端价(1~999999)"
              ref="terminalPrice"
              @keydown.enter.native="nextFocus('terminalPrice', 'carOwnersPrice', $event)"
              allowClear /><span>元</span>
          </a-form-model-item>
          <a-form-model-item label="车主价" prop="carOwnersPrice">
            <a-input-number
              id="productInfoEdit-carOwnersPrice"
              v-model="form.carOwnersPrice"
              :min="0"
              :max="999999"
              :precision="2"
              style="width: 90%;margin-right: 5px;"
              placeholder="请输入车主价(1~999999)"
              ref="carOwnersPrice"
              @keydown.enter.native="nextFocus('carOwnersPrice', '', $event)"
              allowClear /><span>元</span>
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }" style="text-align: center;">
            <a-button type="primary" @click="handleSubmit" size="large" id="productInfoEdit-btn-submit" style="padding: 0 60px;">保存</a-button>
          </a-form-model-item>
        </a-form-model>
        <!-- 新增/编辑产品品牌 -->
        <product-brand-edit-modal :openModal="openModal" @ok="handleOk" @close="openModal=false" />
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import { STable, VSelect } from '@/components'
import productBrandEditModal from '../productBrand/editModal.vue'
import { dealerProductBrandQuery } from '@/api/dealerProductBrand'
import { dealerProductTypeList } from '@/api/dealerProductType'
import { dealerProductSave, dealerProductDetail } from '@/api/dealerProduct'
export default {
  name: 'ProductInfoEdit',
  components: { STable, VSelect, productBrandEditModal },
  data () {
    return {
      spinning: false,
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 16 }
      },
      form: {
        name: '', // 产品名称
        code: '', //  产品编码
        origCode: '', //  原厂编码
        unit: '', //  基本单位
        productBrandSn: undefined, //  产品品牌
        productTypeSn3: '', //  产品三级分类
        productType: [], //  产品分类
        specialPrice: '', //  经销价
        terminalPrice: '', //  终端价
        carOwnersPrice: '' //  车主价
      },
      rules: {
        name: [
          { required: true, message: '请输入产品名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入产品编码', trigger: 'blur' }
        ],
        productBrandSn: [
          { required: true, message: '请选择产品品牌', trigger: 'change' }
        ],
        productType: [
          { required: true, message: '请选择产品分类', trigger: 'change' }
        ]
      },
      fetching: false,
      productBrandList: [], //  品牌下拉数据
      productTypeList: [], //  分类下拉数据
      openModal: false //  新增编辑  弹框
    }
  },
  methods: {
    // 搜索品牌
    fetchUser (value) {
      console.log('fetching user', value)
      this.fetching = true
      dealerProductBrandQuery({ 'queryWord': value }).then(res => {
        if (res.status == 200) {
          this.productBrandList = res.data || []
          this.fetching = false
        } else {
          this.productBrandList = []
          this.fetching = false
        }
      })
    },
    filterEmpty () {
      let str = this.form.name
      str = str.replace(/\ +/g, '')
      str = str.replace(/[ ]/g, '')
      str = str.replace(/[\r\n]/g, '')
      this.form.name = str
    },
    // 选择单位
    unitChange (a, b) {
      this.form.unit = b.dispName
    },
    //  获取产品信息
    getGoodsDetail () {
      dealerProductDetail({ id: this.$route.params.id }).then(res => {
        if (res.status == 200) {
          this.form = Object.assign(this.form, res.data)
          const productTypeSn1 = res.data.productTypeSn1 ? res.data.productTypeSn1 : ''
          const productTypeSn2 = res.data.productTypeSn2 ? res.data.productTypeSn2 : ''
          const productTypeSn3 = res.data.productTypeSn3 ? res.data.productTypeSn3 : ''
          this.form.productType = [productTypeSn1, productTypeSn2, productTypeSn3]
          if (res.data.productBrandName) {
            this.fetchUser(res.data.productBrandName)
          }
        } else {
          this.$refs.ruleForm.resetFields()
        }
      })
    },
    //  保存
    handleSubmit (e) {
      e.preventDefault()
      const _this = this
      if (!this.form.productTypeSn3) {
        this.$message.warning('产品分类未选到第三级，请修改后再提交！')
        return
      }
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const form = JSON.parse(JSON.stringify(_this.form))
          form.id = _this.$route.params.id ? _this.$route.params.id : undefined
          delete form.productType
          _this.spinning = true
          dealerProductSave(form).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              setTimeout(() => {
                _this.$router.push({ path: '/productManagement/productInfo/list', query: { closeLastOldTab: true } })
                _this.spinning = false
              }, 1000)
            } else {
              _this.spinning = false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 回车键快捷定位表单下一项
    nextFocus (nowRef, nextRef, event, isComponent) {
      const _this = this
      if (_this.$refs[nowRef]) {
        _this.$nextTick(() => {
          if (_this.$refs[nextRef]) {
            event.target.blur()
            if (isComponent == 'vSelect') {
              _this.$refs[nextRef].$children[0].focus()
            } else {
              _this.$refs[nextRef].focus()
            }
          }
        })
      }
    },
    //  产品分类  change
    changeProductType (val, opt) {
      this.form.productTypeSn3 = val[2] ? val[2] : ''
    },
    //  新增品牌  成功
    handleOk () {
      //  获取品牌数据列表，并赋值
      this.getProductBrand('val')
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    //  返回
    handleBack () {
      this.$router.push({ path: '/productManagement/productInfo/list', query: { closeLastOldTab: true } })
    },
    //  产品品牌  列表
    getProductBrand (val) {
      dealerProductBrandQuery({}).then(res => {
        if (res.status == 200) {
          this.productBrandList = res.data
          if (val) { //  需将新增加的品牌回填到产品品牌的地方，即不需要用户再选一下
            this.form.productBrandSn = this.productBrandList[0].brandSn
            this.$refs.ruleForm.clearValidate('productBrandSn')
          }
        }
      })
    },
    //  产品分类  列表
    getProductType () {
      dealerProductTypeList({}).then(res => {
        if (res.status == 200) {
          this.productTypeList = res.data
        } else {
          this.productTypeList = []
        }
      })
    },
    pageInit () {
      this.getProductType()
      this.$refs.ruleForm.resetFields()
      // 默认首项获取焦点
      const _this = this
      setTimeout(() => {
        if (_this.$refs['name']) {
          _this.$refs['name'].focus()
        }
      }, 300)
      if (this.$route.params.id) { //  编辑页
        this.getGoodsDetail()
      }
    }
  },
  mounted () {
    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
      this.pageInit()
    }
  },
  activated () {
    // 如果是新页签打开或者进入新的子页（例：存在列表第2条数据编辑页页签时再打开第4条数据的编辑页），则重置当前页面
    if (this.$store.state.app.isNewTab || !this.$store.state.app.isNewSubTab) {
      this.pageInit()
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {})
  }
}
</script>
<style lang="less">
  .productInfoEdit-wrap{
    height: 100%;
    >.ant-spin-nested-loading{
      height: 100%;
      .ant-spin-container{
        height: 90%;
      }
    }
    .productInfoEdit-table-page-wrapper{
      height: 100%;
    }
    .productInfoEdit-back{
      margin-bottom: 10px;
    }
  }
</style>
