<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-form class="queryFormInline" :model="queryParams" ref="queryForm" :inline="true">
          <el-row :span="24" type="flex" justify="space-between" align="middle">
            <el-col :span="22">
              <el-form-item label="品牌名称">
                <el-input
                  v-model="queryParams.brand_name"
                  placeholder="请输品牌名称"
                  clearable
                  size="small"
                />
              </el-form-item>

              <el-form-item label="品牌经营类型：">
                <el-select v-model="queryParams.brand_type" clearable size="small" placeholder="全部品牌类型">
                  <el-option
                    v-for="item in brandTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="品牌状态：">
                <el-select v-model="queryParams.status" clearable size="small" placeholder="全部状态">
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查 询</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item style="float: right">
                <el-button type="primary" size="mini" icon="el-icon-plus" @click="addBrand">新 增</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <el-table :data="brandList" :height="tableHeight">
        <el-table-column label="品牌名称" prop="brand_cn" align="center"></el-table-column>
        <el-table-column label="品牌经营类型" prop="brand_type" align="center">
          <template slot-scope="scope">
            {{ scope.row.brand_type === 1 ? '自有品牌' : '授权品牌' }}
          </template>
        </el-table-column>
        <el-table-column label="品牌商标注册号" prop="brand_number" align="center"></el-table-column>
        <el-table-column label="品牌状态" prop="status" align="center">
          <template slot-scope="scope">
            {{ brandStatusFormatter(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column label="授权期限" align="center">
          <template slot-scope="scope">
            <span>{{ timeFormatter(scope.row.brand_start_time) }}</span>
            <span>--</span>
            <span>{{ timeFormatter(scope.row.brand_end_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核说明" prop="last_check_content" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editBrand(scope.row)" :disabled="(scope.row.id === 1)">编辑</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="text" size="small" @click="deleteBrand(scope.row)" :disabled="(scope.row.id === 1)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.limit"
        @pagination="getList"
      ></pagination>
    </el-card> 
    <!-- 新增/修改/详情 -->
    <el-dialog :title="brandTitle" v-if="isOpen" :visible.sync="isOpen" width="70%" class="brandInf-add" center
               :close-on-click-modal="false" :before-close="handleCancel">
      <el-form :model="brandForm" :rules="brandRules" class="brandForm" ref="brandForm" label-width="140px">
        <el-row v-if="indexBrandId != 0 && brandForm.status != 3">
          <p class="brand-status-con">
            <span v-if="brandForm.status == 1" class="color-spe-success"><i class="el-icon-success"></i></span>
            <span v-if="brandForm.status == 2" class="color-spe-error"><i class="el-icon-error"></i></span>
            <span v-if="brandForm.status == 0" class="color-spe-waiting"><i class="el-icon-success"></i></span>
            <span class="brand-form-status-text">{{ statusVal }}</span>
            <span v-if="brandForm.status == 2"><span class="brand-refused-title">原因：</span>{{ brandForm.last_check_content }}</span>
          </p>
        </el-row>
        <p class="brand-title-tips">请您严格按照商标注册证书信息填写，否则审核将无法通过！</p>
        <el-row>
          <el-col :span="16" :offset="3">
            <el-form-item label="经营品牌类型：" prop="brand_type">
              <el-radio-group v-model="brandForm.brand_type" @change="chooseBrandType">
                <el-radio :label="1">自有品牌</el-radio>
                <el-radio :label="2">授权品牌</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16" :offset="3">
            <el-form-item label="品牌中文名：" prop="brand_cn">
              <el-input v-model="brandForm.brand_cn" @input="checkIsExsitBrandName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16" :offset="3">
            <el-form-item label="品牌英文名：" prop="brand_en">
              <el-input v-model="brandForm.brand_en" placeholder="请输入品牌英文名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16" :offset="3">
            <el-form-item label="品牌商标注册号：" prop="brand_number">
              <el-input v-model="brandForm.brand_number" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="21" :offset="3">
            <el-form-item label="品牌LOGO：" prop="brand_logo">
              <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
                <div style="padding-right:6px;">
                  <el-upload
                    class="uploadData"
                    action="#"
                    list-type="picture-card"
                    :http-request="uploadLogoImgs"
                    :limit="1"
                    :on-exceed="limit1"
                    :before-upload="UpImgSizeFiveKB"
                    :on-preview="handlePreviewLogo"
                    :on-remove="handleRemoveLogo"
                    :file-list='brandImgFileList'
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="LogoVisible">
                    <img width="100%" :src="LogoImageUrl" alt="">
                  </el-dialog>
                </div>
                <div>
              <span class="tips-text">
                <i class="el-icon-warning h-warning"></i>
              </span>
                </div>
                <div style="width:380px;line-height: 24px;padding-top: 6px;">
                  <span class="tips-text">图片大小在500KB以内，支持png/jpg，限一张，请确保图片清晰</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="21" :offset="3">
            <el-form-item label="商标注册证书：" prop="brand_register_cert">
              <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
                <div style="padding-right:6px;">
                  <el-upload
                    class="uploadData"
                    action="#"
                    list-type="picture-card"
                    :http-request="uploadCertImgs"
                    :limit="5"
                    :on-exceed="limitImg"
                    :before-upload="UpImgSizeTwoMb"
                    :on-preview="handlePreviewCert"
                    :on-remove="handleRemoveCert"
                    :file-list='certImgFileList'
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="certVisible">
                    <img width="100%" :src="certImageUrl" alt="">
                  </el-dialog>
                </div>
                <div>
              <span class="tips-text">
                <i class="el-icon-warning h-warning"></i>
              </span>
                </div>
                <div style="width:380px;line-height: 24px;padding-top: 6px;">
                  <span class="tips-text">图片大小在500KB以内，支持png/jpg，限五张，请确保图片清晰</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16" :offset="3">
            <el-form-item label="品牌类型：" prop="brand_range">
              <el-radio-group v-model="brandForm.brand_range" @click="chooseBrandRange">
                <el-radio :label="1">国内品牌</el-radio>
                <el-radio :label="2">国外品牌</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16" :offset="3">
            <el-form-item label="商标注册有效期：" prop="brand_auth_time">
              <el-date-picker type="date" placeholder="选择日期" v-model="validityConcreteTime"
                              style="width: 300px;" @change="validityConcreteChange"></el-date-picker>
              <el-checkbox v-model="validityLongTermVal" style="padding-left:15px;"
                           @change="validityLongTermChange">长期
              </el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16" :offset="3">
            <el-form-item label="品牌授权期限：" prop="brandAuthRangeTime">
              <el-date-picker
                style="width:400px;"
                v-model="brandForm.brandAuthRangeTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :clearable = 'false'
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="21" :offset="3">
            <el-form-item label="品牌厂商授权：" prop="brand_auth" v-if="brandForm.brand_type === 2">
              <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
                <div style="padding-right:6px;">
                  <el-upload
                    class="uploadData"
                    action="#"
                    :limit="5"
                    list-type="picture-card"
                    :on-exceed="limitImg"
                    :http-request="uploadFactoryImgs"
                    :before-upload="UpImgSizeTwoMb"
                    :on-preview="handlePreviewFactory"
                    :on-remove="handleRemoveFactory"
                    :file-list='factoryImgFileList'
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="factoryVisible">
                    <img width="100%" :src="factoryImageUrl" alt="">
                  </el-dialog>
                </div>
                <div>
              <span class="tips-text">
                <i class="el-icon-warning h-warning"></i>
              </span>
                </div>
                <div style="width:380px;line-height: 24px;padding-top: 6px;">
                  <span class="tips-text">图片大小在500KB以内，支持png/jpg，限五张，请确保图片清晰</span>
                </div>
              </div>
              <p class="brand-auth-tips">上传完整授权链路，品牌方给予企业的授权书，如果是多级授权，请上传各级授权证书</p>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="21" :offset="3">
            <el-form-item label="品牌经营授权：" prop="brand_business_auth">
              <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
                <div style="padding-right:6px;">
                  <el-upload
                    class="uploadData"
                    action="#"
                    :limit="5"
                    :on-exceed="limitImg"
                    :http-request="uploadShopImgs"
                    list-type="picture-card"
                    :before-upload="UpImgSizeTwoMb"
                    :on-preview="handlePreviewShop"
                    :on-remove="handleRemoveShop"
                    :file-list="shopImgFileList"
                  >
                    <i class="el-icon-plus"></i>
                  </el-upload>
                  <el-dialog :visible.sync="shopVisible">
                    <img width="100%" :src="shopImageUrl" alt="">
                  </el-dialog>
                </div>
                <div>
              <span class="tips-text">
                <i class="el-icon-warning h-warning"></i>
              </span>
                </div>
                <div style="width:380px;line-height: 24px;padding-top: 6px;">
                  <span class="tips-text">图片大小在500KB以内，支持png/jpg，限五张，请确保图片清晰</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="16" :offset="3">
            <el-form-item label="">
              <div style="width:100%;height: 100%;display: flex;flex-direction: row;justify-content: normal;">
                <el-button :disabled="downTemplatehttp !== '' ? false: true" >
                  <el-link :href="downTemplatehttp" :disabled="downTemplatehttp !== '' ? false: true" type="primary" :underline="false"><i class="el-icon-download"></i>下载模板</el-link>
                </el-button>
                <div>
                  <span class="tips-text">
                    <i class="el-icon-warning h-warning"></i>
                  </span>
                </div>
                <div style="width:380px;line-height: 24px;padding-top: 6px;">
                  <span class="tips-text">请您点击下载授权书模板，打印并签字盖章，拍照上传</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item class="btnCen">
          <el-button type="" @click="handleCancel" style="margin-right: 30px">取  消</el-button>
          <el-button type="primary" @click="handleSave('brandForm')">提交审核</el-button>
        </el-form-item>

      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {getBrandsInf, getDetails, addBrandData, upBrand, upLoadImg, delBrandData} from '@/api/module/brand/brand'
  import { dateFormat } from '@/utils'
  export default {
    name: "Brand",
    data() {
      let logoValidator = (rule, value, callback) => {
        if(this.brandImgFileList.length > 0) {
          callback();
        }else if(this.brandImgFileList.length === 0) {
          callback(new Error("品牌logo图片至少上传一张"));
        }
      };
      let certValidator = (rule, value, callback) => {
        if(this.certImgFileList.length > 0) {
          callback();
        }else if(this.certImgFileList.length === 0) {
          callback(new Error("商标注册证书图片至少上传一张"));
        }
      };
      let authValidator = (rule, value, callback) => {
        if(this.factoryImgFileList.length > 0) {
          callback();
        }else if(this.factoryImgFileList.length === 0) {
          callback(new Error("品牌商标授权书图片至少上传一张"));
        }
      };
      let authTimeValidator = (rule, value, callback) => {
        if(this.brandForm.brand_type === 2) {
          if (this.validityConcreteTime === null && this.validityLongTermVal === false) {
            callback(new Error("品牌注册有效期具体时间和长期必须填写其中一个"));
          } else {
            callback();
          }
        }else {
          callback();
        }
      };
      let authRangeTimeValidator = (rule, value, callback) => {
        if( Array.isArray(this.brandForm.brandAuthRangeTime) && this.brandForm.brandAuthRangeTime.length == 2) {
          callback();
        }else {
          callback(new Error("请选择品牌授权期限"));
        }
      };
      let authBusValidator = (rule, value, callback) => {
        if(this.shopImgFileList.length > 0) {
          callback();
        }else if(this.shopImgFileList.length === 0) {
          callback(new Error("品牌logo图片至少上传一张"));
        }
      };
      return {
        fullHeight: 0,
        tableHeight: 0,
        isOpen: false,
        brandTitle: '',
        brandTypeOptions: [
          {label: "全部品牌", value: '-1'},
          {label: "自有品牌", value: '1'},
          {label: "授权品牌", value: '2'},
        ],
        statusOptions: [
          {label: '未审核', value: '0'},
          {label: '已通过', value: '1'},
          {label: '已拒绝', value: '2'},
          {label: '已过期', value: '3'},
        ],
        total: 0,
        queryParams: {
          page: 1,
          limit: 10,
          brand_name: '',
          brand_type: '',
          status: ''
        },
        LogoVisible: false,
        LogoImageUrl: '',
        factoryVisible: false,
        factoryImageUrl: '',
        shopVisible: false,
        shopImageUrl: '',
        certVisible: false,
        certImageUrl: '',
        brandImgFileList: [],// 品牌logo
        certImgFileList: [],// 商标注册证书
        factoryImgFileList: [], // 品牌方授权书
        shopImgFileList: [], //
        validityConcreteTime: null,
        validityLongTermVal: false, // 长期
        brandList: [],
        indexBrandId: 0, // 当前品牌 id
        statusVal: '',
        brandForm: {
          id: 0,
          brand_type: '',  // 品牌经营类型
          brand_cn: '',   // 中文名称
          brand_en: '',   // 英文名称
          brand_logo: '',   // 品牌logo图片
          brand_register_cert: '', // 商标注册证书
          brand_number: '',   // 品牌商标注册号
          brand_range: '',   // 品牌类型
          brand_auth_time: '',   // 商品注册有效期
          brandAuthRangeTime: [], // 品牌授权有效期
          brand_auth: '',  // 商标授权 == 品牌授权 == factoryImgFileList
          brand_business_auth: '', // 商标经营授权 == 品牌经营授权 == shopImgFileList
        },
        brandRules: {
          brand_type: [{ required: true, message: '品牌经营类型需要选择其一', trigger: 'blur' }],
          brand_cn: [{ required: true, message: '品牌中文名称不能为空', trigger: 'blur' }],
          brand_number: [{ required: true, message: '品牌商标注册号不能为空', trigger: 'blur' }],
          brand_logo: [{ required: true, message: '品牌logo图片至少上传一张',validator: logoValidator}],
          brand_register_cert: [{ required: true, message: '商标注册证书图片至少上传一张',validator: certValidator}],
          brand_range: [{ required: true, message: '品牌类型需要选择其一', trigger: 'blur' }],
          brand_auth: [{ required: true, message: '品牌授权书图片至少上传一张', validator: authValidator}], // 品牌授权
          brand_auth_time: [{ required: true,trigger: 'change',validator:authTimeValidator }],
          brandAuthRangeTime: [{ required: true,trigger: 'blur',validator:authRangeTimeValidator }],
          brand_business_auth: [{ required: true, message: '品牌经营授权至少上传一张图片', validator: authBusValidator }],
        },
        downTemplatehttp: '',
        shopTemplatehttp : 'http://excel.jxhh.com/brand_new.doc',
        factoryTemplatehttp : 'http://excel.jxhh.com/brand_new.doc',
      }
    },
    created() {
      this.getList();
      this.$nextTick(() => {
        this.fullHeight = document.getElementsByClassName('box-card')[0].clientHeight;
      })
    },
    watch: {
      fullHeight(val) {
        let formHeight = document.getElementsByClassName('clearfix')[0].clientHeight
        this.tableHeight = val - formHeight - 100;
      }
    },

    methods: {
      /** 查询 品牌 列表 */
      getList() {
        let data = {
          page: this.queryParams.page,
          limit: this.queryParams.limit
        }
        if (this.queryParams.brand_name != "") {
          data['brand_name'] = this.queryParams.brand_name
        }
        if (this.queryParams.brand_type == '1' || this.queryParams.brand_type == '2' || this.queryParams.brand_type == '3') {
          data['brand_type'] = this.queryParams.brand_type
        }
        if (this.queryParams.status == '0' || this.queryParams.status == '1' || this.queryParams.status == '2' || this.queryParams.status == '3') {
          data['status'] = this.queryParams.status
        }
        getBrandsInf(data).then(res => {
          if ( res.code == 1) {
            if(res.data) {
              this.brandList = res.data.data;
              this.total = res.data.count;
            }else {
              this.brandList = [];
            }
          }else {
            this.$message({ type: 'error',message: res.message ? res.message : '获取品牌列表数据失败' });
          }
        });
      },
      /** 品牌 审核状态 */
      statusFormatter(status) {
        let res = '';
        if (status == 0) {
          res = '等待审核'
        }
        if (status == 1) {
          res = '审核通过'
        }
        if (status == 2) {
          res = '审核被拒绝'
        }
        return res
      },
      /** 校验品牌 */
      checkIsExsitBrandName() {
        if (!this.brandForm.brand_cn) return
        let data = {
          brand_name : this.brandForm.brand_cn
        }
        getDetails(data).then(res=> {
          if (res.code == 1 && res.data) {
            this.$message({ type: 'warning', message: '品牌名称已存在'});
          }
        });
      },
      /** 新增 品牌 */
      addBrand() {
        // if(this.total <= 20 ) {
          this.isOpen = true;
          this.brandTitle = '新增品牌信息';
          this.indexBrandId = 0;
          this.reset('brandForm')
        // }else {
        //   this.$message({ type: 'warning', message: '目前暂时只支持维护20个品牌数据'});
        // }
      },
      /** 编辑 品牌 */
      editBrand(row) {
        this.brandImgFileList= [];
        this.certImgFileList= [];
        this.factoryImgFileList= [];
        this.shopImgFileList= [];
        this.indexBrandId = row.id;
        let data = {
          id : this.indexBrandId
        }
        getDetails(data).then(res => {
          if(res.code == 1) {
            this.isOpen = true;
            this.brandTitle = '品牌信息详情';
            this.brandForm = res.data;
            // 品牌审核状态
            this.statusVal = this.statusFormatter(res.data.status)
            // 模板下载地址赋值
            this.downTemplatehttp = (this.brandForm.brand_type === 1 ? this.shopTemplatehttp : this.factoryTemplatehttp);

            // 品牌logo图片
            let brandArr = [];
            let brandUrl = {};
            brandArr = this.brandForm.brand_logo.split(",");
            if (brandArr.length > 0) {
              brandArr.forEach(item=> {
                brandUrl = {};
                if (item) {
                  brandUrl.url = item
                  this.brandImgFileList.push(brandUrl)
                }
              });
            }else {
              this.brandImgFileList = [];
            }

            // 商标注册证书图片
            let certArr = [];
            let certRrl = {};
            certArr = this.brandForm.brand_register_cert.split(",");
            if (certArr.length > 0) {
              certArr.forEach(item=> {
                certRrl = {};
                if (item) {
                  certRrl.url = item
                  this.certImgFileList.push(certRrl)
                }
              });
            }else {
              this.certImgFileList = [];
            }

            // 商标注册有效期
            if(this.brandForm.brand_auth_time === 0) {
              this.validityLongTermVal = true;
              this.validityConcreteTime = '';
            }else {
              this.validityLongTermVal = false;
              this.validityConcreteTime = this.timeFormatter(this.brandForm.brand_auth_time);
            }

            // 品牌授权期限
            this.$set(this.brandForm,'brandAuthRangeTime',[this.timeFormatter(this.brandForm.brand_start_time),this.timeFormatter(this.brandForm.brand_end_time)]);

            // 品牌厂商授权 图片
            let factoryArr = [];
            let factoryUrl = {};
            factoryArr = this.brandForm.brand_auth.split(",");
            if (factoryArr.length > 0) {
              factoryArr.forEach(item=> {
                factoryUrl = {};
                if (item) {
                  factoryUrl.url = item
                  this.factoryImgFileList.push(factoryUrl)
                }
              });
            }else {
              this.factoryImgFileList = [];
            }

            // 品牌经营授权 图片
            let shopArr = [];
            let shopUrl = {};
            shopArr = this.brandForm.brand_business_auth.split(",");
            if (shopArr.length > 0) {
              shopArr.forEach(item=> {
                shopUrl = {};
                if (item) {
                  shopUrl.url = item
                  this.shopImgFileList.push(shopUrl)
                }
              });
            }else {
              this.shopImgFileList = [];
            }

          }else {
            this.$message({type: 'error',message: res.message ? res.message : '获取品牌失败' });
          }

        });
      },
      /** 取消、关闭  新增，编辑 */
      handleCancel() {
        this.reset('brandForm')
        this.isOpen = false;
      },
      /** 提交審核 */
      handleSave(form) {
        this.$refs[form].validate(valid => {
          if(valid) {
            // 入参数据
            let brandsData = { brands: [] };
            let data = {}
            data['id'] = this.indexBrandId;
            data['brand_type'] = this.brandForm.brand_type;
            data['brand_cn'] = this.brandForm.brand_cn;
            data['brand_en'] = this.brandForm.brand_en;
            data['brand_number'] = this.brandForm.brand_number;

            // 品牌logo图片处理
            if(this.brandImgFileList.length > 0) {
              for(let i = 0; i < this.brandImgFileList.length; i++) {
                if(i === 0) {
                  data['brand_logo'] = this.brandImgFileList[i].url;
                }else {
                  data['brand_logo'] += ',' + this.brandImgFileList[i].url;
                }
              }
            }

            // 商标注册证书图片
            if(this.certImgFileList.length > 0) {
              for(let a = 0; a < this.certImgFileList.length; a++) {
                if(a === 0) {
                  data['brand_register_cert'] = this.certImgFileList[a].url;
                }else {
                  data['brand_register_cert'] += ',' + this.certImgFileList[a].url;
                }
              }
            }
            // 品牌类型
            data['brand_range'] = this.brandForm.brand_range

            // 商标注册有效期
            if (this.validityLongTermVal) {
              data['brand_auth_time'] = 0;
            }else {
              data['brand_auth_time'] = new Date(this.validityConcreteTime).getTime() / 1000;
            }

            // 品牌 授权期限
            if (Array.isArray(this.brandForm.brandAuthRangeTime) && this.brandForm.brandAuthRangeTime.length == 2) {
              data['brand_start_time'] = new Date(this.brandForm.brandAuthRangeTime[0]).getTime() / 1000;
              data['brand_end_time'] = new Date(this.brandForm.brandAuthRangeTime[1]).getTime() / 1000;
            }

            // 品牌商标授权 图片
            if(this.factoryImgFileList.length > 0) {
              for(let i = 0; i < this.factoryImgFileList.length; i++) {
                if(i === 0) {
                  data['brand_auth'] = this.factoryImgFileList[i].url;
                }else {
                  data['brand_auth'] += ',' + this.factoryImgFileList[i].url;
                }
              }
            }

            // 品牌经营授权 图片处理
            if(this.shopImgFileList.length > 0) {
              for(let i = 0; i < this.shopImgFileList.length; i++) {
                if(i === 0) {
                  data['brand_business_auth'] = this.shopImgFileList[i].url;
                }else {
                  data['brand_business_auth'] += ',' + this.shopImgFileList[i].url;
                }
              }
            }

            // 新增 品牌
            if (this.indexBrandId == 0) {
              // 入参 格式处理
              brandsData.brands.push(data);

              addBrandData(brandsData).then(res => {
                if(res.code == 1) {
                  this.$message({ message: '提交成功', type: 'success'});
                  this.getList();
                  this.isOpen = false;
                }else {
                  this.$message({ type: 'error', message: res.message ? res.message : "提交失败"});
                }
              });
            }

            // 修改 品牌
            if (this.indexBrandId != 0) {
              this.$confirm('确定要提交审核吗？提交审核后，品牌处于待审核状态，对应商品将做下架处理', '提示：', {
                type: 'warning',
                confirmButtonText: '确定',
                cancelButtonText: '取消'
              }).then(async() => {
                let res = await upBrand(data)
                if ( res.code == 1 ) {
                  this.$message({ message: '提交成功', type: 'success'});
                  this.getList();
                  this.isOpen = false;
                }else {
                  this.$message({ type: 'error', message: res.message ? res.message : "提交失败"});
                }
              }).catch(() => {});
            }

          } // vilid end
        })
      },


      /** 删除 品牌 */
      deleteBrand(row) {
        if (!row.id) { return }
        let data = {
          brand_ids: []
        }
        data.brand_ids.push(row.id);

        this.$confirm('确定要删除品牌吗？品牌删除后，使用该品牌的商品也会作下架处理！', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(async() => {
          let result = await delBrandData(data);
          if(result.code == 1) {
            this.$message({type:'success',message:'删除成功'});
            this.getList()
          }else {
            this.$message({type:'error',message: result.message ? result.message : '删除成功'});
          }
        }).catch(()=> {});
      },
      /** 查询 */
      handleQuery() {
        this.queryParams.page = 1;
        this.getList();

      },
      /** 商品注册有效期 具体时间 */
      validityConcreteChange() {
        if (this.validityConcreteTime) {
          this.validityLongTermVal = false;
        }
      },
      /** 商品注册有效期 长期 */
      validityLongTermChange() {
        if (this.validityLongTermVal) {
          this.validityConcreteTime = null;
        }
      },
      // 通用方法
      /** 重置 编辑 表单*/
      reset(formName){
        this.brandImgFileList= [];
        this.certImgFileList= [];
        this.factoryImgFileList= [];
        this.shopImgFileList= [];
        this.validityLongTermVal = false;
        this.validityConcreteTime = ''
        Object.assign(this.brandForm, this.$options.data().brandForm)

        if (this.$refs[formName]) {
          this.$refs[formName].resetFields();
        }else {
          this.$nextTick(()=> {
            this.$refs[formName].resetFields();
          })
        }
      },
      /** 上传图片 数量限制 */
      limit1() {
        this.$message({message: '最多上传1张图片', type: 'warning'});
      },
      limitImg() {
        this.$message({message: '最多上传5张图片', type: 'warning'});
      },
      /** 时间格式化 */
      timeFormatter(timeVal) {
        return dateFormat(timeVal *1000, 'Y-m-d')
      },
      /** 品牌 状态格式化 */
      brandStatusFormatter(statusVal) {
        let res = '';
        if (statusVal == 0) {
          res = '未审核'
        }
        if (statusVal == 1) {
          res = '已通过'
        }
        if (statusVal == 2) {
          res = '已拒绝'
        }
        if (statusVal == 3) {
          res = '已过期'
        }
        return res;
      },
      /** 图片转换为base64位 */
      getBase64(file) {
        return new Promise(function(resolve, reject) {
          let reader = new FileReader();
          let imgResult = "";
          reader.readAsDataURL(file);
          reader.onload = function() {
            imgResult = reader.result;
          };
          reader.onerror = function(error) {
            reject(error);
          };
          reader.onloadend = function() {
            resolve(imgResult);
          };
        });
      },

      /**********---------------------------------------------************************** */
      // 品牌经营类型 改变触发
      chooseBrandType() {
        this.downTemplatehttp = '';
        // 因 单选不能取消，所以，只要点击触发，即可清除校验
        this.$refs.brandForm.clearValidate('brand_type');
        // 自有品牌授权模板下载路径 shopTemplatehttp
        // 品牌厂商授权模板下载路径 factoryTemplatehttp
        this.downTemplatehttp = (this.brandForm.brand_type === 1 ? this.shopTemplatehttp : this.factoryTemplatehttp);
        //
        // 品牌授权 图片处理   factoryImgFileList
        if(this.brandForm.brand_auth === '') {
          this.factoryImgFileList = [];
        }
      },
      chooseBrandRange() {
        this.$refs.brandForm.clearValidate('brand_range');
      },

      // 品牌商标图片  自定义上传
      uploadLogoImgs(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data": this.Base64img,"type":2};
          upLoadImg(data).then((res) => {
            if (res && res.code === 1) {
              this.brandImgFileList.push({'url': res.data.image_url});
              this.$message({message: '上传成功', type: 'success'});
              this.$refs.brandForm.clearValidate('brand_logo');
              //this.$refs.logoImg.clearValidate();
            }
          });
        });
      },
      // 上传图片格式和大小限制500 kb
      UpImgSizeFiveKB(file) {
        let isImgSize = (file.size / 1024 ) > 500;
        if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
          this.$message({
            message: '上传图片格式只支持jpg/png格式',
            type: "warning"
          });
          return false;
        }
        if(isImgSize) {
          this.$message({
            message: '上传图片大小不能超过500 kb',
            type: "warning"
          });
          return false;
        }
      },
      // logo 预览
      handlePreviewLogo(file) {
        this.LogoImageUrl = file.url;
        this.LogoVisible = true;
      },
      // logo 删除
      handleRemoveLogo(file) {
        for(let i = 0; i < this.brandImgFileList.length; i++) {
          if(file.uid === this.brandImgFileList[i].uid) {
            this.brandImgFileList.splice(i,1);
          }
        }
      },
      // 商标注册证书
      uploadCertImgs(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data": this.Base64img,"type":2};
          upLoadImg(data).then((res) => {
            if (res && res.code === 1) {
              this.certImgFileList.push({'url': res.data.image_url});
              this.$message({message: '上传成功', type: 'success'});
              this.$refs.brandForm.clearValidate('brand_register_cert');
              //this.$refs.logoImg.clearValidate();
            }
          });
        });
      },
      // 预览
      handlePreviewCert(file) {
        this.certImageUrl = file.url;
        this.certVisible = true;
      },

      // 删除
      handleRemoveCert(file) {
        for(let i = 0; i < this.certImgFileList.length; i++) {
          if(file.uid === this.certImgFileList[i].uid) {
            this.certImgFileList.splice(i,1);
          }
        }
      },

      // 品牌方授权书 自定义上传
      uploadFactoryImgs(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data":this.Base64img,"type":2};
          upLoadImg(data).then((res) => {
            if(res && res.code ===  1){
              this.factoryImgFileList.push({'url':res.data.image_url});
              this.$refs.brandForm.clearValidate('brand_auth');
              this.$message({message: '上传成功', type: 'success'});
            }
          });
        });
      },
      // 上传图片格式和大小限制 2mb
      UpImgSizeTwoMb(file) {
        if(file.type !== "image/png" && file.type !== "image/jpg" && file.type != "image/jpeg") {
          this.$message({
            message: '上传图片格式只支持jpg/png格式',
            type: "warning"
          });
          return false;
        }
        let isImgSize = (file.size / 1024 ) > 500;
        if(isImgSize) {
          this.$message({
            message: '上传图片大小不能超过500k',
            type: "warning"
          });
          return false;
        }
      },
      // 预览
      handlePreviewFactory(file) {
        this.factoryImageUrl = file.url;
        this.factoryVisible = true;
      },
      // 删除
      handleRemoveFactory(file) {
        for(let i = 0; i < this.factoryImgFileList.length; i++) {
          if(file.uid === this.factoryImgFileList[i].uid) {
            this.factoryImgFileList.splice(i,1);
          }
        }
      },
      // 品牌经营授权图片上传
      uploadShopImgs(param) {
        this.getBase64(param.file).then((res) => {
          let result = res.split(",");
          this.Base64img = result[1];
          let data = {"img_data":this.Base64img,"type":2};
          upLoadImg(data).then((res) => {
            if(res && res.code ===  1){
              this.shopImgFileList.push({'url':res.data.image_url});
              this.$message({message: '上传成功', type: 'success'});
              this.$refs.brandForm.clearValidate('brand_business_auth');
            }
          });
        });
      },
      // 预览
      handlePreviewShop(file) {
        this.shopImageUrl = file.url;
        this.shopVisible = true;
      },
      // 删除
      handleRemoveShop(file) {
        for(let i = 0; i < this.shopImgFileList.length; i++) {
          if(file.uid === this.shopImgFileList[i].uid) {
            this.shopImgFileList.splice(i,1);
          }
        }
      },
    } // methods end
  }
