<template>
  <el-tabs v-loading="tabsLoading" class="detail-tabs"  type="card" v-model="activeName">
    <el-tab-pane label="返利活动" name="1">
      <el-row>
        <h3 style="margin-top: 0;"><span></span>返利活动信息</h3>
        <el-form
          :model="addForm"
          ref="addForm"
          size="small"
          :inline="true"
          :disabled="true"
          label-width="170px"
        >
        <el-row>
          <el-col :span="24">
            <el-form-item label="返利类型:" prop="rebateTypeCode">
              <el-radio-group v-model="addForm.rebateTypeCode">
                <el-radio label="JLF">激励返</el-radio>
                <el-radio label="THGDF">提货固定返</el-radio>
                <el-radio label="THDLF">提货达量返</el-radio>
                <el-radio label="XSDLF">销售达量返</el-radio>
                <el-radio label="THJJTF">提货价阶梯返</el-radio>
                <el-radio label="ZDCMF">指定串码返利</el-radio>
              </el-radio-group>
                <div class="color-r" v-show="addForm.rebateTypeCode=='JLF'">品牌方给出的临时返利激励政策，如激活返、礼品激励等</div>
                <div class="color-r" v-show="addForm.rebateTypeCode=='THGDF'">品牌方提供的长期提货固定返点</div>
                <div class="color-r" v-show="addForm.rebateTypeCode=='THDLF'">提货达到一定数量给与的返利，可以设置多档</div>
                <div class="color-r" v-show="addForm.rebateTypeCode=='XSDLF'">销售达到一定数量给与的返利，可以设置多档</div>
                <div class="color-r" v-show="addForm.rebateTypeCode=='THJJTF'">按指定价提货给与的返利，如小米的闪降，可以设置多档</div>
                <div class="color-r" v-show="addForm.rebateTypeCode=='ZDCMF'">指定范围的串码才能享受的返利，如价保等</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="返利活动名称:" 
              :rules="[{ required: true, message: '请输入返利活动名称', trigger: 'change' }]" 
              prop="activitieName">
              <el-input
                v-model="addForm.activitieName"
                max-Length="50"
                style="width: 300px;"
                placeholder="请输入返利活动名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="返利活动编码:"
              prop="activitieName">{{ addForm.activitieCode }}
            </el-form-item>
          </el-col>
        </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="活动状态:" 
                prop="status"> 
                <span v-show="addForm.status==0">待提交</span>
                <span v-show="addForm.status==1">待审批</span>
                <span v-show="addForm.status==2">审批打回</span>
                <span v-show="addForm.status==3">启用</span>
                <span v-show="addForm.status==4">下线</span>
                <span v-show="addForm.status==5">挂起</span>
                <span v-show="addForm.status==6">变更待审批</span>
                <span v-show="addForm.status==7">变更审批打回</span>
                <span v-show="addForm.status==8">变更待提交</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="返利发放状态:" 
                prop="status">
                <span v-show="addForm.rebateSendStatus==0">未发放返利</span>
                <span v-show="addForm.rebateSendStatus==1">发放返利中</span>
                <span v-show="addForm.rebateSendStatus==2">已完成返利发放</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="返利活动日期:" 
              :rules="[{ required: true, message: '请选择返利活动日期', trigger: 'change' }]" 
                prop="dateRange">
                <el-date-picker
                  v-model="addForm.dateRange"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  style="width: 225px;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="品牌:" 
              :rules="[{ required: true, message: '请选择品牌', trigger: 'change' }]" 
                prop="brandName">
                <el-select
                  v-model="addForm.brandName"
                  filterable
                  placeholder="请选择品牌"
                  clearable
                  :disabled="true"
                >
                  <el-option
                    v-for="(dict, index) in brandNameList"
                    :key="index"
                    :label="dict.brandName"
                    :value="dict.brandName"
                  /> 
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="享受返利政策的供货商:" 
                prop="suppliers">
                <el-select
                  v-model="addForm.suppliers"
                  filterable
                  placeholder="请选择供货商"
                  :reserve-keyword="true"
                  clearable
                  multiple
                >
                  <el-option
                    v-for="(dict, index) in suppliersList"
                    :key="index"
                    :label="dict.supplierName"
                    :value="dict.supplierCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="享受返利政策的渠道:" 
                prop="channels">
                <el-select
                  v-model="addForm.channels"
                  filterable
                  :reserve-keyword="true"
                  placeholder="请选择渠道"
                  clearable
                  multiple
                >
                  <el-option
                    v-for="(dict, index) in channelList"
                    :key="index"
                    :label="dict.channelName"
                    :value="dict.channelCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="返利核算销售业绩比例:" 
              :rules="[{ required: true, message: '请输入返利核算销售业绩比例', trigger: 'change' }]" 
                prop="saleRabe">
                <el-input
                  v-model="addForm.saleRabe"
                  placeholder="请输入返利核算销售业绩比例"
                  clearable
                  :min="0.0001"
                  :max="100"
                  type="number"
                  style="width: 190px;"
                />%
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="返利核算销售业绩时点:" 
                prop="salePoint">
                <el-radio :disabled="true" v-model="addForm.salePoint" label="销售出库">销售出库</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="返利金额计算方式:" 
                prop="calcType">
                <el-radio :disabled="true" v-model="addForm.calcType" label="固定金额">固定金额</el-radio>
                <el-radio :disabled="true" v-model="addForm.calcType" label="采购价百分比">采购价百分比</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="发放返利条件:" 
                prop="sendFilter">
                <el-radio :disabled="true" v-model="addForm.sendFilter" label="每台">每台</el-radio>
                <el-radio :disabled="true" v-model="addForm.sendFilter" label="达量">达量</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="设置多档阶梯返利:" 
                prop="isSetStage">
                <el-radio :disabled="true" v-model="addForm.isSetStage" :label="1">是</el-radio>
                <el-radio :disabled="true" v-model="addForm.isSetStage" :label="0">否</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="退货二次销售是否返利:" 
                prop="refundIsCacl">
                <el-radio v-model="addForm.refundIsCacl" :label="1">是</el-radio>
                <el-radio v-model="addForm.refundIsCacl" :label="0">否</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="统计提货入库返利额:" 
                prop="isCalcEstimateAmount">
                <el-radio :disabled="true" v-model="addForm.isCalcEstimateAmount" :label="1">是</el-radio>
                <el-radio :disabled="true" v-model="addForm.isCalcEstimateAmount" :label="0">否</el-radio>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="多档阶梯依据:" 
                v-if="addForm.rebateTypeCode=='THDLF'||addForm.rebateTypeCode=='XSDLF'||addForm.rebateTypeCode=='THJJTF'"
                prop="stageType">
                <el-radio :disabled="true" v-model="addForm.stageType" label="提货量">提货量</el-radio>
                <el-radio :disabled="true" v-model="addForm.stageType" label="销量">销量</el-radio>
                <el-radio :disabled="true" v-model="addForm.stageType" label="提货价">提货价</el-radio>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <h3><span></span>返利商品</h3>
          <el-row style="margin-bottom: 8px;" v-show="addForm.rebateTypeCode!='ZDCMF'">
            <el-popover
              placement="bottom"
              width="600"
              v-model="goodsVisible">
              <el-input
                v-model="goodsText"
                type="textarea"
                :rows="8"
                placeholder="多个商品编码使用逗号隔开"
                clearable
              />
              <div style="text-align: right; margin-top: 4px">
                <el-button size="mini" type="text" @click="goodsVisible = false">取消</el-button>
                <!-- <el-button type="primary"  size="mini" @click="saveGoods">确定</el-button> -->
              </div>
              <el-button :disabled="true" slot="reference">添加商品</el-button>
            </el-popover>
            <el-button style="margin-left: 8px;" :disabled="true" type="primary" @click="upload.open = true">导入商品&返利</el-button>
          </el-row>

          <el-table ref="goodsTable" border :data="goodsTableList" v-show="addForm.rebateTypeCode!='ZDCMF'">
            <el-table-column label="商品" align="left" prop="sku" min-width="140">
                <template slot-scope="scope">
                  <span>{{ scope.row.skuName }}/{{ scope.row.skuNo }}</span>
                </template>
              </el-table-column>
              <el-table-column label="返利金额" min-width="180" align="left" prop="skuName">
                <template slot="header" slot-scope="scope">
                  <div v-show="addForm.rebateTypeCode=='JLF'">
                    每台返  <el-input
                      v-model="headerValue"
                      size="mini"
                      :min="0"
                      type="number"
                      placeholder=""
                      style="width: 110px;"
                      :disabled="true"
                      clearable
                    />元  
                    <el-button size="mini" type="text" :disabled="true" @click="priceCopy(1)">应用</el-button>
                  </div>

                  <div v-show="addForm.rebateTypeCode=='THGDF'">
                    每台返  <el-input
                      v-model="headerValue2"
                      size="mini"
                      :min="0"
                      type="number"
                      placeholder=""
                      style="width: 110px;"
                      :disabled="true"
                      clearable
                    /> <span v-if="addForm.calcType=='固定金额'">元</span><span v-else>%</span>
                    <el-button size="mini" type="text" :disabled="true" @click="priceCopy(1)">应用</el-button>
                  </div>

                  <div v-show="addForm.rebateTypeCode=='THDLF'">
                    <div class="table-box2" v-for="(item,index) in stageInfos" :key="index">
                      提货量达 <el-input
                        v-model="item.stage"
                        :min="0"
                        type="number"
                        placeholder=""
                        style="width: 100px;"
                        size="mini"
                        :disabled="true"
                        clearable
                      />  每台返 <el-input
                        v-model="item.price"
                        :min="0"
                        type="number"
                        placeholder=""
                        style="width: 100px;"
                        size="mini"
                        :disabled="true"
                        clearable
                      /> <span v-if="addForm.calcType=='固定金额'">元</span><span v-else>%</span>
                      <el-button type="text" :disabled="true" v-show="index!=0" size="mini"  @click="removeStage(stageInfos,index)">删除阶梯</el-button>
                    </div>
                    
                    <el-button icon="el-icon-plus" size="mini" type="text" @click="addStage(stageInfos,1)">新增阶梯</el-button>
                    <el-button size="mini" type="text" :disabled="true" @click="priceCopy(2)">应用</el-button>
                  </div>

                  <div v-show="addForm.rebateTypeCode=='XSDLF'">
                    <div class="table-box2" v-for="(item,index) in stageInfos" :key="index">
                      销量达 <el-input
                        v-model="item.stage"
                        :min="0"
                        type="number"
                        placeholder=""
                        style="width: 100px;"
                        size="mini"
                        :disabled="true"
                        clearable
                      />  每台返 <el-input
                        v-model="item.price"
                        :min="0"
                        type="number"
                        placeholder=""
                        style="width: 100px;"
                        :disabled="true"
                        size="mini"
                        clearable
                      /> 元
                      <el-button type="text" :disabled="true" v-show="index!=0" size="mini"  @click="removeStage(stageInfos,index)">删除阶梯</el-button>
                    </div>
                    
                    <el-button icon="el-icon-plus" :disabled="true" size="mini" type="text" @click="addStage(stageInfos,1)">新增阶梯</el-button>
                    <el-button size="mini" :disabled="true" type="text" @click="priceCopy(2)">应用</el-button>
                  </div>

                  <div v-show="addForm.rebateTypeCode=='THJJTF'">
                    <div class="table-box2" v-for="(item,index) in stageInfos" :key="index">
                      采购价 <el-input
                        v-model="item.stage"
                        :min="0"
                        type="number"
                        placeholder=""
                        style="width: 100px;"
                        size="mini"
                        :disabled="true"
                        clearable
                      />  每台返 <el-input
                        v-model="item.price"
                        :min="0"
                        type="number"
                        placeholder=""
                        style="width: 100px;"
                        size="mini"
                        :disabled="true"
                        clearable
                      /> 元
                      <el-button type="text" :disabled="true" v-show="index!=0" size="mini"  @click="removeStage(stageInfos,index)">删除阶梯</el-button>
                    </div>
                    
                    <el-button icon="el-icon-plus" :disabled="true" size="mini" type="text" @click="addStage(stageInfos,1)">新增阶梯</el-button>
                    <el-button size="mini" :disabled="true" type="text" @click="priceCopy(2)">应用</el-button>
                  </div>
                
                </template>
                <template slot-scope="scope">
                  <div v-show="addForm.rebateTypeCode=='JLF'">
                    每台返  <el-input
                      v-model="scope.row.price"
                      :min="0"
                      size="mini"
                      type="number"
                      placeholder=""
                      style="width: 110px;"
                      :disabled="true"
                      clearable
                    />元
                  </div>
                  <div v-show="addForm.rebateTypeCode=='THGDF'">
                    每台返 <el-input
                      v-model="scope.row.ratePrice"
                      :min="0"
                      type="number"
                      placeholder=""
                      style="width: 110px;"
                      size="mini"
                      :disabled="true"
                      clearable
                      v-if="addForm.calcType!='固定金额'"
                    /><el-input
                      v-model="scope.row.price"
                      :min="0"
                      type="number"
                      placeholder=""
                      style="width: 110px;"
                      size="mini"
                      :disabled="true"
                      clearable
                      v-else
                    /> <span v-if="addForm.calcType=='固定金额'">元</span><span v-else>%</span>
                  </div>
                  <div v-show="addForm.rebateTypeCode=='THDLF'">
                    <div class="table-box2" v-for="(item,index) in scope.row.stageInfos" :key="index">
                      提货量达 <el-input
                        v-model="item.stage"
                        :min="0"
                        type="number"
                        placeholder=""
                        style="width: 100px;"
                        size="mini"
                        :disabled="true"
                        clearable
                      />  每台返 <el-input
                        v-model="item.ratePrice"
                        :min="0"
                        type="number"
                        placeholder=""
                        style="width: 110px;"
                        size="mini"
                        :disabled="true"
                        clearable
                        v-if="addForm.calcType!='固定金额'"
                      /><el-input
                        v-model="item.price"
                        :min="0"
                        type="number"
                        placeholder=""
                        style="width: 110px;"
                        size="mini"
                        :disabled="true"
                        clearable
                        v-else
                      /> <span v-if="addForm.calcType=='固定金额'">元</span><span v-else>%</span>
                      <el-button type="text" :disabled="true" v-show="index!=0" size="mini"  @click="removeStage(scope.row.stageInfos,index)">删除阶梯</el-button>
                    </div>
                    
                    <el-button icon="el-icon-plus" :disabled="true" size="mini" type="text" @click="addStage(scope.row.stageInfos)">新增阶梯</el-button>
                  </div>
                  <div v-show="addForm.rebateTypeCode=='XSDLF'">
                    <div class="table-box2" v-for="(item,index) in scope.row.stageInfos" :key="index">
                      销量达 <el-input
                        v-model="item.stage"
                        :min="0"
                        type="number"
                        placeholder=""
                        style="width: 100px;"
                        size="mini"
                        :disabled="true"
                        clearable
                      />  每台返 <el-input
                        v-model="item.price"
                        :min="0"
                        type="number"
                        placeholder=""
                        style="width: 100px;"
                        size="mini"
                        :disabled="true"
                        clearable
                      /> 元
                      <el-button type="text" :disabled="true" v-show="index!=0" size="mini"  @click="removeStage(scope.row.stageInfos,index)">删除阶梯</el-button>
                    </div>
                    
                    <el-button icon="el-icon-plus" size="mini" type="text" @click="addStage(scope.row.stageInfos)">新增阶梯</el-button>
                  </div>
                  <div v-show="addForm.rebateTypeCode=='THJJTF'">
                    <div class="table-box2" v-for="(item,index) in scope.row.stageInfos" :key="index">
                    采购价达 <el-input
                      v-model="item.stage"
                      :min="0"
                      type="number"
                      placeholder=""
                      style="width: 100px;"
                      size="mini"
                      :disabled="true"
                      clearable
                    />  每台返 <el-input
                      v-model="item.price"
                      :min="0"
                      type="number"
                      placeholder=""
                      style="width: 100px;"
                      size="mini"
                      :disabled="true"
                      clearable
                    /> 元
                    <el-button type="text" :disabled="true" v-show="index!=0" size="mini"  @click="removeStage(scope.row.stageInfos,index)">删除阶梯</el-button>
                    </div>
                    
                    <el-button icon="el-icon-plus" :disabled="true" size="mini" type="text" @click="addStage(scope.row.stageInfos)">新增阶梯</el-button>
                  </div>
                  <!-- <el-button style="float: right;" size="mini" type="text" @click="deleteGoods(scope.$index)">删除此商品</el-button> -->
                </template>
              </el-table-column>
          </el-table>

          <div v-show="addForm.rebateTypeCode=='ZDCMF'" style="margin: 8px 0 36px 0;">
            输入串码列表：<br /><el-input
              v-model="addForm.skuSn"
              type="textarea"
              :rows="8"
              placeholder="最多支持2000个串码，支持逗号和换行分隔"
              style="width: 600px;"
              :disabled="true"
              clearable
            /><br />
            返利金额<br />
            <el-input
              v-model="addForm.skuSnPrice"
              type="text"
              placeholder="每台返，2位小数"
              style="width: 200px;"
              :disabled="true"
              clearable
            />
          </div>
          
        <h3><span></span>官方返利资料</h3>
        <div class="color-r">上传官方提供的返利政策图片或文件（上限最多5个文件，最大20M）</div>
        <el-upload
          class="upload-demo"
          :action="fileAction"
          :on-preview="handlePreview"
          :before-remove="beforeRemove"
          :disabled="true"
          multiple
          :limit="5"
          :file-list="fileList">
          <el-button size="small" type="primary" :disabled="true">点击上传</el-button>
      </el-upload>
      </el-row>
    
      
    </el-tab-pane> 
    <el-tab-pane label="日志" name="2">
      <el-table
        ref="logTable"
        border
        :data="historyLogTableList"
      >
        <el-table-column label="操作步骤" min-width="140" align="left" prop="logType" />
        <el-table-column label="操作描述" min-width="140" align="left" prop="logMsg">
          <template slot-scope="scope">
            <span v-html="scope.row.logMsg"></span>
          </template>
        </el-table-column>
        <el-table-column label="操作人" min-width="100" align="left" prop="createBy" />
        <el-table-column label="操作时间" min-width="90" align="left" prop="createTime" />
      </el-table>
    </el-tab-pane> 
    
  </el-tabs> 
