<template>
  <div class="">
    <div class="tit">报单赠送</div>
    <div class="xian" />
    <div class="table">
      <table>
        <tr>
          <th
            colspan="5"
            class="tableLeft"
          >
            <el-button
              type="primary"
              size="mini"
              @click="addNewGoods"
            >{{ '添加' }}
            </el-button>
          </th>
          <th
            colspan="7"
            style="padding-bottom:0"
          >
            <div class="tableFlex">
              <div class="tableFlex_i" />
              <div class="tableFlex_i" />
              <div class="tableFlex_i"> <el-input
                v-model="batchReset.quantity"
                :placeholder="'赠送数量'"
              /></div>
              <div class="tableAdd" />
            </div>
          </th>
          <th
            colspan="2"
            style="padding-bottom:0"
          >
            <div class="tableFlex">
              <div class="tableFlex_i"><el-button
                type="primary"
                size="mini"
                @click="batchHandle"
              >{{ '批量操作' }}</el-button></div>
              <div class="tableFlex_i"><el-button
                size="mini"
                @click="reset"
              > {{ '重置' }}</el-button></div>
            </div>
          </th>
        </tr>
      </table>
      <table
        v-for="(item, idx) in allData"
        :key="idx"
        class="table_b"
      >
        <tr style="border-top:0">
          <td style="border:0" />
          <td colspan="2">会员权限</td>
          <td colspan="2">会员等级</td>
          <td
            colspan="7"
            style="padding-bottom:0"
          >
            <div class="tableFlex">
              <div class="tableFlex_i">{{ '赠送产品' }}</div>
              <div class="tableFlex_i">{{ '产品规格' }}</div>
              <div class="tableFlex_i">{{ '赠送数量' }}</div>
              <div class="tableAdd" />
            </div>
          </td>
          <td
            colspan="2"
            style="border:0"
          />
        </tr>
        <tr
          v-for="ctem,cndex in item.acDeclarationConfigParam"
          :key="cndex"
        >
          <td style="border:0" />
          <td colspan="2">
            <el-select v-model="ctem.registerAuthority">
              <el-option v-for="item in registerList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </td>
          <td colspan="2">
            <el-select v-model="ctem.specifyLevel">
              <el-option v-for="item in gradeRangList" :key="item.pkId" :label="item.gradeName" :value="item.pkId"></el-option>
            </el-select>
          </td>
          <td
            colspan="7"
            style="padding-bottom:0"
          >
            <div
              v-for="stem,sndex in ctem.acDeclarationProductParamList"
              v-show="ctem.acDeclarationProductParamList.length>0"
              :key="sndex"
              class="tableFlex"
            >
              <div class="tableFlex_i">
                <el-input
                  v-model="stem.productName"
                  :placeholder="'请选择赠送产品'"
                  @focus="getProduct(cndex,sndex)"
                />
              </div>
              <div class="tableFlex_i">
                <el-input
                  v-model="stem.specsName"
                  disabled
                />
               
              </div>
              <div class="tableFlex_i">
                <el-input v-model="stem.quantity" />
              </div>
              <div class="tableAdd">

                <img
                  src="@/assets/images/iconpop.png"
                  alt=""
                  @click="reduceProduct(cndex,sndex)"
                >
                <img
                  src="@/assets/images/iconadd.png"
                  alt=""
                  @click="addProduct(cndex)"
                >
              </div>
            </div>
            <div
              v-show="ctem.acDeclarationProductParamList.length==0"
              class="tableAddPro"
            >
              {{ '添加产品' }}
              <img
                src="@/assets/images/iconadd.png"
                alt=""
                @click="addProduct(cndex)"
              >
            </div>
          </td>
          <td
            colspan="2"
            style="border:0"
          >
            <div class="tableAdd">
              <img src="@/assets/images/iconpop.png" alt="" @click="reduceRow(cndex)">
            </div>
          </td>
        </tr>
      </table>
    </div>

    <el-dialog
      :title="'添加'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="40%"
      center
      :before-close="handleClose"
    >
      <div class="cpHeight">
        <el-row>
          <el-col :span="22"> <el-input
            v-model="select.queryInfo"
            clearable
            :placeholder="'请输入'"
            prefix-icon="el-icon-search"
            @keyup.enter.native="getDataList"
          />
          </el-col>
          <el-col :span="2">
            <el-button
              type="primary"
              size="small"
              @click="getDataList"
            > {{ '搜索' }}</el-button>
          </el-col>
        </el-row>
        <div style="height:10px" />
        <el-table
          ref="multipleTable"
          :data="dialogList"
          style="width: 100%"
          :header-cell-style="{ background: '#EEEEEE' }"
          :row-class-name="tableRowClassName"
          @select-all="onSelectAll"
          @select="selected"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            align="center"
            prop="productName"
            :label="'产品名称'"
          />
          <el-table-column
            align="center"
            prop="productCode"
            :label="'产品编号'"
          />
          <el-table-column
            align="center"
            prop="productName"
            :label="'规格'"
          >
            <template slot-scope="scope">
              <div
                v-show="scope.row.selSkuNameList==''||scope.row.selSkuNameList==undefined"
                class="blueCor"
                @click="selSku(scope.row.pkId,scope.$index)"
              >{{ '选择规格' }}</div>
              <div
                v-show="scope.row.selSkuNameList!=''&&scope.row.selSkuNameList!=undefined"
                class="blueCor"
                @click="selSku(scope.row.pkId,scope.$index)"
              >{{ scope.row.selSkuNameList }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="productName"
            :label="'商品数量'"
          >
            <template slot-scope="scope">
              <el-input-number
                v-model="scope.row.quantity"
                size="mini"
                :min="1"
              />
            </template>
          </el-table-column>
        </el-table>

      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getDataList"
      />
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose">{{ '取消' }}</el-button>
        <el-button
          type="primary"
          @click="sureProduct"
        >{{ '确认' }}</el-button>
      </span>
    </el-dialog>
    <el-dialog
      :title="'规格'"
      :visible.sync="ggVisible"
      :close-on-click-modal="false"
      width="40%"
      center
      :before-close="handleCloseGg"
    >
      <div>
        <el-form>
          <el-form-item
            v-for="item,index in skuList"
            :key="index"
            :label="item.typeName"
          >
            <el-radio-group v-model="item.pkProductSku">
              <el-radio
                v-for="ctem,cndex in item.specsList"
                :key="ctem.pkId"
                :label="ctem.pkId"
                @change="getCheckBox(item.pkId,item.specsName)"
              >{{ ctem.specsName }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleCloseGg">{{ '取消' }}</el-button>
        <el-button
          type="primary"
          @click="sureSku"
        >{{ '确认' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/giftGoods.js'
import topBar from '@/components/topBar'
import ImageUpload from '@/components/ImageUpload'
import { isLocals } from '../../../utils/numberToCurrency'
import {
  getgradeRanglist,
  getRegistration
} from '@/api/level'
export default {
  components: {
    topBar,
    ImageUpload
  },
  data() {
    return {
      dialogVisible: false,
      ggVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 50
      },
      total: 0,
      moren: 'setGiftGoodsInfo',
      topList: [
        {
          name: '基本信息',
          path: 'addGiftGoodsInfo'
        },
        {
          name: '规则设置',
          path: 'setGiftGoodsInfo'
        }
      ],
      allData: [], // 全部数据
      allGoods: [], // 全部商品
      isArea: '',
      batchReset: {},
      select: {}, // 产品筛选
      dialogList: [], // 产品数组
      selectData: [], // 选中
      skuList: [], // 规格数组
      selSkuList: '',
      selSkuNameList: '',
      selIndex: '',
      showCndex: '',
      showIndex: '',
      pageData: {},
      queryData: [],
      registerList: [],
      gradeRangList: [],
    }
  },
  mounted() {
    this.getgradeRanglist()
    this.getMemberAuthEnum()
    this.initData()
  },
  methods: {
    isLocals,
    initData(allData) {
      this.allData.push({
        acDeclarationConfigParam: []
      })
    },
    setAllData(allData) {
      this.$set(this.allData[0], 'acDeclarationConfigParam', JSON.parse(JSON.stringify(allData || [])))
    },
    getgradeRanglist() {
      getgradeRanglist().then((res) => {
        if (res.code === 200) {
          this.gradeRangList = res.data
        }
      })
    },
    getMemberAuthEnum() {
      getRegistration().then((res) => {
        if (res.code === 200) {
          this.registerList = res.data
        }
      })
    },
    sureSku() {
      this.$set(this.dialogList[this.selIndex], 'selSkuList', this.selSkuList)
      this.$set(
        this.dialogList[this.selIndex],
        'selSkuNameList',
        this.selSkuNameList
      )
      this.ggVisible = false
    },
    sureProduct() {
      if (this.selectData.length === 0) {
        this.$message({
          message: '请选择产品',
          type: 'warning'
        })
        return false
      } else {
        this.allData.forEach((item) => {
          item.acDeclarationConfigParam[this.showCndex].acDeclarationProductParamList[
            this.showIndex
          ].pkProduct = this.selectData.pkId

          item.acDeclarationConfigParam[this.showCndex].acDeclarationProductParamList[
            this.showIndex
          ].productName = this.selectData.productName

          item.acDeclarationConfigParam[this.showCndex].acDeclarationProductParamList[
            this.showIndex
          ].specsName = this.selectData.selSkuNameList

          item.acDeclarationConfigParam[this.showCndex].acDeclarationProductParamList[
            this.showIndex
          ].specsNameId = this.selectData.selSkuList

          item.acDeclarationConfigParam[this.showCndex].acDeclarationProductParamList[
            this.showIndex
          ].quantity = this.selectData.quantity
          
        })

        // this.dialogVisible = false
        this.handleClose()
        this.$forceUpdate()
      }
    },
    batchHandle() {
      this.allData.forEach((item) => {
        item.acDeclarationConfigParam.forEach((ctem) => {
          ctem.acDeclarationProductParamList.forEach((stem) => {
            stem.quantity = this.batchReset.quantity
          })
        })
      })
    },
    getAllData() {
      return this.allData[0].acDeclarationConfigParam
    },
    reset() {
      this.batchReset = {}
    },
    getCheckBox() {
      const arr1 = []
      const arr2 = []
      this.skuList.forEach((item) => {
        item.specsList.forEach((ctem) => {
          if (ctem.pkId == item.pkProductSku) {
            arr1.push(ctem.pkId)
            arr2.push(ctem.specsName)
          }
        })
      })
      this.selSkuList = arr1.join(',')
      this.selSkuNameList = arr2.join(',')
    },
    handleClose() {
      this.selectData = []
      this.dialogVisible = false
    },
    handleCloseGg() {
      this.ggVisible = false
    },
    getProduct(cndex, index) {
      this.showCndex = cndex
      this.showIndex = index
      this.getDataList()
      this.dialogVisible = true
    },
    addProduct(cndex, sndex) {
      this.allData.forEach((item) => {
        item.acDeclarationConfigParam[cndex].acDeclarationProductParamList.push({
          pkProduct: '',
          productName: '',
          specsName: '',
          specsNameId: '',
          quantity: ''
        })
      })
    },
    reduceProduct(cndex, sndex) {
      this.allData.forEach((item) => {
        if (this.isArea == item.orderType) {
          item.acDeclarationConfigParam[cndex].acDeclarationProductParamList.splice(sndex, 1)
        }
      })
    },
    addNewGoods() {
      this.allData.forEach((item) => {
        item.acDeclarationConfigParam.push({
          registerAuthority: '',
          specifyLevel: '',
          acDeclarationProductParamList: [
            {
              pkProduct: '',
              productName: '',
              specsName: '',
              specsNameId: '',
              quantity: ''
            }
          ]
        })
      })
    },
    reduceRow(index) {
      this.allData.forEach((item) => {
        item.acDeclarationConfigParam.splice(index, 1)
      })
    },
    selSku(pkId, index) {
      this.selIndex = index
      api
        .getProductSpecs({
          pkProduct: pkId
        })
        .then((res) => {
          const arr1 = []
          const arr2 = []
          res.data.forEach((item) => {
            item.pkProductSku = item.specsList[0].pkId
            arr1.push(item.specsList[0].pkId)
            arr2.push(item.specsList[0].specsName)
          })
          this.selSkuList = arr1.join(',')
          this.selSkuNameList = arr2.join(',')

          this.skuList = res.data
          this.ggVisible = true
        })
    },
    getDataList() {
      api
        .getProductAll(Object.assign({ isPutOn: 0 }, this.queryParams, this.select, { isExistSpecs: 1 }))
        .then((res) => {
          res.rows.forEach((item) => {
            item.quantity = 1
          })
          this.dialogList = res.rows
          this.total = res.total
        })
    },
    onSelectAll() {
      this.$refs.multipleTable.clearSelection()
    },
    selected(selection, row) {
      // 清除 所有勾选项
      this.$refs.multipleTable.clearSelection()
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      console.log(selection, row)
      if (selection.length == 0) return
      this.$refs.multipleTable.toggleRowSelection(row, true)
      this.selectData = row
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    }
  }
}
</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__icon{
  line-height: 33px;
}
::v-deep .el-button{
  margin-top: 0;
}
</style>
