<template>
  <main>
    <div class="bg_white m-20" style="margin-bottom: 70px;">
      <div class="wrap text-black p-t-20 p-b-20 p-l-40 p-r-40">
        <el-form ref="form" :model="form" :rules="rules" label-width="130px" class="m-t-20" label-position="left">
          <div class="basic_info">
            <h3>基础信息</h3>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="编码" prop="" required>
                  <el-input style="width: 60%;" placeholder="编码自动生成" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="商标名称" prop="brand_name">
                  <el-input v-model="form.brand_name" style="width: 60%;" placeholder="请输入商标名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="申请号" prop="">
                  <el-input v-model="form.apply_code" style="width: 60%;" placeholder="请输入申请号"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="注册号" prop="reg_code">
                  <el-input v-model="form.reg_code" style="width: 60%;" placeholder="请输入注册号"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="国家地区" prop="">
                  <el-input v-model="form.register_country" style="width: 60%;" placeholder="请输入国家地区"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="申请人地址" prop="apply_addr">
                  <el-input v-model="form.apply_addr" style="width: 60%;" placeholder="请输入申请人地址"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="商标状态" prop="">
                  <el-input v-model="form.brand_status" style="width: 60%;" placeholder="请输入商标状态"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="原注册人" prop="register_name">
                  <el-input v-model="form.register_name" style="width: 60%;" placeholder="请输入原注册人"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="申请人英文名称" prop="apply_name_en">
                  <el-input v-model="form.apply_name_en" style="width: 60%;" placeholder="请输入申请人英文名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="申请人英文地址" prop="apply_addr_en">
                  <el-input v-model="form.apply_addr_en" style="width: 60%;" placeholder="请输入申请人英文地址">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="申请人" prop="apply_name" required>
                  <el-input v-model="form.apply_name" maxlength="200" style="width: 60%;" placeholder="请输入申请人">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="代理机构" prop="agent_org">
                  <el-input v-model="form.agent_org" style="width: 60%;" placeholder="请输入代理机构"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="类别" prop="cate">
                  <el-input v-model="form.cate" style="width: 60%;" placeholder="请输入类别"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="商标类型" prop="brand_cate">
                  <el-input v-model="form.brand_cate" style="width: 60%;" placeholder="请输入商标类型"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="16">
                <el-form-item label="核定商品/服务组别" prop="serve_group">
                  <el-input type="textarea" :rows="6" v-model="form.serve_group">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="商标图形" prop="">
                  <el-upload ref="upload" :action="api_upload_url" list-type="picture-card" name="file"
                    :with-credentials="true" :on-success="handlePhotoSuccess" :on-preview="handlePhotoPreview"
                    :limit="1" :on-remove="handlePhotoRemove" accept=".jpg,.png" :on-exceed="handleExceed"
                    :before-upload="fileUploadImg" :file-list="fileList">
                    <el-button size="small" type="text"><i class="el-icon-plus"></i></el-button>
                  </el-upload>
                  <div class="el-upload__tip f_12 l_height_25">支持png、jpg格式, 上限1M</div>
                  <el-dialog v-model="dialogVisible">
                    <el-image width="100%" :src="dialogImageUrl" alt=""></el-image>
                  </el-dialog>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <h3>证书信息</h3>
                <el-form-item label="暂无证书信息" prop="">
                  <el-upload class="upload-demo" :action="api_upload_url" :with-credentials="true"
                    :on-remove="handleRemove" :on-success="handlezsSuccess" :before-upload="fileUpload"
                    accept=".pdf, .jpg" :on-exceed="handleExceed1" :file-list="fileList">
                    <el-button size="small" type="primary">上传</el-button>
                    <template #tip>
                      <div class="el-upload__tip">
                        支持PDF、JPG格式，限2M内
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="others">
            <!-- <el-row>
              <el-col :span="12">
                <h3>查询结果</h3>
                <el-radio-group v-model="form.search_result" @change="changeSearch">
                  <el-radio v-for="(item, index) in query" :key="index" :label="item.id">{{ item.name }}</el-radio>
                </el-radio-group>
              </el-col>
            </el-row> -->
            <!-- <el-row>
              <el-col :span="24">
                <h3>申请结果</h3>
                <el-radio-group v-model="form.apply_result" @change="changeApply">
                  <el-radio v-for="(item, index) in result" :key="index" :label="item.id">{{ item.name }}</el-radio>
                </el-radio-group>
              </el-col>
            </el-row> -->
            <h3>时间进度</h3>
            <el-row>
              <el-col :span="6">
                <el-form-item label="申请时间" prop="apply_time">
                  <el-input v-model="form.apply_time" style="width: 90%;" placeholder="请输入申请时间"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="公告时间" prop="publish_time">
                  <el-input v-model="form.publish_time" style="width: 90%;" placeholder="请输入公告时间"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="注册时间" prop="register_name">
                  <el-input v-model="form.reg_time" style="width: 90%;" placeholder="请输入注册时间"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="有效期" prop="validity_time">
                  <el-input v-model="form.validity_time" style="width: 90%;" placeholder="请输入有效期"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <h3>费用信息</h3>
            <el-row>
              <el-col :span="8">
                <el-form-item label="单价" prop="">
                  <el-input v-model="form.price" style="width: 60%;" placeholder="仅限数字，支持小数" @change="changePrice">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="数量" prop="">
                  <el-input v-model="form.num" style="width: 60%;" placeholder="仅限正整数" @change="changeNum"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="总计" prop="">
                  <el-input v-model="form.total_price" style="width: 60%;" placeholder="自动计算" disabled="true">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="商品项/核定商品/服务" label-width="150px">
                  <el-input type="textarea" :rows="6" v-model="form.goods_serve">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="20">
                <el-form-item label="备注" label-width="150px">
                  <el-input type="textarea" :rows="6" v-model="form.remark">
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
    </div>
    <div class="bg_white m-t-10 p-l-20 p-r-20 p-t-10 p-b-10 text-black footer" style="width:100%;">
      <el-button type="primary" class="search_button" @click="submitClick('form')">提交</el-button>
    </div>
  </main>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data () {
    return {
      id: '',
      rules: {
        register_country: [
          {
            required: true,
            message: '请输入注册国家',
            trigger: 'blur',
          }
        ],
        org_ids: [
          {
            required: true,
            message: '请输入公司名称',
            trigger: 'blur',
          }
        ],
        product_category: [
          {
            required: true,
            message: '请选择产品使用类目',
            trigger: 'change',
          }
        ],
        apply_time: [
          {
            type: 'date',
            required: true,
            message: '请输入申请时间',
            trigger: 'change',
          }
        ]
      },
      dialogVisible: false,
      dialogImageUrl: '',
      adminIds: [
        {
          dept: [],
          user: [],
          adminData: []
        }
      ],
      applyIds: [
        {
          dept: [],
          user: [],
          applyData: []
        }
      ],
      // adminData: [],
      progress: [],
      category: [],
      query: [],
      result: [],
      fileList: [],
      form: {
        apply_time: "",
        brand_logo: {},
        brand_name: '',
        reg_code: '',
        reg_time: '',
        validity_time: '',
        apply_name: '',
        apply_addr: '',
        agent_org: '',
        goods_serve: '',
        brand_status: '',
        apply_name_en: '',
        apply_addr_en: '',
        cate: '',
        name: "",
        num: 0,
        org_ids: "",
        price: 0,
        product_category: "",
        progress: '',
        publish_time: "",
        register_country: "",
        renewals_time: "",
        search_result: '',
        cert: [],
        total_price: 0
      },
      deptData: [],
      deptData1: [],
      deptCodes: '',
      deptCodes1: '',
      trad_id: '',
      curPath: ''
    }
  },
  computed: {
    //上传文件地址
    api_upload_url () {
      return process.env.VUE_APP_API_BASEURL + 'admin/upload/fileLocal'
    },
    ...mapState({
      // 取出页面标签
      tags: (state) => state.topNavTag.tags
    })
  },
  created () { },
  beforeRouteLeave (to, from, next) {
    const toPath = to.path
    let flag = false
    this.tags.forEach(cur => {
      if (cur.path != this.curPath) {
        flag = true
      } else {
        flag = false
      }
    })
    if (flag == true) {
      this.resetData()
    }
    next()
  },
  methods: {
    ...mapActions({
      // 关闭标签及页面
      handleCloseTag: 'topNavTag/removeNavTag'
    }),
    // 限制文件格式
    fileUpload (file) {
      const isLt5M = file.size / 1024 / 1024 < 2
      if (!isLt5M) {
        this.$message({
          message: '上传文件大小不能超过 2MB!',
          type: 'warning'
        })
        return false
      }
    },
    fileUploadImg (file) {
      const isLt5M = file.size / 1024 / 1024 < 1
      if (!isLt5M) {
        this.$message({
          message: '上传图片大小不能超过 1MB!',
          type: 'warning'
        })
        return false
      }
    },
    // 设置禁用选项
    setDisabled (data, data1) {
      data.forEach(item => {
        if (item.children) {
          item.children.forEach(item1 => {
            item1.disabled = false
            if (item1.children) {
              item1.children.forEach(item2 => {
                item2.disabled = false
                data1.forEach(ele => {
                  if (ele == item2.dept_code) {
                    item2.disabled = true
                  }
                })
              })
            } else {
              data1.forEach(ele => {
                if (ele == item1.dept_code) {
                  item1.disabled = true
                }
              })
            }
          })
        }
      })
    },
    selAdmin (val) {
      console.log(val)
    },
    // 删除
    deleteClick (item, index) {
      console.log(item, index)
      if (this.adminIds.length <= 1) {
        this.$message({
          message: '请勿删除该数据！',
          type: 'warning'
        })
        return false
      }
      this.adminIds.splice(index, 1)
      // 获取需要禁用的项
      let arr = []
      this.adminIds.forEach(item => {
        let dep_len = item.dept.length
        if (dep_len != 0) {
          arr.push(item.dept[dep_len - 1])
        }
      })
      // 调用禁用方法
      this.setDisabled(this.deptData, arr)
    },

    // 删除
    deleteClick1 (item, index) {
      console.log(item, index)
      if (this.applyIds.length <= 1) {
        this.$message({
          message: '请勿删除该数据！',
          type: 'warning'
        })
        return false
      }
      this.applyIds.splice(index, 1)
      // 获取需要禁用的项
      let arr1 = []
      this.applyIds.forEach(item => {
        let dep_len = item.dept.length
        if (dep_len != 0) {
          arr1.push(item.dept[dep_len - 1])
        }
      })
      // 调用禁用方法
      this.setDisabled(this.deptData1, arr1)
    },
    //文件上传成功时
    handlePhotoSuccess (res, file, file_list) {
      console.log(res, file, file_list)
      if (res.status == 200) {
        this.form.brand_logo = res.data.fileurl
      }
    },
    //证书文件上传成功时
    handlezsSuccess (res, file, file_list) {
      if (res.status == 200) {
        this.form.cert.push(res.data)
      }
    },
    //点击文件列表中已上传的文件时
    handlePhotoPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    //图片列表移除
    handlePhotoRemove (file, fileList) {
      this.form.brand_logo = ''
    },
    //文件列表移除
    handleRemove (file, fileList) {
      this.form.cert = ''
    },
    //文件超出个数限制
    handleExceed (files, fileList) {
      const fileLen = files.length
      const listLen = fileList.length
      if (fileLen > 1 || listLen >= 1) {
        this.$message({
          message: '只能上传一张logo图片!',
          type: 'warning'
        })
        return false
      }
    },

    handleExceed1 (files, fileList) {
      const fileLen = files.length
      const listLen = fileList.length
      if (fileLen > 1 || listLen >= 1) {
        this.$message({
          message: '一次只能上传一个文件',
          type: 'warning'
        })
        return false
      }
    },
    // 查询结果
    changeSearch (val) {
      this.form.search_result = val
    },
    // 申请结果
    changeApply (val) {
      this.form.apply_result = val
    },
    // 申请时间
    changeApplyTime (val) {
      this.form.apply_time = val
    },

    // 修改价格
    changePrice (val) {
      this.form.price = val
      // 数字，小数验证
      const regu = '^[0-9]+([.]{1}[0-9]+){0,1}$'
      const re = new RegExp(regu)
      if (!re.test(val)) {
        this.$message({
          type: 'error',
          message: '请输入数字/小数！'
        })
        this.form.price = ''
      }
      this.calculation(this.form.price, this.form.num)
    },
    // 修改数量
    changeNum (val) {
      this.form.num = val
      // 正整数验证
      const regu = '^[0-9]+$'
      const re = new RegExp(regu)
      if (!re.test(val)) {
        this.$message({
          type: 'error',
          message: '请输入正整数！'
        })
        this.form.num = ''
      }
      this.calculation(this.form.price, this.form.num)
    },
    // 计算合计费用
    calculation (price, num) {
      price = Number(price)
      num = Number(num)
      let total_price = 0
      total_price = (price * num).toFixed(2)
      console.log(total_price)
      this.form.total_price = total_price
    },
    //提交
    submitClick (form) {
      // 先编码和申请人必填
      if (this.form.apply_name == '' || this.form.apply_name == null) {
        this.$message({
          type: 'error',
          message: '请先填写申请人'
        })
        return false
      }
      // 商标名称必填
      // if (this.form.brand_name == '' || this.form.brand_name == null) {
      //   this.$message({
      //     type: 'error',
      //     message: '请先填写商标名称'
      //   })
      //   return false
      // }
      this.$http.post('brand/add', this.form).then(res => {
        if (res.errno == 200) {
          this.$message({
            type: 'success',
            message: "新增成功！"
          })
          this.resetData()
          const currentPageName = this.$route.name
          const tags = this.tags
          const idx = tags.findIndex(it => it.name === currentPageName)
          if (idx >= 0) {
            this.handleCloseTag(idx)
          }
          this.$router.push({
            path: '/PIP/trademark'
          })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      })
    },
    resetData () {
      this.fileList = []
      this.adminIds = [
        {
          dept: [],
          user: [],
          adminData: []
        }
      ],
        this.applyIds = [
          {
            dept: [],
            user: [],
            applyData: []
          }
        ],
        this.form = {
          admin_ids: "",
          apply_result: '',
          apply_time: "",
          id: '',
          logo: "",
          name: "",
          num: 0,
          org_ids: "",
          price: 0,
          product_category: "",
          progress: '',
          publish_time: "",
          register_country: "",
          renewals_time: "",
          search_result: '',
          total_price: 0
        }
    }
  }
}
</script>

<style scoped>
.basic_info {
  border-bottom: 1px solid #dcdfe6;
}
</style>