<template>
  <div id="box">
    <div class="box_left">
      <el-button @click="drawer = true" type="primary">添加分销商</el-button>
      <el-table
        :data="tableData"
        style="width: 100%"
        :unique-opened="true"
        highlight-current-row
        @row-click="godiscount"
        :row-key="getRowKeys"
        :expand-row-keys="expands"
        @expand-change="expandChangeHandler"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="分销商名称">
                <span>{{ props.row.orgname }}</span></el-form-item
              >
              <br/>
              <el-form-item label="详细地址">
                <span>{{ props.row.address }}</span></el-form-item
              >
              <br/>
              <el-form-item label="主营业务">
                <span>{{ props.row.main_business }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          label="分销商名称"
          prop="orgname"
          @click="getreseller(id)"
        >
        </el-table-column>
        <el-table-column label="联系人" prop="contactor"></el-table-column>
      </el-table>
    </div>
    <div class="box_right">
      <el-tabs v-model="activeName" type="border-card" tab-position="left">
        <el-tab-pane label="未设置折扣/返佣" name="no_config" class="tablesBox">
          <div class="tablesContent">
            <el-table
              :data="no_config"
              style="width: 100%"
              highlight-current-row
              height="0"
            >
              <el-table-column prop="name" label="产品名称"></el-table-column>
              <el-table-column prop="ptype" label="产品类型"></el-table-column>
              <el-table-column prop="id" label="操作">
                <template slot-scope="props">
                  <el-button
                    type="primary"
                    @click="dialogVisibleTrue(props.row)"
                  >设置折扣/返佣
                  </el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="折扣表" name="discount" class="tablesBox">
          <div class="tablesContent">
            <el-table
              :data="discount"
              style="width: 100%"
              height="0"
              :row-key="getRowKeys"
              :expand-row-keys="expands"
              @expand-change="expandChangeHandler"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form
                    label-position="left"
                    inline
                    class="demo-table-expand"
                  >
                    <el-form-item label="起效日期">
                      <span>{{ props.row.start_date }}</span>
                    </el-form-item>
                    <el-form-item label="失效日期">
                      <span>{{ props.row.end_date }}</span>
                    </el-form-item>
                    <table></table>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column prop="productid" label="产品名">
              </el-table-column>
              <el-table-column prop="discount" label="返佣百分比">
              </el-table-column>
              <el-table-column prop="id" label="操作" width="180">
                <template slot-scope="props">
                  <el-button
                    type="primary"
                    @click="upDiscountVisibleTrue(props.row)"
                  >修改
                  </el-button
                  >
                  <el-button type="danger" @click="delDiscount(props.row)"
                  >删除
                  </el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="返佣表" name="rebate" class="tablesBox">
          <div class="tablesContent">
            <el-table
              :data="rebate"
              style="width: 100%"
              height="0"
              :row-key="getRowKeys"
              :expand-row-keys="expands"
              @expand-change="expandChangeHandler"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form
                    label-position="left"
                    inline
                    class="demo-table-expand"
                  >
                    <el-form-item label="起效日期">
                      <span>{{ props.row.start_date }}</span>
                    </el-form-item>
                    <el-form-item label="失效日期">
                      <span>{{ props.row.end_date }}</span>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column prop="productid" label="产品id">
              </el-table-column>
              <el-table-column prop="sale_amount" label="最低销售额">
              </el-table-column>
              <el-table-column prop="rebate_rate" label="返佣率">
              </el-table-column>
              <el-table-column prop="id" label="操作" width="180">
                <template slot-scope="props">
                  <el-button
                    type="primary"
                    @click="upRebateVisibleTrue(props.row)"
                  >修改
                  </el-button
                  >
                  <el-button type="danger" @click="delRebate(props.row)"
                  >删除
                  </el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-drawer
        title="添加分销商"
        :visible.sync="drawer"
        direction="rtl"
        size="50%"
        :before-close="handleClose"
      >
        <div class="drawer_style">
          <p>
            机构名称：
            <el-input
              v-model="addData.orgname"
              placeholder="请输入分销商名称"
            ></el-input>
          </p>
          <p>
            分销机构联系人：
            <el-input
              v-model="addData.contactor"
              placeholder="请输入分销机构联系人"
            ></el-input>
          </p>
          <p>
            联系电话：
            <el-input
              v-model="addData.contactor_phone"
              placeholder="请输入联系电话"
            ></el-input>
          </p>
          <p>
            省-市-县/区：
            <el-input
              v-model="addData.province_id"
              placeholder="先不填"
            ></el-input>
          </p>
          <p>
            联系地址：
            <el-input
              v-model="addData.address"
              placeholder="请输入联系地址"
            ></el-input>
          </p>
          <p>
            主营业务描述：
            <el-input
              v-model="addData.main_business"
              placeholder="主营业务描述"
            ></el-input>
          </p>
          <p>
            添加营业执照:
            <el-upload action="#" list-type="picture-card" :auto-upload="false">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </p>
          <p>
            <el-button type="primary" @click="addDistributor()"
            >确认添加
            </el-button
            >
          </p>
        </div>
      </el-drawer>
      <el-dialog
        title="设置回扣/返佣"
        :visible.sync="addDialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <p>
          <el-radio v-model="radio" label="1">折扣</el-radio>
          <el-radio v-model="radio" label="2">返佣</el-radio>
        </p>
        <div v-if="radio == 1">
          <div class="block">
            折扣:
            <el-slider
              v-model="addDiscountData.discount"
              show-input
              max="1"
              :step="0.01"
            >
            </el-slider>
          </div>
          <el-form label-width="100px">
            <el-form-item label="起效日期">
              <el-date-picker
                v-model="addDiscountData.start_date"
                type="date"
                value-format="yyyy-MM-dd"
                :picker-options="startPickerOpts"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="失效日期">
              <el-date-picker
                v-model="addDiscountData.end_date"
                type="date"
                value-format="yyyy-MM-dd"
                :picker-options="addendPickerOpts"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="radio == 2">
          <p>
            最低销售额：
            <el-input
              v-model="addRebateData.sale_amount"
              placeholder="最低销售额"
            ></el-input>
          </p>
          <div class="block">
            返佣比:
            <el-slider
              v-model="addRebateData.rebate_rate"
              show-input
              max="1"
              :step="0.01"
            >
            </el-slider>
          </div>
          <el-form label-width="100px">
            <el-form-item label="起效日期">
              <el-date-picker
                v-model="addRebateData.start_date"
                type="date"
                value-format="yyyy-MM-dd"
                :picker-options="startPickerOpts"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="失效日期">
              <el-date-picker
                v-model="addRebateData.end_date"
                type="date"
                value-format="yyyy-MM-dd"
                :picker-options="endPickerOptsRebate"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addDiscount()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改折扣弹框 -->
      <el-dialog
        id="upDialog"
        title="修改"
        :visible.sync="discountUpVisible"
        width="40%"
        :before-close="handleClose"
      >
        <div class="block">
          折扣:
          <el-slider v-model="upDiscountData.discount" show-input :step="0.01">
          </el-slider>
        </div>
        <el-form label-width="100px">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="upDiscountData.start_date"
              type="date"
              value-format="yyyy-MM-dd"
              :picker-options="startPickerOpts"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="discountUpVisible = false">取 消</el-button>
          <el-button type="primary" @click="upDiscount()">确认修改</el-button>
        </span>
      </el-dialog>
      <!-- 修改回佣弹框 -->
      <el-dialog
        id="upDialog"
        title="修改"
        :visible.sync="upRebateVisible"
        width="40%"
        :before-close="handleClose"
      >
        <div class="block">
          返佣比:
          <el-slider v-model="upRebateData.rebate_rate" show-input :step="0.01">
          </el-slider>
        </div>
        <p>
          最低销售额：
          <el-input
            v-model="upRebateData.sale_amount"
            placeholder="最低销售额"
          ></el-input>
        </p>
        <el-form label-width="100px">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="upRebateData.start_date"
              type="date"
              value-format="yyyy-MM-dd"
              :picker-options="startPickerOpts"
              placeholder="选择开始日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="upRebateData.end_date"
              type="date"
              value-format="yyyy-MM-dd"
              :picker-options="endPickerOpts"
              placeholder="选择结束日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="upRebateVisible = false">取 消</el-button>
          <el-button type="primary" @click="upRebate()">确认修改</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  getproductStatusSearchAPI,
  addDiscountAPI,
  discountUpdateAPI,
  discountDeleteAPI,
  addRebateAPI,
  rebateUpdateAPI,
  rebateDeleteAPI,
} from "@/api/rebateAndDiscount.js";
import {getresellerAPI, addresellerAPI} from "@/api/distributorManagement.js";
import {getdiscountAPI} from "@/api/distributorDiscount.js";