</script>
<style scoped>
  .brandForm  ::v-deep  .uploadData .el-upload-list--picture-card .el-upload-list__item{
     line-height: 20px !important;
   }
 </style>
<style lang="scss" type="text/stylus" scoped>
  .brandInf-add {
    ::v-deep .el-dialog {
      height: 85%;
      overflow : hidden;
    }
    ::v-deep .el-dialog__body{
      height: calc(100% - 60px);
      overflow-x: hidden;
      overflow-y: scroll;
    }
  }

  .brand-status-con {
    font-size: 16px;
    margin: 0 10% 10px;
    padding: 12px 20px;
    border: 1px solid #00afff;
    display : flex;
    justify-content : normal;
    align-items :center;
    flex-direction : row;
  }
  .color-spe-success {
    color: #67C23A;
    font-size: 20px;
    padding-top: 2px;
  }
  .color-spe-error {
    color: #F56C6C;
    font-size: 20px;
    padding-top: 2px;
  }
  .color-spe-waiting {
    color: #909399;
    font-size: 20px;
    padding-top: 2px;
  }

  .brand-form-status-text {
    padding: 0 10px;
  }
  .btnCen {
    ::v-deep .el-form-item__content {
      margin-left: 0!important;
      text-align : center;
      margin-top: 30px;
    }
  }

  .brand-title-tips {
    text-align : center;
    padding: 10px 20px 20px;
    margin: 0;
    font-size : 14px;
    color: #F56C6C;
  }

  .brand-auth-tips {
    margin: 0;
    font-size : 12px;
    color: #F56C6C;
  }

  .brand-refused-title {
    margin: 0 8px;
    font-size: 18px;
  }

// 上传图片样式重置 start
  .uploadData {
    display: inline-block;
    ::v-deep  .el-upload--picture-card {
      width: 100px;
      height: 100px;
    }

    ::v-deep  .el-upload {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }

    ::v-deep  .el-upload-list--picture-card .el-upload-list__item {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }

    ::v-deep  .el-upload-list--picture-card .el-upload-list__item-thumbnail {
      width: 100px;
      height: 100px;
      line-height: 100px;
    }

    ::v-deep  .avatar {
      width: 100px;
      height: 100px;
    }
  }
// 上传图片样式 重置 end
// 提示语 样式 start
  .tips-text {
    font-size: 14px;
    color: #C9C9C9;
    word-break: break-all;
  }

  .h-warning:before {
    color: #e3c300;
  }
// 提示语样式  end
</style>
