<template>
  <div class="productInfoEdit-wrap">
    <a-page-header :ghost="false" :backIcon="false" class="productInfoEdit-cont" >
      <!-- 自定义的二级文字标题 -->
      <template slot="subTitle">
        <a id="purchaseOrderEdit-back-btn" href="javascript:;" @click="handleBack"><a-icon type="left" /> 返回列表</a>
      </template>
    </a-page-header>
    <a-form-model
      id="productInfoEdit-form"
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol">
      <a-card :bordered="false" class="productInfoEdit-cont">
        <a-row>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="产品名称" prop="name">
              <a-input v-model.trim="form.name" id="productInfoEdit-name" :maxLength="100" allowClear placeholder="请输入产品名称(最多100个字符)" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="产品编码" prop="code">
              <a-input
                id="productInfoEdit-code"
                :maxLength="100"
                :disabled="form.state&&form.state!='WAIT'"
                v-model="form.code"
                placeholder="请输入产品编码(最多100个字符)"
                allowClear />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="原厂编码" prop="origCode">
              <a-input
                id="productInfoEdit-origCode"
                :maxLength="200"
                v-model="form.origCode"
                placeholder="请输入(最多200个字符，多个编码用逗号隔开)"
                allowClear />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="其他编码" prop="otherCode">
              <a-input
                id="productInfoEdit-otherCode"
                :maxLength="60"
                v-model="form.otherCode"
                placeholder="请输入(最多60个字符，多个编码用逗号隔开)"
                allowClear />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="产品品牌" prop="productBrandSn">
              <a-select
                id="productInfoEdit-productBrand"
                placeholder="请选择产品品牌"
                allowClear
                v-model="form.productBrandSn"
                :showSearch="true"
                option-filter-prop="children"
                :filter-option="filterOption">
                <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-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="产品分类" prop="productType">
              <a-cascader
                :disabled="form.state&&form.state!='WAIT'"
                expand-trigger="hover"
                @change="changeProductType"
                :options="productTypeList"
                :fieldNames="{ label: 'productTypeName', value: 'productTypeSn', children: 'children' }"
                id="productInfoEdit-productType"
                placeholder="请选择产品分类"
                allowClear
                v-model="form.productType" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="单位" prop="unit">
              <v-select
                code="PRODUCT_UNIT"
                id="productInfoEdit-unit"
                v-model="form.unit"
                allowClear
                placeholder="请选择单位"
              ></v-select>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="包装数" prop="packQty" :label-col="{span:4}" :wrapper-col="{span:16}">
              <a-row>
                <a-col :span="14">
                  <a-input-number
                    id="productInfoEdit-packQty"
                    v-model="form.packQty"
                    :precision="0"
                    :min="1"
                    :max="999999"
                    placeholder="请输入"
                    style="width: 70%;" /><span>{{ form.unit }}/</span>
                </a-col>
                <a-col :span="10">
                  <v-select
                    code="PRODUCT_UNIT"
                    id="productLevelEdit-packQtyUnit"
                    v-model="form.packQtyUnit"
                    allowClear
                    placeholder="包装数单位"
                  ></v-select>
                </a-col>
              </a-row>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="箭冠产品" prop="arrowFalg">
              <v-select
                code="ARROW_FALG"
                id="productInfoEdit-arrowFalg"
                v-model="form.arrowFalg"
                allowClear
                placeholder="请选择"
              ></v-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="16">
            <a-form-model-item label="产品图片" help="说明：图片比例1:1，尺寸大于300*300px，首张为主图，最多5张。" :label-col="{span:3}" :wrapper-col="{span:18}">
              <Upload
                class="upload"
                id="productInfoEdit-productMsg"
                v-model="form.productMsg"
                ref="productMsg"
                @change="changeImage"
                :maxNums="5"
                listType="picture-card" ></Upload>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="产品尺寸" prop="size">
              <a-input
                v-model.trim="form.size"
                id="productInfoEdit-size"
                :maxLength="50"
                allowClear
                placeholder="请输入产品尺寸(最多50个字符)" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="产品重量" prop="weight">
              <a-input
                v-model.trim="form.weight"
                id="productInfoEdit-weight"
                :maxLength="50"
                allowClear
                placeholder="请输入产品重量(最多50个字符)" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="颜色" prop="color">
              <a-input
                v-model.trim="form.color"
                id="productLevelEdit-color"
                :maxLength="50"
                allowClear
                placeholder="请输入颜色(最多50个字符)" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
            <a-form-model-item label="产品内盒尺寸" prop="boxSize">
              <a-input
                v-model.trim="form.boxSize"
                id="productInfoEdit-boxSize"
                :maxLength="50"
                allowClear
                placeholder="请输入产品内盒尺寸(最多50个字符)" />
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <a-form-model-item label="产品说明" prop="description" :label-col="{span:2}" :wrapper-col="{span:20}">
              <editor id="productInfoEdit-description" ref="editor" class="productInfoEdit-description" @on-change="editorDescriptionChange" :cache="false"></editor>
            </a-form-model-item>
          </a-col>
          <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <a-form-model-item label="其他说明" prop="otherDesc" :label-col="{span:2}" :wrapper-col="{span:20}">
              <editor id="productInfoEdit-other-otherDesc" ref="otherDesc" class="productInfoEdit-otherDesc" @on-change="editorOtherChange" :cache="false"></editor>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-card>
    </a-form-model>
    <a-affix :offset-bottom="0" class="affix">
      <div style="text-align: center;width: 100%;background-color: #fff;padding: 12px 0;box-shadow: 0 0 20px #dcdee2;">
        <a-button
          type="primary"
          class="button-primary"
          id="productInfoEdit-submit-btn"
          size="large"
          @click="handleSubmit"
          style="padding: 0 60px;">提交</a-button>
      </div>
    </a-affix>
  </div>
