<template>
  <div class="dis-flex dis-just">
    <div style="width: 60%">
      <div class="contain-template">
        <div class="contain-title b">平台产品</div>
        <div class="mt10 ml10">
           <el-select  @change="searchPlatformForBinding()" :value="listParamsPlatformProduct.platformProductId" placeholder="请选择Spu" size="mini" >
                <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in productIdSpudicts"></el-option>
            </el-select>
          <!-- <el-select
            v-model="listParamsPlatformProduct.valuePlatform"
            placeholder="搜索类型"
            size="small"
            class="w150"
          >
            <el-option
              v-for="item in optionsPlatform"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
          <!-- <el-input
            class="w200 ml10"
            size="small"
            placeholder="请输入"
            clearable
            v-model="listParamsPlatformProduct.inputPlatform"
          >
          </el-input>
          <el-button type="primary" @click="searchPlatformForBinding"
            >搜 索</el-button
          > -->
        </div>
        <div class="p10">
          <el-table
            ref="multipleTable_tableDataPlatformProduct"
            :data="tableDataPlatformProduct"
            tooltip-effect="dark"
            highlight-current-row
            @current-change="platformProductRowChange"
            style="width: 100%"
            max-height="400"
            border
          >
            <!-- <el-table-column
              align="center"
              prop="index"
              width="50"
              label="序号">
            </el-table-column> -->
            <el-table-column align="center" width="60px" label="主图">
              <template slot-scope="scope">
                <img
                  style="width: 50px; height: 50px"
                  :src="
                    scope.row.mainImageUrl +
                    '?x-oss-process=image/resize,m_fixed,h_50,w_50'
                  "
                  class="img-size"
                />
              </template>
            </el-table-column>
            <el-table-column prop="agentCode" align="center" label="平台名">
            </el-table-column>
            <el-table-column prop="authCode" align="center" label="店铺名">
            </el-table-column>
            <el-table-column align="center" prop="sku" label="产品SKU">
            </el-table-column>
            <el-table-column align="center" label="颜色/尺寸">
              <template slot-scope="scope">
                <div>{{ scope.row.colorCode }}/{{ scope.row.sizeCode }}</div>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template slot-scope="scope" slot="header">
                系统产品
                <el-tooltip placement="top" effect="light">
                  <div slot="content">
                    1.未绑定的点击绑定<br />2.已绑定的点击商品链接去修改
                  </div>
                  <i class="el-icon-question" />
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <div
                  v-if="scope.row.bindSkuName"
                  class="el-dropdown-link"
                  @click="bindSysClick(scope.row)"
                >
                  {{ scope.row.bindSkuName }}
                </div>
                <div
                  v-else
                  class="el-dropdown-link"
                  @click="bindSysClick(scope.row)"
                >
                  点击绑定
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="ovh">
          <el-pagination
            @size-change="handlePlatformSizeChange"
            @current-change="handlePlatformCurrentChange"
            :current-page="listParamsPlatformProduct.currentPage"
            :page-sizes="[30, 50, 100, 300]"
            :page-size="listParamsPlatformProduct.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listParamsPlatformProduct.total"
            style="float: right; display: inline-block"
          ></el-pagination>
        </div>
      </div>
    </div>
    <div style="width: 38%">
      <div class="contain-template">
        <div class="contain-title b">系统产品</div>
        <div class="mt10 ml10">
          <el-select
            v-model="listParamsSys.valueSys"
            placeholder="搜索类型"
            size="small"
            class="w150"
          >
            <el-option
              v-for="item in optionsSys"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-input
            class="w200 ml10"
            size="small"
            placeholder="请输入"
            clearable
            v-model="listParamsSys.inputSys"
          >
          </el-input>
          <el-button type="primary" @click="handleSysForBinding"
            >搜 索</el-button
          >
        </div>
        <div class="p10">
          <el-table
            ref="multipleTable_tableDataChoose"
            :data="tableDataChoose"
            tooltip-effect="dark"
            highlight-current-row
            @current-change="sysProductRowChange"
            style="width: 100%"
            max-height="400"
            border
          >
            <el-table-column align="center" width="60px" label="主图">
              <template slot-scope="scope">
                <img
                  style="width: 50px; height: 50px"
                  :src="
                    scope.row.mainImageUrl +
                    '?x-oss-process=image/resize,m_fixed,h_50,w_50'
                  "
                  class="img-size"
                />
              </template>
            </el-table-column>
            <el-table-column align="center" label="系统SKU名称">
              <template slot-scope="scope">
                <div @dblclick="bindPlatformClick(scope.row)">
                  {{ scope.row.skuName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" label="系统SKU编码">
              <template slot-scope="scope">
                <div @dblclick="bindPlatformClick(scope.row)">
                  {{ scope.row.skuCode }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center">
              <template slot-scope="scope" slot="header">
                操作
                <el-tooltip placement="top" effect="light">
                  <div slot="content">
                    绑定方法：<br />1.点击”建立绑定“按钮绑定<br />2.鼠标双击绑定
                  </div>
                  <i class="el-icon-question" />
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <div
                  class="el-dropdown-link"
                  @click="bindPlatformClick(scope.row)"
                >
                  建立绑定
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="ovh">
          <el-pagination
            @size-change="handleSysSizeChange"
            @current-change="handleSysCurrentChange"
            :current-page="listParamsSys.currentPage"
            :page-sizes="[30, 50, 100, 300]"
            :page-size="listParamsSys.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="listParamsSys.total"
            style="float: right; display: inline-block; max-width: 90%"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {},
  name: "productBindingDialog",
  data() {
    return {
      listParamsSys: {
        currentPage: 1,
        pageSize: 50,
        total: 0,
        valueSys: "skuName",
        inputSys: "",
        isEnabled:1
      },
      parentData: {},
      productIdSpudicts: [],
      listParamsPlatformProduct: {
        platformProductId:'',
        platformProductIdList:[],
        currentPage: 1,
        pageSize: 50,
        total: 0,
        valuePlatform: "",
        inputPlatform: "",
      },
      sysRowForBinding: {},
      platformRowForBinding: {},
      tableDataChoose: [],
      tableDataPlatformProduct: [],
      optionsPlatform: [
        {
          value: "",
          label: "搜索类型",
        },
        {
          value: "platformSku",
          label: "产品SKU",
        },
        {
          value: "platformProductId",
          label: "平台产品ID",
        },
      ],
      optionsSys: [
        // {
        //   value: "",
        //   label: "搜索类型",
        // },
        {
          value: "skuName",
          label: "系统SKU名",
        },
        {
          value: "skuCode",
          label: "系统SKU编码",
        },
        {
          value: "spuName",
          label: "系统SPU名",
        },
      ],
    };
  },
  mounted() {},
  methods: {
    handleSysForBinding(){
      this.listParamsSys.currentPage = 1;
      this.searchSysForBinding()
    },
    bindSysClick(platformRow) {
      console.log("platformRow", platformRow);
      this.platformRowForBinding = platformRow;
      this.$refs.multipleTable_tableDataPlatformProduct.setCurrentRow(
        platformRow
      );
    },
    bindPlatformClick(sysRow) {
      console.log("sysRow", sysRow);
      this.$refs.multipleTable_tableDataChoose.setCurrentRow(sysRow);
      this.sysRowForBinding = sysRow;
      this.doBindingWork();
    },
    doBindingWork() {
      if (!this.platformRowForBinding.id) {
        this.$message({
          message: "请先选中平台产品",
          type: "info",
        });
        return;
      }
      if (!this.sysRowForBinding.id) {
        this.$message({
          message: "请先选中系统产品",
          type: "info",
        });
        return;
      }
      let data = {
        productUnitId: this.platformRowForBinding.id,
        unitImageUrl: this.sysRowForBinding.mainImageUrl || "",
        skuName: this.sysRowForBinding.skuName,
        skuCode: this.sysRowForBinding.skuCode,
      };
      this.axios({
        url: "/assistant/product/bindSku",
        data,
        method: "post",
      }).then((res) => {
        if (res.success) {
          this.$message({
            message: "绑定成功",
            type: "success",
          });
          this.$set(this.platformRowForBinding, "bindSkuName", data.skuName);
        }
      });
    },
    handlePlatformCurrentChange(val) {
      this.listParamsPlatformProduct.currentPage = val;
      this.searchPlatformForBinding();
    },
    handlePlatformSizeChange(val) {
      this.listParamsPlatformProduct.pageSize = val;
      this.searchPlatformForBinding();
    },
    handleSysSizeChange(val) {
      this.listParamsSys.pageSize = val;
      this.searchSysForBinding();
    },
    handleSysCurrentChange(val) {
      this.listParamsSys.currentPage = val;
      this.searchSysForBinding();
    },
    platformProductRowChange(val) {
      this.platformRowForBinding = val;
    },
    sysProductRowChange(val) {
      this.sysRowForBinding = val;
    },
    searchSysForBinding() {
      let data = Object.assign({}, this.listParamsSys);
      data[data.valueSys] = data.inputSys;
      data.isQuerySaleInfo = 0;
      this.axios({
        url: "assistant/systemProductUnitGroup/queryUnitPage",
        data,
        method: "post",
      }).then((res) => {
        if (res.success) {
          this.tableDataChoose = res.module.result;
          this.listParamsSys.total = res.module.total;
        }
      });
    },
    searchPlatformForBinding() {
      let data = Object.assign({}, this.listParamsPlatformProduct)
      if(data.platformProductId!=""){
        data.platformProductIdList =[];
      }
      data[data.valuePlatform] = data.inputPlatform;
      data["isQueryBindSysSku"] = true;
      this.axios({
        url: "assistant/product/online/queryOnlineProductUnit",
        data,
        method: "post",
      }).then((res) => {
        if (res.success) {
          if (res.module) {
            let tableData = res.module.result;
            if (this.parentData) {
              let parentData = this.parentData;
              this.parentData = null;
              if (
                parentData.platformProductSkuIdList &&
                parentData.platformProductSkuIdList.length
              ) {
                tableData.forEach((x) => {
                  let find = parentData.platformProductSkuIdList.find(
                    (d) => d == x.platformProductSkuId
                  );
                  if (find) {
                    this.bindSysClick(x);
                  }
                });
              }
            }
            this.tableDataPlatformProduct = tableData;
            this.listParamsPlatformProduct.total = res.module.total;
          } else {
            this.tableDataPlatformProduct = [];
            this.listParamsPlatformProduct.total = 0;
          }
        }
      });
    },
    listonshow(data){
      this.parentData = Object.assign({}, data);
      this.listParamsPlatformProduct.platformProductIdList = [data.platformProductId];
      this.listParamsPlatformProduct.platformProductId = data.platformProductId;
      this.listParamsPlatformProduct.valuePlatform = data.valuePlatform;
      this.productIdSpudicts = data.productIdSpudicts;
      this.sysRowForBinding = {};
      this.tableDataPlatformProduct = [];
      this.tableDataChoose = [];
      this.searchPlatformForBinding();
      this.searchSysForBinding();
    },
  },
};
</script>
<style lang="less" scoped>
</style>