export default {
  data() {
    return {
      getRowKeys(row) {
        return row.id;
      },
      //存放展开的id
      expands: [],
      dialogImageUrl: "",

      dialogVisible: false,
      disabled: false,
      activeName: "no_config",
      //跳转时拿到的分销商id
      distributorId: "",
      //添加折扣参数
      addDiscountData: {
        resellerid: "",
        productid: "",
        discount: "",
        start_date: "",
        end_date: "",
      },
      upDiscountData: {
        id: "",
        resellerid: "",
        productid: "",
        discount: "",
        start_date: "",
        end_date: "",
      },
      //添加回佣参数
      addRebateData: {
        resellerid: "",
        productid: "",
        sale_amount: "",
        rebate_rate: "",
        start_date: "",
        end_date: "",
      },
      //修改回佣参数
      upRebateData: {
        id: "",
        resellerid: "",
        productid: "",
        sale_amount: "",
        rebate_rate: "",
        start_date: "",
        end_date: "",
      },
      userid: "",
      discountUpVisible: false,
      upRebateVisible: false,
      addDialogVisible: false,
      discount: [],
      no_config: [],
      rebate: [],
      radio: "",
      startPickerOpts: {
        disabledDate: (t) => {
          return t.getTime() < Date.now() - 8.64e7;
        },
      },
      //添加折扣时间判断
      addendPickerOpts: {
        disabledDate: (t) => {
          return this.addDiscountData.start_date
            ? t.getTime() < new Date(this.addDiscountData.start_date).getTime()
            : false;
        },
      },
      //修改折扣时间判断
      endPickerOpts: {
        disabledDate: (t) => {
          return this.upDiscountData.start_date
            ? t.getTime() < new Date(this.upDiscountData.start_date).getTime()
            : false;
        },
      },
      // 添加返佣时间判断
      endPickerOptsRebate: {
        disabledDate: (t) => {
          return this.addRebateData.start_date
            ? t.getTime() < new Date(this.addRebateData.start_date).getTime()
            : false;
        },
      },
      //修改返佣时间判断
      endPickerOptsRebateUp: {
        disabledDate: (t) => {
          return this.upRebateData.start_date
            ? t.getTime() < new Date(this.upRebateData.start_date).getTime()
            : false;
        },
      },
      drawer: false,
      dialogVisible: false,
      //要搜索的数据
      searchValue: "",
      tableData: [],
      resellerData: {},
      //添加供应商使用的数据
      addData: {
        userid: "",
        orgname: "",
        contactor: "",
        contactor_phone: "",
        province_id: "",
        city_id: "",
        distinct_id: "",
        address: "",
        main_business: "",
        orgcode: "",
        license_img: "",
        id_img: "",
        org_type: "1",
        accountid: "",
      },
    };
  },
  created() {
  },

  mounted() {
    // this.liveUserId();
    // this.getreseller();
    // this.getlist();
    this.handleClick();
  },

  methods: {
    // 点击展开的时候就会触发这个方法
    expandChangeHandler(row, expandedRows) {
      console.log("expandedRows", expandedRows);
      console.log("row", row);
      if (expandedRows.length) {
        this.expands = [];
        if (row) {
          this.expands.push(row.id);
        }
      } else {
        this.expands = [];
      }
    },

    //删除返佣
    delRebate(row) {
      this.rebateOpen(row.id);
    },
    //确认删除返佣
    rebateOpen(id) {
      this.$confirm("此操作将永久删除此返佣信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          rebateDeleteAPI(id).then((res) => {
            console.log("删除fanyong:", res);
            this.getlist();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //确认修改
    upRebate() {
      console.log("修改返佣时向后台传递的参数:", this.upRebateData);
      rebateUpdateAPI(this.upRebateData).then((res) => {
        console.log(res);
        this.open2();
        //修改完成后向后台请求数据
        this.getlist();
        this.upRebateVisible = false;
      });
    },
    //展示返佣产品修改框
    upRebateVisibleTrue(row) {
      this.rebate.forEach((item, index) => {
        if (item.id == row.id) {
          console.log(item);
          this.upRebateData.id = item.id;
          this.upRebateData.resellerid = item.resellerid;
          this.upRebateData.productid = item.productid;
          this.upRebateData.rebate_rate = item.rebate_rate;
          this.upRebateData.sale_amount = item.sale_amount;
          this.upRebateData.start_date = item.start_date;
          this.upRebateData.end_date = item.end_date;
          console.log("this.upRebateData", this.upRebateData);
        }
      });
      this.upRebateVisible = true;
      // this.addRebateData.productid = row.id;
    },
    //展示折扣产品修改框
    upDiscountVisibleTrue(row) {
      this.discount.forEach((item, index) => {
        if (item.id == row.id) {
          this.upDiscountData.id = item.id;
          this.upDiscountData.resellerid = item.resellerid;
          this.upDiscountData.productid = item.productid;
          this.upDiscountData.discount = item.discount;
          this.upDiscountData.start_date = item.start_date;
          this.upDiscountData.end_date = item.end_date;
          console.log(this.upDiscountData);
        }
      });
      this.discountUpVisible = true;
      // this.addRebateData.productid = row.id;
    },
    //确认折扣修改
    upDiscount() {
      console.log("修改时向后台传递的参数:", this.upDiscountData);
      discountUpdateAPI(this.upDiscountData).then((res) => {
        console.log(res);
        this.open2();
        //修改完成后向后台请求数据
        this.getlist();
        this.discountUpVisible = false;
      });
    },
    //添加图片
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    //展示未设置产品添加框
    dialogVisibleTrue(row) {
      //同时赋值给他俩,添加完毕清除
      this.addDialogVisible = true;
      this.addDiscountData.productid = row.id;
      this.addRebateData.productid = row.id;
    },
    //增加分销商折扣/返佣配置
    addDiscount() {
      if (this.radio == 1) {
        console.log("折扣");
        this.addDiscountData.resellerid = this.userid;
        addDiscountAPI(this.addDiscountData).then((res) => {
          this.getlist();
          this.addDialogVisible = false;
          this.addDiscountData.productid = "";
          this.addDiscountData.discount = 0;
          this.addDiscountData.start_date = "";
          this.addDiscountData.end_date = "";
        });
      } else {
        console.log("返佣");
        this.addRebateData.resellerid = this.userid;
        addRebateAPI(this.addRebateData).then((res) => {
          this.getlist();
          this.addDialogVisible = false;
          this.addRebateData.productid = "";
          this.addRebateData.sale_amount = "";
          this.addRebateData.rebate_rate = 0;
          this.addRebateData.start_date = "";
          this.addRebateData.end_date = "";
        });
      }
    },
    //请求产品列表
    getlist() {
      getproductStatusSearchAPI(this.userid).then((res) => {
        this.discount = res.data.discount.rows;
        this.no_config = res.data.no_config;
        this.rebate = res.data.rebate.rows;
      });
    },
    //删除折扣
    delDiscount(row) {
      this.openDiscount(row.id);
    },
    //确认删除折扣
    openDiscount(id) {
      this.$confirm("此操作将永久删除此折扣, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          discountDeleteAPI(id).then((res) => {
            this.getlist();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //确认关闭提示
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {
        });
    },
    //修改成功提示
    open2() {
      this.$message({
        showClose: true,
        message: "修改成功!",
        type: "success",
      });
    },
    //跳转折扣与返佣页面
    godiscount(a, b, id) {
      // console.log(a, b, id);
      this.userid = a.id;
      this.getlist();
    },
    //添加分销商
    addDistributor() {
      let id = sessionStorage.getItem("userId");
      this.addData.userid = id;
      console.log(this.addData);
      addresellerAPI(this.addData).then((res) => {
        this.drawer = false;
        console.log("res:", res);
        this.handleClick();
        //添加完成后去除旧数据
        // this.addData = {};
        this.dialogImageUrl = "";
        this.addData.userid = "";
        this.addData.orgname = "";
        this.addData.contactor = "";
        this.addData.contactor_phone = "";
        this.addData.province_id = "";
        this.addData.city_id = "";
        this.addData.distinct_id = "";
        this.addData.address = "";
        this.addData.main_business = "";
        this.addData.license_img = "";
        this.addData.id_img = "";
        this.addData.org_type = "1";
        this.addData.id_img = "";
        this.addData.accountid = "";
      });
    },
    //查看分销商信息reseller
    getreseller(row, a, b) {
      // console.log(row, a, b);
      // debugger;
      getresellerAPI(row.id).then((res) => {
        // console.log("reseller:", res);
        this.resellerData = res.data;
      });
    },
    //获取分销商机构
    handleClick() {
      let id = sessionStorage.getItem("userId");
      getdiscountAPI().then((res) => {
        this.tableData = res.data;
      });
    },
    //dirlog弹出框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {
        });
    },
    //删除确认框
    open() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.el-tabs--left {
  height: 100%;
}

.demo-table-expand .el-form-item[data-v-0f995c5b] {
  width: 100%;
}

#box {
  display: flex;
  width: 100%;
  flex-wrap: nowrap;
  justify-content: space-between;
  height: 85vh;
  // background-color: #ecc2c2;
  .box_left {
    height: 100%;
    width: 20%;
    background-color: #eeeeee;
  }

  .box_right {
    width: 69%;
    height: 100%;
    // background-color: #e0f5b0;
    .tablesBox {
      flex: auto;
      overflow: hidden;
      height: 81.7vh;
    }
  }
}

.search {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;

  .searchInput {
    width: 260px;
    border-radius: 20px;
    border: 1px solid black;
    margin-right: -60px;
    height: 37px;
  }
}

.demo-table-expand {
  font-size: 0;
}

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

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.concent {
  height: 80vh;
  overflow: auto;
}

.drawer_style {
  padding: 0px 30px 0px 30px !important;
}
</style>