</template>

<script>
import { VSelect, Upload } from '@/components'
import Editor from '@/components/WEeditor'
import { productSave, productSnDetail } from '@/api/product'
import { productTypeQuery } from '@/api/productType'
import { productBrandQuery } from '@/api/productBrand'
export default {
  components: { VSelect, Upload, Editor },
  data () {
    return {
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 16 }
      },
      form: {
        name: '', // 产品名称
        code: '', //  产品编码
        origCode: '', //  原厂编码
        otherCode: '', // 其他编码
        productBrandSn: undefined, //  产品品牌
        productTypeSn1: '', //  产品一级分类
        productTypeSn2: '', //  产品二级分类
        productTypeSn3: '', //  产品三级分类
        productType: [], //  产品分类
        unit: undefined, //  单位
        packQty: '', // 包装数
        packQtyUnit: undefined, // 包装数单位
        arrowFalg: undefined, // 是否箭冠产品
        productMsg: '', //  产品图片
        size: '', // 产品尺寸
        weight: '', // 产品重量
        color: undefined, // 颜色
        boxSize: '', // 内核尺寸
        description: '', // 产品说明
        otherDesc: '' // 其他说明
      },
      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' }
        ],
        unit: [
          { required: true, message: '请选择单位', trigger: 'change' }
        ],
        packQty: [
          { required: true, message: '请输入包装数', trigger: 'blur' }
        ],
        arrowFalg: [
          { required: true, message: '请选择是否为箭冠产品', trigger: 'change' }
        ]
      },
      productBrandList: [], //  品牌下拉数据
      productTypeList: [] //  分类下拉数据
    }
  },
  methods: {
    //  详情
    getDetail () {
      productSnDetail({ sn: this.$route.params.sn }).then(res => {
        if (res.status == 200) {
          const data = res.data
          this.form = Object.assign(this.form, data)
          this.form.productType = [ this.form.productTypeSn1, this.form.productTypeSn2, this.form.productTypeSn3 ]
          this.$refs.productMsg.setFileList(res.data.productMsg)
          this.$refs.editor.setHtml(res.data.description)
          this.$refs.otherDesc.setHtml(res.data.otherDesc)
        } 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
          productSave(form).then(res => {
            if (res.status == 200) {
              _this.$message.success(res.message)
              setTimeout(() => {
                _this.handleBack()
              }, 1000)
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 返回
    handleBack () {
      this.$router.push({ path: '/productManagement/productInfo/list' })
    },
    // 产品图片上传
    changeImage (file) {
      this.form.productMsg = file
    },
    // 产品说明 文本编辑器
    editorDescriptionChange (html, text) {
      this.form.description = html
    },
    //  其他说明 文本编辑器
    editorOtherChange (html, text) {
      this.form.otherDesc = html
    },
    //  产品分类  change
    changeProductType (val, opt) {
      this.form.productTypeSn1 = val[0] ? val[0] : ''
      this.form.productTypeSn2 = val[1] ? val[1] : ''
      this.form.productTypeSn3 = val[2] ? val[2] : ''
    },
    //  产品品牌  列表
    getProductBrand () {
      productBrandQuery({}).then(res => {
        if (res.status == 200) {
          this.productBrandList = res.data
        } else {
          this.productBrandList = []
        }
      })
    },
    //  产品分类  列表
    getProductType () {
      productTypeQuery({}).then(res => {
        if (res.status == 200) {
          this.productTypeList = res.data
        } else {
          this.productTypeList = []
        }
      })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.$refs.productMsg.setFileList('')
      vm.$refs.editor.setHtml('')
      vm.$refs.otherDesc.setHtml('')
      vm.$refs.ruleForm.resetFields()
      vm.getProductBrand()
      vm.getProductType()
      if (vm.$route.params.id) { //  编辑页
        vm.getDetail()
      }
    })
  }
}
</script>

<style lang="less">
  .productInfoEdit-wrap{
    .productInfoEdit-cont{
      margin-bottom: 10px;
    }
    .upload{
      width: 100%!important;
    }
    //  文本编辑器  工具栏样式换行
    .productInfoEdit-editor{
      .w-e-toolbar{
        flex-wrap: wrap;
        z-index: 0;
      }
    }
    .affix{
      .ant-affix{
        z-index: 101;
      }
    }
  }
</style>