</template>

<script>
import { activitieDetail,activitieLogs,activitieSuppliers } from "@/api/activitie/index";
import {
  getChannelList,
} from "@/api/bizMonitor/index";
import {
  getBrandNameList,
} from "@/api/goods/index";
export default {
  data() {
    return {
      activeName: '1',
      fileAction: process.env.VUE_APP_BASE_API_NEW + '/activitie/upload/file',
      historyLogTableList: [],
      stageInfos: [{
        "price": 0,
        "ratePrice": 0,
        "stage": 1
      },{
        "price": 0,
        "ratePrice": 0,
        "stage": 1
      }],
      addForm:  {
        "activitieCode": "",
        "activitieName": "",
        "brandCode": "",
        "brandName": "",
        "calcType": "固定金额",
        "endTime": "",
        "isSetStage": 0,
        "rebateSendStatus": "",
        "rebateTypeCode": "JLF",
        refundIsCacl: 0,
        "salePoint": "销售出库",
        "saleRabe": 100,
        "sendFilter": "每台",
        "skuSn": "",
        "stageType": "提货量",
        "startTime": "",
        "status": 0,
        dateRange: [],
        channels: [],
        suppliers: [],
        isCalcEstimateAmount: 0
      },
      goodsTableList: [],
      fileList: [],
      brandNameList: [],
      suppliersList: [],
      channelList: [],
      headerValue: '',
      headerValue2: '',
      goodsText: '',
      goodsVisible: false,
      tabsLoading: true
    }
  },

  mounted() {
    this.getLists();
    this.getDetail();
  },
  beforeDestroy() {},
  methods: {
    handlePreview(file) {
      window.open('https://newfirst.oss-cn-shanghai.aliyuncs.com/'+file.path);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`).then(res=>{
        console.log(3)
      });
    },
    getDetail(){
      if(!this.$route.query.activitieCode){
        return false;
      }
      activitieDetail({ activitieCode: this.$route.query.activitieCode }).then(res=>{
        this.addForm = Object.assign(this.addForm,JSON.parse(JSON.stringify(res.data))) ;
        this.addForm.dateRange = [this.addForm.startTime,this.addForm.endTime];
        this.annexs = res.data.annexs;
        this.goodsTableList = res.data.skuInfos;
        this.fileList = [];
        res.data.annexs.forEach(item=>{
          this.fileList.push({name:item.annexName,path:item.annexPath})
        });
        this.activeName = '1';

        this.$nextTick(()=>{
          this.tabsLoading = false;
        })
      });

      activitieLogs({activitieCode: this.$route.query.activitieCode}).then(res=>{
        this.historyLogTableList = res.data.activitieLogResDTOList;
      });
    },
    getLists() {
      getBrandNameList().then((res) => {
        this.brandNameList = res.data;
      });
      activitieSuppliers().then((res) => {
        this.suppliersList = res.data.supplierListResDTOS;
      });
      getChannelList().then((res) => {
        this.channelList = res.data || [];
      });
    },
  }
}
</script>

<style scoped lang="scss">
.detail-tabs{
  padding: 24px 16px 30px 24px;
  height: calc(100vh - 84px);
  overflow-y: scroll;
}

.color-r{
  color: #E6A23C;
}
.charts-box {
  height: 350px;
  margin-top: 30px;
}
.erpPrice > span {
  color: #409eff;
}
.iconEdit {
  cursor: pointer;
}
.app-container {
  padding-bottom: 60px;
}


.table-dp {
  display: flex;
  align-items: center;
  color: #999;
  span {
    color: #333;
  }
  .colorRed {
    color: red;
  }
}
.rate-span {
  margin-left: 5px;
  color: #999;
}
.dept-box {
  height: 40px;
  line-height: 40px;
  border-bottom: solid 1px #dfe6ec;
}

.el-tab-pane{
  .pagination-container{
    margin-bottom: 20px;
  }
}
.channel-box{
  margin: 5px 0;
  span{
    margin-right: 5px;
  }
}
.change-input{
  color: red;
  ::v-deep .el-input__inner{
    color: red;
  }
}
.up-png{
  width: 12px;
}
.colorG{
  color: #999;
}
.table-box2{
  margin: 5px;
}

h3{
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-top: 36px;
  span{
    display: block;
    width: 2px;
    height: 14px;
    background: #F56C6C;
    margin-right: 6px;
  }
}
</style>