<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个字符)"
              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个字符)"
              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个字符,多个编码用逗号隔开)"
              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="请输入基本单位" allowClear/>
              <v-select style="width: 20%" code="UNIT" @change="unitChange" id="productInfoEdit-unit" 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"
              @change="handleChange"
              style="width: 90%;"
            >
              <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" />
          </a-form-model-item>
          <a-form-model-item label="经销批发价" prop="specialPrice">
            <a-input-number
              id="productInfoEdit-specialPrice"
              v-model="form.specialPrice"
              :min="1"
              :max="999999"
              :precision="2"
              style="width: 90%;margin-right: 5px;"
              placeholder="请输入经销批发价(1~999999)"
              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="1"
              :max="999999"
              :precision="2"
              style="width: 90%;margin-right: 5px;"
              placeholder="请输入终端价(1~999999)"
              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="1"
              :max="999999"
              :precision="2"
              style="width: 90%;margin-right: 5px;"
              placeholder="请输入车主价(1~999999)"
              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({ 'sysFlag': '0', 'queryWord': value }).then(res => {
        if (res.status == 200) {
          this.productBrandList = res.data || []
          this.fetching = false
        } else {
          this.productBrandList = []
          this.fetching = false
        }
      })
    },
    // 调往对象名称  change
    handleChange (value) {
      const ind = this.dealerData.findIndex(item => item.dealerSn == value)
      this.form.targetName = this.dealerData[ind].dealerName
    },
    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]
        } 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' })
                _this.spinning = false
              }, 1000)
            } else {
              _this.spinning = false
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    //  产品分类  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' })
    },
    //  产品品牌  列表
    getProductBrand (val) {
      dealerProductBrandQuery({ 'sysFlag': '0' }).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({ 'sysFlag': '0' }).then(res => {
        if (res.status == 200) {
          this.productTypeList = res.data
        } else {
          this.productTypeList = []
        }
      })
    }
  },
  mounted () { // 不使用beforeRouteEnter：由于页面路由动态id导致页面表现方式不同但路由相同，则会出现数据不重新请求问题
    // this.getProductBrand()
    this.getProductType()
    this.$refs.ruleForm.resetFields()
    if (this.$route.params.id) { //  编辑页
      this.getGoodsDetail()
    }
  }
}
</script>
<style lang="less">
  .productInfoEdit-wrap{
    .productInfoEdit-back{
      margin-bottom: 15px;
    }
  }
</style>
