<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.goodsId"
        clearable
        class="filter-item"
        style="width: 160px;"
        placeholder="请输入商品ID"
      />
      <el-input
        v-model="listQuery.goodsSn"
        clearable
        class="filter-item"
        style="width: 160px;"
        placeholder="请输入商品编号"
      />
      <el-input
        v-model="listQuery.name"
        clearable
        class="filter-item"
        style="width: 160px;"
        placeholder="请输入商品名称"
      />
      <el-select
        v-model="listQuery.categoryId"
        clearable
        style="width: 200px"
        class="filter-item"
        placeholder="商品类目"
      >
        <el-option
          v-for="item in catL1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="listQuery.isOnSale"
        clearable
        style="width: 200px"
        class="filter-item"
        placeholder="是否上架"
      >
        <el-option
          v-for="item in boolens"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="listQuery.isSinge"
        clearable
        style="width: 200px"
        class="filter-item"
        placeholder="是否单规格"
      >
        <el-option
          v-for="item in singles"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="listQuery.isAddBuy"
        clearable
        style="width: 200px"
        class="filter-item"
        placeholder="是否设置加购"
      >
        <el-option
          v-for="item in addBuys"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-select
        v-model="listQuery.isHot"
        clearable
        style="width: 200px"
        class="filter-item"
        placeholder="是否热卖"
      >
        <el-option
          v-for="item in boolens"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <!-- <el-select v-model="listQuery.channel" style="width: 160px" class="filter-item" placeholder="上线渠道" clearable>
            <el-option v-for="item in channels" :key="item.id" :label="item.name" :value="item.id" />
       </el-select> -->
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
        >查找</el-button
      >
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
        >添加</el-button
      >
      <el-button
        :loading="downloadLoading"
        class="filter-item"
        type="primary"
        icon="el-icon-download"
        @click="handleDownload"
        >导出
      </el-button>
      <el-button
        v-permission="['GET /admin/goods/updateChannelCity']"
        class="filter-item"
        type="primary"
        icon="el-icon-box"
        @click="handleBatchReceptConfirm"
        >更新渠道城市
      </el-button>
    </div>

    <el-tabs v-model="listQuery.channel" @tab-click="handleFilter">
      <el-tab-pane label="所有商品" name="0" />
      <el-tab-pane label="微信商城" name="5" />
      <el-tab-pane label="抖音鲸致" name="26" />
      <el-tab-pane label="抖音云嘉" name="107" />
      <el-tab-pane label="美团" name="104" />
      <el-tab-pane label="快手" name="103" />
      <el-tab-pane label="众安" name="106" />
      <el-tab-pane label="支付宝" name="110" />
      <el-tab-pane label="花王" name="112" />
    </el-tabs>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="table-expand">
            <el-form-item label="商品编号">
              <span>{{ props.row.goodsSn }}</span>
            </el-form-item>
            <el-form-item label="宣传画廊">
              <img
                v-for="pic in props.row.gallery.split(',')"
                :key="pic"
                :src="pic"
                class="gallery"
              />
            </el-form-item>
            <el-form-item label="商品介绍">
              <span>{{ props.row.brief }}</span>
            </el-form-item>
            <el-form-item label="商品单位">
              <span>{{ props.row.unit }}</span>
            </el-form-item>
            <el-form-item label="类目ID">
              <span>{{ props.row.categoryId }}</span>
            </el-form-item>
            <el-form-item label="二维码">
              <el-image
                :preview-src-list="[props.row.shareQr]"
                :lazy="true"
                :src="props.row.shareQr"
                style="width:180px"
              ></el-image>
            </el-form-item>
            <el-form-item label="服务时长">
              <span>{{ props.row.serviceDuration }}</span>
            </el-form-item>
            <el-form-item label="服务次数">
              <span>{{ props.row.serviceTimes }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column type="selection" width="55" />

      <el-table-column align="center" label="商品ID" prop="id">
        <template slot-scope="scope">
          <div style="text-align: left;">
            <span style="font-weight: 600;">商品ID:</span> {{ scope.row.id
            }}<br />
            <span style="font-weight: 600;">商品编号:</span>
            {{ scope.row.goodsSn }}<br />
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" min-width="100" label="名称" prop="name">
        <template slot-scope="scope">
          <div style="text-align: left;">
            <span style="font-weight: 600;">商品名称:</span> {{ scope.row.name
            }}<br />
          <!--   <span style="font-weight: 600;">商品简称:</span>
            {{ scope.row.reportCategory }}<br /> -->
          </div>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="上线信息"
        prop="channel"
        width="220"
      >
        <template slot-scope="scope">
          <div style="text-align: left;">
            <span style="font-weight: 600;">上线渠道:</span>
            <el-tag type="success">
              {{ channelsFilter(scope.row.channel) }} </el-tag
            ><br />
            <!-- <span style="font-weight: 600;">服务次数:</span> {{ scope.row.serviceTimes }}<br />
            <span style="font-weight: 600;">服务时长:</span> {{ scope.row.serviceDuration }}<br />
            <span style="font-weight: 600;">延迟多久可约:</span> {{ scope.row.bookDelayDay == 0 ? 14 : scope.row.bookDelayDay
            }}小时<br />
            <span style="font-weight: 600;">可约几日内档期:</span> {{ scope.row.bookIntervalDay }}天<br /> -->
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" property="iconUrl" label="商品图片">
        <template slot-scope="scope">
          <el-image
            :src="scope.row.picUrl"
            :preview-src-list="[scope.row.picUrl]"
          ></el-image>
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" property="iconUrl" label="分享图">
        <template slot-scope="scope">
          <img :src="scope.row.shareUrl" width="40">
        </template>
      </el-table-column> -->

      <el-table-column
        align="center"
        class-name="small-padding fixed-width"
        label="详情"
        prop="detail"
      >
        <template slot-scope="scope">
          <el-dialog :visible.sync="detailDialogVisible" title="商品详情">
            <div class="goods-detail-box" v-html="goodsDetail" />
          </el-dialog>
          <el-button
            type="primary"
            size="mini"
            @click="showDetail(scope.row.detail)"
            >查看详情</el-button
          >
          <el-button
            type="primary"
            size="mini"
            @click="showSKUDetail(scope.row.id)"
            >查看SKU</el-button
          >
        </template>
      </el-table-column>

      <el-table-column align="center" label="销售信息" prop="counterPrice">
        <template slot-scope="scope">
          <div style="text-align: left;">
            <span style="font-weight: 600;">市场售价:</span>
            {{ scope.row.counterPrice }}<br />
            <span style="font-weight: 600;">当前价格:</span>
            {{ scope.row.retailPrice }}<br />
            <span style="font-weight: 600;">已售数量:</span> {{ scope.row.sales
            }}<br />
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="其他信息" prop="counterPrice">
        <template slot-scope="scope">
          <div style="text-align: left;">
            <span style="font-weight: 600;">限购件数:</span> {{ scope.row.limit
            }}<br />
            <span style="font-weight: 600;">指定加盟商:</span>
            {{
              scope.row.assignFraId && scope.row.assignFraId > 0
                ? "指定"
                : "未指定"
            }}<br />
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="当前价格" prop="retailPrice" />
      <el-table-column align="center" label="当前排序" prop="sortOrder" />  -->

      <el-table-column align="center" label="状态" width="220">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isOnSale"
            active-text="上架"
            inactive-text="下架"
            @change="handleOnsale(scope.row)"
          />
          <el-switch
            v-model="scope.row.isHot"
            active-text="热卖"
            inactive-text="非热卖"
            @change="handleOnhot(scope.row)"
          />
          <!-- <el-switch
            v-model="scope.row.isNew"
            active-text="新客专享"
            inactive-text="非新客专享"
            @change="handleOnnew(scope.row)"
          /> -->
          <el-switch
            v-model="scope.row.isHide"
            active-text="隐藏"
            inactive-text="可见"
            @change="handleOnhide(scope.row)"
          />
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)"
            >删除</el-button
          >

          <el-button
            type="success"
            v-if="
              scope.row.channel &&
                (scope.row.channel.indexOf('26') >= 0 ||
                  scope.row.channel.indexOf('107') >= 0)
            "
            v-permission="['GET /admin/goods/dyUrl']"
            size="mini"
            @click="handleCopyUrl(scope.row)"
            >复制抖音短链</el-button
          >

          <el-button
            v-if="
              scope.row.isOnSale &&
                scope.row.channel &&
                scope.row.channel.indexOf('5') >= 0
            "
            type="primary"
            size="mini"
            v-permission="['GET /admin/goods/goodsChannelQrCode']"
            @click="handleChannelCode(scope.row)"
            >生成渠道码</el-button
          >

          <!-- <el-button type="success" size="mini" @click="handleFee(scope.row)">商品计提</el-button>
          <el-button type="info" size="mini" @click="handleNoServiceTimeRange(scope.row)">不可约设定</el-button>-->

          <!-- <el-button type="primary" size="mini" v-if="scope.row.isOnSale" @click="openSyncDy(scope.row)">同步此商品到抖音</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="showSyncDy"
      width="30%"
      :show-close="false"
      title="同步商品到抖音"
    >
      <span style="color:red"
        >注:无论是首次申请还是追加申请，请选择此商品需要上线的全部门店</span
      >
      <!-- <el-select value="请选择" placeholder="请选择" v-model="dyShopNo" multiple>
        <el-option v-for="item in dyShopList" :key="item.id" :label="item.shopName" :value="item.shopNo">
        </el-option>
      </el-select> -->
      <el-cascader
        style="width:100%"
        v-model="dyShopNo"
        placeholder="选择需要上线的门店"
        :options="dyShopList"
        :props="{
          expandTrigger: 'hover',
          value: 'id',
          label: 'name',
          multiple: true
        }"
        expand-trigger="hover"
        clearable
      />
      <!-- <el-button type="primary" @click="handleDY">确定</el-button> -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleDY">确定</el-button>
      </div>
    </el-dialog>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-tooltip placement="top" content="返回顶部">
      <back-to-top :visibility-height="100" />
    </el-tooltip>

    <goodsSkuDetail ref="goodsSkuDetailRef" />

    <!-- 生成渠道复购码 -->
    <el-dialog
      :visible.sync="visibleGoodsChannel"
      width="30%"
      :show-close="false"
      :title="goodsChannelTitle"
    >
      <el-form
        ref="goodsChannelForm"
        :model="goodsChannelForm"
        :online="true"
        :rules="GoodsChannelRules"
        status-icon
        label-position="left"
        label-width="100px"
      >
        <el-form-item label="渠道" prop="channelId">
          <el-select
            v-model="goodsChannelForm.channelId"
            placeholder="请选择渠道"
            clearable
          >
            <el-option
              v-for="item in qrChannels"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-row>
          <el-col :span="20">
            <el-form-item label="生成类型" prop="type">
              <el-radio-group v-model="goodsChannelForm.type">
                <el-radio :label="0">短链</el-radio>
                <el-radio :label="1">二维码</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button
              type="success"
              style="float: right;"
              @click="generateQrCode"
              >生成渠道码</el-button
            >
          </el-col>
        </el-row>

        <el-form-item
          label="短链"
          v-if="goodsChannelForm.type == 0 && this.goodsChannelUrl"
        >
          {{ goodsChannelUrl }}
          <i
            class="el-icon-document-copy"
            style="cursor: pointer;color:#09afff"
            @click="copyGoodsChannelUrl"
          ></i>
        </el-form-item>
        <el-form-item
          label="二维码"
          v-if="goodsChannelForm.type == 1 && this.goodsChannelUrl"
        >
          <el-image :src="goodsChannelUrl" style="width: 100px;"></el-image>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="visibleGoodsChannel = false"
          >确定</el-button
        >
      </div>
    </el-dialog>

    <!-- 控制选择渠道弹窗 -->
    <el-dialog
      :visible.sync="changeChanneldialog"
      title="请选择渠道"
      width="500px"
    >
      <el-select
        v-model="orderInputForm.orderChannel"
        style="width:100%"
        placeholder="请选择渠道"
        multiple
      >
        <el-option
          v-for="item in channels"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-text class="mx-1" type="danger"
        >不可更新抖音渠道或原商品是抖音渠道</el-text
      >
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="removeChangeChannel">取消</el-button>
          <el-button type="primary" @click="confirmChangeChannel">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteGoods,
  getDyShop,
  listGoods,
  onhide,
  onhot,
  onnew,
  onsale,
  sync2Douyin,
  dyUrl,
  goodsChannelQrCode
} from "@/api/goods";
import { listCatL1 } from "@/api/category";
import BackToTop from "@/components/BackToTop";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { allChannel, updateChannelCity } from "@/api/channel";
import goodsSkuDetail from "./goodsSkuDetail";
import _ from "lodash";
export default {
  name: "GoodsList",
  components: { BackToTop, Pagination, goodsSkuDetail },
  data() {
    return {
      channels: [],
      qrChannels: [],
      list: [],
      catL1: [],
      boolens: [{ id: true, name: "是" }, { id: false, name: "否" }],
      singles: [{ id: 1, name: "单规格" }, { id: 2, name: "多规格" }],
      addBuys: [{ id: 1, name: "有加购sku" }, { id: 2, name: "未设置加购sku" }],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        goodsSn: undefined,
        isHot: "",
        isOnSale: "",
        city: "0",
        name: undefined,
        categoryId: undefined,
        sort: "update_time",
        order: "desc",
        isSinge:null,
        isAddBuy:null
      },
      goodsDetail: "",
      detailDialogVisible: false,
      downloadLoading: false,
      showSyncDy: false,
      goodsSN: "",
      dyShopList: [],
      dyShopNo: [],
      noServiceTimeRangeForm: {
        goodsId: ""
      },
      noServiceTimeRangeFormVisible: false,
      GoodsChannelRules: {
        channelId: [
          { required: true, message: "渠道不能为空", trigger: "change" }
        ]
      },
      visibleGoodsChannel: false,
      goodsChannelForm: {
        gId: "",
        channelId: "",
        type: 0
      },
      goodsChannelUrl: "",
      goodsChannelTitle: "",
      multipleSelection: [],
      changeChanneldialog: false,
      orderInputForm: { orderChannel: "" }
    };
  },
  created() {
    allChannel().then(res => {
      this.channels = res.data.data;
      // console.log("11", this.channels);
      this.qrChannels = this.channels.filter(
        item =>
          (item.id != 26) & (item.id != 38) && (item.id < 103 || item.id > 110)
      );
    });

    this.getCatL1();
    if (this.$route.query.id) {
      this.listQuery.goodsSn = this.$route.query.id;
    }
    this.getList();
  },
  methods: {
    handleChannelCode(row) {
      //生成渠道复购码
      this.visibleGoodsChannel = true;
      this.goodsChannelForm = {
        gId: row.id,
        channelId: "",
        type: 0
      };
      this.goodsChannelUrl = "";
      this.goodsChannelTitle = "生成【" + row.name + "】的渠道码";
    },
    generateQrCode() {
      this.$refs["goodsChannelForm"].validate(valid => {
        if (valid) {
          goodsChannelQrCode(this.goodsChannelForm).then(res => {
            if (res.data.errno == 0) {
              this.goodsChannelUrl = res.data.data;
              this.$notify.success({
                title: "成功",
                message: "生成成功"
              });
            } else
              this.$notify.error({
                title: "提醒",
                message: res.data.errmsg
              });
          });
        }
      });
    },
    copyGoodsChannelUrl() {
      this.fnCopy(this.goodsChannelUrl);
    },
    showSKUDetail(id) {
      this.$refs.goodsSkuDetailRef.showDetail(id);
    },
    getCatL1() {
      listCatL1().then(response => {
        this.catL1 = response.data.data.list;
      });
    },
    getList() {
      this.listLoading = true;
      listGoods(this.listQuery)
        .then(response => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    handleCopyUrl(row) {
      //todo 此处写死了26，需要修改
      dyUrl({ id: row.id, channelId: 26 }).then(res => {
        if (res.data.errno == 0) {
          this.fnCopy(res.data.data);
        } else {
          this.$notify.error({
            title: "提醒",
            message: res.data.errmsg
          });
        }
      });
    },
    fnCopy(content) {
      let oInput = document.createElement("input");
      oInput.value = content;
      document.body.appendChild(oInput);
      oInput.select();
      document.execCommand("Copy");
      oInput.remove();
      this.$notify.success({
        title: "成功",
        message: "复制成功"
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      if (this.listQuery.city == "抖音") {
        this.listQuery.channelName = "抖音";
        this.listQuery.city = "";
      } else if (this.listQuery.city == "金地") {
        this.listQuery.channelName = "金地";
        this.listQuery.city = "";
      }
      this.getList();
    },
    handleCreate() {
      this.$router.push({ path: "/goods/create" });
    },
    handleUpdate(row) {
      this.$router.push({ path: "/goods/edit", query: { id: row.id } });
    },
    handleFee(row) {
      this.$router.push({ path: "/goods/serviceFee", query: { id: row.id } });
    },
    openSyncDy(value) {
      this.showSyncDy = true;
      this.dyShopNo = [];
      this.goodsSN = value.goodsSn;
      getDyShop({ goodsId: value.id })
        .then(response => {
          this.dyShopList = response.data.data.shops;
          //设置选中的门店
          let selected = [];

          response.data.data.selected.forEach(shopId => {
            console.info(shopId);
            this.dyShopList.forEach(s => {
              s.children.forEach(ss => {
                console.info(ss.id);
                if (ss.id == shopId) {
                  selected.push([s.id, shopId]);
                }
              });
            });
          });
          this.dyShopNo = selected;
        })
        .catch(response => {
          this.$notify.error({
            title: "失败",
            message: response.data.errmsg
          });
        });
    },
    handleDY() {
      if (this.dyShopNo.length == 0) {
        this.$notify.error({
          title: "提醒",
          message: "请选择同步的门店"
        });
        return;
      }
      let shopNos = [];
      this.dyShopNo.forEach(s => {
        shopNos.push(s[1]);
      });

      const param = {
        goodsSn: this.goodsSN,
        shops: shopNos
      };
      // console.info(param);
      sync2Douyin(param)
        .then(response => {
          this.$notify.success({
            title: "成功",
            message: "同步成功"
          });
        })
        .catch(response => {
          this.$notify.error({
            title: "失败",
            message: response.data.errmsg
          });
        });
    },
    handleOnsale(row) {
      console.log(row);
      onsale(row)
        .then(response => {
          this.$notify.success({
            title: "成功",
            message: "商品上下架设置成功"
          });
        })
        .catch(response => {
          this.$notify.error({
            title: "失败",
            message: response.data.errmsg
          });
          row.isOnSale = !row.isOnSale;
        });
    },
    handleOnhot(row) {
      onhot(row)
        .then(response => {
          this.$notify.success({
            title: "成功",
            message: "商品设置热卖成功"
          });
        })
        .catch(response => {
          this.$notify.error({
            title: "失败",
            message: response.data.errmsg
          });
        });
    },
    handleOnnew(row) {
      onnew(row)
        .then(response => {
          this.$notify.success({
            title: "成功",
            message: "商品设置新客专享成功"
          });
        })
        .catch(response => {
          this.$notify.error({
            title: "失败",
            message: response.data.errmsg
          });
        });
    },
    handleOnhide(row) {
      onhide(row)
        .then(response => {
          this.$notify.success({
            title: "成功",
            message: "商品隐藏设置成功"
          });
        })
        .catch(response => {
          this.$notify.error({
            title: "失败",
            message: response.data.errmsg
          });
          row.isOnHide = !row.isOnHide;
        });
    },
    showDetail(detail) {
      this.goodsDetail = detail;
      this.detailDialogVisible = true;
    },
    handleDelete(row) {
      deleteGoods(row)
        .then(response => {
          this.$notify.success({
            title: "成功",
            message: "删除成功"
          });
          const index = this.list.indexOf(row);
          this.list.splice(index, 1);
        })
        .catch(response => {
          this.$notify.error({
            title: "失败",
            message: response.data.errmsg
          });
        });
    },
    channelsFilter(val) {
      if (val == undefined || val == "" || val == null) {
        return "";
      }
      let value = val.split(",");

      let str = "";
      this.channels.forEach(e => {
        value.forEach(v => {
          if (v == e.id) {
            str = str + e.name + ",";
          }
        });
      });

      return str;
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then(excel => {
        const tHeader = [
          "商品ID",
          "商品编号",
          "名称",
          "专柜价格",
          "当前价格",
          "是否新品",
          "是否热品",
          "是否在售",
          "首页主图",
          "宣传图片列表",
          "商品介绍",
          "详细介绍",
          "商品图片",
          "商品单位",
          "关键字",
          "类目ID",
          "品牌商ID"
        ];
        const filterVal = [
          "id",
          "goodsSn",
          "name",
          "counterPrice",
          "retailPrice",
          "isNew",
          "isHot",
          "isOnSale",
          "picUrl",
          "gallery",
          "brief",
          "detail",
          "picUrl",
          "goodsUnit",
          "keywords",
          "categoryId",
          "brandId"
        ];
        excel.export_json_to_excel2(tHeader, this.list, filterVal, "商品信息");
        this.downloadLoading = false;
      });
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //批量处理
    handleBatchReceptConfirm() {
      if (this.multipleSelection.length === 0) {
        this.$message.error("请选择至少一条数据");
        return;
      } else {
        this.changeChanneldialog = true;
      }
    },
    //取消所选渠道弹框
    removeChangeChannel() {
      this.changeChanneldialog = false;
      this.orderInputForm = {};
    },
    //确定所选的订单渠道
    confirmChangeChannel() {
      const ids = [];
      _.forEach(this.multipleSelection, function(item) {
        ids.push(item.id);
      });
      let params = {
        goodsIds: ids,
        channelIds: this.orderInputForm.orderChannel
      };
      updateChannelCity(params)
        .then(response => {
          this.$notify.success({
            title: "成功",
            message: "商品批量修改成功"
          });
          this.changeChanneldialog = false;
          this.orderInputForm = {};
          this.getList();
        })
        .catch(response => {
          this.$notify.error({
            title: "失败",
            message: response.data.errmsg
          });
          this.changeChanneldialog = false;
          this.orderInputForm = {};
        });
    }
  }
};
</script>

<style>
.table-expand {
  font-size: 0;
}

.table-expand label {
  width: 100px;
  color: #99a9bf;
}

.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}

.gallery {
  width: 180px;
  height: 118px;
  margin-right: 10px;
  object-fit: cover;
}

.goods-detail-box img {
  width: 100%;
}

.el-table th.gutter {
  display: table-cell !important;
}

.fixed-width .el-button--mini {
  margin-bottom: 8px;
  width: auto;
}
.mx-1 {
  display: block;
  margin-top: 5px;
  color: red;
}
</style>
