<template>
  <div class="" style="background: #f9f9f9">
<!--    <topBar-->
<!--      v-if="topList.length > 0"-->
<!--      style="margin: 20px 0"-->
<!--      :top-list="topList"-->
<!--      :moren="moren"-->
<!--    />-->
    <div class="main">
      <div class="tit">{{ '规则配置' }}</div>
      <div class="xian"></div>
      <div class="table">
        <!-- 批量操作 -->
        <table>
          <tr>
            <th
              v-if="addFlag"
              colspan="5"
              class="tableLeft"
            >
              <el-button
                type="primary"
                size="mini"
                @click="addNewGoods"
                :disabled="lookOver"
              >{{'添加'}}
              </el-button>
            </th>
            <th
              colspan="7"
              style="padding-bottom:0"
            >
              <div class="tableFlex">
                <div class="tableFlex_i">
                  <!-- <el-input placeholder="赠送产品"
                              @focus="getProduct('','')"
                              v-model='plcz.productName'></el-input> -->
                </div>
                <div class="tableFlex_i">
                  <!-- <el-input placeholder="产品规格"
                              disabled
                              v-model='plcz.specsName'></el-input> -->
                </div>

                <div class="tableAdd" />
              </div>
            </th>
          </tr>
        </table>
        <table

          class="table_b"
        >
          <tr style="border-top:0">
            <td colspan="4">{{'活动图片'}}</td>
            <td colspan="4">{{'活动名称'}}</td>
            <td colspan="4">{{'真实奖衔'}}</td>
            <td colspan="4">{{ '价格' }}(¥)</td>
            <td colspan="4">{{ '数量' }}</td>

          </tr>
          <tr
            v-for="(ctem,cndex) in allData"
          >
            <td colspan="4" >
              <div>
                <imageUpload v-model="ctem.cover" />
              </div>
            </td>
            <td colspan="4">
              <el-input v-model="ctem.name" />
            </td>
            <td colspan="4">
              <el-select
                v-model="ctem.pkAwards"
                clearable
              >
                <el-option
                  v-for="item in awardsList"
                  :key="item.pkId"
                  :label="item.awardsName"
                  :value="item.pkId"
                />
              </el-select>
            </td>
            <td colspan="4">
              <el-input v-model="ctem.price" />
            </td>
            <td colspan="4">
              <el-input v-model="ctem.quantity" />
            </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> -->
      <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="'请输入'"
                  @keyup.enter.native="getDataList"
                  prefix-icon="el-icon-search"></el-input>
                </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>
            <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>
    <div class="footer">
      <div style="margin: 0 auto">
        <el-button
          class="thebtn"
          style="background: #F9F9F9;border: none "
          @click="cancelCz"
        > {{ '取消' }}</el-button>
        <el-button
          type="primary"
          class="thebtn"
          style="margin-left:20px"
          @click="saveDate"
        > {{ '确认' }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/giftGoods.js'
import * as apis from '@/api/product.js'
import * as api_s from '@/api/financial.js'
import topBar from '@/components/topBar'
import ImageUpload from '@/components/ImageUpload'
import { getMemberName } from '@/api/financial'
import { getQueryString } from '@/utils'
import { pickDetail } from '@/api/manage'
import {getAwardsListChiose} from "@/api/level";
import {getToken} from "@/utils/auth";
export default {
  components: {
    topBar,
    ImageUpload
  },
  data() {
    return {
      showImg: true, // 默认展示
      noneUploadImg: false, //
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/system/upload', // 上传的图片服务器地址
      headers: {
        Authorization: getToken(),
      },
      dialogVisible: false,
      ggVisible: false,
      disableds: false,
      queryParams: {
        pageNum: 1,
        pageSize: 50
      },
      total: 0,
      moren: 'RechargeCardList',
      topList: [
        {
          name: '充值提货卡',
          path: 'RechargeCardList'
        }
      ],
      lookOver:false,
      detailList: [], // 商品数据
      allData: [], // 全部数据
      areaList: [], // 全部专区
      allGoods: [], // 全部商品
      isArea: '',
      plcz: {},
      select: {}, // 产品筛选
      dialogList: [], // 产品数组
      selectData: [], // 选中
      skuList: [], // 规格数组
      selSkuList: '',
      selSkuNameList: '',
      selIndex: '',
      showCndex: '',
      showIndex: '',
      pageData: {},
      // 邮费模板
      postMoneyList1: [],
      postMoneyList2: [],
      postMoneyList3: [],
      flags: 0,
      addFlag: true,
      // 海陆空
      transportTypeList: [],
      awardsList: [],
      postList: [
        {
          text: '包邮',
          val: 0
        },
        {
          text: '不包邮',
          val: 1
        }
      ]
    }
  },
  mounted() {
    // if (
    //   this.$route.query.type == 3
    // ) {
    //   this.lookOver = true;
    // } else {
    //   this.lookOver = false;
    // }
    // const geturl = window.location.href
    // const getqyinfo = geturl.split('?')[1]
    // const getqys = new URLSearchParams('?' + getqyinfo)
    // const type = getqys.get('type')
    // const pkId = getqys.get('pkId')
    this.getPostageList()
    // if (pkId) {
    //   this.getThDetails(pkId)
    //   // this.disableds = true
    //   // this.addFlag = false
    //   // this.isArea = 1
    // }
  },
  methods: {
    getPage(allData) {
      console.log('%c [ allData ]-355', 'font-size:13px; background:#94c69f; color:#d8ffe3;', allData)
      if (allData != '') {
        this.allData = allData
      }
    },
    // 获取提货卡详情
    getThDetails(pkId) {
      console.error(0)
    },
    // 根据会员编号查询会员姓名
    checkName(data) {
      api_s.getMemberName({ memberCode: data.memberCode }).then((res) => {
        data.memberName = res.memberName
        this.$forceUpdate()
      })
    },
    changeGroup(ctem) {
      if (ctem.pkPostage) {
        ctem.pkPostage = ''
      }
    },
    getPostageList() {
      getAwardsListChiose().then((res) => {
        this.awardsList = res.rows
      })
      // 陆运
      apis.getPostageList({ tranType: 1 }).then((res) => {
        this.postMoneyList1 = res.data
      })
      // 空运
      apis.getPostageList({ tranType: 2 }).then((res) => {
        this.postMoneyList2 = res.data
      })
      // 海运
      apis.getPostageList({ tranType: 3 }).then((res) => {
        this.postMoneyList3 = res.data
      })
    },
    saveDate() {
      console.error(this.allData)
    },
    // getPage(allData) {
    //   if(allData){
    //     console.error(allData.treeRuleConfigList)
    //     this.allData = allData.treeRuleConfigList
    //   }
    //   console.error(this.allData)
    //   this.$emit('fatherMethod',this.allData);
    // },
    cancelCz() {
      this.$router.push({
        path: 'RechargeCardList'
      })
    },
    getData() {
      api.specialArea().then((res) => {
        this.areaList = res.data
        // this.allData
        const arr = []
        this.areaList.forEach((item) => {
          arr.push({
            orderType: item.value,
            consumeRuleConfigList: []
          })
        })
        this.allData = arr
        this.isArea = res.data[0].value
      })
      api.waresList().then((res) => {
        this.allGoods = 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) => {
          if (this.isArea == item.orderType) {
            item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
              this.showIndex
              ].pkProduct = this.selectData.pkId

            item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
              this.showIndex
              ].productName = this.selectData.productName

            item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
              this.showIndex
              ].specsName = this.selectData.selSkuNameList

            item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
              this.showIndex
              ].specsNameId = this.selectData.selSkuList

            item.consumeRuleConfigList[this.showCndex].waresGiftConfigList[
              this.showIndex
              ].quantity = this.selectData.quantity
          }
        })

        // this.dialogVisible = false
        this.handleClose()
        this.$forceUpdate()
      }
    },
    toPlcz() {
      this.allData.forEach((item) => {
        if (this.isArea == item.orderType) {
          item.consumeRuleConfigList.forEach((ctem) => {
            ctem.waresGiftConfigList.forEach((stem) => {
              stem.quantity = this.plcz.quantity
            })
          })
        }
      })
    },
    reset() {
      this.plcz = {}
    },
    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(',')
    },
    setArea(val) {
      this.isArea = val
    },
    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) => {
        if (this.isArea == item.orderType) {
          item.consumeRuleConfigList[cndex].waresGiftConfigList.push({
            pkProduct: '',
            productName: '',
            specsName: '',
            specsNameId: '',
            quantity: ''
          })
        }
      })
    },
    reduceProduct(cndex, sndex) {
      this.allData.forEach((item) => {
        if (this.isArea == item.orderType) {
          item.consumeRuleConfigList[cndex].waresGiftConfigList.splice(sndex, 1)
        }
      })
    },
    // 图片上传成功后的回调
    handlePictureSuccess(res, file) {
      this.form.cover = res.data.url
    },
    // 图片上传删除
    handleRemove(file, fileList) {
      this.form.cover = ''
      this.noneUploadImg = fileList.length > 0
    },
    cancel() {
      this.$router.push({
        name: 'addMenuRole'
      })
    },
    addNewGoods() {
      this.allData.push({
        cover: '',
        name: '',
        pkAwards: '',
        price: '',
        quantity: '',
      })
      // this.allData.forEach((item) => {
      //   console.error(item)
      //   item.consumeRuleConfigList.push({
      //     cover: '',
      //     name: '',
      //     pkAwards: '',
      //     price: '',
      //     quantity: '',
      //   })
      // })
      console.error(this.allData)
      // this.allData
      console.log(
        '%c [ this.allData ]-439',
        'font-size:13px; background:#4e52da; color:#9296ff;',
        this.allData
      )
      this.$emit('fatherMethod',this.allData);

    },
    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
        })
    },
    submit() {
      const obj = Object.assign({}, this.pageData, {
        waresConfigParam: this.allData
      })
      console.log(
        '%c [ obj ]-445',
        'font-size:13px; background:#6f1b1a; color:#b35f5e;',
        obj
      )
      api.activitySave(obj).then((res) => {
        if (res.code == 200) {
          // this.$router.push({
          //   path: '/announcement/fbZxqc',
          //   query: {
          //     data: JSON.stringify(res.data),
          //   },
          // })
        }
      })
    },
    onSelectAll() {
      this.$refs.multipleTable.clearSelection()
    },
    selected(selection, row) {
      // 清除 所有勾选项
      this.$refs.multipleTable.clearSelection()
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return
      this.$refs.multipleTable.toggleRowSelection(row, true)
      this.selectData = row
    },
    // 表格的选中 可以获得当前选中的数据
    selectionChange(val) {
      // 将选中的数据存储起来
      this.selectData = val
    },
    uploadImgChange(file, fileList) {
      this.noneUploadImg = fileList.length > 0
      this.$refs.form.clearValidate('cover')
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row'
      } else if (rowIndex % 2 == 0) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-upload--picture-card i{
  color: #c8161d;
}
::v-deep .el-upload--picture-card {
  min-width: 50px!important;
  min-height: 50px!important;
}
::v-deep .el-image{
  width: 50px!important;
  height: 50px!important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.baoyou{
  text-align: center;
}
::v-deep .el-radio.is-bordered+.el-radio.is-bordered{
  margin-left: 0;
}
::v-deep .el-radio.is-bordered{
  padding: 0;
  margin: 10px 0;
  width: 100px;
  text-align: center;
  line-height: 34px;
}
::v-deep .el-date-editor.el-input{
  width: 100%;
}
.color-style{
  width: 5px;
  height: 19px;
  background: #c8161d;
  display: block;
  margin-top: 3px;
}
.app-main{
  background: #f9f9f9!important;
  padding: 0 20px;
}
.content{
  background: #fff;
  padding: 0 30px;
  height: 1100px;
  box-shadow: 0px 2px 20px 0px rgba(238,238,238,0.5);
  border-radius: 8px 8px 8px 8px;

}
::v-deep th{
  border:none !important;
}
// .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 {
  overflow: hidden;
  background: #ffffff;
  border-radius: 8px;
  //margin: 0 20px;
  height: calc(100vh - 230px);
  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;
  position: absolute;
  bottom: 0px;
  width: 100%;
  .thebtn1 {
    background: #3181e5;
    color: #ffffff;
    padding: 9px 45px;
  }
  .thebtn2 {
    background: #cccccc;
    color: #ffffff;
    padding: 9px 45px;
  }
}
.thebtn{
  width: 137px;
  height: 38px;
}
.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 40px 100px 40px;
  margin-top: 1px;
  margin-top: 30px;
  max-height: 630px;
  overflow-y: auto;
  width: 800px;
}

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;
  border: 0!important;
}
.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>
