<template>
  <div class="">
    <div class="tit">{{'规则设置'}}</div>
    <div class="xian"></div>
    <div class="tabList">
      <div
        :class="['tabList_i', isArea == item.value ? 'tabAct' : '']"
        v-for="item in areaList"
        @click="setArea(item.value)"
        :key="item.value"
      >
        {{ item.label }}
      </div>
    </div>
    <div class="table">
      <!-- 批量操作 -->
      <table>
        <tr>
          <th colspan="1" class="tableLeft">
            <el-button type="primary" @click="addNewGoods" size="mini"
              >{{'添加'}}
            </el-button>
          </th>
          <th colspan="9" style="padding-bottom: 0">
            <div class="tableFlex">
              <div class="tableFlex_i">
                <el-input
                  :placeholder="'订单金额'+`(${isLocals()})`"
                  size="medium"
                  v-model="plcz.orderAmount"
                ></el-input>
              </div>
              <div class="tableFlex_i">
                <el-input
                  :placeholder="'订单业绩'+`(${isLocals()})`"
                  size="medium"
                  v-model="plcz.orderAchieve"
                ></el-input>
              </div>
              <!-- <div class="tableFlex_i">
                <el-select
                  v-model="plcz.ratioType"
                  size="medium"
                  filterable
                  :placeholder="'赠送类型'"
                >
                  <el-option
                    v-for="item in ratioList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div> -->
              <div class="tableFlex_i">
                <el-input
                  :placeholder="'赠送次数'"
                  size="medium"
                  v-model="plcz.giveNumber"
                ></el-input>
              </div>
              <div class="tableAdd"></div>
            </div>
          </th>
          <th colspan="2" style="padding-bottom: 0">
            <div class="tableFlex">
              <div class="tableFlex_i">
                <el-button type="primary" @click="toPlcz" size="mini"
                  >{{'批量操作'}}</el-button
                >
              </div>
              <div class="tableFlex_i">
                <el-button size="mini" @click="reset"> {{ '返回' }}</el-button>
              </div>
            </div>
          </th>
        </tr>
      </table>
      <table
        v-for="item in allData"
        class="table_b"
        :key="item.orderType"
        v-show="item.orderType == isArea"
      >
        <tr style="border-top: 0">
          <td style="border: 0"></td>
          <td colspan="9" style="padding-bottom: 0">
            <div class="tableFlex">
              <div class="tableFlex_i">{{ '订单金额' }}(￥)</div>
              <div class="tableFlex_i">{{'订单业绩'}}({{ isLocals() }})</div>
              <!-- <div class="tableFlex_i">赠送类型</div> -->
              <div class="tableFlex_i">{{ '赠送次数' }}</div>
              <div class="tableAdd"></div>
            </div>
          </td>
          <td colspan="2" style="border: 0"></td>
        </tr>
        <tr v-for="(ctem, cndex) in item.drawRuleConfigList" :key="cndex">
          <td style="border: 0"></td>
          <!-- <td colspan="2">
              <el-select v-model="ctem.pkWares"
                         size="medium"
                         filterable
                         :placeholder="'请选择'">
                <el-option v-for="item in allGoods"
                           :key="item.pkId"
                           :label="item.waresName"
                           :value="item.pkId">
                </el-option>
              </el-select>
            </td> -->
          <!-- <td colspan="2">
              <el-input v-model="ctem.quantity"></el-input>
            </td> -->
          <td colspan="9" style="padding-bottom: 0">
            <div class="tableFlex">
              <div class="tableFlex_i">
                <el-input
                  :placeholder="'订单金额'+`(${isLocals()})`"
                  size="medium"
                  v-model="ctem.orderAmount"
                ></el-input>
              </div>
              <div class="tableFlex_i">
                <el-input
                  :placeholder="'订单业绩'+`(${isLocals()})`"
                  size="medium"
                  v-model="ctem.orderAchieve"
                ></el-input>
              </div>
              <!-- <div class="tableFlex_i">
                <el-select
                  v-model="ctem.ratioType"
                  size="medium"
                  filterable
                  :placeholder="'赠送类型'"
                >
                  <el-option
                    v-for="item in ratioList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div> -->
              <div class="tableFlex_i">
                <el-input
                  :placeholder="'赠送次数'"
                  size="medium"
                  v-model="ctem.giveNumber"
                ></el-input>
              </div>
              <div class="tableAdd">
                <img
                  src="@/assets/images/iconpop.png"
                  @click="reduceProduct(cndex)"
                  alt=""
                />
              </div>
            </div>
          </td>
          <td colspan="2" style="border: 0"></td>
        </tr>
      </table>
    </div>

    <!-- <div class="footer">
        <el-button size="small"
                   class="thebtn2"> {{ '取消' }}</el-button>
        <el-button size="small"
                   @click="submit"
                   class="thebtn1"> {{ '确认' }}</el-button>
      </div> -->
  </div>
</template>

  <script>
