<template>
  <div class="app-container order-index">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="mini"
      :inline="true"
      v-show="showSearch"
      label-width="90px"
       class="mini-form"
    >
      <el-form-item label="电商平台名称:" prop="platformName">
        <el-input
          v-model="queryParams.platformName"
          placeholder="输入电商平台名称，支持模糊查询"
          style="width: 155px;"
          clearable
        />
      </el-form-item>
      <el-form-item label="店铺名称:" prop="shopName">
        <el-input
          v-model="queryParams.shopName"
          placeholder="输入店铺名称，支持模糊查询"
          style="width: 155px;"
          clearable
        />
      </el-form-item>
      <el-form-item label="店铺编码:" prop="shopCode">
        <el-input
          v-model="queryParams.shopCode"
          placeholder="输入完整店铺编码"
          style="width: 155px;"
          clearable
        />
      </el-form-item>
      <el-form-item label="管易店铺:" prop="erpShopCodes">
        <el-select
          v-model="queryParams.erpShopCodes"
          multiple
          filterable
          style="width: 155px;"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="(dict, index) in erpShopList"
            :key="index"
            :label="dict.shopName"
            :value="dict.shopCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="运营品牌:" prop="brandCodes">
        <el-select
          v-model="queryParams.brandCodes"
          filterable
          multiple
          style="width: 155px;"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="(dict, index) in brandNameList"
            :key="index"
            :label="dict.brandName"
            :value="dict.brandCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="运营品类:" prop="categoryCodes">
        <el-select
          v-model="queryParams.categoryCodes"
          filterable
          multiple
          style="width: 155px;"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="(dict, index) in categoryList"
            :key="index"
            :label="dict.categoryName"
            :value="dict.categoryCode"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态:" prop="status">
        <el-select
          v-model="queryParams.status"
          filterable
          style="width: 155px;"
          placeholder="请选择"
          clearable
        >
          <el-option
            label="启用"
            :value="1"
          />
          <el-option
            label="停用"
            :value="0"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="success" plain size="mini" @click="expandChange">{{
          expandText
        }}</el-button>
        <el-button type="primary" plain icon="el-icon-plus"
        size="mini" @click="handleAdd" v-hasPermi="['system:shop:addplatform']"
          >新增电商平台</el-button
        >
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      ref="proTable"
      :height="tableHeight"
      border
      v-loading="loading"
      :key="treeKey"
      row-key="id"
      :tree-props="{ children: 'operateShops' }"
      :default-expand-all="expandText !== '全部展开'"
      :data="postList"
    >
      <!-- <el-table-column type="selection" min-width="55" align="center" /> -->
      <el-table-column label="电商平台" min-width="120" align="left" prop="platformName">
        <template template slot-scope="scope">
          <span v-if="scope.row.shopCode"></span>
          <span v-else>{{ scope.row.platformName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="店铺名称" min-width="120" align="center" prop="shopName" />
      <el-table-column label="店铺编码" min-width="120" align="center" prop="shopCode" />
      <el-table-column label="运营范围" min-width="260" align="center" prop="createBy" >
        <template template slot-scope="scope">
            <div v-for="(item,index) in scope.row.erpShops" :key="index">
              <span>{{ item.erpShopName }}：</span>
              <span v-if="item.operateRangeType===0">全部业务</span>
              <span v-else>
                <span v-for="(range,rindex) in item.ranges" :key="rindex">
                  <span>{{ range.brandName }}-</span>
                  <span v-if="range.categoryType===0">全部品类</span>
                  <span v-else>{{range.categoryName}}</span>
                  <span v-if="rindex!=item.ranges.length-1">，</span>
                </span>
              </span>
            </div>
        </template>
      </el-table-column>
      <el-table-column label="状态" min-width="90" align="center" prop="isShow">
        <template template slot-scope="scope">
          <span v-if="scope.row.isShow === 1">启用</span>
          <span v-if="scope.row.isShow === 0">停用</span>
        </template>
      </el-table-column>
      <el-table-column label="店铺类型" min-width="100" align="center" prop="isVirtual">
        <template template slot-scope="scope">
          <span v-if="scope.row.isVirtual === 1">虚拟</span>
          <span v-if="scope.row.isVirtual === 0">实体</span>
        </template>
      </el-table-column>
      <el-table-column label="启用时间" min-width="150" align="center" prop="startTime" />
      <el-table-column label="排序" min-width="90" align="center" prop="sort" />
      <el-table-column label="更新人" min-width="100" align="center" prop="updatedBy" />
      <el-table-column label="更新时间" min-width="150" align="center" prop="updatedAt" />
      <el-table-column
        label="操作"
        width="140"
        align="center"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" v-hasPermi="['system:shop:addshop']"
          v-if="!scope.row.shopCode" @click="addShop(scope.row)"
            >新增店铺</el-button
          >
          <el-button size="mini" type="text" @click="showChart(scope.row)"
            v-hasPermi="['system:shop:editplatform', 'system:shop:editshop']"
            >编辑</el-button
          >
          <el-button size="mini" type="text" @click="showLog(scope.row)"
            >日志</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="totalSize" v-show="total>0">共 {{ total }} 家店铺</div>

    <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      class="fixed-pagination"
    /> -->

    <el-dialog
      :title="title"
      top="50px"
      :visible.sync="open"
      width="500px"
      append-to-body
      center
    >
      <el-form
      ref="spuRef"
      class="mini-form"
      size="mini"
       :model="form" label-width="120px">
        <el-form-item
          label="电商平台编码:"
          :rules="[{ required: true, message: '请填写电商平台编码', trigger: 'change' }]"
          prop="platformNo"
        >
          <el-input
            v-model="form.platformNo"
            placeholder="请填写电商平台编码(最多10个字符)"
            maxLength="10"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="电商平台名称:"
          :rules="[{ required: true, message: '请填写电商平台名称(最多40个字符)', trigger: 'change' }]"
          prop="platformName"
        >
          <el-input
            v-model="form.platformName"
            placeholder="请填写电商平台名称(最多40个字符)"
            maxLength="40"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="状态:"
          :rules="[{ required: true, message: '请选择状态', trigger: 'change' }]"
          prop="status"
          class="shop-index"
        >
          <el-radio v-model="form.status" :label="1">启用</el-radio>
          <el-radio v-model="form.status" :label="0">停用</el-radio>
        </el-form-item>
        <el-form-item
          label="排序:"
          :rules="[{ required: true, message: '请填写排序', trigger: 'change' }]"
          prop="sort"
        >
          <el-input
            type="number"
            v-model="form.sort"
            placeholder="请填写排序"
            clearable
          />
        </el-form-item>

          <el-form-item
            label="指定物流公司发货:"
            prop="expressCode"
          >
          <el-select
            v-model="form.expressCode"
            placeholder="请选择物流公司"
            multiple
            clearable
            style="width: 100%;"
          >
            <el-option
              v-for="(dict, index) in returnLogisticsCompanyList"
              :key="index"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="submitDataScope">确 定</el-button>
        <el-button size="mini" @click="open = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="title2"
      top="50px"
      :visible.sync="attrOpen"
      width="700px"
      append-to-body
      center
    >
      <el-form class="mini-form" ref="shopForm"
      size="mini" :model="form2" label-width="110px">
        <el-form-item
          label="电商平台:"
          :rules="[{ required: true, message: '请选择电商平台', trigger: 'change' }]"
          prop="platformNo"
        >
        <el-select
          v-model="form2.platformNo"
          filterable
          placeholder="请选择"
          style="width: 100%;"
          @change="platformChange"
          clearable
        >
          <el-option
            v-for="(dict, index) in platformList"
            :key="index"
            :label="dict.platformName"
            :value="dict.platformNo"
          />
        </el-select>
        </el-form-item>
        <el-form-item
          label="店铺名称:"
          :rules="[{ required: true, message: '请输入店铺名称', trigger: 'change' }]"
          prop="shopName"
        >
          <el-input maxLength="40" v-model="form2.shopName" placeholder="请填写店铺名称(最多40个字符)" clearable />
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="店铺编码:"
              :rules="[{ required: true, message: '请输入店铺编码', trigger: 'change' }]"
              prop="shopCode"
            >
              <el-input maxLength="20" v-model="form2.shopCode" placeholder="请填写店铺编码(最多20字符)" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="店铺简称:"
              :rules="[{ required: true, message: '请输入店铺简称', trigger: 'change' }]"
              prop="shopNick"
            >
              <el-input v-model="form2.shopNick" maxLength="20" placeholder="请填写店铺简称(最多20汉字)" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="归属部门:"
              :rules="[{ required: true, message: '请选择归属部门', trigger: 'change' }]"
              prop="departmentCode"
            >
              <el-select
                v-model="form2.departmentCode"
                filterable
                placeholder="请选择"
                clearable
                @change="deptChange"
              >
                <el-option
                  v-for="(dict, index) in deptList"
                  :key="index"
                  :label="dict.deptName"
                  :value="dict.deptCode"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="运营人员:"
              :rules="[{ required: true, message: '请选择运营人员', trigger: 'change' }]"
              prop="head"
            >
                <el-select
                  v-model="form2.head"
                  filterable
                  placeholder="请选择业务员"
                  clearable
                >
                  <el-option
                    v-for="(dict, index) in businessManList"
                    :key="index"
                    :label="dict.nickName"
                    :value="dict.nickName"
                  />
                </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="店铺运营范围:">
          <el-button type="text" icon="el-icon-plus" @click="handleAdd3()"
            >新增管易店铺</el-button
          >
          <div class="gyshop" v-for="(item,index) in form2.erpShops" :key="index">
            <div class="gyTitle">
              <span>管易店铺{{ index+1 }}</span>
              <el-button
                v-if="index > 0"
                @click="removeAttr(form2.erpShops, index)"
                slot="append"
                type="text"
                icon="el-icon-delete"
              ></el-button>
            </div>
            <el-row>
              <el-form-item
                label="管易店铺:"
                prop="erpShopCode"
                label-width="80px"
              >
              <el-select
                v-model="item.erpShopCode"
                filterable
                style="width: 100%;"
                placeholder="请选择"
                clearable
                @change="value=>shopChange2(item, value)"
              >
                <el-option
                  v-for="(dict, index) in erpShopList"
                  :key="index"
                  :label="dict.shopName"
                  :value="dict.shopCode"
                />
              </el-select>
              </el-form-item>
              <el-form-item
                label="业务范围:"
                prop="operateRangeType"
                label-width="80px"
                class="shop-index"
              >
                <el-radio v-model="item.operateRangeType" :label="0">全部业务</el-radio>
                <el-radio v-model="item.operateRangeType" :label="1">按品牌选择运营范围</el-radio>
              </el-form-item>
            </el-row>
            <el-row v-if="item.operateRangeType===1">
              <el-row v-for="(range, rindex) in item.ranges" :key="rindex">
                <el-col :span="10">
                  <el-form-item
                    label="品牌:"
                    prop="brandCode"
                    label-width="60px"
                  >
                    <el-select
                      v-model="range.brandCode"
                      filterable
                      style="width: 100%;"
                      placeholder="请选择"
                      clearable
                      @change="value=>shopChange(range, value, 'brandCode','brandName', brandNameList)"
                    >
                      <el-option
                        v-for="(dict, index) in brandNameList"
                        :key="index"
                        :label="dict.brandName"
                        :value="dict.brandCode"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="覆盖品类:"
                    prop="categoryCode"
                    label-width="70px"
                  >
                    <el-select
                      v-model="range.categoryCode"
                      filterable
                      style="width: 100%;"
                      placeholder="请选择"
                      clearable
                      multiple
                      @change="categoryCodeChange(range, categoryList)"
                    >
                      <el-option
                        v-for="(dict, index) in categoryList"
                        :key="index"
                        :label="dict.categoryName"
                        :value="dict.categoryCode"
                      />
                    </el-select>

                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-button
                    @click="removeAttr(item.ranges, rindex)"
                    type="text"
                    icon="el-icon-delete"
                  > </el-button>
                </el-col>
              </el-row>
              <el-button type="text" icon="el-icon-plus" @click="handleAdd2(item)"
                >添加品牌</el-button
              >
            </el-row>
          </div>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="状态:"
              :rules="[{ required: true, message: '请选择状态', trigger: 'change' }]"
              prop="status"
              class="shop-index"
            >
            <el-radio v-model="form2.status" :label="1">启用</el-radio>
            <el-radio v-model="form2.status" :label="0">停用</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="排序:"
              :rules="[{ required: true, message: '请输入排序', trigger: 'change' }]"
              prop="sort"
            >
              <el-input type="number" v-model="form2.sort" placeholder="请填写排序" clearable />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="addAttritem">确 定</el-button>
        <el-button size="mini" @click="attrOpen = false">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="日志"
      :visible.sync="logVisible"
      width="700px"
      append-to-body
      center
    >
      <el-table
        ref="logTable"
        border
        :data="operationLogList"
      >
        <!-- <el-table-column type="selection" min-width="55" align="center" /> -->
          <el-table-column
            label="操作步骤"
            min-width="140"
            align="left"
            prop="operateName"
          >
          </el-table-column>
          <el-table-column label="操作备注" min-width="140" align="left" prop="operateMsg">
            <template slot-scope="scope">
              <span v-html="scope.row.operateMsg"></span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作人"
            min-width="100"
            align="left"
            prop="createdBy"
          />
          <el-table-column
            label="操作时间"
            min-width="140"
            align="left"
            prop="createdTime"
          />
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import { getBrandNameList } from "@/api/goods/index";
import { getToken } from "@/utils/auth";
import {
  getErpShopList,
  // getShop,
  // getPlatform,
  getPlatformList,
  operateShopAdd,
  operatePlatformAdd,
  operatePlatformUpdate,
  operateQueryLog,
  operateQueryPage,
  operateUpdateShop
} from "@/api/shop/index";
import { listUser } from "@/api/system/user";
import{
  gyDeptList
} from "@/api/saleConfig/index";
import {
  getCategory,
} from "@/api/order/index";
import LoadMoreSelect from "@/components/LoadMoreSelect/index";

export default {
  name: "shop/index",
  components: {
    LoadMoreSelect,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      categoryList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      spuList: [],
      logVisible: false,
      operationLogList: [],
      // 用户导入参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API_NEW + "/spu/import",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        "brandCodes": [],
        "categoryCodes": [],
        "erpShopCodes": [],
        "platformName": "",
        "shopCode": "",
        "shopName": "",
        "status": ''
      },
      // 表单参数
      form: {
        "expressCode": [],
        "platformName": "",
        "platformNo": "",
        "sort": '',
        "status": 1
      },
      form2: {
        "departmentCode": "",
        "departmentName": "",
        "erpShops": [
          {
            "erpShopCode": "",
            "erpShopName": "",
            "operateRangeType": 0,
            "ranges": [
              {
                "brandCode": "",
                "brandName": "",
                "categoryCode": [],
                "categoryName": [],
                "categoryType": ""
              }
            ]
          }
        ],
        "head": "",
        "platformName": "",
        "platformNo": "",
        "shopCode": "",
        "shopName": "",
        "shopNick": "",
        "sort": '',
        "status": 1
      },
      brandNameList: [],
      platformList: [],
      timer: null,
      attrOpen: false,
      title2: "",
      chartLading: true,
      loadDataStatus: true,
      treeKey: "",
      tableHeight: "auto",
      attrLists: [],
      attrList: [],
      attrRow: {},
      attrListsIndex: 1,
      expandText: "全部收起",
      erpShopList: [],
      deptList: [],
      businessManList: [],
      returnLogisticsCompanyList: [
        { label: "顺丰速运", value: "SF_EXPRESS" },
        { label: "圆通速递", value: "YTO_EXPRESS" },
        { label: "中通快递", value: "ZTO_EXPRESS" },
        { label: "申通快递", value: "STO_EXPRESS" },
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近半个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.treeKey = Math.random();
    this.getList();
    this.getBrandNameList();
  },
  mounted() {},
  methods: {
    platformChange(value){
      const data = this.platformList.find(item=> item.platformNo == value);
      this.form2.platformName = data ? data.platformName : '';
    },
    deptChange(value){
      const data = this.deptList.find(item=> item.deptCode == value);
      this.form2.departmentName = data ? data.deptName : '';
    },
    shopChange(item, value, keys,key, list){
      const data = list.find(items=> items[keys] == value);
      item[key] = data ? data[key] : '';
    },
    shopChange2(item, value){
      const data = this.erpShopList.find(items=> items.shopCode == value);
      item.erpShopName = data ? data.shopName : '';
    },
    categoryCodeChange(item, list) {
      item.categoryName = [];
      item.categoryCode.forEach(cg=>{
        list.forEach(items=> {
          if(items.categoryCode == cg){
            item.categoryName.push(items.categoryName);
          }
        });
      });
    },
    getBrandNameList() {
      getBrandNameList().then((res) => {
        this.brandNameList = res.data;
      });
      getCategory().then((res) => {
        this.categoryList = res.data;
        this.categoryList.unshift({
          categoryCode: '',
          categoryName: '全部'
        })
      });
      getErpShopList().then((res) => {
        this.erpShopList = res.data;
      });
      gyDeptList({}).then((res) => {
        this.deptList = res.data;
      });
      listUser({
        pageSize: 9999,
        pageNum: 1
      }).then(res=>{
        this.businessManList = res.rows.filter(item=> item.status === '0');
      });
    },
    expandChange() {
      this.treeKey = Math.random();
      this.expandText == "全部展开"
        ? (this.expandText = "全部收起")
        : (this.expandText = "全部展开");
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = "导入";
      this.upload.open = true;
    },
    /** 查询岗位列表 */
    getList() {
      this.loading = true;
      operateQueryPage(this.queryParams).then((response) => {
        this.postList = response.data.list;
        this.total = response.data.totalSize;
        this.loading = false;

        this.$nextTick(() => {
          const height = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 220;
          this.tableHeight = height + "px";
          // if (height < this.$refs.proTable.$el.offsetHeight) {
          //   this.$refs.proTable.height = height + "px";
          //   this.$refs.proTable.doLayout();
          // } else if (height == this.$refs.proTable.$el.offsetHeight) {
          //   this.$refs.proTable.height = height + "px";
          //   this.$refs.proTable.doLayout();
          // }
        });
        getPlatformList().then((res) => {
          this.platformList = res.data;
        });
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.postId);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.form = {
        "expressCode": [],
        "platformName": "",
        "platformNo": "",
        "sort": '',
        "status": 1
      };
      this.resetForm("spuRef");
      this.title = "新增电商平台";
      this.open = true;
    },
    /** 修改按钮操作 */
    showChart(row) {
      if(row.shopName){
        this.title2 = "编辑店铺";
        const rowsCopy = JSON.parse(JSON.stringify(row));
        this.resetForm("shopForm");
        this.form2 = {
          "departmentCode": "",
          "departmentName": "",
          "erpShops": [
            {
              "erpShopCode": "",
              "erpShopName": "",
              "operateRangeType": 0,
              "ranges": []
            }
          ],
          "head": "",
          "platformName": rowsCopy.platformName,
          "platformNo": rowsCopy.platformNo,
          "shopCode": "",
          "shopName": "",
          "shopNick": "",
          "sort": '',
          "status": 1
        };
        this.form2 = Object.assign(this.form2, rowsCopy);
        this.form2.status = rowsCopy.isShow;
        this.form2.sourceShopCode = row.shopCode;
        this.form2.erpShops.forEach(item=>{
          item.ranges.forEach(ra=>{
            if(ra.categoryCode){
              ra.categoryCode = ra.categoryCode.split(',');
            }
            if(ra.categoryName){
              ra.categoryName = ra.categoryName.split(',');
            }
          })
        })
        this.attrOpen = true;
      }else{
        this.resetForm("spuRef");
        this.title = "编辑电商平台";
        const rowsCopy = JSON.parse(JSON.stringify(row));
        this.form = Object.assign(this.form, rowsCopy);
        this.form.status = rowsCopy.isShow;
        this.form.sourcePlatformNo = row.platformNo;
        if(row.expressCode){
          this.form.expressCode = row.expressCode.split(',');
        }
        this.open = true;
      }
    },
    showLog(row){
      operateQueryLog({
        businessId: row.id,
        businessType: row.shopName ? 'operateShop' : 'platforms'
      }).then(res=>{
        if(res.status==200){
          this.logVisible = true;
          this.operationLogList = res.data;
        }
      })
    },
    addShop(row){
      this.title2 = "新增店铺";
      const rowsCopy = JSON.parse(JSON.stringify(row));
      this.resetForm("shopForm");
      this.form2 = {
        "departmentCode": "",
        "departmentName": "",
        "erpShops": [
          {
            "erpShopCode": "",
            "erpShopName": "",
            "operateRangeType": 0,
            "ranges": []
          }
        ],
        "head": "",
        "platformName": rowsCopy.platformName,
        "platformNo": rowsCopy.platformNo,
        "shopCode": "",
        "shopName": "",
        "shopNick": "",
        "sort": '',
        "status": 1
      }
      this.attrOpen = true;
    },
    handleAdd2(item) {
      item.ranges.push({
        "brandCode": "",
        "brandName": "",
        "categoryCode": [],
        "categoryName": [],
        "categoryType": ""
      });
    },
    handleAdd3() {
      this.form2.erpShops.push({
        "erpShopCode": "",
        "erpShopName": "",
        "operateRangeType": 0,
        "ranges": []
      });
    },
    removeAttr(value, index) {
      value.splice(index, 1);
    },
    removeAttr2(value, index) {
      this.attrLists.splice(index, 1);
    },
    addAttritem() {
      this.$refs["shopForm"].validate((valid) => {
        if(valid){
          let status = false;
          const form2Data = JSON.parse(JSON.stringify(this.form2));
          form2Data.erpShops.forEach(item=>{
            if(item.erpShopCode==''){
              status = true;
            }
            if(item.operateRangeType==1){
              if(item.ranges.length==0){
                status = true;
              }
              item.ranges.forEach(range=>{
                if(range.brandCode==''){
                  status = true;
                }
                if(range.categoryCode==[]){
                  range.categoryType = 0
                }else{
                  range.categoryType = 1
                }
                range.categoryCode = range.categoryCode.join(',');
                range.categoryName = range.categoryName.join(',');
              })
            }else{
              item.ranges = []
            }
          });
          if(status){
            this.$message.warning('请填写完整运营店铺信息');
            return false;
          }
          let func = null;
          this.title2=='新增店铺' ? func = operateShopAdd : func = operateUpdateShop;
          func(form2Data).then(res=>{
            if(res.status==200){
              this.title2=='新增店铺' ? this.$message.success('新增店铺成功') :  this.$message.success('编辑店铺成功') ;
              this.attrOpen = false;
              this.getList();
            }
          })
        }
      })
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
          response.msg +
          "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.getList();
    },
    submitDataScope() {
      this.$refs["spuRef"].validate((valid) => {
        if (valid) {
          const fnc = this.title === "新增电商平台" ? operatePlatformAdd : operatePlatformUpdate;
          fnc(this.form).then((res) => {
            this.title === "新增电商平台" ? this.$modal.msgSuccess("新增成功") : this.$modal.msgSuccess("编辑成功");
            this.open = false;
            this.getList();

          });
        }
      });
    },
    skuInfo() {},
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    /** 导出按钮操作 */
    handleExport() {
      const data = { ...this.queryParams };
      delete data.pageNum;
      delete data.pageSize;
      this.newDownload(
        "/operateShop/export",
        data,
        `电商平台店铺_${new Date().getTime()}.xlsx`
      );
    },
    /** 下载模板操作 */
    importTemplate() {
      this.newDownload(
        "spu/importTemplate",
        {},
        `spu_template_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style scoped>
.charts-box {
  height: 350px;
  margin-top: 30px;
}
.erpPrice > span {
  color: #409eff;
}
.iconEdit {
  cursor: pointer;
}
.app-container {
  padding-bottom: 50px;
}
.gyshop{
  padding: 8px 16px;
  border: 1px solid #DCDFE6;
  border-radius: 4px;
  margin-bottom: 12px;
  width: 460px;
}
.gyTitle{
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}
.totalSize{
  font-size: 14px;
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
  padding-right: 12px;
  color: #333;
}
</style>
<style lang="scss">
.shop-index{
  .el-radio__label{
    font-size: 12px;
  }
}

</style>