import * as api from "@/api/giftGoods.js";
import topBar from "@/components/topBar";
import ImageUpload from "@/components/ImageUpload";
import {isLocals, isLocalSymbol} from "@/utils/numberToCurrency";
export default {
  components: {
    topBar,
    ImageUpload,
  },
  props: {
    lookOver: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dialogVisible: false,
      ggVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 50,
      },
      total: 0,
      moren: "setGiftGoodsInfo",
      topList: [
        {
          name: '基本信息',
          path: "addGiftGoodsInfo",
        },
        {
          name: '规则设置',
          path: "setGiftGoodsInfo",
        },
      ],
      allData: [], //全部数据
      areaList: [], //全部专区
      allGoods: [], //全部商品
      isArea: "",
      plcz: {},
      select: {}, //产品筛选
      dialogList: [], //产品数组
      selectData: [], //选中
      skuList: [], //规格数组
      selSkuList: "",
      selSkuNameList: "",
      selIndex: "",
      showCndex: "",
      showIndex: "",
      pageData: {},
      ratioList: [],
      queryData: [],
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    isLocalSymbol,
    isLocals,
    getPage(allData) {
      this.queryData = allData;
      if (allData != "") {
        this.allData.forEach((item) => {
          allData.forEach((ctem) => {
            if (ctem.orderType == item.orderType) {
              item.drawRuleConfigList = ctem.drawRuleConfigList;
            }
          });
        });
      }
    },
    getData() {
      api.specialArea().then((res) => {
        this.areaList = res.data;
        // this.allData
        let arr = [];
        this.areaList.forEach((item) => {
          arr.push({
            orderType: item.value,
            drawRuleConfigList: [],
          });
        });
        this.allData = arr;
        this.isArea = res.data[0].value;
        if (this.queryData.length > 0) {
          this.allData.forEach((item) => {
            this.queryData.forEach((ctem) => {
              if (ctem.orderType == item.orderType) {
                item.drawRuleConfigList = ctem.drawRuleConfigList;
              }
            });
          });
        }
      });
      api.ratioType().then((res) => {
        this.ratioList = res.data;
      });
    },
    toPlcz() {
      this.allData.forEach((item) => {
        if (this.isArea == item.orderType) {
          item.drawRuleConfigList.forEach((stem) => {
            stem.orderAmount = this.plcz.orderAmount;
            stem.orderAchieve = this.plcz.orderAchieve;
            // stem.ratioType = this.plcz.ratioType;
            stem.giveNumber = this.plcz.giveNumber;
          });
        }
      });
    },
    reset() {
      this.plcz = {};
    },
    setArea(val) {
      this.isArea = val;
    },
    reduceProduct(cndex) {
      if (!this.lookOver) {
        this.allData.forEach((item) => {
          if (this.isArea == item.orderType) {
            item.drawRuleConfigList.splice(cndex, 1);
          }
        });
      }
    },
    addNewGoods() {
      if (!this.lookOver) {
        this.allData.forEach((item) => {
          if (this.isArea == item.orderType) {
            item.drawRuleConfigList.push({
              orderAmount: "",
              orderAchieve: "",
              // ratioType: "",
              giveNumber: "",
            });
          }
        });
      }
    },
    submit() {},
  },
};
</script>

  <style lang="scss" scoped>
// .page {
//   padding: 20px;
//   background: #f9f9f9;
//   font-size: 14px;
.main_a {
  // height: calc(100vh - 124px);
  // display: flex;
  // flex-direction: column;
  // height: calc(100vh - 164px);
  // height: 100%;
}
.main {
  background: #ffffff;
  border-radius: 8px;
  height: calc(100vh - 164px);
  padding-bottom: 20px;
  box-shadow: 0px 2px 20px 0px rgba(238, 238, 238, 0.5);
}
::v-deep .el-select {
  width: 100%;
}
// }
.footer {
  height: 68px;
  background: #ffffff;
  box-shadow: 0px -3px 20px 0px rgba(204, 204, 204, 0.5);
  // margin: 0 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
.tit {
  font-size: 14px;
  font-weight: bold;
  color: #333333;
  padding: 0 20px;
  border-left: 5px solid #c8161d;
  margin: 20px 0 10px 0;
}
.xian {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}
.demo-ruleForm {
  padding: 20px 0;
}
::v-deep .el-date-editor--datetimerange {
  width: auto !important;
}
.flexed {
  display: flex;
}
.flexed_l {
  margin-right: 20px;
}
.table {
  padding: 0 20px;
  margin-top: 1px;
}

table {
  width: 100%;
  background: #fff;
  border-collapse: collapse;
  border: 1px solid #cccccc;
  border-spacing: 0;
  table-layout: fixed;
  border-collapse: collapse;
  //   合并内外边距
  // (去除表格单元格默认的2个像素内外边距*/
}
.table_b {
  border-top: 0;
}
th {
  padding: 10px 10px;
  text-align: center;
  border: 1px solid #cccccc;
  overflow: hidden;
  border-top: 0;
}
td {
  padding: 10px 10px;
  text-align: center;
  border: 1px solid #cccccc;
  border-top: 0;
  overflow: hidden;
}
.tableFlex {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .tableFlex_i {
    flex: 1;
    ::v-deep .el-input__inner {
      width: 90%;
    }
  }
}
.tableAdd {
  width: 50px;
  img {
    width: 19px;
    height: 19px;
  }
}
.tableAddPro {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 19px;
    height: 19px;
    margin-left: 10px;
  }
}
.tableLeft {
  // text-align: left;
}
.tabList {
  display: flex;
  align-items: center;
  padding: 20px 0px 0 20px;
  .tabList_i {
    padding: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    cursor: pointer;
  }
  .tabAct {
    background: #108ee9;
    color: #fff;
  }
}
.clearBtm {
  border-bottom: 0;
}
.cpHeight {
  height: 50vh;
  overflow-y: auto;
}
.blueCor {
  color: #589ff8;
  cursor: pointer;
}
::v-deep .el-input__suffix {
  right: 15px !important;
}
</style>
